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

最近公司的产品上线了，一些高级功能并没有在基础版中为用户开发，而是以视频的形式展示。

利用Vue进行产品开发，同事介绍vue-video-player视频播放插件，通过演示案例快速实现视频播放效果

视频播放器类=' vjs-custom-skin ' ref=' video player 1 ' : options=' playerooptions ' : playsinline=' true ' : events=' events ' @ play=' onplaylayer play($ event)' @ pause=' onplayer pause($ event)' @ ended=' onplayer rended($ event)' @ loadeddata=' onplayer loadeddata($ event)' @ waiting=' onplayer playing=' onplay ' '

用配置项控制条： {全屏切换： false}，关闭全屏开关后，由于视频标准清晰度和显示区域大小为483 px303 px，视频中的内容根本看不清楚，老板说：‘要实现全屏不覆盖整个屏幕，而是通过一个固定大小的弹出层显示。’

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

视频播放器. events=' events ' @ full screen change=' onplayerfullscreenchange($ event ')./video-player//需要在events中指定全屏切换事件。否则，您无法收听data(){ return { video dialogvisible : false，//控制弹出层事件： ['全屏更改']}}。方法：onplayerfullscreenchange(播放器){player。退出全屏()//strong制退出全屏并恢复到正常大小这。videodialogvisible=true}.}虽然这种方法可以实现，但是强制退出全屏时整个页面都会跳转，网速慢或者电脑卡卡的时候效果更差。

没办法，继续想办法。在这个插件的GitHub库中，有网友提到了相关问题。通过注册自定义按钮组件，将其添加到播放器的控制栏中，并替换默认的全屏切换按钮

从“video.js”导入*为videojs导出默认值{.methods: {.createMyButton(){ let Button=videojs . getcomponent(' Button ')让myButton=videojs.extend(Button，{ constructor : function(player，options) { Button.apply(this，Arguments) this。addclass ('fullscreen-enter')}，handle click :()={//bind click event }，Build CSS class : function(){ return ' vjs-icon-custom button vjs-control vjs-button ' })//register videjs . register component(' mybutton '，my button)这个。$nextTick(()={//添加到此控件栏。$ refs . video player 1 . player . getchild(' control bar ')。addchild ('mybutton')})}}.}}//在样式中，指定自定义按钮样式样式。视频-js {。vjs-控制栏{。vjs-icon-custom button { font-family : videojs；font-weight:正常；font-style:正常；} .{ content: '\f108 '之前的vjs-icon-custom button :font-size : 1.8 em；线高： 1.67；}} }}/style自定义按钮图标使用默认全屏图标，然后必须实现按钮的点击事件

页面和弹出层分别有两个播放器实例，即视频播放器1和视频播放器2。需要考虑的是，触发自定义切换事件时，两个播放器是同步的(videoPlayer1播放10s，全屏切换后，videoPlayer2要从10s开始继续播放，而不是从头开始播放)

oncustombuttonclick(){ let _ time=this。$ refs . video player 1 . player . current time()//这次播放了。$ refs . video player 2 . player . current time(_ time)这个。$ refs . videoPlayer2 . player . play()}同样，在弹出层关闭后，必须将video player 2的播放时间分配给videoPlayer1，这是通过监控弹出层的显示、隐藏等事件来实现的。

摘要

上述边肖推出的vue-video-player通过自定义按钮组件实现全屏切换效果，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！