videoJs介绍及播放直播（加载清晰度）

1、video标签内的属性值请自行百度（未提及到的）

    （1）、autoplay : true/false 播放器准备好之后，是否自动播放 【默认false】；

    （2）、controls : true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮；

    （3）、autoplay : true/false 播放器准备好之后，是否自动播放 【默认false】；
    （4）、controls : true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮；
    （5）、height: 视频容器的高度，字符串或数字 单位像素；
    （6）、width: 视频容器的宽度, 字符串或数字 单位像素；
    （7）、loop : true/false 视频播放结束后，是否循环播放；
    （8）、muted : true/false 是否静音；
    （9）、poster: 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL；
    （10）、preload:预加载
                        ‘auto‘ 自动
                        ’metadata‘ 元数据信息 ，比如视频长度，尺寸等
                        ‘none‘ 不预加载任何数据，直到用户开始播放才开始下载；
    （11）、children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件，数组中的顺序将影响组件的创建顺序。

<video id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
        <source src="/chat/playlist.m3u8"  type="application/x-mpegURL">
</video>

2、js介绍：

//视频对象
var player = null;

$(document).ready(function(){
     var playTime = 0;
     player = videojs('video', {
         autoplay: true,
         /*children : {
              bigPlayButton : true,
              textTrackDisplay : false,
              posterImage: false,
              errorDisplay : false,
              controlBar : {
                liveDisplay:false,            //直播流时，显示LIVE
                playbackRateMenuButton:false  //播放速率，当前只有html5模式下才支持设置播放速率
                }
         },*/
        }, function () {
            player.on('timeupdate', function () {

                //获取播放时间
                var getTime = this.cache_.currentTime;

                
                /*if (getTime == playTime) {
                        
                     //TODO 停止推流
                   
                } else {
                    playTime = getTime;
                }*/
            });
            player.on('error', function () {

                //TODO 加载直播失败， 浏览器需要刷新

         
            });

            player.on('ended', function () {
               //TODO 播放结束
            });

            player.on("pause", function (data) {
                    //TODO 点击暂停按钮
                
            });
            player.on("load", function (data) {
                //TODO 播放加载
            });
            player.on('seeking',function(){
                //TODO 正在去拿视频流的路上
               
            });
            player.on('seeked',function(){
                //TODO 已经拿到视频流,可以播放
            });
            player.on('loadedmetadata',function(){
                //TODO 加载到元数据后开始播放视频
                autoPlay();
            })
        });
});


 /**
   * 自动播放 
   */
var isVideoBreak;
function autoPlay() {

  player.play();

  //判断开始播放视频，移除高斯模糊等待层
  var isVideoPlaying = setInterval(function(){
      var currentTime = player.currentTime();
      if(currentTime > 0){
          $('.vjs-poster').remove();
             clearInterval(isVideoPlaying);
          }
       },200);

      //判断视频是否卡住，卡主3s重新load视频
      var lastTime = -1,
      tryTimes = 0;

      clearInterval(isVideoBreak);
      isVideoBreak = setInterval(function(){
          var currentTime = player.currentTime();

          if(currentTime == lastTime){
             //此时视频已卡主3s
             //设置当前播放时间为超时时间，此时videojs会在play()后把currentTime设置为0
             player.currentTime(currentTime+10000);
             player.play();

             //尝试5次播放后，如仍未播放成功提示刷新
              if(++tryTimes > 5){
                //layer.msg('您的网速有点慢，刷新下试试', 10000);
                console.log('您的网速有点慢，刷新下试试')
                 tryTimes = 0;
              }
            }else{
                lastTime = currentTime;
                tryTimes = 0;
            }
     },3000)


}

3、进入页面时加载清晰度

//进入页面加载
$(function () {
     
  //默认标清
  changeVideo(1);

   var videoPanelMenu = $(".vjs-fullscreen-control");
    videoPanelMenu.before('<div class="vjs-subs-caps-button  vjs-menu-button vjs-menu-button-popup vjs-control vjs-button" aria-live="polite" aria-expanded="false" aria-haspopup="true">'
     + '<div class="vjs-menu" role="presentation" id="showChangeVideo">'
     + '<ul class="vjs-menu-content" id="broadcastUrlVideo" role="menu">'
     + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(1)">标清</li>'
     + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(2)">高清 </li>'
     + '</ul></div>'
     + '  <button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" style="cursor: pointer;"'
     + '          onclick="showDefinition()" title="清晰度切换" aria-disabled="false">'
     + '      <span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">清晰度切换</span>'
     + '  </button>'
     + '</div>'
                );   
});


//切换清晰度
function changeVideo(type) {

        $("#broadcastUrlVideo li").click(function() {
            // 删除其他兄弟元素的样式
            $(this).siblings('li').removeClass('selected');
            // 添加当前元素的样式
            $(this).addClass('selected');
        });

        if (type == 1) {
            //重置video的src
            player.src([{type: "application/x-mpegURL", src: url1}]);
            $("#showChangeVideo").hide();
            // player.load([{type: "application/x-mpegURL", src: url1}]);  //使video重新加载， IE浏览器不支持
            player.play();
        }
        if (type == 2) {
            //重置video的src
            player.src([{type: "application/x-mpegURL", src: url2}]);
            $("#showChangeVideo").hide();
            // player.load([{type: "application/x-mpegURL", src: url2}]);  //使video重新加载
            player.play();
        }

    }


    /**
     * 显示清晰度
     */
    var hideDefinitionTimer = null;
    function showDefinition() {
        $("#showChangeVideo").show();

        //5秒钟后隐藏
        hideDefinitionTimer = setTimeout(hideDefinition, 5000);

    }

    /**
     * 隐藏清晰度
     */
    function hideDefinition() {
        $("#showChangeVideo").hide();
    }