VideoJS单播放列表视频时长？

问题描述

我正在扩展VideoJS默认的播放列表插件。现在一切顺利，我的问题我需要检索每个视频项目的持续时间。根据API，我尝试了以下操作：

player.playlist().forEach((item,index) => {
    if (player.readyState() < 1) {
        // do not have Metadata tell this moment.
        // waiting
        player.one("loadedMetadata",onLoadedMetadata);
    }
    else {
        // Metadata already loaded
        onLoadedMetadata();
    }
    function onLoadedMetadata() {
        console.log(player.duration()); //<----NEED HELP HERE PLEASE
    }
});

我得到的结果是第一项持续时间重复了5次（播放列表项的计数），并且尚未加载到播放器窗口中。

请您帮忙解决一下，以分别显示每个播放列表视频项的时长吗？

stackoverflow中所有有关播放器屏幕本身的相关问题（我希望我不会在这里错过正确的问题），但是我正在寻找每个PlayList项目的持续时间。

谢谢。

解决方法

我正在使用以下内容：

Video.js 7.9.5
video-js-Playlist 4.2
video-js-playlist-ui 3.8.0

我通过新的帮助器功能解决了我的问题，并在 video-js-playlist-ui 3.8.0

中多了一步

以下修复程序：

第一步：助手功能，可从video-js-playlist-ui插件中获取商品时长：

  const itemDuration = function (item) {
  const settings = {
    itemVideoEl: document.createElement("video"),itemVideoSource: document.createElement("source"),itemVideoSrc: item.sources[0].src,itemType: item.sources[0].type,};
  const { itemVideoEl,itemVideoSource,itemVideoSrc,itemType } = settings;

  itemVideoSource.src = itemVideoSrc;
  itemVideoSource.type = itemType;

  itemVideoEl.appendChild(itemVideoSource);

  const getDuration = [];
  itemVideoEl.addEventListener("loadedmetadata",(event) => {
    const duration = itemVideoEl.duration;
    getDuration.push(duration);
  });

  item.duration = getDuration;
  return item;
};

第二步：添加超时以在video-js-playlist-ui插件中创建项目： 这样可以保证在HTML DOM中显示视频时间。

class PlaylistMenuItem extends Component { //default class
 createEl() { //default function
       const item = itemDuration(this.options_.item); //<---REPLACED WITH THE NEW HELPER FUNCTION
       const li = document.createElement("li");//default value
       const showDescription = this.options_.showDescription;//default value

       setTimeout(() => {
        //The rest of the default function createEl() comes here.
       },1000);

 }
}

注意： 我的修复程序仅适用于HTML5视频/音频，我知道更多的技术人员将需要额外的步骤，因此，这仅是对处于相同情况的任何人的提示。希望这个答案能对其他人有所帮助，因为我总是从这里得到帮助。

谢谢。

ecmascript-6 javascript video.js