video.js 使用数据库中的 json 创建动态播放列表

Posted 2023-05-07

【中文标题】video.js 使用数据库中的 json 创建动态播放列表

【英文标题】：video.js create dynamic playlist using json from database

【发布时间】：2019-09-15 01:35:16

【问题描述】：

我有一些代码将使用video.js 库显示一个html5 播放器。 我想通过使用我的数据库中的 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】：

我在 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>