本文共 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;