打<audio> + <video>从Javascript

Question

正确方法我用<音频>和<视频>与预紧=“无”，然后尝试从Javascript打得到我Firefox和Chrome不同的结果。

比方说，我是用预紧=“自动”或预装=“元数据”：

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

，似乎工作在Firefox和Chrome的罚款，但我想用预紧=“无”，然后Chrome dossent play。

所以我想这个代码预紧=“无”：

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 的Chrome 25.0.1364.172米

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

编辑：

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

在第三个音频播放器中，似乎Firefox 20.0.1 dossent在与addEventListener（）一起使用时正确支持canplay事件，因为它在load（）之后触发，它在play（）之后触发，并且在触发时通过声音这似乎是戏剧应该奏效的方式。 使用.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，你最好的选择，国际海事组织，是使用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中，有必要设置preload="auto";附加一个事件时，该事件canplay，就像在第三功能。

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”将不会执行任何操作，但它会为第一位玩家播放。但是，如果顶级球员首先以任何方式进行比赛 - 播放按钮或链接 - 那么其他两个“尤达”链接将突然发挥作用。

此外，如果您在重新加载后首先点击第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