In a php web script I'm using I have the video.js HTML5 video player working successfully in all browsers and successfully in IE8 - because of the flowplayer fallback code. However, I'm told that "Video.js has its own fallback(for dynamically loaded video)", but I can't figure out how to change this working code (with Flowplayer fallback) to the video.js fallback. Here's the currently working code: <video id="_1200k.mp4" class="video-js vjs-default-skin" preload="none" width="445" height="340" controls poster="[var.thumb_file]" data-setup='{techOrder: [‘flash’,’html5’}'> <source src="http://www...com/videos/[var.video_play]" type='video/mp4' /> <object class="vjs-flash-fallback" width="445" height="340" type="application/x-shockwave-flash" data="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> <param name="movie" value="/flowplayer/flowplayer-3.2.16.swf" /> <param name="flashvars" value='config={"playlist":["/[var.thumb_file]", {"url": "http://www....com/[var.video_play]","autoPlay":false,"autoBuffering":true}]}' /> <img src="[var.thumb_file]" width="640" height="264" alt="Poster Image" title="No video playback capabilities." /> </object> </video> Code (markup): Maybe just changing what's in the <object> tags, would do it? Any help will be appreciated. Here's some video.js info:https://github.com/videojs/video.js/.../docs/index.md
Since you don't actually seem to be using video.js in creating the VIDEO tag, I'm not quite sure what you are expecting it to do... though the invalid ID, inclusion of the "controls" attribute meaning you shouldn't even need JS, garbage 'data-' attribute meaning whatever scripting is being used is rubbish, and that you went ahead and did the fallback properly WITHOUT the scripttardery... well... You're talking about video.js why exactly? Just strip that crap out and let VIDEO and OBJECT do OBJECT's job! Wait, did I say "do OBJECT's job!" ? Why yes, yes I did. Malfing HTML 5-tardery and it's pointless redundancies...
Thanks for your reply. I stripped out what I believe you were describing, like this: <video id="_1200k.mp4" class="video-js vjs-default-skin" preload="none" width="445" height="340" controls poster="[var.thumb_file]" > <source src="http://www...com/videos/[var.video_play]" type='video/mp4' /> <object> </object> </video> Code (markup): still without success in playing the video in IE8. Any other help will be appreciated.
Actually, looks more like you removed the part that would make it play in IE altogether. Try this, it tries to correct the stuff I was talking about and axe the pointless video.js nonsense: <!-- ID's should not contain periods, and should start with letters, not underscores --> <video id="giveThisAValidId" preload="none" width="445" height="340" controls poster="[var.thumb_file]" > <source src="http://www...com/videos/[var.video_play]" type="video/mp4" > <!--[if IE ]> <object type="application/x-shockwave-flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="450" height="225" > <![endif]--> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="https://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="445" height="340" > <!--<![endif]--> <param name="movie" value="https://releases.flowplayer.org/swf/flowplayer/flowplayer-3.2.16.swf" > <param name="flashvars" value="config={'playlist':['/[var.thumb_file]', {'url': 'http://www....com/[var.video_play]','autoPlay':false,'autoBuffering':true}]}" > <img src="[var.thumb_file]" width="640" height="264" alt="Poster Image" > </object> </video> Code (markup): IF your bracketed values are being plugged in properly and all the paths are working, AND the flash plugin is present, this should work all the way back to IE 5.5 and 5.2 Mac. Though I'd also suggest you get your other two file formats (ogg and webm) into SOURCE tags there as well. Remember you want to use the train wreck of redundancy known as HTML 5's VIDEO tag, you can't assume MP4 is gonna work. Also, what codecs are you using in that MP4, are you sure they are flowplayer/flash supported? Remember flash sometimes chokes on AAC audio. (usually it's not that it isn't supported so much as their implementation is unstable!). Remember, .webm, .mkv, .mp4, .mtk, .ogg -- they're all just container file formats and not the actual encoding.
Thanks for your reply. Much appreciated. My original code worked with Flowplayer successfully in IE8. Since I already have video.js installed, and they claim to have a fallback, my goal here was to get this to work in IE8 without Flowplayer, just using video.js. It appears that your code example includes flowplayer. I'm looking to get help with how to change my working code from Flowplayer fallback to the video.js fallback. Why is video.js "pointless"? I look forward to any additional comments/insight. Much thanks again.
If you 'need' 115k of minified javascript and 16k of minified CSS to style or customize a HTML 5 video player, you are doing something horribly and disastrously wrong. Seriously, it's such a fat bloated train wreck of how NOT to do things, I'm shocked anyone would actually put it on a website. Admittedly, I say the same thing about bootcrap and jqueery. BY ITSELF MINIFIED it is larger than most of the pages I'd put on a website WITHOUT minification in terms of HTML, CSS and scripting! Which is why I'd be swinging a giant axe at it and letting the HTML elements do their job. It's a STUNNING example of what I'm always ranting about when it comes to "JS for nothing and your scripts for free. That ain't workin', that's not how you do it. Lemme tell ya, these guys ARE dumb."
After reading that reply, I thought I'd try mediaelement.js and it works successfully in all browsers, even IE8, except the poster image does not appear in IE8. Any help with getting the poster image to appear in IE8, will be appreciated. Here's the code: <video id="video" poster="http://www.-domain-.com/img/testImage.jpg" preload="none" controls="controls" width="240" height="220" > <source type="video/mp4" src="http://www.-domain-.com/video/testVideo.mp4"/> <object width="240" height="220" type="application/x-shockwave-flash" data="http://www.-domain-.com/mediaelement/flashmediaelement.swf"> <param name="movie" value="http://www.-domain-.com/mediaelement/flashmediaelement.swf" /> <param name="flashvars" value="controls=true&file=http://www.-domain-.com/video/testVideo.mp4" /> <!-- Image as a last resort --> <img src="http://www.-domain-.com/img/testImage.jpg" width="240" height="220" title="No video playback capabilities" /> </object> </video> Code (markup):
"poster" is a HTML 5 concept, unless your flash based player has it's own version of doing posters (I've never seen one that did) you won't have support for it. Remember, IE8 and earlier has NO support for the VIDEO tag, so it's dropping through to the flash version, and the flash version just doesn't do that. You COULD maybe fake it with scripting, but really if you're going to do that I'd suggest doing it yourself instead of trying to use an off the shelf answer as generally speaking they're all pointless redundancies and doing things that either aren't worth the bandwidth, aren't worth the development time, or aren't worth worrying about on decade old decade and a half out of date browsers. Though making that decision usually comes down to weighing the cost of implementation against what not doing it will actually cost you in terms of usability and functionality. For me, "Oh noes, a browser NOBODY should still be using in 2008 doesn't get the poster" is... well... Same reason I go "Oh noes, IE8 doesn't get rounded corners, gradients and shadows, nots thatz!!!" ... and why it's laughably pathetic that some people will throw scripting at websites to try and force such minor affectations to appear.
Thank you for your reply. However, I'm still interested in getting some help from someone with a work-around for getting a thumbnail to appear in IE8, as a substitute for the poster image. Any additional help will be appreciated.