我有来自一个来源的曲目，静音，我想使用元素播放背景音乐。曲目包含一些时间紧迫的元素。
在 HTML5 / Javascript 中同步这两种不同的媒体播放器的选项是什么？会给主时钟，因为它的音频播放对时间非常敏感 - 时不时丢失视频帧并不重要。
【问题讨论】：
标签： javascript html video audio
用一个非常简单的技巧很容易；）
<video id="myvideo" controls muted loop>
<source src="sample_video_no_sound.mp4" type="video/mp4"/>
<audio id="myaudio">
<source src="sound.mp3" type="audio/mpeg"/>
</audio>
</video>
<script>
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
var change_time_state = true;
myvideo.onplay = function(){
myaudio.play();
if(change_time_state){
myaudio.currentTime = myvideo.currentTime;
change_time_state = false;
}
}
myvideo.onpause = function(){
myaudio.pause();
change_time_state = true;
}
</script>
【讨论】：
没有可靠的解决方案。支持多流同步的唯一 html5 功能是 mediaGroup。它被 Chrome 取消发布，并被 w3c 弃用。
【讨论】：
Here 是一个使用 Popcorn.js 的简单解决方案，灵感来自this 文章。
$(function(){
var medias = {
audio: Popcorn("#narration"),
video: Popcorn("#video")
},
loadCount = 0,
events = "play pause timeupdate seeking volumechange".split(/\s+/g);
// iterate both media sources
Popcorn.forEach(medias, function(media, type) {
// when each is ready...
media.on("canplayall", function() {
// trigger a custom "sync" event
this.emit("sync");
// Listen for the custom sync event...
}).on("sync", function() {
// Once both items are loaded, sync events
if (++loadCount == 2) {
// Uncomment this line to silence the video
//medias.video.mute();
// Iterate all events and trigger them on the video
// whenever they occur on the audio
events.forEach(function(event) {
medias.video.on(event, function() {
// Avoid overkill events, trigger timeupdate manually
if (event === "timeupdate") {
if (!this.media.paused) {
return;
}
medias.audio.emit("timeupdate");
return;
}
if (event === "seeking") {
medias.audio.currentTime(this.currentTime());
}
if (event === "volumechange") {
if(this.muted()) {
medias.audio.mute();
} else {
medias.audio.unmute();
}
medias.audio.volume(this.volume());
}
if (event === "play" || event === "pause") {
medias.audio[event]();
}
});
});
}
});
});
}); <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script type="text/javascript" src="https://static.bocoup.com/js/popcorn.min.js"></script>
<audio id="narration">
<source src="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorn101/popcorn101.ogg">
</audio>
<video id="video" controls="controls">
<source src="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorntest.mp4">
</video>【讨论】：
Mikko Ohtamaa 在评论中提供了一个解决方案，我实际上认为这是最好的选择 - 它不需要框架，也不需要您编辑视频文件。
本质上，只需在“取消静音”时从视频元素中获取当前时间，并将该时间应用于音频元素。有些代码可能如下所示：
function unmute() {
var vid = document.getElementById("video");
var aud = document.getElementById("audio");
aud.currentTime = vid.currentTime;
aud.play();
}
【讨论】：
vid.currentTime将为空。
试试 VideoJS。在页面加载并准备就绪时开始播放视频时，您可以触发一个函数，该函数将开始播放页面中包含的音乐。
【讨论】：
通过将音乐包含在您的视频文件本身中，可以实现相同的效果。 html5 视频播放器控件将具有静音功能。
【讨论】：