HTML5 Video: Magic JavaScript

<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>

You can control the player via JavaScript by using links similar to those below.

• 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>

• 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>

• 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>

• 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>

• 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>

• 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>

HTML5 Video: Magic JavaScript

Currently playing FLV, MP4, OGG and WebM videos

The video has reached the end and the `do_callback()` function just fired!

HTML5 Video: Magic JavaScript

Currently playing FLV, MP4, OGG and WebM videos

The video has reached the end and the do_callback() function just fired!

The video has reached the end and the `do_callback()` function just fired!