跨浏览器 HTML5 视频兼容性不适用于多种视频格式答案

【问题标题】：Cross-browser HTML5 video compatibility not working with multiple video formats跨浏览器 HTML5 视频兼容性不适用于多种视频格式
【发布时间】：2014-11-13 01:34:45
【问题描述】：

我在 HTML <video> 标签中有不同的视频文件，如下所示：

<video autoplay="" id="video" preload="auto" style="display: inline-block;">
        <source src="../register.mp4" type="video/mp4">
        <source src="../register.webm" type="video/webm">
        <source src="../register.ogv" type="video/ogg">
</video>

但由于某种原因，在 chrome 中它不起作用。仅当我摆脱 MP4 源时它才有效，但它在 IE 中不起作用...不确定这里发生了什么或解决此问题的最佳方法。

我已经按照this问题中的建议通过了为所有浏览器创建视频文件的步骤，但它并没有解决我的问题。

【问题讨论】：

标签： html video cross-browser

【解决方案1】：

您列出来源的顺序很重要。在 Chrome 中，一旦 .MP4 视频无法加载，其他来源甚至都不会尝试加载，因此只需将.MP4 source 作为最后一个源元素，它修复了所有内容。

<video autoplay="" id="video" preload="auto" style="display: inline-block;">
        <source src="../register.webm" type="video/webm">
        <source src="../register.ogv" type="video/ogg">
        <source src="../register.mp4" type="video/mp4">
</video>

【讨论】：