Я пытаюсь воспроизвести два видео в синхронизации в html5. Вот мой подход.
<html>
<head>
<script>
window.onload = function(){
var v1 = document.getElementById('v1');
v1.addEventListener("play", function() {
document.getElementById('v2').play();
});
v1.addEventListener("pause", function() {
document.getElementById('v2').pause();
});
v1.addEventListener("seeking", function() {
document.getElementById('v2').currentTime = v1.currentTime;
});
v1.addEventListener("seeked", function() {
document.getElementById('v2').currentTime = v1.currentTime;
});
</script>
</head>
<body>
<video id="v1" controls="">
<source src="big-buck-bunny_trailer.webm" type="video/webm">
</video>
<video id="v2" controls="">
<source src="big-buck-bunny_trailer.webm" type="video/webm">
</video>
</body>
</html>
В приведенном выше коде есть 2 видеоэлемента (v1 и v2). Основное видео (v1) контролирует (запуск / остановка / изменение положения) второе (v2) видео. Два видео будут синхронизированы при управлении первым (v1). Но если я добавлю прослушиватель событий для «ищущих» и «ищущих» ко второму (v2) видео (аналогично v1), то каждый слушатель заявил, что вызывает другого слушателя, и вся страница зависает.
Вот рабочая jsFiddle . Видео big-buck-bunny_trailer.webm можно найти по этой ссылке.
Как это исправить?