VideoJS Single Play List Video Duration?

user_1418953 0
Viewed 528

Im extending the VideoJS default Playlist plugin. Everything is going well tell now, My Issue I need to retrieve each video item duration. As per the API I tried the following:

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

The result I got is the first item duration repeated 5 times (count of playlist item) and its not yet loaded in the player window.

Would you please help with fix to show each Playlist video item duration separately?

All the related issues in stackoverflow talking about the player screen itself (I hope I did not miss correct question here) But Im looking for each PlayList item duration.

Thank you.

video.js ecmascript-6 javascript
1 Answers

I'm using the following:

  1. Video.js 7.9.5
  2. video-js-Playlist 4.2
  3. video-js-playlist-ui 3.8.0

I fix my problem with new helper function and 1 extra step in video-js-playlist-ui 3.8.0

The fix as the following:

Step one: Helper function to get the item duration from video-js-playlist-ui plugin:

  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;
};

Step two: Add timeout to creating items inside video-js-playlist-ui plugin: This will guarantee to show the video time in the 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);

 }
}

NOTE: My fix is working for HTML5 Video/Audio only, I know more techs will need extra steps, so this is only a hint for anyone may stuck in the same situation. Hope this answer will help other people as I always get help from here.

Thank you.

user_14189530
Related