將帶有單獨音頻的靜音視頻加載到HTML5視頻標籤

Question

我需要將靜音視頻和音頻文件加載到相同的html5視頻標籤中。我試圖找到這個，但我只找到關於音頻標籤的文本，這不是我正在尋找的。

我需要的是這樣的：

<video controls="controls" poster="poster.jpg" width="640" height="360"> 
    <source src="08_gestao_documental_autoridades_brasileiras_SEM_AUDIO.mp4" type="video/mp4"> 
    <source src="autoridades_brasileiras.mp3" type="audio/mp3"> 
</video> 

Answer 1

這不是如何source作品。 source元素是真正的選擇：如果瀏覽器不支持一個，它將進入下一個，直到達到支持和播放的那個，然後只有那個播放（其他的將被忽略）。

在同一個video/audio標記下，您不能同時播放兩個來源（視頻和音頻）。正如您在網上找到的那樣，如果您想要兩個媒體元素（靜音視頻和音頻），則需要兩個媒體標籤。

然後，至少在理論上（如果我沒有誤解），您可以使用mediagroup來控制和同步audio和video元素，以便它們流在一起;但是mediagroup沒有得到很好的支持......或者至少我還沒有能夠使它工作，但你可能想要看看它，因爲，正如我所說，我可能誤解了它是如何工作的：-S

---

一種替代解決方案是在video（作爲後備代碼）中使用audio，然後使用JavaScript對它們進行同步。類似這樣的：

<video id="myvideo" controls muted> 
    <source src="path/to/video.mp4" type="video/mp4" /> 
    <audio id="myaudio" controls> 
     <source src="path/to/audio.mp3" type="audio/mpeg"/> 
    </audio> 
</video> 

<script> 
var myvideo = document.getElementById("myvideo"); 
var myaudio = document.getElementById("myaudio"); 
myvideo.onplay = function() { myaudio.play(); } 
myvideo.onpause = function() { myaudio.pause(); } 
</script> 

你可以see an example on this JSFiddle。