Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you enable video seeking in Safari using HTTP Live Streaming?

I have a HLS stream with #EXT-X-PLAYLIST-TYPE:EVENT in the playlist. This plays correctly in Safari, except that seeking is not available until #EXT-X-ENDLIST is appended to the playlist.

To my understanding, playlists with #EXT-X-PLAYLIST-TYPE:EVENT contain all segments of the video so far. That is, new segments may be appended, but existing segments can not be removed or modified. If previous segments are effectively immutable, then shouldn't the video player in Safari allow the user to seek backwards to earlier in the video? Instead, the player just says "Live Broadcast" and has no scrubbing control until the #EXT-X-ENDLIST is appended to the playlist.

Technical Note TN2288 says this (emphasis mine):

An event playlist is specified by the EXT-X-PLAYLIST-TYPE tag with a value of EVENT. An event playlist looks just like a live playlist to start out with. It doesn't initially have an EXT-X-ENDLIST tag, indicating that new media files will be added to the playlist as they become available. However, with the EVENT tag, you cannot change the playlist at all; you may only append new segments to the end of the file. They cannot be added at the front. New segments are added until the event has concluded, at which time the EXT-X-ENDLIST tag is appended. As the name implies, event playlists are typically used for events such as concerts or sports games where you want to allow the user to seek anywhere in the event from the beginning.

It sounds to me like seeking should be possible with this kind of HLS playlist, so what am I missing?

like image 226
Tom Dalling Avatar asked Dec 17 '14 04:12

Tom Dalling


1 Answers

The solution I've found as a workaround:

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" controls="controls"></video>
<script>
var video = document.getElementById('video');
var url = 'http://awesome.app/playlist.m3u8';
if (Hls.isSupported()) {
    var hls = new Hls({
        debug: true
    });
    hls.loadSource(url);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
        video.play();
    });
}
</script>

The above starts at the most recently uploaded segment and allows seeking to earlier segments on Safari, Chrome, and Firefox.

like image 135
egekhter Avatar answered Oct 16 '22 11:10

egekhter