将带有单独音频的静音视频加载到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

一种替代解决方案是将audio内部video(作为回退代码),然后使用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>

你可以在这个JSFiddle上看到一个例子.