Comment faire pour qu'une vidéo HLS (m3u8) soit bouclée dans Safari?

Question

J'ai pris une vidéo mp4, l'ai encodée pour HTTP Live Streaming (HLS) en utilisant ffmpeg - résultant en une série de fichiers myvideo.ts et une playlist myvideo.m3u8 - et j'essaie de la lire en utilisant la balise HTML <video> dans Safari, avec les capacités HLS natives de ce navigateur:

<video id="myvideo" src="myvideo.m3u8" loop="loop"></video> 

Il joue, une fois. Mais malgré l'attribut "loop" dans la balise vidéo, il ne boucle pas. Il reste figé sur la dernière image de la vidéo.

Si je tente de détecter la fin de la vidéo à l'aide d'un écouteur d'événement tel que décrit ici: Detect when an HTML5 video finishes ... cet événement ne semble tirer.

La propriété "en pause" dans javascript (document.getElementById('myvideo').paused) est évaluée comme étant fausse, même après la lecture et l'arrêt de la vidéo. Comment puis-je faire tourner la vidéo dans Safari?

Answer 1

HLS est destiné à être un flux en direct, donc il ne finit jamais réellement pour boucler automatiquement. J'ai utilisé une minuterie JavaScript comme un hack pour contourner ce problème:

var LOOP_WAIT_TIME_MS = 1000, 
    vid = document.getElementById("myvideo"), 
    loopTimeout; 

vid.addEventListener('play', function() { 
    if (!/\.m3u8$/.test(vid.currentSrc)) return; 
    loopTimeout = window.setTimeout(function() { 
    loopTimeout = null; 
    vid.pause(); 
    vid.play(); 
    }, (vid.duration - vid.currentTime) * 1000 + LOOP_WAIT_TIME_MS); 
}); 

vid.addEventListener('pause', function() { 
    if (!/\.m3u8$/.test(vid.currentSrc)) return; 
    if (loopTimeout) { 
    clearTimeout(loopTimeout); 
    loopTimeout = null; 
    } 
});