videojs 自定義控件樣式

小白級別繼續，大咖繞路

這裏只是在pc端搞裏一下，不知道其餘平臺有什麼問題，只是給你們個思路。

videojs的優缺點什麼的，這裏就不說了，百度一下，各位大咖，一大啪啦的講解，研究了兩天始終不知道怎麼去自定義控件，videojs 有一個專門設計皮膚的網站（傳送法陣：https://codepen.io/heff/pen/EarCt），可是搞了半天仍是不懂怎麼弄，最後在一篇文章中受到啓發，其實很簡單，暴力走起。

先搞一張圖

好吧， 我認可，樣式很low，這裏就不吐槽設計了

ok，上代碼

myPlayer = videojs('my-video', {
        'controls': false,   //關閉原來的，否則hover的時候總出來
        'BigPlayButton': false,
        'loop': true
      },function(){
        var ctrlBar = createEle(); // 建立一個div節點
        this.el().appendChild(ctrlBar);  // 添加進去，css設置好樣式就能夠了
        // 初始化音量寬度
        var vol = this.volume();
        $('.vol-box .vol-on').width(vol * 100); 

        // 進度條自動前進
        this.on('timeupdate', function(){

          var curTime = this.currentTime();
          var durTime = this.duration();
          var w = (curTime/durTime * this.width()).toFixed(2);
          $('.progress>p').width(w);
          $('.progress>span').css('left', w + 'px');
        });
        // 播放
        this.play();
      });

     function createEle (){
      var _html = `
        <div class="progress">
          <P></p>
          <span></span>
        </div>
        <div class="ctrls clearfix">
          <div class="play-box fl">
            <img class="play-img" src="assets/images/vjs-play.png"/>
          </div>
          <div class="vol-box fr">
            <img src="assets/images/vjs-volumn.png"/>            
            <span class="vol-line"></span>
            <span class="vol-on"></span>
            <span class="vol-top-line"></span>
          </div>
        </div>
      `;
      var ctrlBar = document.createElement('div');
      ctrlBar.className = 'vjs-mycontrol-bar';
      ctrlBar.innerHTML = _html;
      return ctrlBar;
    }

好吧，貌似沒什麼難點，就是給你們一個思路，固然，官方推薦使用Component，這裏就不去搞了，

想研究的同窗，參考一下這個文章 http://www.javashuo.com/article/p-mwbmrdtg-e.html 最後定製組件那節就能夠了