如何使HLS(m3u8)视频在Safari中循环

Question

我拍摄了一段mp4视频，使用ffmpeg将其编码为HTTP实时流媒体（HLS），生成了一系列myvideo.ts文件和一个myvideo.m3u8播放列表，并尝试在Safari中使用HTML <video>标记播放，该浏览器具有本地HLS功能：

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

它播放了一次。但是，尽管视频标签中有"循环"属性，但它不会循环。它在视频的最后一帧保持冻结状态。

如果我尝试使用事件侦听器检测视频的结尾，如下所述：HTML5视频结束时检测……那件事似乎从未发生过。

javascript（document.getElementById('myvideo').paused）中的"paused"属性计算结果为false，即使在视频播放一次并停止之后也是如此。

如何在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;
  }
});