限制HLS m3u8播放列表的播放范围

rah*_*f23 6 video-streaming http-live-streaming m3u8 hls.js

是否有限制 HLS m3u8 播放列表播放范围的开源实现？

我可以使用hls.js库渲染视频，指定视频的开始时间并施加持续时间来识别结束时间。我的目标是限制 m3u8 播放列表的播放范围，因为我的用户会想要观看大约 3-5 小时视频播放列表中的某个特定片段（例如 8-15 秒）。我不希望我的用户能够在整个视频播放列表中进行搜索，而只是在预先指定的播放范围内进行搜索。

因此，举个例子，如果我指定的剪辑从 00:02:30（2 分 30 秒）开始，到 00:02:40（2 分 40 秒）结束，因此持续时间为 10 秒，我该如何设置视频播放器的播放范围为 00:00:00 到 00:00:10？

索引.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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

CodePen 可以在这里找到。

我想要实现的功能或多或少地描述在这里，我只是惊讶这并不更简单，除非我忽略了一些明显的东西。

提前致谢。

归档时间：	4 年，8 月前
查看次数：	1855 次
最近记录：	4 年，1 月前