dplayer js控制 自动全屏_vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】...
最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示。
产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频播放效果
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)">
老板看了之后说: '不需要全屏切换,不需要让用户看的那么仔细',
通过配置项 controlBar: {fullscreenToggle: false},关闭全屏切换后,由于视频标清、展示区域大小 483px X 303px,根本看不清视频里内容,老板又说:"实现全屏不铺满整个屏幕,而是通过固定大小的弹出层展示"
首先想到的是: 开启全屏切换,监听全屏切换的事件,在事件中强制退出全屏,显示固定大小的弹出层
...
:events="events"
@fullscreenchange="onPlayerFullScreenchange($event)"
...
>
// 需要在 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 中指定自定义按钮样式
.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;
}
}
}
}
自定义的按钮图标用的还是默认的全屏图标,接着得实现按钮的点击事件
页面和弹出层中分别是俩个 播放器实例 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 通过自定义按钮组件实现全屏切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
dplayer js控制 自动全屏_vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】...相关推荐
- dplayer js控制 自动全屏_vue 中使用video.js 实现m3u8视频播放格式
官方文档:https://docs.videojs.com/tutorial-vue.html H5 的 video 标签不支持m3u8视频播放,所以借助于 video.js 1.video 定义与用 ...
- dplayer js控制 自动全屏_Qt编写安防视频监控系统18-云台控制
一.前言 云台控制是视频监控系统中必备的一个功能,对球机进行上下左右的移动,还有焦距的控制,其实核心就是控制XYZ三个坐标轴,为了开发这个模块,特意研究了各种云台控制的方法和开源库比如soap,有些厂 ...
- pdfjs 使用viewer 实现自动翻页(js控制)
pdfjs 使用viewer 实现自动翻页 使用js控制自动翻页 //获取嵌入在iframe中的子页面的window对象var childWindow = $("#myFrame" ...
- js控制wmplayer
<html> <head> <script language="JavaScript" type="text/javascript&quo ...
- html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
- 鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果
今天来分享一下[鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码]. 最后的效果如下: Html代码部分: <!doctype html>&l ...
- 使用Raw Image和Unity自带的视频播放插件Video Player
使用Raw Image和Unity自带的视频播放插件Video Player导致视频不清晰 先创建Raw Image 在Raw Image身上添加Video Player和Audio Source组件 ...
- js 控制浏览器 实现全屏 和 退出全屏功能
在工作中我们偶尔遇到不需要浏览器导航栏和标题栏,需要将整个项目全屏展示的情况,虽然有一些快捷键可以实现此效果,但我们更希望项目中有类似的功能,可以让用户任意切换. 1.js 功能处理 //本案例只为演 ...
- js控制浏览器全屏踩坑记录
需求 点击以下按钮后,页面进入全屏. 进入全屏后,按钮样式改变为 恢复非全屏时,按钮自动恢复. 难点 需求很简单,但是实际上手发现有几个难点: 1.浏览器在全屏状态下按F11和Esc可以退出全屏,且全 ...
最新文章
- linux 6.4 图形界面,为CentOS 6.4安装图形界面并用VNC远程连接
- flume源码学习8-hdfs sink的具体写入流程
- iis多进程下的全局变量_Linux下c程序的内存映像
- 安全框架 - Shiro与springMVC整合的注解以及JSP标签
- golang 反射 获取 设置 结构体 字段值
- Google 翻译,梦想与现实的距离有多远
- Flutter SliverAnimatedOpacity 透明渐变动画效果
- 基于遗传算法的高校排课系统研究
- mac上如何安装oracle,在mac上安装oracle instant client 和 sqlplus
- 功能强大的Server.Transfer
- 变位齿轮重合度计算公式_齿轮变位系数的优化选择
- 3分钟快速了解猪齿鱼权限
- 时序分析28 - 时序预测 格兰杰因果关系(中) python实践1
- error: bad signature 0x00000000
- 笔记本设置wifi热点并抓包
- 笔记本电脑属于下列哪一类型的计算机,除尘清灰成本相差百倍!你的笔记本属于哪一类?...
- docker 安装redis详细说明
- python去除空行_python中去掉空行的问题
- 软件加速访问GitHub(mac/windows/linux通用)
- Testin徐琨:颠覆测试行业的四个必杀技
热门文章
- Java实现生产消费模型的5种方式
- (CCPC 2020 网络选拔赛)HDU 6900 Residual Polynomial(分治 + NTT)
- Codeforces Round #620 (Div. 2) E. 1-Trees and Queries 思维 + LCA
- Educational Codeforces Round 81 (Rated for Div. 2) B. Infinite Prefixes 数学
- hdu 7111-Remove
- CF1444C Team-Building(可持久化并查集)(二分图)
- jzoj1471-Y【bitset,dp,状压】
- 牛客-十二桥问题【最短路,状压dp】
- jzoj1246-挑剔的美食家【set,贪心】
- ssl1197-质数和分解【dp练习】