Video
Introduction¶
A Video Game Object.
- Author: Richard Davey
Usage¶
Load video¶
scene.load.video(key, url, loadEvent, asBlob, noAudio);
Reference: load video
Add video object¶
Reference video from Video Cache¶
var video = scene.add.video(x, y, key);
key
: Key of the Video this Game Object will play, as stored in the Video Cache.
Load video from URL¶
- Add video object
var video = scene.add.video(x, y);
- Play video from URL
video.loadURL(url); // video.loadURL(url, loadEvent, noAudio);
loadEvent
: The load event to listen for when not loading as a blob.'loadeddata'
: Data for the current frame is available. Default value.'canplay'
: The video is ready to start playing.'canplaythrough'
: The video can be played all the way through, without stopping.
noAudio
: Does the video have an audio track? If not you can enable auto-playing on it. Default value isfalse
.
Control multiple video game objects independently
Each scene.load.video(key, ...)
will create a video element in cache.
Video game object with the same key will reference the same video element and will be controlled at the same time. See this demo
To control multiple video game objects independently :
- Load video with different key for each video game object, or
video.loadURL(url)
Play¶
video.play();
// video.play(loop, markerIn, markerOut);
loop
: Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats.markerIn
,markerOut
: Optional in/out marker time, in seconds, for playback of a sequence of the video.
Play video first time
Call video.play()
when playing video first time.
Pause¶
- Pause
video.setPaused(); // video.setPaused(true);
- Resume
video.setPaused(false);
Play video after paused
Call video.setPaused(false)
to resume playing.
Stop¶
Stops the video playing and clears all internal event listeners.
video.stop();
Is playing¶
- Is playing
var isPlaying = video.isPlaying(); // (not PAUSE) and (not not ENDED)
- Is paused
var isPaused = video.isPaused();
Playback time¶
- Get
or
var playbackTime = video.getCurrentTime();
var t = video.getProgress(); // t: 0~1
- Set
- Set to
or
video.setCurrentTime(playbackTime); // time in seconds
video.seekTo(t); // t: 0~1
- Is seeking
var isSeeking = video.isSeeking();
- Is seeking
- Forward
video.setCurrentTime('+' + time); // time in seconds // video.setCurrentTime('+2');
- Backeard
video.setCurrentTime('-' + time); // time in seconds // video.setCurrentTime('-2');
- Set to
Playback rate¶
- Get
var rate = video.getPlaybackRate();
- Set
video.setPlaybackRate(rate);
Duration¶
var duration = video.getDuration(); // time in seconds
Volume¶
- Get
var volume = video.getVolume(); // volume: 0~1
- Set
video.setVolume(volume); // volume: 0~1
Mute¶
- Get
var muted = video.isMuted(); // muted: true/false
- Set
video.setMute(muted); // muted: true/false
Loop¶
- Get
var loop = video.getLoop(); // loop: true/false
- Set
video.setLoop(loop); // loop: true/false
Video key¶
- Get
var key = video.getVideoKey();
- Change video key (video source)
video.changeSource(key); // video.changeSource(key, autoplay, loop, markerIn, markerOut);
autoplay
: Should the video start playing immediately, once the swap is complete?loop
: Should the video loop automatically when it reaches the end? Not all browsers support seamless video looping for all encoding formats.markerIn
,markerOut
: Optional in/out marker time, in seconds, for playback of a sequence of the video.
Marks¶
- Add mark
video.addMarker(key, markerIn, markerOut);
key
: A unique name to give this marker.markerIn
,markerOut
: The time, in seconds, representing the start/end of this marker.
- Play mark
video.playMarker(key, loop);
- Remove mark
video.removeMarker(key);
Snapshot¶
- Allocate a canvas texrure
video.saveSnapshotTexture(key);
key
: Texture key.
- Take a snapshot
or
var canvasTexture = video.video.snapshot(); // var canvasTexture = video.snapshot(width, height);
var canvasTexture = video.snapshotArea(x, y, srcWidth, srcHeight); // var canvasTexture = video.snapshotArea(x, y, srcWidth, srcHeight, destWidth, destHeight);
x
,y
: The horizontal/vertical location of the top-left of the area to grab from.srcWidth
,srcHeight
: The width/height of area to grab from the video.destWidth
,destHeight
: The destination width/height of the grab, allowing you to resize it.canvasTexture
: Canvas texture object.- Get key of texture
var key = canvasTexture.key;
- Get key of texture
Save texture¶
The saved texture is automatically updated as the video plays. If you pause this video, or change its source, then the saved texture updates instantly.
var texture = video.saveTexture(key);
// var texture = video.saveTexture(key, flipY);
flipY
: Set totrue
if use it as the input for a Shader.
Events¶
- A Video is unlocked by a user gesture.
video.on('unlocked', function(video, error){ }, scope);
- A Video tries to play a source that does not exist, or is the wrong file type.
video.on('error', function(video, error){ }, scope);
- A Video has exhausted its allocated time while trying to connect to a video source to start playback.
video.on('timeout', function(video){ }, scope);
- A Video begins playback.
video.on('play', function(video){ }, scope);
- A Video finishes playback by reaching the end of its duration, or
markerOut
.video.on('complete', function(video){ }, scope);
- A Video that is currently playing has looped.
video.on('loop', function(video){ }, scope);
- A Video begins seeking to a new point in its timeline.
video.on('seeking', function(video){ }, scope);
- A Video completes seeking to a new point in its timeline.
video.on('seeked', function(video){ }, scope);
- Enough of the video source has been loaded, that the browser is able to render a frame from it.
video.on('created', function(video, width, height){ }, scope);
- A Video is stopped from playback via a call to the
Video.stop
method,video.on('stop', function(video){ }, scope);