VideoJS 网页直播实现双击全屏
来源:互联网 发布:360秒收录网站源码 编辑:程序博客网 时间:2024/06/14 14:46
最近接到客户需求, 要求我们的网页直播播放器更加符合广大人民群众的使用习惯,实现双击全屏的效果.目前网页直播播放器使用了开源的 VideoJS, 它的默认效果是单击播放区域暂停, 只能通过右下角的最大化按钮触发最大化. 要实现双击全屏播放的效果, 就要对 VideoJS 动点小手术, 下面介绍下其中两个关键的步骤.
一. 禁用单击暂停
google 得知已经有人提过这样的 issue, google 能够通过关键词搜索到 github 上面的 issues, 这一点非常的赞啊. 点击这个 issue 的链接进去, 可以看到, 作者回答并且给出了答案.
正如图中作者指出的, 通过下面一段 css 来屏蔽
.vjs-tech { pointer-events: none;}
二. 启用双击全屏
接下来就是启用双击全屏了. 用到一个 VideoJS 的 HotKeys 插件, 这个插件默认开启了 VideoJS 的双击全屏播放效果, 并且在全屏播放状态下, 再次双击退出全屏.集成这个插件, 只需两步:
1. 引用JS
<script src="//cdn.sc.gl/videojs-hotkeys/0.2/videojs.hotkeys.min.js"></script>
2. 配置 VideoJS 启用插件
videojs('vidId').ready(function() { this.hotkeys({ volumeStep: 0.1, seekStep: 5, enableVolumeScroll: false, //禁用鼠标滚轮调节问音量大小 enableModifiersForNumbers: false });});
以上完成了 VideoJS 网页直播播放器双击全屏的效果. 可以访问 EasyDSS流媒体服务器官网 体验效果.
阅读全文
0 0
- VideoJS 网页直播实现双击全屏
- VideoJS 网页直播实现默认静音
- 网页播放器禁止双击全屏
- html5实现网页全屏
- mfc实现播放器功能,双击全屏,再双击还原
- JS实现网页全屏与退出全屏
- JS实现网页全屏与退出全屏
- Android双击屏幕动态实现全屏(隐藏标题栏状态栏)
- Mplayer开启双击全屏
- android双击视频全屏
- 双击屏幕切换全屏
- as3双击屏幕全屏
- 双击退出全屏
- as3双击屏幕全屏
- 用javascript实现强制网页全屏
- IE下使用控件实现网页全屏
- JS实现网页全屏和退出
- laravel使用phantomJS实现网页全屏截图
- http协议详解及操作
- 20171105考试总结
- 求2个正整数之和
- PAT乙级题1023.组个最小数
- uboot的配置和编译文件解析
- VideoJS 网页直播实现双击全屏
- C语言结构体中最后一个成员为char[1]或char[0]
- Leetcode: 300. Longest Increasing Subsequence
- 周志华《Machine Learning》学习笔记(9)--EM算法
- HashMap和HashSet的区别
- 1242 斐波那契数列的第N项 运用矩阵快速幂来求解斐波那契数列问题
- 十 项目1 (1)
- 框架与设计模式
- 【LintCode】454.矩阵面积(入门)解题报告