同步视频和音频（最好不使用JavaScript） [英] Synchronize video and audio (preferably without JavaScript)
问题描述
如果我有HTML5 视频和音频元素，是否有干净的方式让它们保持同步？它们应该像一个包含音频轨道的视频文件，因此，手动推进一个轨道应该使另一个轨道与它一起。假设这两条曲目的持续时间相同。
If I have HTML5 video and audio elements, is there a clean way to keep them in sync? They should act like a video file that contains an audio track, so advancing one track manually should bring the other one along with it. Let's say the two tracks have the same duration.
我想要一个可以跨浏览器使用的解决方案，但我并不特别在意它是否适用于旧浏览器。如果可能的话，避免使用JavaScript也会很好。否则，一个简单的JavaScript库将会是最好的 - 这只会要求我们同步哪些音轨并处理其他音轨。
I'd like a solution that works across browsers, but I don't particularly care if it works on older browsers. It would also be nice to avoid the use of JavaScript if possible. Otherwise, a dead-simple JavaScript library would be best -- something that only asks for which tracks to synchronize and takes care of the rest.
我已经看过<一个href =https://github.com/Fyrd/caniuse/issues/1092 =nofollow> mediagroup ...但它看起来只能在Safari中运行。我查看了音轨 ......但用户必须在Firefox中启用该功能。
I've looked into mediagroup... but it looks like it only works in Safari. I've looked into audioTracks... but the user has to enable the feature in Firefox.
我已查看 Popcorn.js ，这是一个看起来专为这项任务而设计的JavaScript框架......但看起来似乎一年之内没有任何活动。除此之外，我能找到的唯一演示是将文本或幻灯片等内容同步到视频，而不是音频到视频。
I've looked into Popcorn.js, which is a JavaScript framework that seems designed for this task... but it looks like there hasn't been any activity in over a year. Besides that, the only demonstrations I can find are of synchronizing things like text or slides to video, not audio to video.
推荐答案
您可以使用 Promise.all（）， fetch（）来检索媒体资源为 Blob ， URL.createObjectURL（）创建资源的 Blob URL ; canplaythrough 事件和 Array.prototype.every（）来检查每个资源是否可以播放;当两个资源都可以播放时，在每个资源上调用 .play（） $ b
You can use Promise.all(), fetch() to retrieve media resource as a Blob, URL.createObjectURL() to create a Blob URL of resource; canplaythrough event and Array.prototype.every() to check if each resource can play; call .play() on each resource when both resources can play
在问题中说清楚。我的意思是说，这两首曲目
应该保持同步，就像播放一个带有音频的常规视频文件一样。
I didn't make it clear in the question. I meant that the two tracks should stay in sync as though playing a regular video file with audio.
创建时间戳变量，当set变量大于最小值时，利用 seeked 事件更新元素的 .currentTime 延迟以防止递归调用 .currentTime 。
One approach could be to create a timestamp variable, utilize seeked event to update .currentTime of elements when set variable is greater than a minimum delay to prevent .currentTime being called recursively.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button>load media</button>
<br>
<div id="loading" style="display:none;">loading media...</div>
<script>
var mediaBlobs = [];
var mediaTypes = [];
var mediaLoaded = [];
var button = document.querySelector("button");
var loading = document.getElementById("loading");
var curr = void 0;
var loadMedia = () => {
loading.style.display = "block";
button.setAttribute("disabled", "disabled");
return Promise.all([
// `RETURN` by smiling cynic are licensed under a Creative Commons Attribution 3.0 Unported License
fetch("https://ia600305.us.archive.org/30/items/return_201605/return.mp3")
, fetch("http://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4")
])
.then(responses => responses.map(media => ({
[media.headers.get("Content-Type").split("/")[0]]: media.blob()
})))
.then(data => {
for (var currentMedia = 0; currentMedia < data.length; currentMedia++) {
(function(i) {
var type = Object.keys(data[i])[0];
mediaTypes.push(type);
console.log(data[i]);
var mediaElement = document.createElement(type);
mediaElement.id = type;
var label = document.createElement("label");
mediaElement.setAttribute("controls", "controls");
mediaElement.oncanplaythrough = () => {
mediaLoaded.push(true);
if (mediaLoaded.length === data.length
&& mediaLoaded.every(Boolean)) {
loading.style.display = "none";
for (var track = 0; track < mediaTypes.length; track++) {
document.getElementById(mediaTypes[track]).play();
console.log(document.getElementById(mediaTypes[track]));
}
}
}
var seek = (e) => {
if (!curr || new Date().getTime() - curr > 20) {
document.getElementById(
mediaTypes.filter(id => id !== e.target.id)[0]
).currentTime = e.target.currentTime;
curr = new Date().getTime();
}
}
mediaElement.onseeked = seek;
mediaElement.onended = () => {
for (var track = 0; track < mediaTypes.length; track++) {
document.getElementById(mediaTypes[track]).pause()
}
}
mediaElement.ontimeupdate = (e) => {
e.target.previousElementSibling
.innerHTML = `${mediaTypes[i]} currentTime: ${Math.round(e.target.currentTime)}<br>`;
}
data[i][type].then(blob => {
mediaBlobs.push(URL.createObjectURL(blob));
mediaElement.src = mediaBlobs[mediaBlobs.length - 1];
document.body.appendChild(mediaElement);
document.body.insertBefore(label, mediaElement);
})
}(currentMedia));
}
})
};
button.addEventListener("click", loadMedia);
</script>
</body>
</html>
plnkr http://plnkr.co/edit/r51oh7KsZv8DEYhpRJlL?p=preview
这篇关于同步视频和音频（最好不使用JavaScript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
