博客整理了，我们免费web点播/直播播放器liveplayer 相关功能的实现过程。记得关注哦。

网页直播播放器更加符合广大人民群众的使用习惯,实现双击全屏的效果.目前网页直播播放器使用了开源的 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 网页直播播放器双击全屏的效果.

三. liveplayer介绍

强大的网页直播/点播播放器，使用简单，功能强大，终身免费使用

支持m3u8播放;
支持HTTP-FLV播放;
支持RTMP播放;
支持直播和点播播放;
支持播放器快照截图;
支持点播多清晰度播放;
支持全屏或比例显示;
自带的flash支持极速和流畅模式;
自带的flash支持HTTP-FLV播放;
自动检测IE浏览器兼容播放;

详见：https://www.npmjs.com/package/@liveqing/liveplayer

web点播/直播播放器-VideoJS 网页直播实现双击全屏相关推荐

swf无法在html播放器,错误？ FlashPlayer 10根据SWF/HTML播放器设置，投影机无法进入全屏...
我们现在使用Flash CS4发布我们的FlashPlayer(SWF)和投影机(EXE),但一直有问题,投影机未运行全屏幕,但我们无法明白为什么.错误? FlashPlayer 10根据SWF/HT ...
html5中音频、视频标签、自定义播放器常用属性及方法、全屏操作、新增属性兼容问题
多媒体标签: 音频标签audio: <audio src="音频文件的URL"></audio><!-- audio标签需要controls控件才可以 ...
腾讯X5内核使用详解（X5内核播放器使用如何去除控制栏全屏播放）以及一些注意事项...
例子下载地址 https://www.lanzous.com/i2zsv5g GIT就不用了麻烦的不行本人安卓刚学就上X5内核弄了老长时间由于对maven 和idea不熟悉刚开始导包都是 ...
html全屏播放js,使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
阿里云点播集成播放器的SDK时遇到的黑屏有声音的问题
在集成阿里云的点播功能时,集成他的sdk后播放视频遇到,有声音没有画面的问题! 在mPlayer = new AliVcMediaPlayer(AliVcMediaPlayerActivity.thi ...
Android直播播放器+弹幕使用总结
今日科技快讯继越狱.刷榜之后,寄生于苹果系统.打着第三方iOS助手类旗号的新手段正在崛起.这是一种不同于越狱的渠道,它无需越狱,不破坏苹果上的软件包,只是在软件上面打开一个口子,叠加一个支付账户出口 ...
android弹幕视频播放器,Android直播播放器弹幕使用总结
今日科技快讯作者简介本篇是小河马的第二篇投稿,分享了他学习开源播放器的过程.希望能对大家有所帮助. 小河马的博客地址:http://www.jianshu.com/u/14354bcb0e09介 ...
Web直播播放器1.0——腾讯sdk网页直播播放器
https://www.qcloud.com/document/product/267/5704 功能介绍腾讯云视频直播播放器Web SDK解决方案,可帮助腾讯云视频用户直接使用经过验证的视频播放能 ...
免费视频直播、点播H5播放器SkeyeWebPlayer播放常见问题
免费视频直播.点播H5播放器SkeyeWebPlayer使用常见问题 1.用常见问题--配置iframe允许自动播放和全屏 SkeyeWebPlayer播放器在PC上正常情况下单击播放器的全屏按钮是可 ...

web点播/直播播放器-VideoJS 网页直播实现双击全屏