video.js создает динамический плейлист, используя json из базы данных - PullRequest
Новая
       27

video.js создает динамический плейлист, используя json из базы данных

0 голосов
/ 25 апреля 2019

У меня есть код, который будет отображать проигрыватель html5 с использованием библиотеки video.js.Я хочу динамически создавать список воспроизведения, используя вывод json из моей базы данных, поэтому для выполнения этой задачи я установил плагин videojs-playlist.

Я пытаюсь сгенерировать список воспроизведения, используя функцию $.each(), но безуспешно.Как я могу обработать JSON, чтобы создать список воспроизведения для игрока?Другой вопрос о высоте и ширине плеера.Как я могу установить его на 100% ширину и высоту окна?

Это код, который я использую: 

  <video id='sc-player' class='video-js' controls preload='auto' autoplay width='1280' height='600' data-setup=''>
  </video>

  <script>
  $(document).ready(function(){

    const player = videojs('sc-player');

    $.ajax({
      type: 'GET',
      url: 'streamController.php?playlist',
      cache: false,
      success: function(response){

        var vid = JSON.parse(response);
        player.src(vid[0].url);

        $.each(vid, function(i){

          player.playlist([{
            sources: [{
              src: [i].url,
              type: 'video/mp4'
            }],
            poster: 'http://media.w3.org/2010/05/sintel/poster.png'
          }]);
          player.playlist.autoadvance(0);
        });
      }
    });
  });
  </script>

1 Ответ

0 голосов
/ 26 апреля 2019

Я нашел решение после поиска здесь на SO: 

  <video id='c-player' width='1280' height='619' class='video-js' controls autoplay prelaod ></video>

  <script>

  $(document).ready(function(){

    const player = videojs('c-player');
    var videosrc = [];

    $.ajax({
      type: 'GET',
      url: 'streamController.php?playlist',
      cache: false,
      success: function(response){

        var vid = JSON.parse(response);
        player.src(vid[0].url);

        for(var i = 0; i < vid.length; i++){
          var vidsUrl = vid[i].video_url;
          var posterUrl = vid[i].poster_url;
          videosrc.push({sources: [{src: vidsUrl, type: 'video/mp4'}],poster: posterUrl});
          //videosrc.push({sources: [{src: vidsUrl, type: 'video/mp4'}]});
        }
        player.playlist(videosrc);
        player.playlist.autoadvance(0);
        player.playlist.repeat(true);

      }
    });
  });
  </script>
...