Limit playback range of HLS m3u8 playlist

Viewed 1201

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.

0 Answers
Related