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

【推荐】

最近公司的产品上线，⼀些⾼级功能在基础版本中不对⽤户开发，通过视频的形式展⽰。产品开发⽤的是 vue, 经同事介绍使⽤了视频播放插件，通过 案例很快实现了视频播放效果

class=\"vjs-custom-skin\" ref=\"videoPlayer1\"

:options=\"playerOptions\" :playsinline=\"true\" :events=\"events\"

@play=\"onPlayerPlay($event)\" @pause=\"onPlayerPause($event)\" @ended=\"onPlayerEnded($event)\"

@loadeddata=\"onPlayerLoadeddata($event)\" @waiting=\"onPlayerWaiting($event)\" @playing=\"onPlayerPlaying($event)\"

@timeupdate=\"onPlayerTimeupdate($event)\" @canplay=\"onPlayerCanplay($event)\"

@canplaythrough=\"onPlayerCanplaythrough($event)\" @ready=\"playerReadied\"

@statechanged=\"playerStateChanged($event)\">

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

通过配置项 controlBar: {fullscreenToggle: false}, 关闭全屏切换后，由于视频标清、展⽰区域⼤⼩ 483px X 303px,根本看不清视频⾥内容，⽼板⼜说：\"实现全屏不铺满整个屏幕，⽽是通过固定⼤⼩的弹出层展⽰\"

⾸先想到的是： 开启全屏切换，监听全屏切换的事件，在事件中强制退出全屏，显⽰固定⼤⼩的弹出层

:events=\"events\"

@fullscreenchange=\"onPlayerFullScreenchange($event)\" ...>

// 需要在 events 中指定全屏切换事件，不然⽆法监听data () { return {

videoDialogVisible: false, // 控制弹出层 events: ['fullscreenchange'] }},

methods: { ...

onPlayerFullScreenchange (player) {

player.exitFullscreen() //强制退出全屏，恢复正常⼤⼩

this.videoDialogVisible = true } ...}

这种办法，虽然能实现，但在强制退出全屏那⼀下，整个页⾯会跳⼀下，碰到⽹速慢，或电脑卡的情况，效果更差...没办法，继续想办法，在该插件 GitHub 库中，有⽹友提过相关 , 通过 注册⼀个⾃定义按钮组件，添加到播放器的 controlBar中,替换默认的全屏切换按钮

import * as videojs from 'video.js'

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 继续播放，⽽不是从头播放 )

onCustombuttonClick () {

let _time = this.$refs.videoPlayer1.player.currentTime() //已播放时长 this.$refs.videoPlayer2.player.currentTime(_time) this.$refs.videoPlayer2.player.play()}

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

总结

以上所述是⼩编给⼤家介绍的vue-video-player 通过⾃定义按钮组件实现全屏切换效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！