Question

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

我有三种文件格式（.ogg / .ogv？），（。mp4）和（.webm）的视频，看起来caniuse似乎在3之间，将支持所有视频。我的问题是，我是否可以将视频添加到html作为另一个来源来实现这一目标＆＃39; fail safe＆＃39;接近我的方法？

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

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

我使用带有video属性的source标记加载视频，并使用.png作为海报，以防用户使用移动设备，我可以再添加2个{{1}每个不同video的标签，还是有更优雅的方法来实现这个目标？

像这样：

source

我很感激帮助！

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>

享受！

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

2 个答案: