问题描述
我需要将静音视频和音频文件加载到相同的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视频标签中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!