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

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

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

 

<video-player
 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)">
</video-player>

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

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

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

<video-player
 ...
 :events="events"
 @fullscreenchange="onplayerfullscreenchange($event)"
 ...
>
</video-player>

// 需要在 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 中指定自定义按钮样式
<style>
.video-js{
  .vjs-control-bar{
  .vjs-icon-custombutton {
   font-family: videojs;
   font-weight: normal;
   font-style: normal; }
   .vjs-icon-custombutton:before {
   content: "\f108";
   font-size: 1.8em;
   line-height: 1.67;
   }
  }
 }
}
</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 通过自定义按钮组件实现全屏切换效果，希望对大家有所帮助