☰

devTest

播放器滑动快进+移除弹窗/googletagmanager+整体页面缩放

// ==UserScript==
// @license MIT
// @name         devTest
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  播放器滑动快进+移除弹窗/googletagmanager+整体页面缩放
// @author       You
// @include      /^https://www.kmbb\d+\.com.+$/
// @include      /^https://www.kmbbb\d+\.com.+$/
// @include      /^https://www.kmff\d+\.com.+$/
// @include      /^https://h5.kmbb\d+\.com.+$/
// @include      /^https://h5.kmbbb\d+\.com.+$/
// @include      /^https://h5.kmff\d+\.com.+$/
// @include      /^https://.+\.kmpp\d+\.com.+$/
// @match        http://re05.cc/*
// @match        http://re06.cc/*
// @icon         https://www.kmbb59.com/favicon.ico
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

        var LSwiperMaker = function(o){

            var that = this;
            this.config = o;
            this.control = false;
            this.sPos = {};
            this.mPos = {};
            this.dire;
            // console.log('LSwiperMaker o', o);

            // this.config.bind.addEventListener('touchstart', function(){ return that.start(); } ,false);
            // 这样不对的，event对象只在事件发生的过程中才有效;
            this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
            this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
            this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);

        }

        LSwiperMaker.prototype.start = function(e){

             var point = e.touches ? e.touches[0] : e;
             this.sPos.x = point.screenX;
             this.sPos.y = point.screenY;
             //document.getElementById("start").innerHTML = "开始位置是:"+this.sPos.x +" "+ this.sPos.y ;
            // console.log('start', this.sPos.x, this.sPos.y);

        }
        LSwiperMaker.prototype.move = function(e){

            var point = e.touches ? e.touches[0] : e;
            this.control = true;
            this.mPos.x = point.screenX;
            this.mPos.y = point.screenY;
            //document.getElementById("move").innerHTML = "您的位置是："+this.mPos.x +" "+ this.mPos.y ;

        }

        LSwiperMaker.prototype.end = function(e){

            this.config.dire_h  && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = 'R' : this.dire = 'L')
            this.config.dire_h  || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')

            this.control = false;
            this.config.backfn(this);

        }

        window.LSwiperMaker = LSwiperMaker;
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, { passive: false });// 禁止微信touchmove冲突



// 注册视频播放器手指滑动监听事件-完成进度条同步前进后退的功能
function initScroll(el){
    var a = new LSwiperMaker({
        bind:el,// 绑定的DOM对象
        dire_h:true, //true 判断左右， false 判断上下
        backfn:function(o){ //回调事件
            // console.log('o', o);
            // console.log(`向${o.dire}滑`);
            // document.getElementById("dire").innerHTML = "向"+ o.dire + "滑";
            let videoObj = o.config.bind
            let stepValue = moveStepComputed(videoObj, o);
            if(o.dire=="R"){
                // console.log("R");
                videoObj.currentTime = videoObj.currentTime + stepValue
            }else if(o.dire=="L"){
                videoObj.currentTime = videoObj.currentTime - stepValue
            }
        }
    })
}

// 计算需要移动的距离
function moveStepComputed(videoObj, that) {
    let duration = parseInt(videoObj.duration); //单个视频总时长单位秒 取整数
    let clientWidth = parseInt(videoObj.clientWidth); //播放器宽度
    let clientHeight = parseInt(videoObj.clientHeight) //播放器高度

    let transverseLength = clientWidth > clientHeight ? clientWidth : clientHeight; //取宽高两值中的较大值作为 横向的长度

    let moveLength = Math.abs(that.mPos.x - that.sPos.x) || 0 //移动的横向距离
    console.log('单次滑动距离 moveLength', moveLength);

    //
    let stepVal = 0;
    let minStep = 5;
    let durationBoundary = 300;

    // 移动 1/5 个屏幕的宽度 时间最多变化 1/10 的视频长度
    let xOfTransverseLength = 5;
    let xOfDuration = 10;
    let maxStep = parseInt(duration/xOfDuration);



    // durationBoundary 视频时长边界 视频小于该值  每次滑动变化5秒
    //  minStep 单次滑动最少变化 5秒
    //  xOfTransverseLength  1/X个屏幕宽度
    // maxStep 单次滑动最大变化 duration/10 秒

    if (duration < durationBoundary) {
        console.log('11111111视频较短，最多一次5s');
        stepVal = minStep;
    } else {
        if (moveLength > parseInt(transverseLength/xOfTransverseLength)) {
            console.log('222222222222到达滑动一次变化极限，一次', maxStep, '秒');
            stepVal = maxStep
        } else {
            stepVal = (moveLength/parseInt(transverseLength/xOfTransverseLength))*maxStep
            console.log('333333333333正常滑动距离，一次', stepVal, '秒');
        }
    }
    return stepVal;
}


function hideAlertDialog () {
    let AlertDialogElArray = document.querySelectorAll('.loginAboutPopup');
    if (AlertDialogElArray && AlertDialogElArray.length) {
        AlertDialogElArray.forEach((item, inde)=>{
            item.style.display = 'none';
            //console.log('item', item);
        });
        //console.log('loopend', AlertDialogElArray)
    }
}

function removeTrack() {
    let body = document.querySelector('body');
    let scriptArr = document. getElementsByTagName('script'); //HTMLCollection 类数组结构 使用for可进行遍历 不可使用forEach
    let tempELArray = [];
    let checkTrackReg = /googletagmanager/ig;
    console.log('scriptArr', scriptArr);
    for(let i = 0;i < scriptArr.length;i++) {
        let item = scriptArr[i];
        let attributes = item.attributes;
        let innerText = item.innerText;

        //移除googletagmanager
        if (attributes && attributes.src) {
            let checkRes = checkTrackReg.test(attributes.src.value);
            if (checkRes) {
                console.log('被移除掉的脚本是', item);
                body.removeChild(item);
                continue;
            }
        }
    }
}



function checkUrlAddListenser() {
    let reg = /\/videoContent\//ig;
    var interval = 0;
        if (window.location.href) {
            if (reg.test(window.location.href)) {
                interval = setInterval(() => {
                    //console.log('setInterval 获取元素', document.querySelector('.dplayer-video.dplayer-video-current'))
                    if (document.querySelector('.dplayer-video.dplayer-video-current')) {
                        initScroll(document.querySelector('.dplayer-video.dplayer-video-current'));
                        bindBd();

                        clearInterval(interval);
                        console.log('找到了对应播放器页面dom元素且绑定了滑动快进事件')
                    }
                }, 3000);
            } else {
               console.log('不是视频播放页');
            }
        }
}

var timer = null;
// 视频的上层元素 document.querySelectorAll('.unLoginBox.dplayer') 单击不再暂停  双击暂停
function bindBd () {
    console.log('bindBd xxxxxxxxxx');
    let el = document.querySelectorAll('.unLoginBox.dplayer') && document.querySelectorAll('.unLoginBox.dplayer')[0];

    console.log('bindBd el', el);
    if (el) {
        let videControlPlayBtn = document.querySelectorAll('.unLoginBox.dplayer .dplayer-controller .dplayer-play-icon')[0]
        //el.addEventListener('click', function () {
            //console.log('单击');
            //clearTimeout(timer); //清除未执行的定时器
            //timer = setTimeout(function () {
            //    console.log('单击');
            //}, 400);
            //event.stopImmediatePropagation();
        //},true);
        el.addEventListener('dblclick', function () {
            console.log('双击');
            //clearTimeout(timer); //清除未执行的定时器
            //videControlPlayBtn.click();
            //event.stopImmediatePropagation();
        },true)
    }



}


// 移动端页面滚动
function mobileCssSet () {
    console.log('mobileCssSet before');
    // 基础的几个容器样式需要设置overflow 为 scroll
    let body = document.querySelector('body');
    let app = document.querySelector('#app');
    let index = document.querySelector('#index');
    let publicHeaderModule = document.querySelector('#publicHeaderModule');

    let pageHeaderElArray = document.querySelectorAll('#publicHeaderModule>div');
    let pageMainContent = document.querySelector('.publicBigMainContentBox');
    let publicFooterModule = document.querySelector('#publicFooterModule');

    let scrollVal = 'initial';
    console.log('元素列表');
    console.log(body,app,index,publicHeaderModule,pageHeaderElArray,pageMainContent,publicFooterModule)
    body.style.overflowX = scrollVal;
    app.style.overflowX = scrollVal;
    index.style.overflowX = scrollVal;
    publicHeaderModule.style.overflowX = scrollVal;
    pageMainContent.style.overflow = scrollVal;
    pageHeaderElArray[0].style.overflowX = scrollVal;
    pageHeaderElArray[1].style.overflowX = scrollVal;
    pageHeaderElArray[2].style.overflowX = scrollVal;
    publicFooterModule.style.overflowX = scrollVal;


    let videoContainer = document.querySelector('#videoContent .video>div');
    //videoContainer.style.width = '100vw';
   //document.ontouchstart = function(e) {
   //     console.log('重置.document.ontouchstart');
   // };
   // document.ontouchmove = function(e) {
    //    console.log('重置.document.ontouchmove');
   // };
   // document.addEventListener("touchmove",function(e){
   //     console.log('addEventListener 出发了11111111111111111')
    //});
    console.log('mobileCssSet end');
}


function removeMask() {
    let pageHeaderElArray = document.querySelectorAll('.el-dialog__wrapper');
    pageHeaderElArray[0].style.display = 'none';
    pageHeaderElArray[1].style.display = 'none';
    pageHeaderElArray[2].style.display = 'none';
    pageHeaderElArray[3].style.display = 'none';

}

// 页面缩放
function bodyScale() {
    let devicewidth = document.documentElement.clientWidth;
    let scale = devicewidth / 1920; // 分母——设计稿的尺寸宽度

    let videoWidth = 1200*scale;
    let videoCompareWidth = devicewidth/videoWidth;
    console.log('devicewidth', devicewidth);
    console.log('videoWidth', videoWidth);
    console.log('设备宽度是视频宽度的', videoCompareWidth);
    document.body.style.zoom = (scale*videoCompareWidth).toFixed(2);
}
window.onresize = function () {
    bodyScale();
};
window.onload = function () {
    bodyScale();
    mobileCssSet();
    checkUrlAddListenser();
    console.log('page onload');
    removeMask();
    hideAlertDialog();
    removeTrack();
};