Quick Jump ↵
Add <script type="text/javascript">$m.wand.html5_video = true;</script> inside your <body> tag.
<script type="text/javascript">$m.wand.html5_video = true;</script>
<body>
Use the example below as a guide for building your own!
PS.. remove the comments since we're working in a <div>.
<div>
do_callback()
Your browser can't play this video.
<div data-mjf="html5_video" // required data-mjf_h5v_path="/assets/" // required - URL path of the video files; can be absolute or relative data-mjf_h5v_poster="/assets/video_supermario.jpg" // optional - an image to show while the video is loading data-mjf_h5v_mp4="video_supermario.mp4" // optional - the MP4 filename data-mjf_h5v_ogg="video_supermario.ogg" // optional - the OGG filename data-mjf_h5v_webm="video_supermario.webm" // optional - the WebM filename data-mjf_h5v_flv="video_supermario.flv" // optional - the FLV filename data-mjf_h5v_color_bg="000000" // optional - the FLV hex background color; defaults to "000000" data-mjf_h5v_color_fg="991517" // optional - the FLV hex foreground color; defaults to "991517" data-mjf_h5v_js_callback="do_callback()" // optional - JavaScript function called when the video ends data-mjf_h5v_dims="400x300" // required - the video file width and height id="magic_media_video_cont"> <p>Your browser can't play this video.</p> </div>
Play <a href="#" data-mjf="html5_video_play|return_false" data-mjf_h5v_video_id="magic_media_video_cont" id="magic_media_video_play">Play</a>
<a href="#" data-mjf="html5_video_play|return_false" data-mjf_h5v_video_id="magic_media_video_cont" id="magic_media_video_play">Play</a>
Pause <a href="#" data-mjf="html5_video_pause|return_false" data-mjf_h5v_video_id="magic_media_video_cont" id="magic_media_video_pause">Pause</a>
<a href="#" data-mjf="html5_video_pause|return_false" data-mjf_h5v_video_id="magic_media_video_cont" id="magic_media_video_pause">Pause</a>
Stop <a href="#" data-mjf="html5_video_stop|return_false" data-mjf_h5v_video_id="magic_media_video_cont" id="magic_media_video_stop">Stop</a>
<a href="#" data-mjf="html5_video_stop|return_false" data-mjf_h5v_video_id="magic_media_video_cont" id="magic_media_video_stop">Stop</a>
Go to 5 seconds <a href="#" data-mjf="html5_video_seek|return_false" data-mjf_h5v_video_id="magic_media_video_cont" data-mjf_h5v_seek_time="5" id="magic_media_video_seek_5">Go to 5 seconds</a>
<a href="#" data-mjf="html5_video_seek|return_false" data-mjf_h5v_video_id="magic_media_video_cont" data-mjf_h5v_seek_time="5" id="magic_media_video_seek_5">Go to 5 seconds</a>
Go to 50 seconds <a href="#" data-mjf="html5_video_seek|return_false" data-mjf_h5v_video_id="magic_media_video_cont" data-mjf_h5v_seek_time="50" id="magic_media_video_seek_50">Go to 50 seconds</a>
<a href="#" data-mjf="html5_video_seek|return_false" data-mjf_h5v_video_id="magic_media_video_cont" data-mjf_h5v_seek_time="50" id="magic_media_video_seek_50">Go to 50 seconds</a>
Go to the end <a href="#" data-mjf="html5_video_end|return_false" data-mjf_h5v_video_id="magic_media_video_cont" id="magic_media_video_end">Go to the end</a>
<a href="#" data-mjf="html5_video_end|return_false" data-mjf_h5v_video_id="magic_media_video_cont" id="magic_media_video_end">Go to the end</a>
Even though all video filenames are optional, you probably should include at least one.
The inserted <video> -or- <object> elements have IDs: id="ELEMENT_ID_video".
<video>
<object>
id="ELEMENT_ID_video"
If you're using FLV videos, the data-mjf_h5v_path must be relative.
data-mjf_h5v_path
FLV videos don't support the data-mjf_h5v_poster attribute - yet.
data-mjf_h5v_poster
FLV videos will all share the same JavaScript callback since there is only one SWF player.
Need to convert your video? The free Miro Video Converter does MP4, OGG, and WebM.
The FLV player is a heavily modified version of the OS FLV v3.0.
Re-enable the data-mjf_h5v_autoload="true" and data-mjf_h5v_autoplay="true" attributes.
data-mjf_h5v_autoload="true"
data-mjf_h5v_autoplay="true"
Update flash player to OS FLV v4.2.
Add <object><embed></object> fallback when nothing else works.
<object><embed></object>
Add player branding for HTML5 players.
« Back to the main documentation
HTML5 Video: Magic JavaScript