博客
关于我
修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题
阅读量:433 次
发布时间:2019-03-06

本文共 3482 字,大约阅读时间需要 11 分钟。

原文地址:,转载请说明出处。

 

最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和jwplayer,由于ckplayer是国内大牛开发的,中文文档比较官方,而且主要是文档说可以禁用拖动,就直接使用了ckplayer,没有测试jwplayer,待日后有时间再学习~~

ckplayer的使用文档见官方网站: ,当前CKplayer.js版本为X

由于本人项目使用的是 angular1.* 版本,所以封装了一个directive使用ckplayer,详情可以查看我的另一篇博文:

 

目标:限制未观看过的视频部分快进

默认:修改ckplayer.js中 timeScheduleAdjust:5 (该值表示是否可调节调节栏,0不启用,1是启用,2是只能前进(向右拖动),3是只能后退,4是只能前进但能回到第一次拖动时的位置,5是看过的地方可以随意拖动)或 player.changeConfig('config','timeScheduleAdjust',5)

问题:timeScheduleAdjust 设置为5后在pc端能限制点击鼠标和拖动不播放未观看的视频部分,但在移动端浏览器播放会自动全屏,自带浏览器无法限制不播放未观看过的部分。

解决历程:

ckplayer 有个属性 mobileCkControls:false ,用于控制是否在移动端显示ckplayer 控制栏,默认是false,设置该值为 true 后在移动端确实显示ckplayer风格的控制栏,效果如下图

但是该控制栏在移动端点击全屏按钮无法全屏!!!而在IOS浏览器中点击播放视频默认的是全屏播放,于是想大不了都不要全屏了,是否可以限制在浏览器中的全屏?查资料想解决移动端播放自动全屏的问题,首先查到的是在前端控件中添加 webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow" ,然而查看ckplayer.js 默认是添加了这些属性的(可以在ckplayer.js 中查找关键字 <video 定位查看)

 

很显然在微信端有什么特殊代码控制了可以不默认全屏播放,继续查资料了解到在APP中(Obj-C代码)设置以下代码可以控制移动端不默认全屏播放

webview.allowsInlineMediaPlayback = YES;

可以推断微信APP设置了该属性,而移动端浏览器(移动端Safari,chrome)没有,但是我这个项目是网站啊,没有APP,所以它这个 webview.allowsInlineMediaPlayback = YES 我设置不了啊!!!

如果设置 mobileCkControls:false或不设置该属性,则使用移动端默认的控制栏风格,在IOS微信中是可以播放不全屏的,也可以点击右下角控制全屏播放(如下图这样,原因如上微信设置了 webview.allowsInlineMediaPlayback = YES),

在移动端浏览器中点击播放后仍然是默认全屏,但不管是不是默认全屏,全屏后无法限制未观看部分的拖动是根本问题,经过官网实例index.html 发现拖动后有个start和ended,于是查找源码eventSeeking,尝试在其中修改添加如下代码,控制移动端全屏播放时拖动后回到拖动起始位置。

//监听视频seek开始事件            var eventSeeking = function (event) {                if (document.body.clientWidth < 768) {//移动端                    var nowP = thisTemp.time / thisTemp.V.duration;                    if (thisTemp.timeSliderLeftTemp < nowP) {                        thisTemp.timeSliderLeftTemp = nowP;                    }                    // console.log("点击的时间点位thisTemp.V.currentTime = ", thisTemp.V.currentTime);                    // console.log("当前时间点位thisTemp.time = ", thisTemp.time);                    // console.log("百分比this.timeSliderLeftTemp = ", thisTemp.timeSliderLeftTemp);                    // console.log("总时长:", thisTemp.V.duration);                    var nowprocess = thisTemp.V.currentTime / thisTemp.V.duration;                    if (thisTemp.timeSliderLeftTemp < 1) {                        if (thisTemp.V.currentTime > thisTemp.time && nowprocess > thisTemp.timeSliderLeftTemp) {                            console.log("您点击的超出播放位置了", nowprocess);                            thisTemp.V.currentTime = thisTemp.V.duration * thisTemp.timeSliderLeftTemp;                        }                    }                }                thisTemp.sendJS('seek', 'start');            };

以上,问题解决!

 

补充一个问题解决:设置timeScheduleAdjust 后,pc端使用左右键仍然可以跳过限制继续快进快退,右键解决思路如下,左键雷同。ckplayer.js源码查找函数checkSlideLeft,添加以下代码:

case 5:                    //console.log("timesliderleftTemp = ", this.timeSliderLeftTemp);                    // console.log("滑块位置sliderleft = ", sliderLeft, "总长度 refer = ", refer, "点击的位置:", newX);                    if (!this.timeSliderLeftTemp) {                        this.timeSliderLeftTemp = sliderLeft / refer;                    } else {                        var timeSliderMax = sliderLeft / refer;                        if (timeSliderMax > this.timeSliderLeftTemp) {                            this.timeSliderLeftTemp = timeSliderMax;                        }                    }                    if (newX > this.timeSliderLeftTemp * refer) {                        return false;                    }                    break;

 

你可能感兴趣的文章
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>
Mysql 数据库重置ID排序
查看>>
Mysql 数据类型一日期
查看>>
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>