将带有单独音频的静音视频加载到 HTML5 视频标签中 [英] Loading a mute video with a separate audio into a HTML5 video tag

问题描述

我需要将静音视频和音频文件加载到同一个 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"></视频>

解决方案

source 不是这样工作的.source 元素是真正的替代品:如果浏览器不支持一个，它将转到下一个，直到找到支持并播放的一个，然后只有那个会播放(以及其他将被忽略).

您不能在同一个 video/audio 标记下同时播放两个源(一个视频和一个音频).正如您在网上找到的，如果您想要两个媒体元素(静音视频和音频)，您将需要两个媒体标签.

然后，至少在理论上(如果我没有误解的话)，您可以使用 mediagroup 来控制和同步 audio 和 video 元素，以便它们一起流式传输；但是 mediagroup 没有得到很好的支持......或者至少我无法让它工作，但你可能想要调查它，因为正如我所说，我可能误解了它是如何工作的作品:-S

<小时>

另一种解决方案是将 audio 放在 video 中(作为备用代码)，然后使用 JavaScript 同步它们.像这样的:

<video id="myvideo" 控制静音><source src="path/to/video.mp4" type="video/mp4"/><audio id="myaudio" 控件><source src="path/to/audio.mp3" type="audio/mpeg"/></音频></视频><脚本>var myvideo = document.getElementById("myvideo");var myaudio = document.getElementById("myaudio");myvideo.onplay = function() { myaudio.play();}myvideo.onpause = function() { myaudio.pause();}</脚本>

您可以查看此 JSFiddle 上的示例.

I need to load a mute video and an audio file into the same html5 video tag. I tried to find this, but I only found texts about audio tag, which is not what I am looking for.

I need something like this:

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

解决方案

That's not how source works. The source elements are really alternatives: if the browser doesn't support one, it will go to the next, until it reaches one that is supported and played, then only that one will play (and the others will be ignored).

You cannot have two sources (a video and an audio) playing at the same time under the same video/audio tag. As you found online, if you want to have two media elements (the muted video and the audio) you will need two media tags.

Then, and at least in theory (and if I didn't misunderstand), you could use mediagroup to control and sync both audio and video elements so they are streamed together; but mediagroup is not well supported... or at least I haven't been able to make it work, but you may want to look into it because, as I said, I may have misunderstood how it works :-S

---

One alternative solution would be to have the audio inside the video (as the fallback code), then synchronize them using JavaScript. Something like this:

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

You can see an example on this JSFiddle.

这篇关于将带有单独音频的静音视频加载到 HTML5 视频标签中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！