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