javascript - flowplayer:如果首先指定 webm，chr​​ome 将不会加载 mp4

Question

flowplayer html5 5.4.6
35 岁以上

在 flowplayer html5 中，在 chrome 上我一直收到 html5: video encoding not supported 或 html5: video not found。

我通过 javascript 加载 flowplayer 并定义了一个播放列表:

$(function () {
    $('#fp').flowplayer({
        playlist:[ [
            { webm: "/usermedia/update_sets/140704/videos/02-480p.webm"},
            { mp4: "/usermedia/update_sets/140704/videos/02-480p.mp4"} ] ],                     
        splash: true
    });
});

我检查了 mp4 的视频格式，一切正常。我什至可以将 mp4 拖放到 chrome 中，它可以播放 np。

在 chrome 开发工具中，我打开了网络选项卡，可以看到它试图打开 webm 文件，获取部分内容，然后取消获取。它从不尝试加载 mp4 文件。

所以我试着颠倒顺序，让 mp4 成为播放列表中的第一个。瞧。视频播放没问题。我还在 Firefox 中进行了测试，它可以正常工作。

问题是，如果在播放列表中首先指定 webm 源，为什么 flowplayer html5 在 chrome 上会失败？

='(

Answer 1

看看here

希望对你有帮助

浏览器检查哪些有效，但它从上到下看起来，所以如果第一个对他有效，他会使用它，所以改变顺序，它应该可以工作

给你举个例子

<div class="flowplayer">
<video>
  <source type="video/webm" src="http://example.com/intro.webm">
  <source type="video/mp4" src="http://example.com/intro.mp4">
  <source type="video/ogg" src="http://example.com/intro.ogv">
  </video>
</div>

现在 webm 会先行，如果您将其更改为:

<div class="flowplayer">
<video>
  <source type="video/mp4" src="http://example.com/intro.mp4">
  <source type="video/webm" src="http://example/intro.webm">
  <source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>

.mp4 先走