HTML5 Multimedia Framework Demo

Code

[embed width="640" height="368" title="Here We Are" poster="http://cj-jackson.com/wp-content/uploads/2011/02/echo-hereweare.jpg" webm="http://cj-jackson.com/wp-content/uploads/2011/02/echo-hereweare.webm" ogv="http://cj-jackson.com/wp-content/uploads/2011/02/echo-hereweare.ogv" subtitle="http://cj-jackson.com/wp-content/uploads/2011/02/mediaelement.srt" slang="en" disable="volume,fullscreen"]http://cj-jackson.com/wp-content/uploads/2011/02/echo-hereweare.m4v[/embed]

Output

Originally from http://mediaelementjs.com/

Code

[embed title="Ozzy Osbourne: Let It Die" ogg="http://cj-jackson.com/wp-content/uploads/2010/07/Ozzy_Osbourne-Scream-Let_It_Die.ogg"]http://cj-jackson.com/wp-content/uploads/2010/07/Ozzy_Osbourne-Scream-Let_It_Die.m4a[/embed]

Output

Embed Parameter and Structure

Structure

[embed poster="http://link.to/poster.jpg" ogv="http://example.com/file.ogv"]http://preferred.file/example.m4v[/embed]

“poster” and “ogv” are examples of parameters.

Video or audio mode is automatically determined by the extension of preferred file, therefore preferred file is mandatory, while other parameters are optional.

Video and Audio Parameter

  • title for the sake of disability (e.g blind) and search engines.
  • disable used to disable mediaelement.js features, e.g disable=”volume,fullscreen” would disable volume and fullscreen on control bar.
  • enable the opposite to disable, e.g. enable=”backlight” would enable backlight feature.

Video Only Parameter

  • width width in pixels.
  • height height in pixels.
  • poster a placeholder image until a user calls play on video, link to jpg image.
  • mp4 link to mp4/m4v video file.
  • ogv link to ogv/ogg video file.
  • webm link to webm file.
  • wmv link to wmv file, only works with mediaelement.js.
  • flv link to flv file, only works with mediaelement.js.
  • subtitle link to webSRT.
  • slang subtitle language in two letter code, e.g ‘en’ for English and ‘fr’ for French.
  • chapter link to webSRT.
  • clang chapter language in two letter code, e.g ‘en’ for English and ‘fr’ for French.

Audio Only Parameter

  • aac link to aac/m4a file.
  • mp3 link to mp3 file.
  • ogg link to ogg/oga file.
  • wma link to wma file, only works with mediaelement.js.

Video Sharing Site

The framework also filters out html flash object code that are not xhtml1.1/html5 complaint.

Code

[embed]http://www.youtube.com/watch?v=C41IBSKGF4w&playnext=1&videos=6C8Rmi4R_k0&feature=sub[/embed]

Output

Advanced Methods

The advanced approach involves using external .h5.json file, the file must also be stored on the same domain (excludes sub-domain) as you blog otherwise it will not work.  The feature has been available since 2.2.0

Pointing to .h5.json file

[embed]http://cj-jackson.com/example.h5.json[/embed]

HTML Video

Content of JSON file

{
"video":{
	"url":[
		"/big_buck_bunny.webm",
		"/big_buck_bunny.main.m4v",
		"/big_buck_bunny.m4v",
		"/big_buck_bunny.ogv"
	],
	"poster":"/big_buck_bunny.jpg",
	"width":640,
	"height":368,
	"title":"Big Buck Bunny",
	"mediaelement":{
		"disabledfeatures":[
				"volume",
				"fullscreen"
			]
		}
	}
}

Embed Code

[embed]http://cj-jackson.com/wp-content/uploads/2010/07/big_buck_bunny.h5.json[/embed]

Output

HTML Audio

Content of JSON file

{
"audio":{"url":[
		"/Ozzy_Osbourne-Scream-Let_It_Die.ogg",
		"/Ozzy_Osbourne-Scream-Let_It_Die.m4a",
		"/Ozzy_Osbourne-Scream-Let_It_Die.mp3"
	],
	"title":"Ozzy Osbourne: Let It Die"}
}

Embed Code

[embed]http://cj-jackson.com/wp-content/uploads/2010/07/Ozzy_Osbourne-Scream-Let_It_Die.h5.json[/embed]

Output

Flowplayer

Content of JSON file

{
"flowplayer":{
	"video":{
		"url":"/big_buck_bunny.m4v",
		"width":640,
		"height":368,
		"poster":"/big_buck_bunny.jpg",
		"htmlvideo":{
			"src":[
				"/big_buck_bunny.webm",
				"/big_buck_bunny.m4v",
				"/big_buck_bunny.ogv"],
			"poster":"/big_buck_bunny.jpg",
		"title":"Big Buck Bunny"}
	}
}}

Embed Code

[embed]http://cj-jackson.com/wp-content/uploads/2010/07/big_buck_bunny.flow.h5.json[/embed]

Output

Oembed and JSON

Content of JSON file

{
"oembed":{
	"url":"http://www.youtube.com/watch?v=C41IBSKGF4w&playnext=1&videos=6C8Rmi4R_k0&feature=sub",
	"width":640,
	"height":385,
	"poster":"http://cj-jackson.com/wp-content/uploads/2010/08/annoyingorange.jpg"
	}
}

Embed Code

[embed]http://cj-jackson.com/wp-content/uploads/2010/10/oembed.h5.json[/embed]

Output

Download

HTML5 Multimedia Framework for WordPress