There is a select and broadcast output using the html5 player and hls.js.

<html lang="ru-RU"> <head> <meta charset="UTF-8"> </head> <body> div class="b-webcams__select-item"> <select class="js-select-webcam"> <option value="https://video-dev.imtqy.com/streams/x36xhzz/x36xhzz.m3u8">Видео1</option> <option value="https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/hls.m3u8">Видео2</option> </select> <div class="b-webcams__video"> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <div id="player"></div> <script> if(Hls.isSupported()) { var video = document.createElement('video'); video.setAttribute("id", "player-html5"); video.setAttribute("width", "100%"); video.setAttribute("height", "100%"); video.setAttribute("controls", "controls"); //video.setAttribute("autoplay", "autoplay"); document.getElementById('player').appendChild(video); var hls = new Hls(); hls.attachMedia(video); hls.on(Hls.Events.MEDIA_ATTACHED, function () { hls.loadSource("https://video-dev.imtqy.com/streams/x36xhzz/x36xhzz.m3u8"); video.play(); }); } </script> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>

There is not enough knowledge to link select and hls. When you load the page, you need to play the video from the first select item, and if you select another item, the video switches to another without reloading the page.

There is an example of work, but variables are replaced there, and I don’t know how to connect with my script:

  function(e, t, i) { "use strict"; (function(e) { var t, n = i(18), r = (t = n) && t.__esModule ? t : { default: t }; e(document).ready(function() { var t = e(".js-select-webcam"); if (t.length) { var i, n = e(".js-select-webcam").val(), a = document.createElement("video"); a.setAttribute("id", "player-html5"), a.setAttribute("width", "100%"), a.setAttribute("height", "100%"), a.setAttribute("controls", "controls"), document.getElementById("player").appendChild(a), (i = new r.default).attachMedia(a), i.on(r.default.Events.MEDIA_ATTACHED, function() { i.loadSource(n), a.play() }), t.on("change", function() { i.destroy(); var t = e(this).val(), n = new r.default, a = document.getElementById("player-html5"); n.attachMedia(a), n.on(r.default.Events.MEDIA_ATTACHED, function() { n.loadSource(t), a.play() }) }) } }) }).call(t, i(0)) }

Hls.attachMedia (video) is responsible for video reloading;

  • For me, your question is: I put together a rocket, I launch it, it flies successfully. Tell me how to paint the rocket with a different color? - Stepan Kasyanenko

1 answer 1

Not sure if this is the right way to do it. But it works.

 if (Hls.isSupported()) { var video = document.createElement('video'); video.setAttribute("id", "player-html5"); video.setAttribute("width", "100%"); video.setAttribute("height", "100%"); video.setAttribute("controls", "controls"); //video.setAttribute("autoplay", "autoplay"); document.getElementById('player').appendChild(video); var hls = null; function playVideo(url) { if (hls) { hls.destroy(); } hls = new Hls(); hls.attachMedia(video); hls.on(Hls.Events.MEDIA_ATTACHED, function() { hls.loadSource(url); video.play(); }); } $('.js-select-webcam') .on('change', function() { playVideo($(this).val()); }) .trigger('change'); } 
 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="b-webcams__select-item"> <select class="js-select-webcam"> <option value="https://video-dev.imtqy.com/streams/x36xhzz/x36xhzz.m3u8">Видео1</option> <option value="https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/hls.m3u8">Видео2</option> </select> <div class="b-webcams__video"> <div id="player"></div> </div> </div>