Question

我使用video.js和videojs-playlist在播放列表中显示一系列视频。每个源都是一个从我的MongoDB和Node服务器流出的URL。

在播放列表之外，视频正确播放。使用播放列表库，只有第一个视频一遍又一遍地播放。使用播放列表currentItem function我可以看到索引总是-1，永远不会改变，即使我尝试以编程方式进行。它改变的唯一方法是我手动点击列表中的其他视频。

我认为问题与流媒体有关，而不是从文件系统中读取，但我对此主题的了解不够充分。谢谢！

HTML

<section class="main-preview-player">
  <video id="preview-player" class="video-js vjs-fluid vjs-big-play-centered" controls preload="auto">
     <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
       <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
     </p>
  </video>
<div class="playlist-container  preview-player-dimensions vjs-fluid">
   <ol class="vjs-playlist"></ol>
</div>

JS

$(document).ready(video);

function video() {
  var arr = arrayOfIds.split(','); // IDs for video URLs
  var player = videojs('preview-player');


 function getPlaylist() {
   var videos = arr.map(function(id) {
     return obj = {
       name: id,
       sources: [{ 
         src: "/api/mediaID/" + id, // URL for video stream
         type: "video/mp4"          // Is this right??
       }]
     }
   })

   player.playlist(videos, 0);
   player.playlistUi();
 }

  function playNext() {
    var num = player.playlist.currentItem();
    console.log(num); // Always logs '-1'

    player.playlist.next();
  }

  player.ready(function() {
    if(arrayOfIds.length) {
      getPlaylist();
    }

    player.on("ended", playNext);
  })
}

Answer 1

访问网站videojs-play看起来你正在使用'playNext'而不是autoadvance。

我没看到你的播放列表，只是这个：

<ol class="vjs-playlist"></ol>

您可以尝试在页面上使用他们的示例：https://github.com/brightcove/videojs-playlist

//自动播放播放列表。 player.playlist.autoadvance（0）;

此页面上有关此选项的更多详细信息：https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md#playerplaylistcurrentitemnumber-index---number

player.playlist.autoadvance（[号码延迟]） - ＆gt;未定义

设置播放列表自动前进行为。

一旦调用，在播放列表中的每个视频的末尾即插件   将等待延迟秒，然后自动进入下一个   视频。

任何不是正的有限整数的值都将被视为   请求取消并重置自动推进行为。

如果在延迟期间更改自动前进，则会自动前进   取消，它不会推进下一个视频，但它将使用   以下视频的新超时值。

//在下一个项目加载之前没有等待   player.playlist.autoadvance（0）;

//在加载下一个项目之前等待5秒钟   player.playlist.autoadvance（5）;

//重置并取消自动前进的player.playlist.autoadvance（）;

在同一页面上，他们还提到-1始终显示：

获取字符串，源对象或播放列表项的索引播放列表。如果未找到，则返回-1。

所以，既然你没有发布你的播放列表，你可能会在那里发生错误或者没有被调用，或者更可能是因为你的视频已经播放了。

Answer 2

videojs-playlist的来源需要一个完整的URL作为来源。使用HTML5视频代码，您可以使用"/api/media/{ videoid }"作为代码的来源。我只是将播放列表数组中的src更改为"http://localhost:3000/api/media/{ videoid }"。

Video.js播放列表在索引-1处重复播放视频

2 个答案: