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重写windows.alert方法实现思路
Apr 03 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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
咖啡知识大全
2021/03/03 新手入门
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PHP CURL使用详解
2019/03/21 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
jQuery入门知识简介
2010/03/04 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
python数据结构之链表详解
2017/09/12 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
python能做哪些生活有趣的事情
2020/09/09 Python
python 实现的车牌识别项目
2021/01/25 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
财务部岗位职责
2013/11/19 职场文书
房屋改造计划书
2014/01/10 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
面试后感谢信
2014/02/01 职场文书
2015年护士节活动总结
2015/02/10 职场文书
总经理检讨书范文
2015/02/16 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS