假设我想同步两个视频并避免回声。我的意思是两个轨道应该保持同步，就像播放带有音频的常规视频文件一样。
<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>
最佳答案
更新
经过一些实验，我发现仅仅微秒的偏移量就很好，但对于同步视频来说并不是必需的。在演示 2 中，我们有视频标签 A 和 B。A 有 4 个 eventListener() 和视频 B 作为回调。 play()、pause() 和 seek 在 A 和 B 之间同步，其中 A 是“主”，B 是“从” .
演示 2
<!DOCTYPE html>
<html>
<head>
<style>
html {
font: 400 16px/1.5 Consolas
}
section {
display: flex;
justify-content: space-around;
width: 100%;
height: calc(100% - 160px);
}
button {
padding: 0;
border: 0;
}
</style>
</head>
<body>
<section>
<video id="A" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls width='240' height='135'></video>
<video id="B" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls width='240' height='135'></video>
</section>
<script>
var A = document.getElementById("A");
var B = document.getElementById("B");
A.addEventListener("play", function() {
B.play();
});
A.addEventListener("pause", function() {
B.pause();
});
A.addEventListener("seeking", function() {
B.currentTime = A.currentTime;
});
A.addEventListener("seeked", function() {
B.currentTime = A.currentTime;
});
</script>
</body>
</html>async 和 await 几个月前才在所有主要浏览器*中发布。 Promise 的所有行为和流程都在 await 中。以下是异步使用 2 个函数所涉及的基本语法:
async function functionName() {
var A = await functionA();
var B = await functionB();
var C = A + B;
return C;
}
引用文献位于帖子底部
演示
/* For details on how this demo controls the <form>,
|| see HTMLFormControlsCollection in References
*/
var x = document.forms.ui.elements;
var playM = x.playM;
var pauseM = x.pauseM;
/* Register the buttons to the click event
|| callback is asyncCall()
|| Register a video tag to the ended event
|| callback is just an anonymous function to
|| display 'IDLE' message when the videos have ended
*/
/* Avoid the use of on event handlers, use event
|| listeners instead. For details on Event Listeners
|| see addEventListener() in References
*/
playM.addEventListener('click', asyncCall, false);
pauseM.addEventListener('click', asyncCall, false);
document.querySelector('video').addEventListener('ended', function(e) {
x.display.value = 'IDLE';
}, false);
/* This callback is an Async Function which uses a key
|| word called "await". await waits for a function
|| to start then moves on to the next await to
|| see when it's ready to start. The players are
|| playing asynchronously (i.e. congruently, i.e i.e. in
|| parallel). Normally JavaScript is synchronous because
|| the evaluation and execution of a function is the
|| only thing a browser would do, so everything else
|| had to wait their turn. That is called: "blocking".
|| While await is waiting, the browser is allowed to do
|| other processing. For details on async and await,
|| see References.
*/
async function asyncCall(e) {
var A = document.getElementById("A");
var B = document.getElementById("B");
var status;
/* if/if else condition to determin which button was
|| actually clicked. Use e.target to get the origin
|| of event (i.e. clicked button). For details on
|| Event.target, see References
*/
// if the button's #id is 'playM'...
if (e.target.id === 'playM') {
var mediaA = await mPlay(A);
x.outA.value = performance.now(mediaA);
var mediaB = await mPlay(B);
x.outB.value = performance.now(mediaB);
status = mPlay(B);
// otherwise if the button's #id is 'pauseM'...
} else if (e.target.id === 'pauseM') {
var mediaA = await mIdle(A);
x.outA.value = performance.now(mediaA);
var mediaB = await mIdle(B);
x.outB.value = performance.now(mediaB);
status = mIdle(B);
} else {
status = 'IDLE';
}
x.display.value = status;
return status;
}
// Simple function used in asyncCall() to play
function mPlay(ele) {
var state = 'PLAYING';
ele.play();
return state;
}
// Simple function used in asyncCall() to pause
function mIdle(ele) {
var state = 'IDLE';
ele.pause();
return state;
}html {
font: 400 16px/1.5 Consolas
}
section {
display: flex;
justify-content: space-around;
width: 100%;
height: calc(100% - 160px);
}
button {
padding: 0;
border: 0;
}
#playM:before {
content: '▶';
font-size: 32px
}
#pauseM::before {
content: '⏸';
font-size: 32px;
}<section>
<video id="A" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls width='160' height='90'></video>
<video id="B" src="http://media.w3.org/2010/05/sintel/trailer.webm" controls width='160' height='90'></video>
</section>
<form id='ui'>
<fieldset>
<legend>Asynchronous Playback</legend>
<button id='playM' type='button'></button>
<button id='pauseM' type='button'></button>
<output id='display'></output><br><br>
<label for='outA'>Source A: </label>
<output id='outA'></output><br><br>
<label for='outB'>Source B: </label>
<output id='outB'></output><br><br>
</fieldset>
</form>引用文献
Event.target.addEventListener('事件'、函数、false)
关于javascript - 如何在 HTML 中完美同步媒体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47507221/