自定义组件
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);
}