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


Posted in Javascript onAugust 29, 2018

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

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

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

<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 库中,有网友提过相关 issues , 通过 注册一个自定义按钮组件,添加到播放器的 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 通过自定义按钮组件实现全屏切换效果【推荐】 

总结

以上所述是小编给大家介绍的vue-video-player 通过自定义按钮组件实现全屏切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
jquery退出each循环的写法
Feb 26 Javascript
javascript实现2048游戏示例
May 04 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
vue-cli3.0使用及部分配置详解
Aug 29 #Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 #Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 #Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 #Javascript
Vuex 使用及简单实例(计数器)
Aug 29 #Javascript
浅谈Vue.use的使用
Aug 29 #Javascript
微信小程序支付前端源码
Aug 29 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
第二节 对象模型 [2]
2006/10/09 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
js单例模式详解实例
2013/11/21 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python查看模块,对象的函数方法
2018/10/16 Python
python中的协程深入理解
2019/06/10 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
python 制作网站小说下载器
2021/02/20 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
总经理的岗位职责
2014/02/23 职场文书
小学生环保演讲稿
2014/04/25 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
2019大学生实习报告
2019/06/21 职场文书
golang slice元素去重操作
2021/04/30 Golang
MySQL慢查询优化解决问题
2022/03/17 MySQL