Tengo tres etiquetas multimedia HTML5. Un video y dos audios. Los transmito por HLS. Tengo el siguiente código para la configuración de HLS.
Los audios son buenos en los principales navegadores excepto Safari. Los audios están entrecortados para Safari tanto en macOS como en iOS. Me pregunto si me estoy perdiendo algo al configurar HLS.
<video id="vid" preload="metadata" muted playsinline></video> <audio id="human" preload="metadata" playsinline></audio> <audio id="racoon" preload="metadata" playsinline></audio> <script> // HLS setup for media. var media = document.getElementById('vid'); var mediaSrc = 'media/vid/playlist.m3u8'; // First check for native browser HLS support if (media.canPlayType('application/vnd.apple.mpegurl')) { media.src = mediaSrc; // If no native HLS support, check if HLS.js is supported } else if (Hls.isSupported()) { var hls = new Hls(); hls.loadSource(mediaSrc); hls.attachMedia(media); } else { // Alert only once. Don't alert for other video/audio tags. alert("Your browser doesn't support HTTP Live Streaming.") } </script> <script> // HLS setup for media. var media = document.getElementById('human'); var mediaSrc = 'media/human/playlist.m3u8'; // First check for native browser HLS support if (media.canPlayType('application/vnd.apple.mpegurl')) { media.src = mediaSrc; // If no native HLS support, check if HLS.js is supported } else if (Hls.isSupported()) { var hls = new Hls(); hls.loadSource(mediaSrc); hls.attachMedia(media); } </script> <script> // HLS setup for media. var media = document.getElementById('racoon'); var mediaSrc = 'media/racoon/playlist.m3u8'; // First check for native browser HLS support if (media.canPlayType('application/vnd.apple.mpegurl')) { media.src = mediaSrc; // If no native HLS support, check if HLS.js is supported } else if (Hls.isSupported()) { var hls = new Hls(); hls.loadSource(mediaSrc); hls.attachMedia(media); } </script>Tenía tres etiquetas de medios HTML, un video y dos audios:
<video id="vid" preload="metadata" muted playsinline> <source src="media/vid/playlist.m3u8"> <source src="media/vid.mp4" type="video/mp4"> <source src="media/vid.mov" type="video/mp4"> <source src="media/vid.webm" type="video/webm"> <source src="media/vid.ogv" type="video/ogg"> Your browser does not support the vedio tag. </video> <audio id="human" preload="metadata" playsinline> <source src="media/human/playlist.m3u8"> <source src="media/human.m4a" type="audio/mpeg"> <source src="media/human.ogg" type="audio/ogg"> <source src="media/human.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> <audio id="racoon" preload="metadata" playsinline> <source src="media/racoon/playlist.m3u8"> <source src="media/racoon.m4a" type="audio/mpeg"> <source src="media/racoon.ogg" type="audio/ogg"> <source src="media/racoon.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>Estaba obteniendo los elementos de los medios:
var vid = document.getElementById("vid") var audioHuman = document.getElementById("human") var audioRaccoon = document.getElementById("racoon")Luego, estaba usando una devolución de llamada para la reproducción de video:
// When video is playing, move slider and play audio. vid.addEventListener("timeupdate", timeUpdate)La devolución de llamada actualiza la hora actual del audio de acuerdo con el video:
function timeUpdate() { t = vid.currentTime // Human voice isn't synced with video. It was a recording mistake. // Compensate for the mistake. var audioHumanOffset = 1.4 audioHuman.currentTime = t - audioHumanOffset audioRaccoon.currentTime = t }La devolución de llamada anterior fue la causa del mal audio en Safari. Después de eliminar la devolución de llamada anterior, el audio de Safar es bueno ahora =)
La devolución de llamada anterior se reemplaza por una lógica totalmente diferente para mantener el video y los audios sincronizados.