Question

使用＆lt; audio＆gt;时，我在Firefox和Chrome上获得了不同的结果和＆lt;视频＆gt;使用preload =“none”，然后尝试从Javascript播放。

假设我使用preload =“auto”或preload =“metadata”：

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

这似乎在Firefox和Chrome中运行良好，但我想使用preload =“none”然后使用Chrome dossent play。

所以我正在使用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

我不知道这是否是正确的方法。

我正在使用： Firefox 20.0.1 Chrome 25.0.1364.172 m

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

修改：

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

在第3个音频播放器中，似乎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（）函数dossent中添加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"时，有必要在load()更改之前调用src。你的第二个audio没有预加载，所以你的功能必须是这个：

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

然后，似乎在Firefox中，在将事件附加到preload="auto";事件时需要设置canplay，就像在第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会有一些奇怪的行为。对于所有三个玩家，重新加载页面并单击“大电子”链接将正确播放。

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

此外，如果您在重新加载后首先单击第二个或第三个“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

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

2 个答案: