select и hls.js

104
25 декабря 2019, 03:30

Есть select и вывод трансляции при помощи html5 плеера и 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.github.io/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.github.io/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>

Не хватает знаний что бы связать select и hls. Нужно что бы при загрузки страницы проигрывалось видео из первого пункта select, а в случае выбора другого пункта, видео переключалось на другое без перезагрузки страницы.

Есть пример работы, но там заменены переменные, и не знаю как связать со своим скриптом:

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

Answer 1

Не уверен, что это правильный путь это сделать. Но работает.

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.github.io/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>

READ ALSO
[].slice.call(arguments) не копирует значение в массив
javascript

[].slice.call(arguments) не копирует значение в массив

Имеется простой пример работы функции логирования:

 120
Как сделать сортировку по шаблону в MySQL? (order by pattern (cat1, cat2, cat3; cat1, cat2, cat3; &hellip;)
MySQL

Как сделать сортировку по шаблону в MySQL? (order by pattern (cat1, cat2, cat3; cat1, cat2, cat3; …)

Есть модель "Канал"

 138
Как сделать отчет аналогичный отчету по источникам в Analytics/Метрике
MySQL

Как сделать отчет аналогичный отчету по источникам в Analytics/Метрике

я использую Laravel в своем приложении

 129
Неизвестный оператор. (near &ldquo;WITH&rdquo; at position 0)
MySQL

Неизвестный оператор. (near “WITH” at position 0)

Возникает ошибка при попытке использовать with в панели phpMyAdmin, как я понимаю phpMyAdmin использует MySQL, а в нем есть with, но вот у меня он никак его...

 133