Как я могу создать видеоролик HLS (m3u8) в Safari?

Question

Я взял видео mp4, закодировал его для HTTP Live Streaming (HLS) с помощью ffmpeg, в результате чего появилась серия файлов myvideo.ts и плейлист myvideo.m3u8 - и я пытаюсь воспроизвести его с помощью тега HTML <video> в Safari, с собственными возможностями HLS этого браузера:

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

Он играет один раз. Но, несмотря на атрибут «loop» в теге видео, он не зацикливается. Он остается замороженным на последнем кадре видео.

Если я пытаюсь определить конец видео с помощью прослушивателя событий, как описано здесь: Detect when an HTML5 video finishes ... это событие кажется, никогда не срабатывает.

Свойство «приостановлено» в javascript (document.getElementById('myvideo').paused) оценивается как ложное, даже после того, как видео сыграло один раз и остановилось.

Как я могу получить видеоролик в Safari?

Answer 1

HLS предназначен для прямого трансляции, поэтому он никогда не «заканчивается», чтобы автоматически зацикливаться. Я использовал JavaScript-таймер в качестве взлома, чтобы обойти это:

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; 
    } 
});