Video.getFirstFrame is a new method that can be used to load the first frame of the Video into its texture without starting playback. This is useful if you want to display the first frame of a video behind a 'Play' button, without calling the 'play' method. Fix #6695

This commit is contained in:
Richard Davey 2024-09-02 22:02:55 +01:00
parent 85d64d77a4
commit 98ea091edc
No known key found for this signature in database

View file

@ -493,6 +493,16 @@ var Video = new Class({
*/ */
this._playCalled = false; this._playCalled = false;
/**
* Has Video.getFirstFrame been called? This is reset if a new Video is loaded or played.
*
* @name Phaser.GameObjects.Video#_getFrame
* @type {boolean}
* @private
* @since 3.85.0
*/
this._getFrame = false;
/** /**
* The Callback ID returned by Request Video Frame. * The Callback ID returned by Request Video Frame.
* *
@ -926,7 +936,18 @@ var Video = new Class({
this._lastUpdate = currentTime; this._lastUpdate = currentTime;
this._rfvCallbackId = this.video.requestVideoFrameCallback(this.requestVideoFrame.bind(this)); if (this._getFrame)
{
this.removeEventHandlers();
video.pause();
this._getFrame = false;
}
else
{
this._rfvCallbackId = this.video.requestVideoFrameCallback(this.requestVideoFrame.bind(this));
}
}, },
/** /**
@ -994,6 +1015,8 @@ var Video = new Class({
if (!this._playCalled) if (!this._playCalled)
{ {
this._getFrame = false;
this._rfvCallbackId = video.requestVideoFrameCallback(this.requestVideoFrame.bind(this)); this._rfvCallbackId = video.requestVideoFrameCallback(this.requestVideoFrame.bind(this));
this._playCalled = true; this._playCalled = true;
@ -1004,6 +1027,44 @@ var Video = new Class({
return this; return this;
}, },
/**
* Attempts to get the first frame of the video by running the `requestVideoFrame` callback once,
* then stopping. This is useful if you need to grab the first frame of the video to display behind
* a 'play' button, without actually calling the 'play' method.
*
* If the video is already playing, or has been queued to play with `changeSource` then this method just returns.
*
* @method Phaser.GameObjects.Video#getFirstFrame
* @since 3.85.0
*
* @return {this} This Video Game Object for method chaining.
*/
getFirstFrame: function ()
{
var video = this.video;
if (!video || this.isPlaying())
{
if (!video)
{
console.warn('Video not loaded');
}
return this;
}
if (!this._playCalled)
{
this._getFrame = true;
this._rfvCallbackId = video.requestVideoFrameCallback(this.requestVideoFrame.bind(this));
this.createPlayPromise();
}
return this;
},
/** /**
* Adds the loading specific event handlers to the video element. * Adds the loading specific event handlers to the video element.
* *