With Coldfusion 10, we deep dive into the world of HTML5 video support through the CFMEDIAPLAYER tag.
Then(CF 9) : The cfmediaplayer tag could only support Flash videos,the likes of flv,f4v.
Now (CF 10): The cfmediaplayer can now support HTML 5 videos , the likes of mp4,ogv,webm ; formats conditioned for video playback over the internet.These require no additional plugins. You can skin/style the player,use Javascript functions ,set event handlers and even set a customised title !
More on all that later!!
Snippet #1: Just specify your HTML5 video in the source attribute of the cfmediaplayer tag
<cfmediaplayer name="player1" source="sample_webm.webm" />Play the snippet in Firefox or Chrome to view the webm video
Alternately , you can use ColdFusion.MediaPlayer.setSource() method and add to your existing code.
Snippet #2 : Use the all new "type" attribute to tell your browser whether to play the same video as flash or HTML. This is pretty useful when you want to enforce a particular type of content to be sent to the client.
MP4 videos can play as flash and HTML videos. This essentially means that if you try to play an MP4 video with flash enabled,you see a flash player loaded (right click on the player and observe the "About Flash Player" info ) and when flash is disabled the HTML% player is loaded
Try this in Chrome to see the difference:
<cfmediaplayer name="player2" source="sample_mp4.mp4" type="html" /><br> <cfmediaplayer name="player3" source="sample_mp4.mp4" type="flash" />The Flash and HTML5 players have been designed to look as identical as possible so as to support seamless fallback.
Snippet #3: Use the HTML source tag to set multiple videos as sources to the cfmediaplayer tag and let ColdFusion handle the video playback depending on video support by the browser
<cfmediaplayer name="player4" source="sample_webm.webm" type="html"> <source src="sample_mp4.mp4" type="video/mp4" /> </cfmediaplayer>
Now play the snippet in IE9,Firefox,Chrome and Safari .
You will see :
IE9 and Safari5 : playing sample_mp4.mp4 in HTML because it currently doesnt support WEBM
Firefox and Chrome : playing sample_webm.webm
A few things to consider :
1)Use the <!DOCTYPE html > and the <head/> <body> tags to write your cfm page for best results. A few browsers will not render the player properly otherwise!
2)Can't play your video ? Are you using a web server ? Then make sure the right mime-types are added so that content can be served to the client.
3)Video playback is subject to browser support for formats,codecs and rendering.
More on Flash-HTML fallback in the next post!
Downloads :
Right Click and save as to download sample_mp4.mp4
Right Click and save as to download sample_webm.webm
