HTML5 Embedded Video with IE8 Object Fallback
I realize it's not 2009 and that as a developer/decent person, my supporting fallback for Internet Explorer 8 is not helping push technology forward.
But hear me out (pity not required). Unfortunately a lot of larger companies (like my current employer that I love) – have a foundational network riffled with company laptops so intwined with these dinosaurs, it's unthinkable not to support it. And at least it's not IE7...
I'm all for utilizing delivery services, especially ones like YouTube that have a major handle on such time-wasters like IE8 video player fallback. Unfortunately that was not an option recently when it came time with this new video request and it's been so long since a requirement was received to self-host a video that I thought better than ripping some old code from a years old project.
So here it is, a simple HTML5 embedded video with IE8 object fallback support. And hopefully no more "where are the damn player controls?".
http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js
http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf
<video width="640" height="360" controls> <source src="vid.mp4" type="video/mp4" /> <source src="vid.ogv" type="video/ogg" /> <source src="vid.webm" type='video/webm; codecs="vp8, vorbis"' />
<!-- note the encoded paths to flowplayer-3.2.18.swf player --> <object type="application/x-shockwave-flash" data="swf/flowplayer-3.2.18.swf" width="640" height="360"> <param name="movie" value="swf/flowplayer-3.2.18.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <!-- note the encoded path to the image and video files, relative to the .swf! --> <!-- more on that here: http://en.wikipedia.org/wiki/Percent-encoding --> <param name="flashVars" value="config={'playlist':['..%2Fimg%2Fvid.jpg',{'url':'..%2Fvid.mp4','autoPlay':false}]}" /> <!-- fallback image if flash fails --> <img src="img/vid.jpg" width="640" height="360" title="No Flash found" /> </object> </video>
