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

原文地址：http://www.javashuo.com/article/p-zzhvjpii-bo.html，轉載請說明出處。

 

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

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

因爲本人項目使用的是 angular1.* 版本，因此封裝了一個directive使用ckplayer，詳情能夠查看個人另外一篇博文：http://www.javashuo.com/article/p-mcdillnk-cq.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;