VideoJS fallback and Internet Explorer 8

Question

I just coded a cross-browser video player with automatic conversions through ffmpeg and it works good in all browsers. Since they all display different controls I figured I'd use VideoJS to style them.

This is my demo page: http://www.animero.com/2012/produktioner/jakobsson-pr-vegibar/

The skinned controls should be visible in all modern browsers that support the html5 video tag. Though, my issue is with IE8. The fallback does not seem to work, because I am only getting a black box that says "Movie not loaded..." but the audio is still playing.

This is my markup:

<div class="video-js-box">
    <video id="my_video_1" class="video-js vjs-default-skin" width="790" height="444" poster="<?php echo $videoFiles['poster']; ?>" preload autoplay controls data-setup="{}">
        <source src="<?php echo $videoFiles['mp4']; ?>" type="video/mp4" />
        <source src="<?php echo $videoFiles['ogv']; ?>" type="video/ogg" />
        <object id="flash_fallback_1" class="vjs-flash-fallback" width="790" height="444">
            <embed width="790" height="444" src="<?php bloginfo('stylesheet_directory'); ?>/spelare.swf?image=<?php echo $videoFiles['poster']; ?>&video=<?php echo $videoFiles['flash']; ?>" type="application/x-shockwave-flash" wmode="transparent"></embed>
        </object>
    </video>
</div>

When I turn off VideoJS everything works great, and in IE8 my flash-player works good. Could anyone help me with this?

Thanks in advance, Jonathan

Solution

You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. It's often recommended now to put JavaScript before the end body tag () instead of the head (), but Video.js includes an 'HTML5 Shiv', which needs to be in the head for older IE versions to respect the video tag as a valid element.

NOTE: If you're already using an HTML5 shiv like Modernizr you can include the Video.js JavaScript anywhere, however make sure your version of Modernizr includes the shiv for video.

Source: http://videojs.com/docs/setup/

It works!

Comments

[acme]

I'm having similar problems in IE8 and was looking for an answer, so I got here. What I can tell, though, is you can ommit the <object> part as video-js does automatically insert this for you if your browser does not support the <video> tag.