1

我使用 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 不显示替代内容，在我的情况下vimeo是 iframe 中的视频？
  • 有没有办法确保并检查我的视频将显示在所有机器上的所有浏览器中？

谢谢！

4

1 回答 1

3

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事件，并实现基于 JavaScript 的回退，在其中将元素替换为其内容。videosourcevideo

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

于 2013-10-04T18:03:21.703 回答