将无声视频和独立音频加载到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>

- Webill

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上查看一个例子。

- Alvaro Montoro

---

优秀的方法，但需要稍作调整。如果视频轨道没有音频，则 UI 上将无法使用音频控件，因此用户无法操作。我的方法是在视频上禁用控件，并将音频放置在其下方，并从音频控件控制视频进度。所有工作都很好，除了全屏图标不可用...感谢您发布这篇文章，因为我已经苦苦挣扎了两天，不知道有多个源在视频标记下按顺序处理... - Moonwalker

使用此方法同步音频和视频是否有任何缺点？我一直在寻找一种方法来实现这个，你的答案是一个福音。 - vbNewbie

我猜测<audio>标签不一定要放在<video>标签内。将一个标签放在另一个标签内并不一定会使它们同步。实际上，如果网络条件不好或文件太大，不能保证它们同步。即使半秒钟的异步也会非常明显。为了避免这种情况，您需要编写更多的JavaScript代码来不断检查两个元素的进度，并调整它们的播放时间以强制同步。 - danioyuan

@AlvaroMontoro，考虑在你的示例代码中添加一个简单的寻找方法 myvideo.onseeking = function() { myaudio.currentTime = myvideo.currentTime; } - Siva Manasan

这个解决方案在iOS或WebOS（电视）上不适用，因为它们只允许同时播放一个媒体。如果你同时播放两个，其中一个将自动暂停。有人知道任何解决方案吗？ - italodeandra