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

Answer 2

有人找到了在 iOS 上同时播放两种媒体的解决方案吗？