同步视频和音频（最好不使用JavaScript）

如果我有HTML5

video

和

audio

元素，有没有干净的方法来保持它们的同步？它们的行为应该类似于包含音频曲目的视频文件，因此手动推进一个曲目时，另一个曲目也会随之移动。假设这两个音轨的持续时间相同

我想要一个跨浏览器的解决方案，但我并不特别关心它是否能在较旧的浏览器上工作。如果可能的话，最好避免使用JavaScript。否则，一个死气沉沉的简单JavaScript库将是最好的——它只要求同步哪些曲目并处理其余的曲目

我已经调查过。。。但它看起来只在狩猎中起作用。我已经调查过。。。但是用户必须在Firefox中启用该功能

---

我已经研究了，这是一个JavaScript框架，似乎是为这个任务设计的。。。但看起来已经一年多没有任何活动了。除此之外，我能找到的唯一演示是将文本或幻灯片同步到视频，而不是音频到视频。

据我所知，这在纯HTML中是不可能的

---

您可以使用

和

事件的
currentTime
属性连续重新同步视频和音频。
您可以使用
Promise.all（）
，
fetch（）
将媒体资源检索为
Blob
，
URL.createObjectURL（）
创建资源的
Blob URL
canplay通过
事件和
Array.prototype.each（）
检查每个资源是否可以播放；当两个资源都可以播放时，对每个资源调用
.play（）

我在问题中没有说清楚。我的意思是这两条轨道
应该保持同步，就像播放常规视频文件和音频一样

一种方法是创建一个时间戳变量，当set变量大于最小延迟时，利用
查找的
事件更新元素的
.currentTime
，以防止递归调用
.currentTime



加载媒体


正在加载媒体。。。
var mediaBlobs=[]；
var mediaTypes=[]；
var mediaLoaded=[]；
var按钮=document.querySelector（“按钮”）；
var加载=document.getElementById（“加载”）；
var curr=void 0；
var loadMedia=（）=>{
loading.style.display=“block”；
setAttribute（“禁用”、“禁用”）；
回报你的承诺([
//微笑愤世嫉俗的“RETURN”是根据知识共享署名3.0未经授权的许可证进行授权的
取回（“https://ia600305.us.archive.org/30/items/return_201605/return.mp3")
，获取（“http://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4")
])
.then（responses=>responses.map（media=>({
[media.headers.get（“内容类型”）.split（“/”[0]]：media.blob（）
})))
。然后（数据=>{
对于（var currentMedia=0；currentMedia{
mediaLoaded.push（true）；
如果（mediaLoaded.length==data.length
&&mediaLoaded.every（布尔值））{
load.style.display=“无”；
对于（var track=0；track{
如果（！curr | | new Date（）.getTime（）-curr>20）{
document.getElementById(
mediaTypes.filter（id=>id！==e.target.id）[0]
).currentTime=e.target.currentTime；
curr=新日期（）.getTime（）；
}
}
mediaElement.onSeek=seek；
mediaElement.OneNoded=（）=>{
对于（var track=0；track{
e、 target.previousElementSibling
.innerHTML=`${mediaTypes[i]}currentTime:${Math.round（e.target.currentTime）}
`；
}
数据[i][type]，然后（blob=>{
push（URL.createObjectURL（blob））；
mediaElement.src=mediaBlobs[mediaBlobs.length-1]；
document.body.appendChild（mediaElement）；
document.body.insertBefore（标签、mediaElement）；
})
}(媒体),；
}
})
};
按钮。addEventListener（“单击”，加载媒体）；
是否可以在外部程序中预先将音频添加到视频中？这将是同步这两个元素的最可靠的方法。“没有JavaScript”，我想说这是不可能的，但您基本上需要监听这两个元素上的缓冲区事件，并阻止它们。然后，在加载足够的数据后继续播放。重复。@Glen Despaux我也希望避免这种情况……你可能会问太多关于HTML自己能做什么的问题，那么…@Glen Despaux是对的，HTML处理的是文档的结构而不是它的行为。我认为这种方法不太管用。。。看看这个演示的源代码，看起来时间只同步了一次。如果使用
timeupdate
事件持续地重新同步它们，效果可能会更好