打<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