phaser 2.4+ video support

[lilchow]

Phaser 2.4+ supposedly is able to support video component. However, I can't find relevant information in the API documentation. Can someone post some simple snippets demonstrating how to load, place and interaction with video? Thanks a lot!!

[georgejfrick]

You have to read the 2.4 changelog, that is where the most video details are that I can find right now. I assume more information is coming in the announced 'upcoming' examples.

 

Here is some juicy stuff from the 2.4 changelog;

 

• Device.oggVideo indicates if the browser can play back ogg video files.
• Device.h264Video indicates if the browser can play back H264 (mp4) video files.
• Device.mp4Video indicates if the browser can play back H264 (mp4) video files.
• Device.webmVideo indicates if the browser can play back webm video files with the vp8 codec.
• Device.vp9Video indicates if the browser can play back webm video files with the vp9 codec.
• Device.hlsVideo indicates if the browser can play back mpeg video files.

• Loader.video allows you to load a video file into Phaser. It works in the same way as Loader.audio, allowing you to pass an array of video files - and it will load the first one the device is capable of playing back. You can optionally load the video via xhr where the video data is converted to a Blob upon successful load.
• Cache.addVideo allows you to add a loaded video into the Phaser Cache. This is called automatically by the Phaser Loader, but may be invoked directly as well.
• Cache.checkVideoKey allows you to check if a video is stored in the cache based on the given key.
• Cache.getVideo allows you to extract a video from the Cache based on its key. The video element itself (or the Blob is loaded with asBlob true) will be found in the data property of the returned object.
• Cache.removeVideo will remove a video from the Cache based on the given key.

 

For my video needs, I actually just do:

<style>
.container {
position: relative;
}
.gameItem {
position: absolute;
top: 0;
left: 0;
}
</style>

 

.

.

.

 

<div id="gameContainer" class="container">

<div id="game" class="gameItem" style="z-index: 100;"></div>
</div>

 

 

Then I use jquery to dynamically add a tag to embed the video, such as a youtube video (I'm using Wistia). The video can be anysize/position above the game, and when done I remove the tag or send it to the bottom for reuse (all z-index based stacking of games/videos/html).

 

George