记录video-js出现的一些异常

---

前言

video-js是一款基础的jquery视频插件，简单轻便，但是配置起来总会有些奇怪的问题，故以此文记录

---

一、视频无法播放

这个应该是最常见的问题，一般需要考虑三个问题：

1.视频源

首先需要考虑是否是视频源无法正常打开，否则你改了一圈代码也是白改 ~QAQ
其次要考虑视频源请求时是否正确配置了请求参数，比如：cookie，token，请求头格式等等。

2.本地配置

这个主要是看视频格式设置与视频源是否一致
浏览器或者设备是否支持此视频格式

二、其他

1.基础的配置文件

//视频配置
        playerOptions: {
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: true, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '9:6', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "",
            src: ""
          }],
          poster: "", //你的封面地址
          //width: document.documentElement.clientWidth, //播放器宽度
          notSupportedMessage: '视频加载中', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: false,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true //全屏按钮
          }
        },

2.一些控制操作

使用的是video-js.js插件
$(document).ready(function () {
    //oldTime 视频暂停时的所处的位置
    oldTime = 0;
    myPlayer = videojs('main_video', {
        "loop": false, //是否循环播放:true/false
        "muted": true,
        "autoplay" :false,

    }, function () {
        this.on('pause', function () {//暂停
            console.log("暂停");
            clearInterval(time);


        });
        this.on('play', function () {//开始播放
            console.log("开始播放");
            time = setInterval("playVideo()", 20*1000);
        });
//===这是重点==================================================================
        this.on('timeupdate', function() {//播放时间改变
             //获得当前视频所在的时间
            var locl = myPlayer.currentTime();
            //如果oldTime+10<locl;则表示视频被快进了（我定了10秒算快进）
            if(oldTime+10 >= locl){
                
                //如果视频时间locl比记录时间小oldTime，则表示后退了
                if(locl > oldTime){
                    oldTime = locl;
                }
            }else{
                //赋值
                myPlayer.currentTime(oldTime);
            }
            console.log("播放时间改变");
        });

    });

    //添加视频文件地址到播放器
    $(".list-group-item").click(function () {
        myPlayer.src($(this).data("video_url"));
        myPlayer.load($(this).data("video_url"));
    });

})

总结

可能在很多大佬看来这篇文章写的都是废话，但我想以此作为记录，日后有更多关于video-js的内容也会更新到此。也希望能和更多的人交流一起进步。以上。