web点播/直播播放器-VideoJS 网页直播实现双击全屏
发布日期:2021-06-30 21:18:21
浏览次数:3
分类:技术文章
本文共 880 字,大约阅读时间需要 2 分钟。
博客整理了,我们免费web点播/直播播放器 相关功能的实现过程。记得关注哦。
网页直播播放器更加符合广大人民群众的使用习惯,实现双击全屏的效果.目前网页直播播放器使用了开源的 VideoJS, 它的默认效果是单击播放区域暂停, 只能通过右下角的最大化按钮触发最大化. 要实现双击全屏播放的效果, 就要对 VideoJS 动点小手术, 下面介绍下其中两个关键的步骤.
一. 禁用单击暂停
google 得知已经有人提过这样的 issue, google 能够通过关键词搜索到 github 上面的 issues, 这一点非常的赞啊. 点击这个 issue 的链接进去, 可以看到, 作者回答并且给出了答案.
正如图中作者指出的, 通过下面一段 css 来屏蔽
.vjs-tech { pointer-events: none;}
二. 启用双击全屏
接下来就是启用双击全屏了. 用到一个 这个插件默认开启了 VideoJS 的双击全屏播放效果, 并且在全屏播放状态下, 再次双击退出全屏.集成这个插件, 只需两步:
1. 引用JS
2. 配置 VideoJS 启用插件
videojs('vidId').ready(function() { this.hotkeys({ volumeStep: 0.1, seekStep: 5, enableVolumeScroll: false, //禁用鼠标滚轮调节问音量大小 enableModifiersForNumbers: false });});
以上完成了 VideoJS 网页直播播放器双击全屏的效果.
三. liveplayer介绍
强大的
网页直播/点播
播放器,使用简单,功能强大,终身免费使用
- 支持m3u8播放;
- 支持HTTP-FLV播放;
- 支持RTMP播放;
- 支持直播和点播播放;
- 支持播放器快照截图;
- 支持点播多清晰度播放;
- 支持全屏或比例显示;
- 自带的flash支持极速和流畅模式;
- 自带的flash支持HTTP-FLV播放;
- 自动检测IE浏览器兼容播放;
详见:
转载地址:https://liveqing.blog.csdn.net/article/details/88836683 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年05月03日 18时03分17秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
orw_shellcode_模板
2019-04-30
[fmt+shellcode]string
2019-04-30
fmt在bss段(neepusec_easy_format)
2019-04-30
[double free] 9447 CTF : Search Engine
2019-04-30
python 函数式编程
2019-04-30
python编码
2019-04-30
scala maven plugin
2019-04-30
flink 1-个人理解
2019-04-30
redis cli
2019-04-30
redis api
2019-04-30
flink physical partition
2019-04-30
java 解析json
2019-04-30
java http请求
2019-04-30
tensorflow 数据格式
2019-04-30
tf rnn layer
2019-04-30
tf input layer
2019-04-30
tf model create
2019-04-30
tf dense layer两种创建方式的对比和numpy实现
2019-04-30
tf initializer
2019-04-30