html5视频不支持所有浏览器

时间:2017-01-05 07:21:28

标签: javascript html video

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>

3 个答案:

答案 0 :(得分:2)

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

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

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

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

以下是仅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作为编解码器将会覆盖大多数用户。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

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

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