VideoJS 单播放列表视频持续时间？

Question

我正在扩展 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 次（播放列表项目的计数）并且它还没有加载到播放器中 window。

能否请您帮助修复以分别显示每个播放列表视频项目的持续时间？

Whosebug 中的所有相关问题都在谈论播放器屏幕本身（我希望我没有错过这里的正确问题）但是我正在寻找每个播放列表项目的持续时间。

谢谢。

Answer 1

我正在使用以下内容：

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

我用新的辅助函数和解决了我的问题 video-js-playlist-ui 3.8.0[=12= 中的 1 个额外步骤]

修复如下：

第一步：从 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 Video/Audio，我知道更多的技术人员将需要额外的步骤，所以这只是对任何可能陷入相同情况的人的提示。希望这个答案能帮助其他人，因为我总是从这里得到帮助。

谢谢。

VideoJS 单播放列表视频持续时间？

VideoJS Single Play List Video Duration?

javascript

video.js

ecmascript-6