How can I cause an HLS (m3u8) video to loop in Safari?

Question

I took an mp4 video, encoded it for HTTP Live Streaming (HLS) using ffmpeg — resulting in a series of myvideo.ts files and a myvideo.m3u8 playlist — and am attempting to play it using the HTML <video> tag in Safari, with the native HLS capabilities of that browser:

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

It plays, once. But despite the "loop" attribute in the video tag, it doesn't loop. It stays frozen on the last frame of the video.

If I try to detect the end of the video using an event listener as described here: Detect when an HTML5 video finishes … that event never seems to fire.

The "paused" property in javascript (document.getElementById('myvideo').paused) evaluates to false, even after the video has played once and stopped.

How can I get the video to loop in Safari?

Safari is probably waiting on more chunks to be written server-side. I would recommend not using native HLS capability, as it isn't available in most browsers. Consider one of the client-side JavaScript handlers for HLS that use the media source extensions API. They may have better handling of your HLS circumstances. — Brad, May 06 '16 at 03:41
In all other browsers, I'm using Dailymotion's "hls.js" library (https://github.com/dailymotion/hls.js), which is working very well in everything except Safari. In Safari, the playback stutters badly, which is why I was trying the native playback in that one browser. — sherlock42, May 06 '16 at 19:27

score -3 · Answer 1 · answered Aug 05 '16 at 22:03

HLS is intended to be a live stream, so it never actually "finishes" in order to automatically loop. I used a JavaScript timer as a hack to get around this:

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

How can I cause an HLS (m3u8) video to loop in Safari?

1 Answers1