视频标签的可用性

Firefox不支持本机MP4/H.264,它使用系统上可用的编解码器,如果没有正确的H.264编解码器,视频将无法播放,您将收到错误消息。

另请参阅 http://en.wikipedia.org/wiki/HTML5_video#Supported_video_formats

回退内容仅在浏览器不理解的情况下使用 video 元素,不受支持的编解码器不会导致使用回退。

为了确保视频在所有主要浏览器中播放,无论操作系统如何,您都必须使用 source 要素

目前使用的是WEBM VP8/9、OGG Theora和MP4 H.264。

<video preload="auto" autobuffer controls autoplay>
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    <source src="video.mp4" type="video/mp4">

    <iframe src="http://player.vimeo.com/video/123456" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</video>

您也可以尝试使用 error event 上 视频 元素或在最后 来源 元素,并实现一个基于JavaScript的回退,在该回退中替换 视频 元素及其内容。

W3规格示例:

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#source-default-media