Блог

Я расширяю плагин воспроизведения 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 касаются самого экрана проигрывателя (надеюсь, я не пропустил правильный вопрос здесь) Но я ищу длительность каждого элемента списка воспроизведения.

Спасибо.

Я использую следующее:

1. Video.js 7.9.5
2. видео-js-Плейлист 4.2
3. видео-js-плейлист-пользовательский интерфейс 3.8.0

Я решаю свою проблему с помощью новой вспомогательной функции и 1 дополнительного шага в 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, я знаю, что другим специалистам потребуются дополнительные шаги, так что это всего лишь подсказка для тех, кто может застрять в такой же ситуации. Надеюсь, этот ответ поможет другим людям, поскольку я всегда получаю помощь отсюда.

Спасибо.