在所有浏览器中支持视频？

Question

我建立了一个使用背景视频 (.mp4) 的网站，并且刚刚意识到它有时无法在某些浏览器中播放。我想知道是否有一种方法可以添加支持的文件类型，这样如果一个文件类型不显示，将播放下一个文件类型。

我有 3 种文件格式的视频 (.ogg/.ogv?)、(.mp4) 和 (.webm)，从 caniuse 看来，这三种格式都将得到支持.我的问题是，我是否可以将视频作为另一个来源添加到 html 中，以实现我要采用的这种 'fail safe' 方法？

这是我设置视频播放器的方式：

<video autoplay loop class="fillWidth">
   <source src="" type="video/mp4" width="1024" height="768" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class="poster hidden">
   <img src="" alt="">
</div>

我使用带有 source 属性的 video 标签加载视频，并使用 .png 加载海报以防用户使用移动设备，我可以再添加 2 个 video 标签每个都不同 source，或者有更优雅的方法来完成这个吗？

像这样：

<source src="" type="video/ogv" width="1024" height="768" />
<source src="" type="video/webm" width="1024" height="768" />

感谢您的帮助！

Answer 1

只需使用一个视频标签和多个源标签。浏览器会选择合适的来源。

例如：

<video autoplay loop class="fillWidth">
    <source src="vid.mp4" type="video/mp4" width="1024" height="768" />
    <source src="vid.ogv" type="video/ogv" width="1024" height="768" />
    <source src="vid.webm" type="video/webm" width="1024" height="768" />
    Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

Answer 2

我希望我没有那么晚。这是我得到的解决方案，我在 Chrome、Firefox、Microsoft Edge、Opera Mini 和 Internet Explora 中对其进行了测试。全部有效

<video controls width="250">
    <source src="/media/examples/flower.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>

尽情享受吧！

在所有浏览器中支持视频？

Supporting videos in all browsers?

html

video

cross-browser