[email protected]使用小技巧

自定义组件

var myPlayer = videojs('player', { controlBar: { children: [] } }, function() {
  var baseComponent = videojs.getComponent('Component')

  var myComponent = videojs.extend(baseComponent, {
    constructor: function(player, options) {
      baseComponent.apply(this, arguments)
      this.on('click', this.clickIcon)
    },
    createEl: function() {
      var divObj = videojs.dom.createEl('div', {
        // Prefixing classes of elements within a player with "vjs-"
        // is a convention used in Video.js.
        // 给元素加vjs-开头的样式名，是videojs内置样式约定俗成的做法
        className: 'vjs-my-components',
        innerHTML:
          '<img style="width:30px;height:30px;" src="https://gitee.com/Jioho/img/raw/master/ficusjs/20210509183431.jpg" />'
      })
      return divObj
    },
    clickIcon: function() {
      alert('你点击了图片')
    }
  })
  videojs.registerComponent('myComponent', myComponent)

  // 找到 controlBar 节点，添加控件
  myPlayer.getChild('controlBar').addChild('myComponent')
})

1.在底部controlBar 中自定义按钮

<template>
    <div class="vjs-control html-classname" aria-live="polite" tabindex="0" @click="handelPlay">
            <div class="vjs-control-content">
              <span class="iconfont iconwr-a-kucunchaxunfuben3
"></span>
              <span class="vjs-control-text">Press me</span>
            </div>
          </div>
<template>
<script>
let player = new Videojs()
// player.controlBar.el().appendChild(document.querySelector('.html-classname'));

var myButton = video.controlBar.addChild('button', {
    text: "Press me",
    // other options
  });

myButton.addClass("html-classname");

player.controlBar.el().insertBefore(document.querySelector('.html-classname'), player.controlBar.el().firstChild)
</script>

2.videojs与fastClick冲突问题

// 处理fastclick与videojs冲突问题
FastClick.prototype.needsClick = function(target) {
  switch (target.nodeName.toLowerCase()) {
    // Don't send a synthetic click to disabled inputs (issue #62)
    case 'button':
    case 'select':
    case 'textarea':
      if (target.disabled) {
        return true
      }

      break
    case 'input':
    // File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
      if ((deviceIsIOS && target.type === 'file') || target.disabled) {
        return true
      }

      break
    case 'label':
    case 'iframe': // iOS8 homescreen apps can prevent events bubbling into frames
    case 'video':
      return true
  }
  // 修改源码的地方
  return ((/\bneedsclick\b/).test(target.className) || (/\bvjs/).test(target.className))

  // return (/\bneedsclick\b/).test(target.className);
}