html5視頻並回退到iframe不工作

Question

我使用vimeo自動播放帶有HTML5的視頻和後備廣告。

<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> 

這適用於Safari和Firefox，但在Chrome上有一個回顯。我拿出了vimeo iframe，回聲消失了，我的猜測是chrome使用的是html5video，並且iframe視頻也在其下面隱藏起來。

如果瀏覽器無法播放html5視頻，最好的方法是備用iframe。

謝謝。

Answer 1

我建議你使用一些modernizr來檢查是否支持html5視頻。如果支持，您將注入視頻標記，如果不支持，則注入iframe。

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'); 
} 

我會失職不何況還有一堆現有的插件，並且已經做到這一點的工具。

http://html5video.org/wiki/HTML5_Player_Comparison