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

【问题标题】：Video.js Playlist repeatedly plays video at index -1Video.js 播放列表在索引 -1 处重复播放视频
【发布时间】：2016-11-28 23:40:58
【问题描述】：

我正在使用 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>

$(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);
  })
}

【问题讨论】：

标签： javascript node.js video-streaming video.js playlist

【解决方案1】：

访问网站 videojs-play 看起来您使用的是“playNext”而不是自动前进。

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

<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([Number delay]) -> undefined

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

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

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

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

// 在加载下一项之前无需等待 player.playlist.autoadvance(0);

// 等待 5 秒再加载下一项 player.playlist.autoadvance(5);

// 重置并取消自动前进 player.playlist.autoadvance();

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

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

所以，由于您没有发布您的播放列表，您可能会在此处出现错误，或者它没有被调用，或者更可能是因为您的视频已经播放过。

【讨论】：

自动前进功能具有相同的效果（将第一个视频播放一遍）。我的播放列表是在我的 JS 代码的 getPlaylist 函数中生成的。 <ol> 标签显示播放列表中的所有视频，它几乎没有功能并且工作正常。它说如果没有找到视频，它只显示-1。这对我来说没有意义，因为第一个视频正在播放。我已经阅读了 API 文档。谢谢。
我看到了你的回答，但由于我是新手，我无法在下面发表评论。
您是否尝试过使用“自动前进”来查看该方法是否有效？
对不起。希望我可以编辑我的 cmets。我看你已经试过了。也许您的播放列表中有错误？
当...按回车换行，当当。我最终使用了jPlayer : HTML5 Audio & Video for jQuery，它也允许一个页面上的多个播放器。如果第 2 个玩家开始，其他玩家将停止游戏。

【解决方案2】：

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

【讨论】：