video-streaming - 限制 HLS m3u8 播放列表的播放范围
问题描述
是否有限制 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>
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 可在此处获得。
我打算实现的功能在这里或多或少地描述了,我只是很惊讶这不是更直接,除非我忽略了一些明显的东西。
提前致谢。
解决方案
推荐阅读
- python - 为什么@abstractmethod 装饰器只影响使用常规继承派生的子类?
- mysql - 如何使用从 Squalize 生成的模型获取关联数据?
- java - 在 IntelliJ 中找不到 GsonBuilder 的方法“setLenient”
- azure - 查找 kusto 查询的开始和结束时间(或时间跨度)在 azure log analytics 上运行?
- django - Django REST 和 React 实现模型
- reactjs - React 事件处理程序在没有 bind() 的情况下工作
- spring-mvc - 将 Spring MVC 与 Wildfly 安全域和 Java 安全集成
- java - 如何让 this.name 在值对象构造函数的类定义中工作?
- javascript - 如何在地图函数中合并 React TableCells?
- acumatica - 如何使自定义字段显示超过 2 个小数位