5

Is there an open-source implementation of limiting the playback range of HLS m3u8 playlists?

I'm able to render the video using the hls.js library, specify a start time for the video and impose a duration to identify the end time. My goal here is to limit the playback range for the m3u8 playlist, as I will have users that will want to view a specific clip of say 8-15 seconds from a ~3-5 hour video playlist. I don't want my users to have the ability to seek throughout the entirety of the video playlist, simply the prespecified playback range.

Therefore, as an example, if the clip I have specified begins at 00:02:30 (2 min 30 s) and ends at 00:02:40 (2 min 40 s), thus a 10 s duration, how can I set the video player's playback range to be 00:00:00 to 00:00:10?

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HLS Demo</title>
        <link rel="stylesheet" href="https://cdn.plyr.io/1.8.2/plyr.css">
    </head>
    <body style="width: 40%; height: 40%">
        <video preload="none" id="player" autoplay controls crossorigin></video>
        
        <script src="https://cdn.plyr.io/1.8.2/plyr.js"></script>
        <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
        <script src="./script.js"></script>
    </body>
</html>

myscript.js

(function () {
    var video = document.querySelector('#player');

    if (Hls.isSupported()) {
        // ALL CONFIG OPTIONS HERE: https://github.com/video-dev/hls.js/blob/master/docs/API.md
        var config = {
            autoStartLoad: true,
            startPosition: 150, // 00:02:30 IN SECONDS
            debug: false
        };

        var hls = new Hls(config);
        hls.loadSource('https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8');
        hls.attachMedia(video);

        // hls.on(Hls.Events.MEDIA_ATTACHED, function() {
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
            video.muted = true;
            video.play();

            setTimeout(function(){ 
                video.pause();
            }, 10000);
        });
    }

    plyr.setup(video);
})();

CodePen available here.

The functionality I'm aiming to implement is more or less described here, I'm just surprised this isn't more straightforward, unless I'm overlooking something obvious.

Thanks in advance.

rahlf23
  • 8,869
  • 4
  • 24
  • 54

0 Answers0