如何使用 hls.js 和 plyr 配置多个视频实例

Posted 2023-03-07

【中文标题】如何使用 hls.js 和 plyr 配置多个视频实例

【英文标题】：How to configure multiple video instances using hls.js and plyr

【发布时间】：2019-05-16 06:58:06

【问题描述】：

我正在使用 plyr (https://github.com/sampotts/plyr) 和 hls.js (https://github.com/video-dev/hls.js/) 流式传输视频。 https://codepen.io/pen?template=oyLKQb 示例适用于一个视频实例。目前 document.querySelector 只检测到第一个实例。如何调整代码以在同一页面上有多个视频实例？

我尝试在每个实例中使用 id，例如<video id=player1"></video>。并打电话给document.querySelector('player1.video')，但这不起作用。

【参考方案1】：

我使用document.querySelectorAll('video') 找到了我的问题的解决方案。如果你有兴趣，你可以在这里找到一个codepen https://codepen.io/MichaGue/pen/oRWVdq