javascript - 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 回繰り返したもの (プレイリスト アイテムの数) であり、まだプレーヤー ウィンドウにロードされていません。

プレイリストの各ビデオ項目の長さを個別に表示するための修正を手伝っていただけませんか?

スタックオーバーフローのすべての関連問題はプレーヤー画面自体について話しています (ここで正しい質問を見逃していないことを願っています) しかし、私は各 PlayList アイテムの継続時間を探しています。

ありがとうございます。

代わりに item.duration() ではないでしょうか?

– アビラッシュ

2020 年 9 月 4 日 18:19

ありがとう @Abhilash.... item.duration でエラーが発生します: VIDEOJS: エラー: TypeError: item.duration は関数ではありません

– タリク・アーメド

2020 年 9 月 4 日 18:20

1

ありがとう @Turing85、質問タグを修正しました。

– タリク・アーメド

2020 年 9 月 4 日 18:29

------------------------

私は以下を使用しています:

ビデオ.js 7.9.5 ビデオ-js-プレイリスト 4.2 ビデオ-js-プレイリスト-ui 3.8.0

video-js-playlist-ui 3.8.0 の新しいヘルパー関数と 1 つの追加手順で問題を解決しました。

次のように修正:

ステップ 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;
};

ステップ 2: 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 ビデオ/オーディオに対してのみ機能します。より多くの技術者が追加の手順を必要とすることはわかっています。そのため、これは同じ状況に陥る可能性がある人へのヒントにすぎません。私はいつもここから助けを得ているので、この回答が他の人に役立つことを願っています。

ありがとうございます。