Skip to content

Commit 800381b

Browse files
photonstormphotonstorm
committed
Better handling of texture creation
1 parent 7ef1b06 commit 800381b

1 file changed

Lines changed: 117 additions & 37 deletions

File tree

‎src/gameobjects/video/Video.js‎

Lines changed: 117 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ var VideoRender = require('./VideoRender');
1313
/**
1414
* @classdesc
1515
* A Video Game Object.
16+
*
17+
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
1618
*
1719
* @class Video
1820
* @extends Phaser.GameObjects.GameObject
@@ -65,7 +67,7 @@ var Video = new Class({
6567

6668
initialize:
6769

68-
function Video (scene, x, y, key)
70+
function Video (scene, x, y, key, url)
6971
{
7072
GameObject.call(this, scene, 'Video');
7173

@@ -213,17 +215,6 @@ var Video = new Class({
213215
*/
214216
this._crop = this.resetCropObject();
215217

216-
// if (this.game.device.needsTouchUnlock())
217-
// {
218-
// this.setTouchLock();
219-
// }
220-
// else if (_video)
221-
// {
222-
// _video.locked = false;
223-
// }
224-
225-
226-
227218
this.setTexture(textureKey);
228219
this.setPosition(x, y);
229220
this.setSizeToFrame();
@@ -235,6 +226,20 @@ var Video = new Class({
235226
ctx.fillRect(0, 0, 8, 8);
236227

237228
this.texture.refresh();
229+
230+
if (key)
231+
{
232+
var _video = scene.sys.cache.video.get(key);
233+
234+
if (_video)
235+
{
236+
this.video = _video;
237+
}
238+
}
239+
else if (url)
240+
{
241+
this.createVideoFromURL(url);
242+
}
238243
},
239244

240245
/**
@@ -252,6 +257,8 @@ var Video = new Class({
252257
if (loop === undefined) { loop = false; }
253258
if (playbackRate === undefined) { playbackRate = 1; }
254259

260+
console.log('Video.play - readystate', this.video.readyState);
261+
255262
if (this._pendingChangeSource)
256263
{
257264
return this;
@@ -295,18 +302,21 @@ var Video = new Class({
295302
{
296303
this._pending = false;
297304

298-
if (this.key !== null)
305+
if (this.video.readyState !== 4)
299306
{
300-
if (this.video.readyState !== 4)
301-
{
302-
this.retry = this.retryLimit;
303-
this._retryID = window.setTimeout(this.checkVideoProgress.bind(this), this.retryInterval);
304-
}
305-
else
306-
{
307-
this._playCallback = this.playHandler.bind(this);
308-
this.video.addEventListener('playing', this._playCallback, true);
309-
}
307+
this.retry = this.retryLimit;
308+
this._retryID = window.setTimeout(this.checkVideoProgress.bind(this), this.retryInterval);
309+
}
310+
else
311+
{
312+
this._setPlay = false;
313+
this._setUpdate = false;
314+
315+
this._playCallback = this.playHandler.bind(this);
316+
this._timeUpdateCallback = this.timeUpdateHandler.bind(this);
317+
318+
this.video.addEventListener('playing', this._playCallback, true);
319+
this.video.addEventListener('timeupdate', this._timeUpdateCallback, true);
310320
}
311321

312322
this.video.play();
@@ -317,6 +327,39 @@ var Video = new Class({
317327
return this;
318328
},
319329

330+
/**
331+
* Called when the video completes playback (reaches and ended state).
332+
* Dispatches the Video.onComplete signal.
333+
*
334+
* @method Phaser.Video#complete
335+
*/
336+
complete: function ()
337+
{
338+
console.log('------ complete');
339+
340+
// this.onComplete.dispatch(this);
341+
},
342+
343+
timeUpdateHandler: function ()
344+
{
345+
if (!this._setUpdate)
346+
{
347+
console.log('>>> timeUpdateHandler <<<');
348+
349+
this._setUpdate = true;
350+
351+
// this.video.removeEventListener('timeupdate', this._timeUpdateCallback, true);
352+
353+
if (this._setPlay && this._setUpdate)
354+
{
355+
this.updateTexture();
356+
357+
this.texture = this.videoTexture;
358+
this.frame = this.videoTexture.get();
359+
}
360+
}
361+
},
362+
320363
/**
321364
* Called when the video starts to play. Updates the texture.
322365
*
@@ -325,9 +368,19 @@ var Video = new Class({
325368
*/
326369
playHandler: function ()
327370
{
371+
console.log('>>> playHandler <<<');
372+
373+
this._setPlay = true;
374+
328375
this.video.removeEventListener('playing', this._playCallback, true);
329376

330-
this.updateTexture();
377+
if (this._setPlay && this._setUpdate)
378+
{
379+
this.updateTexture();
380+
381+
this.texture = this.videoTexture;
382+
this.frame = this.videoTexture.get();
383+
}
331384
},
332385

333386
/**
@@ -413,6 +466,29 @@ var Video = new Class({
413466
return this;
414467
},
415468

469+
/**
470+
* Creates a new Video element from the given Blob. The Blob must contain the video data in the correct encoded format.
471+
* This method is typically called by the Phaser.Loader and Phaser.Cache for you, but is exposed publicly for convenience.
472+
*
473+
* @method Phaser.Video#createVideoFromBlob
474+
* @param {Blob} blob - The Blob containing the video data.
475+
* @return {Phaser.Video} This Video object for method chaining.
476+
*/
477+
createVideoFromBlob: function (blob)
478+
{
479+
var _this = this;
480+
481+
this.video = document.createElement('video');
482+
this.video.controls = false;
483+
this.video.setAttribute('autoplay', 'autoplay');
484+
this.video.setAttribute('playsinline', 'playsinline');
485+
this.video.addEventListener('loadeddata', function (event) { _this.updateTexture(event); }, true);
486+
this.video.src = window.URL.createObjectURL(blob);
487+
this.video.canplay = true;
488+
489+
return this;
490+
},
491+
416492
/**
417493
* Creates a new Video element from the given URL.
418494
*
@@ -454,6 +530,8 @@ var Video = new Class({
454530
*/
455531
checkVideoProgress: function ()
456532
{
533+
console.log('checkVideoProgress');
534+
457535
if (this.video.readyState === 4)
458536
{
459537
this._pendingChangeSource = false;
@@ -492,41 +570,43 @@ var Video = new Class({
492570
if (width === undefined || width === null) { width = this.video.videoWidth; newSize = true; }
493571
if (height === undefined || height === null) { height = this.video.videoHeight; }
494572

573+
console.log('Video.updateTexture called', width, height);
574+
495575
// First we'll update our current CanvasTexture
496576
if (newSize)
497577
{
498-
this.texture.setSize(width, height);
578+
this.snapshot.setSize(width, height);
499579
}
500580

501581
if (!this.videoTexture)
502582
{
583+
console.log('Creating videoTexture');
584+
503585
this.videoTexture = this.scene.sys.textures.create(UUID(), this.video, width, height);
504586
this.videoTextureSource = this.videoTexture.source[0];
505587
this.videoTexture.add('__BASE', 0, 0, 0, width, height);
506588
}
507589
else
508590
{
591+
console.log('Assigning videoTexture');
592+
509593
var textureSource = this.videoTextureSource;
510594

511595
textureSource.source = this.video;
512596
textureSource.width = width;
513597
textureSource.height = height;
514598
}
515599

516-
// Swap out the canvas texture for the video texture
517-
// this.canvasTexture = this.texture;
518-
// this.canvasFrame = this.frame;
519-
520-
this.texture = this.videoTexture;
521-
this.frame = this.videoTexture.get();
600+
// this.texture = this.videoTexture;
601+
// this.frame = this.videoTexture.get();
522602

523603
this.setSizeToFrame();
524604
this.setOriginFromFrame();
525605

526-
if (this._autoplay)
527-
{
528-
this.video.play();
529-
}
606+
// if (this._autoplay)
607+
// {
608+
// this.video.play();
609+
// }
530610
},
531611

532612
preUpdate: function ()
@@ -733,7 +813,7 @@ var Video = new Class({
733813
*/
734814
isPlaying: function ()
735815
{
736-
return (this.video) ? !(this.video.paused && this.video.ended) : false;
816+
return (this.video) ? !(this.video.paused || this.video.ended) : false;
737817
},
738818

739819
/**
@@ -829,7 +909,7 @@ var Video = new Class({
829909

830910
get: function ()
831911
{
832-
return (this.video) ? !(this.video.paused && this.video.ended) : false;
912+
return (this.video) ? !(this.video.paused || this.video.ended) : false;
833913
}
834914

835915
}

0 commit comments

Comments
 (0)