videojs 控制条上添加自定义图标和相关的事件

代码

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!-- ...videojs样式代码等 -->
<style>
    /*   step-backward 48   backward 49 forward 50 step-forward 51     */
    .video-js .vjs-custom-control .vjs-icon-placeholder:before{
     
     
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        content: '\f049'; 
    }
</style>

 (function (vjs) {
    
    
      var customPlugin = function (options) {
    
    
      
          var player = this;
          
          // 方式多次加载，再销毁之前
          if (!player.el()) {
    
    
              return;
          }
          
          var video = player.player().el().getElementsByTagName('video')[0];


          var customButtom = videojs.getComponent("Button");
          var pipButton = videojs.extend(customButtom, {
    
    
              constructor: function (player, options) {
    
    

                  customButtom.call(this, player, options);
                  this.controlText("提示文字");

              },
              handleClick: function () {
    
    

                  console.log(options) //{ name: 'customName' }

              },
              buildCSSClass: function () {
    
    

                  return "vjs-custom-control vjs-control vjs-button";

              }
          });
          videojs.registerComponent("customButtom", pipButton);

          player.on('loadstart', function () {
    
    

              var customButtomBtn = player.controlBar.addChild('customButtom', {
    
    });
              player.controlBar.el().insertBefore(customButtomBtn.el(), player.controlBar.fullscreenToggle.el());

          });


      };
      vjs.registerPlugin('customPlugin', customPlugin);
  })(window.videojs);
  
  // ...
  var src = 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8';
  videojs("liveVideo", {
    
    
     language: 'zh-CN',
     // playbackRates: [0.25, 0.5, 1, 1.5, 2],
     sources: [{
    
    
         src: src,
         type: 'application/x-mpegURL'
     }],
     plugins: {
    
    
     	// 添加buton
         customPlugin: {
    
     name: 'customName' }
     }
 }, function onPlayerReady() {
    
    
     var w = $("#video").width();
     var h = $("#video").height();
     $("#liveVideo").css({
    
     "width": w, "height": h });
     this.poster('./init.gif')
     this.play();
 })