video.js使用及踩坑

109 阅读 0 评论 72 点赞

我是靠谱客的博主细腻高山，最近开发中收集的这篇文章主要介绍video.js使用及踩坑，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、video.js的使用
1.引入文件

<link rel="stylesheet" href="../cssnew/video-js.css">
<script src="../jsnew/video.min.js" type="text/javascript" charset="utf-8"></script>

注意路径！！！
2.html

<video id="player" class="video-js vjs-styles-defaults vjs-big-play-centered">
<source src="视频地址" />
</video>

3.js

videojs("player",{
width:"200",
height: "400",
poster: "",**加粗样式**
controls: true,
autoplay: false,
loop: false,
muted: false,
preload: "metadata",
},function onPlayerReady() {
// videojs.log("播放器已经准备好了!");
this.on("ended", function () {
// videojs.log("播放结束了!");
})});

由于每个页面有多个video,所有进行循环数据处理播放。

// 视频播放
function videoReplay() {
var videoList = $(".videoList"); // 找到所有的video
for(var i = 0; i < videoList.length; i++) { // 循环处理
videojs(
$(videoList[i]).attr("id"),
{
width:"200",
height: "400",
poster: "",
controls: true,
autoplay: false,
loop: false,
muted: false,
preload: "metadata",
},
function onPlayerReady() {
// videojs.log("播放器已经准备好了!");
this.on("ended", function () {
// videojs.log("播放结束了!");
});
}
);
}
// IE下video.js无法最大化播放，隐藏按钮
$(".vjs-fullscreen-control.vjs-control.vjs-button").css("display","none");
}

videojs参数参考文档

二.我踩的坑

VIDEOJS: WARN: Player "player3" is already initialised. Options will not be applied.

复现概率100%,发现在重新跳转页面的位置。
首先页面加载完毕之后，点击请求，页面重新渲染，展示新的数据，如果再次请求和初始化相同的数据，就会出现这个错误提示，其实就是告诉你ID为player3的视频加载容器已经加载过了，不需要重新加载，这样的话，再次加载不能播放视频。解决的方法是，在页面重新渲染的时候，销毁video.js。dispose()

videojs(player3.dispose());

而且，由于一个页面有多个video，所以还需要循环销毁

function disVideo() {
var videoList = $(".videoList"); // 找到所有的video
if(videoList.length > 0) { // 判断是否有video
for(var i = 0; i < videoList.length; i++) { // 循环销毁
videojs($(videoList[i]).attr("id")).dispose();
}
}else{
return false;
}
}