Javascript 如何在HTML中完美同步媒体？

假设我想同步两个视频并避免回声。我的意思是，这两首歌应该保持同步，就像播放一个带有音频的常规视频文件一样

<video id="A" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls=""></video><br>
<p>Current Time:<span id="aTime"></span></p><br>
<video id="B" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls=""></video><br>
<p>Current Time:<span id="bTime"></span></p><br>
<button onclick="playM()">Play</button>
<button onclick="pauseM()">Pause</button>
<script>
var a = document.getElementById("A");
var b = document.getElementById("B");
function playM() {
a.play();
b.play();
}
function pauseM() {
a.pause();
b.pause();
}
a.ontimeupdate = function() {
document.getElementById("aTime").innerHTML = a.currentTime;
};
b.ontimeupdate = function() {
document.getElementById("bTime").innerHTML = b.currentTime;
};
a.onseeked = function() {
b.currentTime= a.currentTime;
};
b.onseeked = function() {
a.currentTime = b.currentTime;
};
</script>

当前时间：




当前时间：


玩
暂停
var a=document.getElementById（“a”）；
var b=document.getElementById（“b”）；
函数playM（）{
a、 play（）；
b、 play（）；
}
函数pauseM（）{
a、 暂停（）；
b、 暂停（）；
}
a、 ontimeupdate=函数（）{
document.getElementById（“aTime”）.innerHTML=a.currentTime；
};
b、 ontimeupdate=函数（）{
document.getElementById（“bTime”）.innerHTML=b.currentTime；
};
a、 onseek=函数（）{
b、 currentTime=a.currentTime；
};
b、 onseek=函数（）{
a、 currentTime=b.currentTime；
};

您可以使用纯JavaScript来实现这一点。这是一个很好的起点和参考。带有

oncuechange

函数的

currentTime

属性应该可以让您开始检查时间线中的更改并查找

尽管如此，我不理解您的限制（如果有的话），所以我不知道您为什么不使用已同步音频和视频的视频文件。

更新 经过一些实验，我发现仅仅微秒的偏移量是很好的，但对于同步视频来说并不是必需的。在演示2中，我们有视频标签A和B。A有4个

eventListener（）

和视频B作为回调<代码>播放（），

暂停（）

和

搜索

在A和B之间同步，A是“主”B是“从”

演示2

html{
字体：400 16px/1.5控制台
}
部分{
显示器：flex；
证明内容：周围的空间；
宽度：100%；
高度：计算（100%-160px）；
}
钮扣{
填充：0；
边界：0；
}
var A=document.getElementById（“A”）；
var B=document.getElementById（“B”）；
A.addEventListener（“播放”，函数（）{
B.玩（）；
});
A.addEventListener（“暂停”，函数（）{
B.暂停（）；
});
A.addEventListener（“查找”，函数（）{
B.当前时间=A.当前时间；
});
A.addEventListener（“seek”，函数（）{
B.当前时间=A.当前时间；
});

我的问题是否太简单或不清楚，以致无人回答？我确实做了很多研究，但什么也没发现。事实上，去年你的问题会更难回答，因为异步JavaScript很难实现。就在几个月前，

async

和

await

由除IE之外的所有浏览器发布（IE不是真正的浏览器，这是一个很大的错误）。看看我的答案。顺便说一句，我同步了两个相同的视频，以证明它们是真正同步的。通过在播放过程中收听，您将听不到回声。视频和音频可以同步，但如果它们完全不同，那么这样做是毫无意义的。请注意，视频的加载时间是以毫秒为单位记录的，它们之间的差异非常小，平均为@0.4毫秒。这相当于400微秒。非常感谢您的努力。我从你身上学到了很多东西。虽然您的解决方案更像是“如何在HTML中完美同步媒体？”。我已经找到了我最初寻找的东西，我将改变这个主题的标题。不管怎样，谢谢你，先生。在一个稍微不同的问题上，你需要帮助吗？或者，这是一个新问题，差异是否足够大？如果是前者，您可以将其添加到此帖子中。如果是后者，你最好把它作为一个新问题发布。不管怎样，如果可以的话，我会尽力帮忙的，快乐编码。刚刚看到你的编辑，所以警察不会喜欢的。你的原始文章和代码很好，我会为你回滚。我没有看到任何编辑历史，所以我试图记住OP（原始文章）。事实证明，通过尝试重新创建代码，我找到了另一种同步媒体的方法。只需将

D.click（）

添加到

A

回调函数，该函数在单击

A

按钮时基本上会单击

B

按钮。它可能比我的答案有更大的偏移量，但对我来说没有回声。嗯，似乎我必须对共同规则更加谨慎。谢谢布鲁夫为我编辑。我想我最好自己编辑它，并使用我的粗略代码。