Skip to content

Commit

Permalink
Add video capability (still buggy)
Browse files Browse the repository at this point in the history
  • Loading branch information
gilangcp committed Apr 2, 2012
1 parent 8669823 commit c286368
Show file tree
Hide file tree
Showing 9 changed files with 154 additions and 16 deletions.
111 changes: 111 additions & 0 deletions PxLoaderVideo.js
@@ -0,0 +1,111 @@
// @depends PxLoader.js

/**
* PxLoader plugin to load video elements
*/
function PxLoaderVideo(url, tags, priority) {
var self = this;
var loader = null;

try {
this.vid = new Video();
} catch(e) {
this.vid = document.createElement('video');
}

this.tags = tags;
this.priority = priority;

var onReadyStateChange = function () {
if (self.vid.readyState != 4) {
return;
}

removeEventHandlers();
loader.onLoad(self);
};

var onLoad = function() {
removeEventHandlers();
loader.onLoad(self);
};

var onError = function() {
removeEventHandlers();
loader.onError(self);
};

var removeEventHandlers = function() {
self.unbind('load', onLoad);
self.unbind('canplaythrough', onReadyStateChange);
self.unbind('error', onError);
};

this.start = function(pxLoader) {
// we need the loader ref so we can notify upon completion
loader = pxLoader;

// NOTE: Must add event listeners before the src is set. We
// also need to use the readystatechange because sometimes
// load doesn't fire when an video is in the cache.
self.bind('load', onLoad);
self.bind('canplaythrough', onReadyStateChange);
self.bind('error', onError);

self.vid.src = url;
};

// called by PxLoader to check status of video (fallback in case
// the event listeners are not triggered).
this.checkStatus = function() {
if (self.vid.readyState != 4) {
return;
}

removeEventHandlers();
loader.onLoad(self);
};

// called by PxLoader when it is no longer waiting
this.onTimeout = function() {
removeEventHandlers();
if (self.vid.readyState != 4) {
loader.onLoad(self);
} else {
loader.onTimeout(self);
}
};

// returns a name for the resource that can be used in logging
this.getName = function() {
return url;
};

// cross-browser event binding
this.bind = function(eventName, eventHandler) {
if (self.vid.addEventListener) {
self.vid.addEventListener(eventName, eventHandler, false);
} else if (self.vid.attachEvent) {
self.vid.attachEvent('on'+eventName, eventHandler);
}
};

// cross-browser event un-binding
this.unbind = function(eventName, eventHandler) {
if (self.vid.removeEventListener) {
self.vid.removeEventListener(eventName, eventHandler, false);
} else if (self.vid.detachEvent) {
self.vid.detachEvent('on'+eventName, eventHandler);
}
};

}

// add a convenience method to PxLoader for adding an image
PxLoader.prototype.addVideo = function(url, tags, priority) {
var videoLoader = new PxLoaderVideo(url, tags, priority);
this.add(videoLoader);

// return the vid element to the caller
return videoLoader.vid;
};
1 change: 1 addition & 0 deletions index.html
Expand Up @@ -7,6 +7,7 @@
<script type="text/JavaScript" src="PxLoader.js"></script>
<script type="text/JavaScript" src="PxLoaderImage.js"></script>
<script type="text/JavaScript" src="PxLoaderSound.js"></script>
<script type="text/JavaScript" src="PxLoaderVideo.js"></script>
<script type="text/javascript" src="easel.js"></script>
<script type="text/javascript" src="tween.js"></script>
<script type="text/javascript" src="Ease.js"></script>
Expand Down
7 changes: 4 additions & 3 deletions resource.js
Expand Up @@ -5,10 +5,11 @@ var resourceList = new Array;
resourceList.push({type :'img',url :'resource/image/chara/clara1.png',imageLabel :'charaClara1'});
resourceList.push({type :'img',url :'resource/image/chara/lily1.png',imageLabel :'charaLily1'});
resourceList.push({type :'snd',url :'resource/sound/ending.mp3', soundLabel : 'ending'});
resourceList.push({type :'snd',url : 'resource/sound/opening.mp3',soundLabel : 'menuBGM'});
resourceList.push({type :'snd',url :'resource/sound/opening.mp3',soundLabel : 'menuBGM'});
resourceList.push({type :'snd',url :'resource/sound/sad.mp3',soundLabel : 'sad'});
resourceList.push({type :'snd',url : 'resource/sound/normal.mp3',soundLabel : 'normal'});
resourceList.push({type :'snd',url : 'resource/sfx/click.wav',soundLabel : 'sfxClick'});
resourceList.push({type :'snd',url :'resource/sound/normal.mp3',soundLabel : 'normal'});
resourceList.push({type :'snd',url :'resource/sfx/click.wav',soundLabel : 'sfxClick'});
resourceList.push({type :'img',url :'resource/image/3.jpg' , imageLabel:'menu'});
resourceList.push({type :'img',url :'resource/image/4.jpg' , imageLabel:'settings'});
resourceList.push({type :'img',url :'resource/image/4.jpg' , imageLabel:'save'});
resourceList.push({type :'vid',url :'resource/video/wongit.webm',videoLabel:'wongIT'});
Binary file modified resource/image/Thumbs.db
Binary file not shown.
Binary file added resource/video/wongit.avi
Binary file not shown.
Binary file added resource/video/wongit.webm
Binary file not shown.
27 changes: 17 additions & 10 deletions resourceManager.js
Expand Up @@ -2,27 +2,34 @@ function ResourceManager(stage) {
var self = this;
this.loader;
this.stage = stage;
this.resource =new Array;
this.resource =new Array;

this.init = function(){
//setup resource loader
//setup resource loader
this.loader = new PxLoader();
this.resource =new Array;
this.loader.addProgressListener(this.resProgressListener);
this.loader.addCompletionListener(this.resCompleteListener);
this.loadResource();
this.loadResource();
}

this.loadResource = function(){
for(var i=0; i < resourceList.length; i++) {
if(resourceList[i].type == 'img'){
var pxImage = new PxLoaderImage(resourceList[i].url);
pxImage.label = resourceList[i].imageLabel;
this.loader.add(pxImage);
}
else if(resourceList[i].type == 'snd'){
switch (resourceList[i].type){
case 'img':
var pxImage = new PxLoaderImage(resourceList[i].url);
pxImage.label = resourceList[i].imageLabel;
this.loader.add(pxImage);
break;
case 'snd':
var pxSound = new PxLoaderSound(resourceList[i].soundLabel,resourceList[i].url);
this.loader.add(pxSound);
this.loader.add(pxSound);
break;
case 'vid':
var pxVideo = new PxLoaderVideo(resourceList[i].url);
pxVideo.label = resourceList[i].videoLabel;
this.loader.add(pxVideo);
break;
}
}
this.loader.start();
Expand Down
5 changes: 2 additions & 3 deletions script.js
Expand Up @@ -3,10 +3,9 @@ var script = new Array;
script.push({type:'playBGM',soundLabel: 'menuBGM'});
script.push({type:'changeBackground',imageLabel:'s1'});
script.push({type:'delay',ms:3000});
script.push({type:'changeBackground',imageLabel:'s2'});
script.push({type:'delay',ms:'3000'});
script.push({type:'initMenu'});
script.push({type:'playVideo',videoLabel:'wongIT'});

script.push({type:'initMenu'});
script.push({type:'addJumpLabel', jumpLabel:'startGame'});
script.push({type:'startGame'});
script.push({type:'addFlag',flagLabel :'F1',flagValue:'false'});
Expand Down
19 changes: 19 additions & 0 deletions vnEngine.js
Expand Up @@ -169,6 +169,9 @@ function vnEngine(){
case 'showSettingsMenu' :
this.initSettingsMenu();
break;
case 'playVideo':
this.playVideo(script[scriptCounter-1].videoLabel);
break;
default:
alert("script error");
break;
Expand Down Expand Up @@ -612,6 +615,22 @@ function vnEngine(){
}
}
}

this.playVideo = function(label){
var video = vnEngine.resourceManager.getResource(label);
video.vid.height = vnEngine.canvas.height;
video.vid.width = vnEngine.canvas.width;
console.log(video.vid);

var bitmap = new Bitmap(video.vid);
vnEngine.stage.addChild(bitmap);
video.vid.onEnded = function(){
console.log("nyaaa");
vnEngine.stage.removeChild(bitmap);
vnEngine.checkScript();
}
video.vid.play();
}
}

function arrayIndexOf(array, obj,value) {
Expand Down

0 comments on commit c286368

Please sign in to comment.