Now with the help of HTML5 we can play inline videos and rich multimedia using the <video> and the <audio> tags and do not require a flash plug-in or a flash player to play videos or audios anymore. The newer group of browsers (IE9, Safari 5+, Chrome 6+) have support for HTML5 <video> tag. But older browsers, browsers that do not have support for HTML5 features (eg. IE 7) still require a flash player and a third party flash plug-in to play multimedia. While developing a web app, as a developer you always want to support the entire range of users, so how do you ensure that your video plays for users even with older browsers. This tutorial will explain exactly how to do that. Check out the demo app first.
Demo Link: http://jbk404.site50.net/flex/htmlparameter/
<param name="flashvars" value="videoURL=videos/video' + target_obj.id + '.flv" />
target_obj.id is the id of the button clicked. The parameter is passed as a key-value pair. videoURL holds the dynamic URL of the video. There is one flash file (.swf) which reads the parameter passed in flashvars and then plays the video. This way multiple videos play in the same player. I have named the videos as video1.flv and video2.flv which are inside videos folder under my root directory. Note that Flex/Flash video player runs a .flv format. When you look at the demo you might notice that a popup shows the video URL inside the player. That’s where it is getting the URL as parameter from HTML side. Also the video is auto played. Continue reading
Check out this video of a simple experiment that shows flash performing better than html5 on mobile devices. Of course iPod and iPhones do not support flash but android devices support both. The HTML5 animation in the video is a Canvas animation that is rendered at 22 frames per second (on iPod Touch and iPhone) while the flash animation runs at a whopping 57 frames per second on the android device. Something to ponder upon and experiment.