vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

发布时间：2020-12-17 02:11:51 所属栏目：百科来源：网络整理

导读：最近公司的产品上线，一些高级功能在基础版本中不对用户开发，通过视频的形式展示。产品开发用的是 vue,经同事介绍使用了视频播放插件，通过案例很快实现了视频播放效果老板看了之后说: '不需要全屏切换,不需要让用户看的那么仔细', 通过配置项 controlBa

最近公司的产品上线，一些高级功能在基础版本中不对用户开发，通过视频的形式展示。

产品开发用的是 vue,经同事介绍使用了视频播放插件，通过案例很快实现了视频播放效果

老板看了之后说: '不需要全屏切换,不需要让用户看的那么仔细',

通过配置项 controlBar: {fullscreenToggle: false},关闭全屏切换后，由于视频标清、展示区域大小 483px X 303px,根本看不清视频里内容，老板又说："实现全屏不铺满整个屏幕，而是通过固定大小的弹出层展示"

首先想到的是：开启全屏切换，监听全屏切换的事件，在事件中强制退出全屏，显示固定大小的弹出层

这种办法，虽然能实现，但在强制退出全屏那一下，整个页面会跳一下，碰到网速慢，或电脑卡的情况，效果更差...

没办法，继续想办法，在该插件 GitHub 库中，有网友提过相关 ,通过注册一个自定义按钮组件，添加到播放器的 controlBar中,替换默认的全屏切换按钮

export default {
...
methods: {
...
createMyButton () {
let Button = videojs.getComponent('Button')
let myButton = videojs.extend(Button,{
constructor: function (player,options) {
Button.apply(this,arguments)
this.addClass('fullscreen-enter')
},handleClick: () => {
// 绑定点击事件
},buildCSSClass: function () {
return 'vjs-icon-custombutton vjs-control vjs-button'
}
})

//注册
videojs.registerComponent('myButton',myButton)

this.$nextTick(() => {
// 添加到controlBar中
this.$refs.videoPlayer1.player.getChild('controlBar').addChild('myButton')
})
}
...
}
}

// 在 style 中指定自定义按钮样式

自定义的按钮图标用的还是默认的，接着得实现按钮的点击事件

页面和弹出层中分别是俩个播放器实例 videoPlayer1， videoPlayer2，需要考虑到的是：当自定义切换事件触发后，俩个播放器的同步( videoPlayer1播放了10s,全屏切换后，videoPlayer2得从 10s 继续播放，而不是从头播放 )

同理：关闭弹出层后，也得把 videoPlayer2 的播放时长赋值给 videoPlayer1，此处是通过监听弹出层显示、隐藏等事件来实现

总结

以上所述是小编给大家介绍的vue-video-player 通过自定义按钮组件实现全屏切换效果。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!