Question

我使用HTML自己的video代码而不是“旧”flash方式在我自己的网站上显示视频：

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

我在自己的计算机上使用3种不同的浏览器进行了测试：Chrome（30），Firefox（24）和IE（10）。它按预期工作。
然后我让其他用户在不同浏览器的不同机器上测试我的网站。不幸的是，它并不适用于所有机器，即使他使用与我相同的浏览器版本 Firefox向他显示以下错误：Video format or MIME type is not supported。

如何才能使相同的浏览器表现不同不同的机器？
为什么Firefox没有显示替代方案内容，在我的情况下是iframe中的vimeo视频？
有没有办法确保并检查我的视频是否会显示在所有机器上的所有浏览器中？

谢谢！

Answer 1

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>

您还可以尝试使用video元素或最后一个source元素上的error event，并实现基于JavaScript的回退，其中将video元素替换为它的内容。

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

视频标签的可用性

1 个答案: