Question

我拍摄了一段mp4视频，使用ffmpeg为HTTP Live Streaming（HLS）编码 - 产生了一系列myvideo.ts文件和myvideo.m3u8播放列表 - 我正在尝试使用HTML {{1}播放它Safari中的标记，具有该浏览器的本机HLS功能：

<video>

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

如果我尝试使用此处所述的事件侦听器检测视频的结尾： Detect when an HTML5 video finishes ......这件事似乎永远不会发生。

即使视频播放一次并停止播放，javascript（<video id="myvideo" src="myvideo.m3u8" loop="loop"></video>）中的“已暂停”属性也会评估为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;
  }
});

如何在Safari中循环播放HLS（m3u8）视频？

1 个答案: