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

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

// Play through the playlist automatically. player.playlist.autoadvance(0);

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

player.playlist.autoadvance([Number delay]) -> undefined

Sets up playlist auto-advance behavior.

Once invoked, at the end of each video in the playlist, the plugin will wait delay seconds before proceeding automatically to the next video.

Any value which is not a positive, finite integer, will be treated as a request to cancel and reset the auto-advance behavior.

If you change auto-advance during a delay, the auto-advance will be canceled and it will not advance the next video, but it will use the new timeout value for the following videos.

// no wait before loading in the next item player.playlist.autoadvance(0);

// wait 5 seconds before loading in the next item player.playlist.autoadvance(5);

// reset and cancel the auto-advance player.playlist.autoadvance();

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

Get the index of a string, source object, or playlist item in the playlist. If not found, returns -1.

因此，由于您没有 post 您的播放列表，您可能在那里有错误，或者它只是没有被调用，或者更可能是因为您的视频已经播放过。

Answer 2

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

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

Video.js Playlist repeatedly plays video at index -1

javascript

video-streaming

playlist

node.js

video.js