如何解决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视频/音频,我知道更多的技术人员将需要额外的步骤,因此,这仅是对处于相同情况的任何人的提示。希望这个答案能对其他人有所帮助,因为我总是从这里得到帮助。
谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。