所有浏览器都支持视频吗？答案

【问题标题】：Supporting videos in all browsers?所有浏览器都支持视频吗？
【发布时间】：2016-03-30 18:52:02
【问题描述】：

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

我有 3 种文件格式 (.ogg/.ogv?)、(.mp4) 和 (.webm) 的视频，从 caniuse 看来，这 3 种文件格式都将得到支持。我的问题是，我可以将视频作为另一个来源添加到 html 中来完成我所追求的这种“故障安全”方法吗？

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

<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 标签与每个不同的@ 987654326@，或者有没有更优雅的方法来完成这个？

像这样：

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

感谢您的帮助！

【问题讨论】：

标签： html video cross-browser

【解决方案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>

【讨论】：

太好了，我一回家就试试这个！感谢洞察力和快速响应！
您可能想用不同的浏览器进行彻底的测试。当我遇到类似问题时，我发现有些浏览器不会尝试所有来源，直到找到适合他们的来源，但如果他们不喜欢最上面的来源，它们就会失败。
@MrLister 您能否添加与上述问题有关的浏览器？我已经在 Chrome、FF、IE、Opera 和 Safari 中使用了该代码，没有问题。
@j08691 不幸的是，我现在找不到出错的浏览器和/或操作系统，但你必须相信我，我曾经做过测试，我发现@987654322 .mp3 源在 .ogg 源之前的 @ 元素在任何地方都不起作用，而反过来（首先是 .ogg 源，然后是 .mp3）工作正常。
@MrLister - 我不怀疑你，我只是想添加一个明确列出有问题的浏览器的注释。我想知道这是否更多是音频而不是视频的问题。

【解决方案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>

享受吧！

【讨论】：