Question

HTML 5视频在Chrome，Mozilla和Android设备上工作，但不在Safari和IE中工作。

在所有设备和平台上播放的一种视频格式？请提供相关代码或链接

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
      <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
      <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Answer 1

很遗憾，目前没有一种格式可以在所有浏览器上播放。

如果您想要了解当前情况，那么此链接页面中的表格通常是最新的（包括链接而不是复制表格，因为信息变化太多）：

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

作为一般规则，MP4是最受支持的容器格式，但即使在这里，您也可以使用多个配置文件和多个配置文件等。

有一个资源可以生成示例HTML5代码，以支持尽可能多的浏览器（通常称为Video for Everybody）。我不确定它的更新频率：

http://v4e.thewikies.com

以下是仅HTML5播放的示例（没有闪回后退，但如果您愿意，可以添加）：

<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
</video>
<p>
    <strong>Download video:</strong> <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a>
</p>

您会看到，为了获得最大支持，特别是对于旧版浏览器，您实际上需要多种不同格式的视频。

然而，对于大多数人来说，使用MP4作为容器而H.264作为编解码器将会覆盖大多数用户。

Answer 2

您的IE和Safari版本是什么？

请尝试在视频代码中添加消息，看看是否可以看到：

 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Answer 3

考虑所有浏览器可能会过度杀戮，因为您会考虑许多不符合标准的旧浏览器和浏览器。

如果您想确保客户端的浏览器可以播放您的视频，可以执行以下几项操作：

实施 modernizer https://modernizr.com/
对旧版浏览器使用“后备”，例如<object>或<embed>代码

如果以上内容对您不起作用，请尝试重新编码您的视频文件，因为它可能使用不太流行的容器进行编码;至少要确保视频编码格式与文件扩展名匹配。还要确保视频的图片和音频分辨率不会太高。

html5视频不支持所有浏览器

3 个答案: