Question

I am autoplaying a video with HTML5 and with a fallback using vimeo.

<video width="100%" height="100%" autoplay="autoplay">
    <source src="video/mp4.mp4" type="video/mp4" />
    <source src="video/ogv.theora.ogv" type="video/ogg" />
    <iframe src="http://player.vimeo.com/video/43010500?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</video>

This works fine for Safari, and Firefox but there is an echo on chrome. I took out the vimeo iframe and the echo is gone, my guess is that chrome is using the html5video and the iframe video plays hidden underneath it as well.

Whats the best way to fallback to iframe if the the browser can’t play html5 video.

Thanks.

Answer 1

I’d suggest that you use something modernizr to check if html5 video is supported. You’d inject the video tag if it is supported and the iframe if not.

http://modernizr.com/

<div id="videoplayer"></div>


if (Modernizr.video) {
  $('#videoplayer').html('all the video stuff you have'); // or build it and append
} else {
  $('#videoplayer').html('iframe code');
}

I’d be remiss to not mention there are a bunch of existing plugins and tools that do this already.

http://html5video.org/wiki/HTML5_Player_Comparison