HLS（m3u8）ビデオをSafariでループさせるにはどうすればよいですか？

Question

ffmpegを使用してHTTPライブストリーミング（HLS）用にエンコードしたmp4ビデオ - 一連のmyvideo.tsファイルとmyvideo.m3u8プレイリストを作成し、SafariでHTML <video>タグを使用して再生しようとしていますが、そのブラウザのネイティブHLS機能を使用します。

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

これは一度再生されます。しかし、ビデオタグの "loop"属性にもかかわらず、ループしません。ビデオの最後のフレームで固定されたままです。

私はここで説明するように、イベントリスナーを使用してビデオの終わりを検出しようとした場合： Detect when an HTML5 video finishes ...そのイベントが発生すると思われることはありません。

ビデオが一度再生されて停止した後でも、javascriptの「一時停止」プロパティ（document.getElementById('myvideo').paused）はfalseと評価されます。

Safariでビデオをループさせるにはどうすればよいですか？

Answer 1

HLSはライブストリームを意図しているため、実際には自動的にループすることはありません。

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