Как настроить несколько экземпляров видео, используя hls.js и plyr

Question

Я использую plyr (https://github.com/sampotts/plyr) и hls.js (https://github.com/video-dev/hls.js/) для потокового видео. Пример https://codepen.io/pen?template=oyLKQb работает для одного экземпляра видео. На данный момент document.querySelector обнаруживает только первый экземпляр. Как я могу адаптировать код, чтобы иметь более одного экземпляра видео на одной странице?

Я пытался работать с идентификаторами внутри каждого экземпляра, например, <video id=player1"></video>. и позвонил document.querySelector('player1.video'), но это не сработало.

Answer 1

Я нашел решение для моей проблемы, используя document.querySelectorAll('video').Если вы заинтересованы, вы найдете здесь кодовую ручку https://codepen.io/MichaGue/pen/oRWVdq