最近接到客户需求, 要求我们的网页直播播放器更加符合广大人民群众的使用习惯,实现双击全屏的效果.目前网页直播播放器使用了开源的 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流媒体服务器官网 体验效果.
获取更多信息
安防流媒体直播-QQ交流群:615081503
国标GB28181无插件LiveGBS-QQ交流群:947137753
WEB:www.liveqing.com
TEL: Tel:187-0985-4855 (同微信)
Copyright © LiveQing.com 2016-2019
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)