将带有单独音频的静音视频加载到HTML5视频标签中

问题描述

我需要将静音视频和音频文件加载到相同的html5视频标签中.我试图找到它，但是我只找到了关于音频标签的文本，这不是我想要的.

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.

我需要这样的东西:

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

推荐答案

这不是source的工作方式. source元素确实是替代选择:如果浏览器不支持其中一个，它将转到下一个，直到达到受支持和播放的一个，然后只有一个将播放(其他将为忽略).

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

在同一video/audio标签下不能同时播放两个源(视频和音频).正如您在网上发现的那样，如果要具有两个媒体元素(静音的视频和音频)，则将需要两个媒体标签.

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.

然后，至少在理论上(如果我没有误会)，可以使用mediagroup来控制和同步audio和video元素，以便将它们一起流化；但是mediagroup并没有得到很好的支持...或者至少我无法使其工作，但是您可能想研究一下它，因为正如我所说，我可能误解了它的工作原理:-S

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

一种替代解决方案是将audio放在video中(作为后备代码)，然后使用JavaScript对其进行同步.像这样:

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>

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

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