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的控制tabs打开的数量的代码
Oct 17 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
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
消息持续发送的完整例子
2006/10/09 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
phpfpm的作用和用法
2019/10/10 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
Three.js快速入门教程
2016/09/09 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
班级旅游计划书
2014/05/03 职场文书
企业标语大全
2014/07/01 职场文书
职工宿舍管理制度
2015/08/05 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android