Tengo dos elementos de video HTML que comienzan a reproducirse automáticamente al cargar la página y continúan en bucle sin fin hasta que el usuario abandona la página. Ambos videos duran 8 segundos y necesito que estén siempre sincronizados entre sí, pero, por supuesto, se desincronizan. Para el audio, el video 1 reproduce un arreglo completo de la canción y el video 2 reproduce solo un instrumento en la misma canción, por lo que, para mostrar que están relacionados, deben estar sincronizados.
<video id="first-video" autoplay="" muted="" loop="" playsinline="" loading="lazy" src="videos/video-1.mp4"></video> <video id="second-video" autoplay="" muted="" loop="" playsinline="" loading="lazy" src="videos/video-2.mp4"></video>Hay varias soluciones en esta pregunta SO: ¿Hay alguna forma de mantener dos videos sincronizados en una página web sin complementos?
pero cuando trato de implementar, no veo ningún cambio en la calidad de la sincronización, se desincronizan con la misma facilidad. Soy nuevo en JS, pero supongo que hay algún método para detectar el primer y último cuadro de un video y luego uno podría usarlos para iniciar/detener un segundo video y con el video en "bucle" esto podría continuar indefinidamente. Si alguien puede indicarme la dirección correcta para esa o cualquier otra solución, ¡sería muy útil!
Gracias.
Suponiendo que ambas pistas comiencen al mismo tiempo actual (0) y se reproduzcan a la misma velocidad, puede cambiar constantemente la posición del segundo video a la posición del primer video. Esto no es exacto ni preciso en el marco, pero debería hacer el trabajo más o menos:
function syncVideos() { const first = document.getElementById('first-video'); const second = document.getElementById('second-video'); // keep track of if video's seeking to avoid constant changes to position // don't know if this is really necessary let isSeeking = false; second.addEventListener('seeking', () => isSeeking = true); second.addEventListener('seeked', () => isSeeking = false); const thresholdMilliseconds = 50; // some ms threshold of difference to avoid excessive seeking const nudgeOffsetMilliseconds = 5; // just a guess that you may need to assume that seeking won't be instantaneous. I don't know if this is necessary or helpful // listen for time updates on the first video's position first.addEventListener('timeupdate', () => { const deltaMilliseconds = (second.currentTime - first.currentTime) * 1000; if (Math.abs(delta) >= thresholdMilliseconds) { if (isSeeking) { console.warn('not in sync, but currently seeking'); return; } console.log(`out of sync by ${deltaMilliseconds}ms. Seeking to ${first.currentTime}`); // adding a bit of nudge b/c syncing may not be instant. Not an exact science...for that use MSE second.currentTime = first.currentTime + nudgeOffsetMilliseconds; } }); } syncVideos();Use MSE (Extensiones de fuente de medios), que probablemente permitiría una búsqueda y sincronización más precisas. Esto puede ayudar: Reproducir una de múltiples pistas de audio en sincronización con un video
Es posible que desee buscar bibliotecas en github. No he buscado, pero buscar "mezclador de audio" o algo puede indicarle algún lugar ...