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，这里就不去搞了，

想研究的同学，参考一下这个文章 https://www.cnblogs.com/a2502971/p/6691470.html 最后定制组件那节就可以了

videojs 自定义控件样式

猜你喜欢