2

当使用 <audio> 和 <video> 与 preload="none" 然后尝试从 Javascript 播放时，我在 Firefox 和 Chrome 中得到不同的结果。

假设我使用的是 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

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

我正在使用：Firefox 20.0.1 Chrome 25.0.1364.172 m

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

编辑 ：

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

在第三个音频播放器中，似乎 Firefox 20.0.1 dossent 在与 addEventListener() 一起使用时正确支持 canplay 事件，因为它在 load() 之后触发，它在 play() 之后触发，并且在擦洗声音时也会触发成为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 次，以此类推。

4

2 回答 2

3

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

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

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

编辑：好的。似乎在 Chrome 中，当 HTML被更改时，必须在播放前preload="none"调用。你的第二个没有预加载，所以你的功能需要是这样的：load()srcaudio

  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"，但如果不调用它就不会播放。请注意，第二个播放器不是必需的，它也在preload="none"HTML 标记中。

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

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

此外，如果您在重新加载后首先单击第二个或第三个“Yoda”链接，然后单击顶部玩家，则先前单击的“Yoda”（之前未播放）将在顶部播放器停止后自行开始播放.

可以说他们有一些错误需要解决。

于 2013-05-04T02:42:17.567 回答
1

我认为正确的方法是使用现有的解决方案，例如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

于 2013-05-05T07:58:21.203 回答