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>
答案 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)
考虑所有浏览器可能会过度杀戮,因为您会考虑许多不符合标准的旧浏览器和浏览器。
如果您想确保客户端的浏览器可以播放您的视频,可以执行以下几项操作:
<object>
或<embed>
代码如果以上内容对您不起作用,请尝试重新编码您的视频文件,因为它可能使用不太流行的容器进行编码;至少要确保视频编码格式与文件扩展名匹配。还要确保视频的图片和音频分辨率不会太高。