从 Javascript 播放 <audio> + <video> 的正确方法

Question

我在使用

假设我使用的是 preload="auto" 或 preload="metadata" ：

audio.src = "filename";
audio.play();

这似乎在 Firefox 和 Chrome 中都可以正常工作，但我想使用 preload="none" 然后 Chrome dossent 播放。

所以我正在尝试使用 preload="none" 的代码：

audio.src = url;

audio.load();

audio.addEventListener('canplay', function(e) {
   audio.play(); // For some reason this dossent work in Firefox
}, false);

audio.play(); // Added this so Firefox would play

我不知道这样做是否正确。

我正在使用： 火狐 20.0.1 铬 25.0.1364.172 米

我做了一个演示：http://netkoder.dk/test/test0217.html

编辑：

在第二个音频播放器（在演示页面上）似乎使用 preload="none" 时必须使用 load()。 但是在 load() 之后立即使用 play() 是正确的，还是在播放之前使用事件等待文件加载的正确方法？

在第三个音频播放器中，似乎 Firefox 20.0.1 dossent 在与 addEventListener() 一起使用时正确支持 canplay 事件，因为它在 load() 之后触发，它在 play() 之后触发，并且在擦洗声音时也会触发dossent 似乎是 canplay 应该工作的方式。 使用 .oncanplay 确实有效。

所以下面的代码似乎可以工作：

  function afspil2(url) {

     afspiller2.src = url;
     afspiller2.load(); // use load() when <audio> has preload="none"
     afspiller2.play();

  }

  function afspil3(url) {

     afspiller3.src = url;
     afspiller3.load(); // use load() when <audio> has preload="none"

     //afspiller3.addEventListener('canplay', function() { // For some reason this dossent work correctly in Firefox 20.0.1, its triggers after load() and when scrubbing
     //   afspiller3.play();
     //}, false);

     afspiller3.oncanplay = afspiller3.play(); // Works in Firefox 20.0.1

  }

我更新了演示以包含更改：http://netkoder.dk/test/test0217.html

我在 afspil3() 函数中添加 addEventListener 的方法看起来不错，因为第一次调用该函数时，addEventListener 中的代码被调用了 1 次。第二次调用函数，addEventListener里面的代码被调用了2次，然后是3次，以此类推。

Answer 1

这是因为您的audio 标记缺少必需的src 属性或<source> 标记。当我将它们添加到您的演示中时，所有 3 名玩家都立即开始在 Chrome 和 FF 中工作。

另外，我最近发现src不能是空字符串，后来用JS改了。如果有一个原因你不能在 HTML 中设置 src，你最好的选择，IMO，是用 Javascript 创建 audio 元素：

var audio = new Audio();
audio.src = url;
audio.controls = true;
audio.preload = false;
// and so on

编辑：好的。似乎在Chrome中，当HTML为preload="none"时，当src改变时，需要在播放前调用load()。你的第二个audio 没有预加载，所以你的函数需要是这样的：

  function afspil2(url) {
     afspiller2.src = url;
     afspiller2.load(); // add load call
     afspiller2.play();
  }

那么，在 Firefox 中，似乎需要在将事件附加到 canplay 事件时设置 preload="auto";，就像在第 3 个函数中一样。

  function afspil3(url) {
     afspiller3.src = url;
     afspiller3.preload = "auto";
     afspiller3.load();
     afspiller3.addEventListener('canplay', function(e) {
        this.play(); // For some reason this dossent work in Firefox
     }, false);
  }

这看起来很奇怪，但是我测试了很多次，每次调用preload="auto"时它都会播放，但如果不调用它就不会播放。请注意，第二个播放器不是必需的，它也是 HTML 标记中的 preload="none"。

最后，如果页面上有多个<audio> 元素，Chrome 会出现一些奇怪的行为。对于所有三个玩家，重新加载页面并单击“大电子”链接将正常播放。

重新加载然后在第 2 位或第 3 位玩家上单击“Yoda”不会做任何事情，但它会为第一个玩家播放。但是，如果以任何方式首先播放顶级玩家 - 播放按钮或任一链接 - 然后其他两个“尤达”链接将突然起作用。

另外，如果您在重新加载后先点击第 2 或第 3 个“Yoda”链接，然后点击顶部玩家，则之前点击的“Yoda”（之前未播放）将在顶级玩家停止。

只要说他们有一些错误需要解决就足够了。

Answer 2

我认为正确的方法是使用现有的解决方案，例如http://mediaelementjs.com/

如果您真的对使用 js 播放音频和视频的最佳方式的详细信息感兴趣，请查看源代码： https://github.com/johndyer/mediaelement/tree/master/src/js

https://github.com/johndyer/mediaelement/blob/master/src/js/me-mediaelements.js