修改CKplayer.js 源碼解決移動端瀏覽器全屏不能限制快進的問題

原文地址：https://www.cnblogs.com/jying/p/9642445.html，轉載請說明出處。

 

最近項目需要播放視頻且限制未觀看部分的快進功能，找了兩款js插件ckplayer和jwplayer，由於ckplayer是國內大牛開發的，中文文檔比較官方，而且主要是文檔說可以禁用拖動，就直接使用了ckplayer，沒有測試jwplayer，待日后有時間再學習~~

ckplayer的使用文檔見官方網站：http://www.ckplayer.com ，當前CKplayer.js版本為X

由於本人項目使用的是 angular1.* 版本，所以封裝了一個directive使用ckplayer，詳情可以查看我的另一篇博文：https://www.cnblogs.com/jying/p/9519557.html

 

目標：限制未觀看過的視頻部分快進

默認：修改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;