☰

触摸屏视频优化

触摸屏视频播放手势支持，上下滑调整音量，左右滑调整进度

目前为 2022-04-16 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         触摸屏视频优化
  3. // @namespace    https://github.com/HeroChan0330
  4. // @version      2.15
  5. // @description  触摸屏视频播放手势支持，上下滑调整音量，左右滑调整进度
  6. // @author       HeroChanSysu
  7. // @match        https://*/*
  8. // @match        http://*/*
  9. // @match        ftp://*/*
  10. // @grant        GM_addStyle
  11. // ==/UserScript==
  12.  
  13. var TouchGesture={forbidScroll:false,orientationLocked:false,ismobile:false};
  14. var TouchGestureWhiteList={
  15.     "www.bilibili.com":{
  16.         "bilibili-player-video":"bilibili-player-area",
  17.         forbidScrollList:["bilibili-player-dm-tip-wrap"]
  18.     },
  19.     "m.bilibili.com":{
  20.         forbidScrollList:["player-mobile-display","mplayer-display"]
  21.     },
  22.     "weibo.com":{
  23.         forbidScrollList:["wbpv-tech","wbpv-open-layer-button"]
  24.     },
  25.     "www.youtube.com":{
  26.         "html5-video-container":"ytd-player",
  27.         forbidScrollList:["video-stream"]
  28.     },
  29.     "m.youtube.com":{
  30.         "html5-video-container":"player-container",
  31.         forbidScrollList:["animation-enabled","player-controls-background"]
  32.     },
  33.     "v.youku.com":{
  34.         "youku-film-player":"youku-film-player",
  35.         "video-layer":"youku-player",
  36.         forbidScrollList:["yk-trigger-layer","kui-dashboard-display-panel","kui-message-information"]
  37.     },
  38.     "www.facebook.com":{
  39.         forbidScrollList:["i09qtzwb"]
  40.     }
  41.  
  42. };
  43.  
  44.  
  45. var CustomizedVideoTAG = {
  46.     "www.bilibili.com":["bwp-video"]
  47. };
  48.  
  49. var TouchGestureBlackList=[
  50.     "v.qq.com"
  51. ];
  52.  
  53. var forbidScrollList=[];
  54.  
  55. TouchGesture.VideoGesture=function(videoElement){
  56.     this.touchDownPt=null; //触摸按下时得位置
  57.     this.touchStartPt=null; //顺着一定方向滑动时并触发功能，开始计算的点
  58.  
  59.     this.sweepDir=0; //0:no sweep 1:up 2:down 3:left 4:right
  60.     this.startTouchVideoTime; 
  61.     this.startTouchVideoVolume;
  62.     this.touchResult=0; //触摸结果暂存
  63.     this.startTouchFingers=0; //在触发功能前触摸点数
  64.     this.originalPlayrate=1; //视频原本的播放速率
  65.     //this.bodyPosition="";
  66.     this.videoBrightness=1;
  67.     this.startTouchBrightness=1;
  68.     this.longTouch=false;
  69.  
  70.     this._videoSrcStore=null;
  71.     this._videoElement=videoElement;//对象video标签
  72.     this._videoElementAbLeft=0; //video标签相对页面的left
  73.     this._elementFrame=null;//文字显示的框架
  74.     this._toastText=null; //文字显示
  75.     this._unlockBtn = null; //解锁按钮
  76.  
  77.     this._containElement=null; //_elementFrame的父级
  78.     this._eventListenElement=null;//监听触摸动作的元素
  79.  
  80.     this._fullScreenNow=tg_IsFullscreen();
  81.     if(this._videoElement.style.filter=="" || this._videoElement.style.filter==null)
  82.         this._videoElement.style.filter = "brightness(1)";
  83.     // console.log("_fullScreenNow:"+this._fullScreenNow);
  84.  
  85.     // console.log(TouchGestureWhiteList);
  86.     // console.log(TouchGestureWhiteList["www.bilibili.com"]!=null);
  87.     this.createDom();
  88.     this.findBestRoot();
  89.     this.applyDom();
  90.  
  91.  
  92.     // video内地址更改时，重新设置页面(针对bilibili连续播放)
  93.     var self = this;
  94.     this._videoElement.addEventListener('play', function () { //播放开始执行的函数
  95.         if(self._videoSrcStore == null){
  96.             // alert("first play");
  97.             self._videoSrcStore=self._videoElement.src;
  98.  
  99.         }else if(self._videoElement.src!=self._videoSrcStore){
  100.             // alert("replay");
  101.             self.restoreDom();
  102.             self.findBestRoot();
  103.             self.applyDom();
  104.         }
  105.     });
  106.  
  107.     // this._videoElement.addEventListener('canplay', function () {
  108.     //     self._videoWidth = this.videoWidth;
  109.     //     self._videoHeight = this.videoHeight;
  110.     // });
  111.  
  112. };
  113.  
  114. // 产生显示元素
  115. TouchGesture.VideoGesture.prototype.createDom=function(parentElement){
  116.  
  117.     var toastDiv=document.createElement("div");
  118.     var toastText=document.createElement("span");
  119.     var unlockBtn = document.createElement("div");
  120.  
  121.     toastDiv.appendChild(toastText);
  122.     toastDiv.classList.add("TouchGesture_Toast");
  123.     toastText.classList.add("TouchGesture_ToastText");
  124.     unlockBtn.classList.add("TouchGesture_UnlockBtn");
  125.     
  126.     toastDiv.style.display="none";
  127.     unlockBtn.style.display="none";
  128.     unlockBtn.innerHTML = "🔒";
  129.     
  130.     this._elementFrame=toastDiv;
  131.     this._toastText=toastText;
  132.     this._unlockBtn = unlockBtn;
  133.  
  134.     this._elementFrame.classList.add("TouchGestureForbidScroll");
  135.     this._toastText.classList.add("TouchGestureForbidScroll");
  136.     this._unlockBtn.classList.add("TouchGestureForbidScroll");
  137.  
  138.     this._touchStartHandler=this.onTouchStart.bind(this);
  139.     this._touchEndHandler=this.onTouchEnd.bind(this);
  140.     this._touchMoveHandler=this.onTouchMove.bind(this);
  141.     this._windowResizeHandeler=this.fullScreenDetect.bind(this);
  142.     window.addEventListener("resize",this._windowResizeHandeler,"false");
  143.     // this._orientationChange = this.onOrientationChange;
  144.     // window.addEventListener("orientationchange",this._orientationChange,"false");
  145.  
  146.     var self = this;
  147.     this._unlockBtn.onclick=function(event){
  148.         // console.log("unlock cancel");
  149.         screen.orientation.unlock();
  150.         event.stopPropagation();
  151.     };
  152.  
  153.     this._unlockBtn.addEventListener("transitionend",function(){
  154.         self._unlockBtn.style.display = "none";
  155.     });
  156.  
  157. };
  158.  
  159. // 找到显示元素最佳的parent及监听元素
  160. TouchGesture.VideoGesture.prototype.findBestRoot=function(){
  161.     var self=this;
  162.     var targetElement=this._videoElement;
  163.     var hostDomain=window.location.host;
  164.     var defaultSetting=TouchGestureWhiteList[hostDomain];
  165.     var defaultSettingSuccess=false;
  166.     if(defaultSetting!=null){
  167.         // console.log("defaultSetting!=null");
  168.         var parentElement=this._videoElement.parentElement;
  169.         // console.log(parentElement);
  170.         var inList=false;
  171.         var targetFrameClass="";
  172.         //vertify whether the video parentelement`s classname is in the whitelist
  173.         if(parentElement.classList){
  174.             parentElement.classList.forEach(element => {
  175.                 if(defaultSetting[element]!=null){
  176.                     targetFrameClass=defaultSetting[element];
  177.                     inList=true;
  178.                     // console.log(targetFrameClass+" INLIST");
  179.  
  180.                     // break;
  181.                     return;
  182.                 }
  183.             });
  184.         }
  185.         if(inList==true){
  186.             var finded=false;
  187.             var temp=parentElement;
  188.             while(finded==false){
  189.                 if(temp.classList.contains(targetFrameClass)){
  190.                     finded=true;
  191.                     defaultSettingSuccess=true;
  192.                     self._containElement=temp;
  193.                     self._eventListenElement=temp;
  194.                     break;
  195.                     // console.log("FIND");
  196.                 }
  197.                 temp=temp.parentElement;
  198.                 if(temp.tagName.toLowerCase()=="body"){
  199.                     break;
  200.                 }
  201.             }
  202.         }
  203.     }
  204.  
  205.     if(defaultSettingSuccess==false){
  206.         if(this._fullScreenNow==false){
  207.             targetElement=targetElement.parentElement;
  208.             var topest=false;
  209.             while(!topest){
  210.                 // targetElement.classList.add("TouchGestureForbidScroll");
  211.                 var temp=targetElement.parentElement;
  212.                 var size1=targetElement.offsetWidth*targetElement.offsetHeight;
  213.                 var size2=temp.offsetWidth*temp.offsetHeight;
  214.                 if(temp.offsetWidth>=targetElement.offsetWidth&&temp.offsetHeight>=targetElement.offsetHeight&&size2/size1<=1.2){
  215.                     targetElement=temp;
  216.                 }else{
  217.                     topest=true;
  218.                 }
  219.                 if(temp.tagName.toLowerCase()=="body"){
  220.                     break;
  221.                 }
  222.             }
  223.             self._containElement=targetElement;
  224.             self._eventListenElement=targetElement;
  225.         }else{
  226.             // alert("FULLSCREEN!");
  227.             if(document.fullscreenElement!=null){
  228.                 self._containElement=document.fullscreenElement;
  229.                 self._eventListenElement=document.fullscreenElement;
  230.             }
  231.         }
  232.     }
  233.  
  234. };
  235.  
  236. // TouchGesture.findFullScreenRoot=function(){
  237.  
  238. // };
  239.  
  240. TouchGesture.VideoGesture.prototype.simMouseMoveDock=function(){
  241.     if(this.touchDownPt==null)
  242.         return;
  243.     var self=this;
  244.     var event = new MouseEvent('mousemove', {
  245.         view: document.defaultView,
  246.         bubbles: true,
  247.         cancelable: false,
  248.         clientX:self._videoElement.clientWidth/2+Math.floor(Math.random()*20),
  249.         clientY:self._videoElement.clientHeight*1.5
  250.     });
  251.     self._videoElement.dispatchEvent(event);
  252.     setTimeout(() => {
  253.         self.simMouseMoveDock();
  254.     }, 1000);
  255. };
  256.  
  257.  
  258. TouchGesture.VideoGesture.prototype.simMouseMoveCenter=function(){
  259.     var self=this;
  260.     var event = new MouseEvent('mousemove', {
  261.         view: document.defaultView,
  262.         bubbles: true,
  263.         cancelable: false,
  264.         clientX:self._videoElement.clientWidth/2,
  265.         clientY:self._videoElement.clientHeight/2
  266.     });
  267.     self._videoElement.dispatchEvent(event);
  268. };
  269.  
  270. // 触摸开始
  271. TouchGesture.VideoGesture.prototype.onTouchStart=function(e){
  272.     if(this._videoElement.src.length<=2){
  273.         // 视频的src长度太低，视频基本无效。
  274.         return;
  275.     }
  276.     if(this.sweepDir!=0){
  277.         // 当滑动一定距离后，不再响应touchdown
  278.         if(e.touches.length!=this.startTouchFingers){
  279.             // 触摸点数变化，取消当前的触摸结果
  280.             this.cancelTouch();
  281.         }
  282.         return;
  283.     }
  284.     // this.forbidScroll();
  285.     // console.log(e);
  286.     this.setElementLayout();
  287.     // console.log(e);
  288.     this.startTouchFingers=e.touches.length;
  289.     if(this.startTouchFingers>0){
  290.         this.originalPlayrate=this._videoElement.playbackRate;
  291.         if(this.startTouchFingers==2){
  292.             var dis=Math.sqrt((e.touches[0].clientX-e.touches[1].clientX)*(e.touches[0].clientX-e.touches[1].clientX)+(e.touches[0].clientY-e.touches[1].clientY)*(e.touches[0].clientY-e.touches[1].clientY));
  293.             var longside = (document.body.clientWidth>document.body.clientHeight)?document.body.clientWidth:document.body.clientHeight;
  294.             if(dis>longside/4){
  295.                 // 两个触摸到相隔太远，取消触摸结果
  296.                 this.touchDownPt=null;
  297.                 this.startTouchFingers=0;
  298.                 this.cancelTouch();
  299.                 return;
  300.             }else{
  301.                 // 记录原本的播放速率，并且2倍速播放
  302.                 
  303.                 this._videoElement.playbackRate=4.0;
  304.                 this.setToast("4倍速播放");
  305.             }
  306.         }
  307.         else if(this.startTouchFingers==1){
  308.             var self = this;
  309.             setTimeout(() => {
  310.                 if(self.touchDownPt != null && self.touchResult==0 && self.startTouchFingers==1){
  311.                     var str = seconds2TimeStr(Math.floor(self._videoElement.currentTime)) + " / " + seconds2TimeStr(Math.floor(self._videoElement.duration));
  312.                     self.setToast(str);
  313.                     self.simMouseMoveDock();
  314.                     self.longTouch=true;
  315.                 }
  316.             }, 500);
  317.         }
  318.         this.touchDownPt=e.touches[0];
  319.  
  320.         var ableft=this._videoElement.offsetLeft;
  321.         var temp=this._videoElement.offsetParent;
  322.         while(temp!=null){
  323.             ableft+=temp.offsetLeft;
  324.             temp=temp.offsetParent;
  325.         }
  326.         this._videoElementAbLeft=ableft;
  327.         // console.log("ableft:"+ableft);
  328.     
  329.     }else{
  330.         this.cancelTouch();
  331.     }
  332. };
  333.  
  334. TouchGesture.VideoGesture.prototype.onTouchMove=function(e){
  335.     // console.log(e);
  336.     var videoElement=this._videoElement;
  337.     if(this.touchDownPt==null)
  338.         return;
  339.     // if(e.touches.length!=this.startTouchFingers){
  340.     //     this.cancelTouch();
  341.     //     return;
  342.     // }
  343.     if(this.startTouchFingers==1){
  344.         // 单个手指触摸
  345.         var touchPt=e.touches[0];
  346.         delX=touchPt.clientX-this.touchDownPt.clientX;
  347.         delY=touchPt.clientY-this.touchDownPt.clientY;
  348.         if(this.sweepDir==0){
  349.             var radius=Math.sqrt(delX*delX+delY*delY);
  350.             var w=videoElement.offsetWidth,h=videoElement.offsetHeight;
  351.             var judge=Math.sqrt(w*w+h*h)/30;
  352.             if(radius>judge){
  353.                 if(Math.abs(delX)>Math.abs(delY)){
  354.                     if(delX>0)
  355.                         this.sweepDir=4;
  356.                     else
  357.                         this.sweepDir=3;
  358.                 }else{
  359.                     if(delY>0)
  360.                         this.sweepDir=2;
  361.                     else
  362.                         this.sweepDir=1;
  363.  
  364.                 }
  365.                 // console.log("get sweep dir:"+this.sweepDir);
  366.                 this.startTouchVideoTime=Math.floor(videoElement.currentTime);
  367.                 this.startTouchVideoVolume=videoElement.volume;
  368.                 this.startTouchBrightness=this.videoBrightness;
  369.                 this.touchStartPt=touchPt;
  370.             }
  371.         }else if(this.sweepDir==3||this.sweepDir==4){
  372.             delX=touchPt.clientX-this.touchStartPt.clientX;
  373.             var delXRatio=delX/videoElement.offsetWidth;
  374.             if(Math.abs(delXRatio)<0.5){
  375.                 this.touchResult=Math.floor(delXRatio*180);
  376.             }else{
  377.                 if(delXRatio>0)
  378.                     this.touchResult=Math.floor((Math.pow(100,delXRatio-0.5)-1)*180+90);
  379.                 else
  380.                 this.touchResult=Math.floor(-(Math.pow(100,-delXRatio-0.5)-1)*180-90);
  381.                 //this.touchResult=Math.floor(Math.pow(2*delX/videoElement.offsetWidth,3)*120);
  382.             }
  383.             if(this.touchResult+this.startTouchVideoTime<0)
  384.                 this.touchResult=-this.startTouchVideoTime;
  385.             if(this.touchResult+this.startTouchVideoTime>videoElement.duration){
  386.                 this.touchResult=Math.floor(videoElement.duration-this.startTouchVideoTime)-1;
  387.             }
  388.             if( (this.sweepDir==3&&this.touchResult>0)||(this.sweepDir==4&&this.touchResult<0)){
  389.                 this.touchResult=0;
  390.             }
  391.             var offsetValStr;
  392.             if(Math.abs(this.touchResult)<300)
  393.                 offsetValStr=this.touchResult+"s";
  394.             else
  395.                 offsetValStr=Math.floor(this.touchResult/6)/10+"min";
  396.  
  397.             if(this.touchResult>0)
  398.                 this.setToast(seconds2TimeStr(this.startTouchVideoTime)+" +"+offsetValStr);
  399.             else
  400.                 this.setToast(seconds2TimeStr(this.startTouchVideoTime)+" "+offsetValStr);
  401.             // console.log(videoElement);
  402.         }else if(this.sweepDir==1||this.sweepDir==2){
  403.             if(this.touchStartPt.clientX-this._videoElementAbLeft<this._videoElement.clientWidth/2){
  404.                 delY=touchPt.clientY-this.touchStartPt.clientY;
  405.                 var plus=-delY/videoElement.offsetHeight*4;
  406.                 this.touchResult=this.startTouchBrightness+plus;
  407.                 if(this.touchResult<0) this.touchResult=0;
  408.                 else if(this.touchResult>1) this.touchResult=1;
  409.                 this.videoBrightness=this.touchResult;
  410.                 var realBrightness=Math.sqrt(this.touchResult)*0.85+0.15;
  411.                 videoElement.style.filter="brightness("+realBrightness+")";
  412.                 this.setToast("亮度:"+Math.floor(this.touchResult*100)+"%");
  413.             }else{
  414.                 delY=touchPt.clientY-this.touchStartPt.clientY;
  415.                 var plus=-delY/videoElement.offsetHeight*4;
  416.                 this.touchResult=this.startTouchVideoVolume+plus;
  417.                 if(this.touchResult<0) this.touchResult=0;
  418.                 else if(this.touchResult>1) this.touchResult=1;
  419.                 videoElement.volume =this.touchResult;
  420.                 // if(videoElement.volume!=0)
  421.                 //    videoElement.muted=false;
  422.                 this.setToast("音量:"+Math.floor(this.touchResult*100)+"%");
  423.             }
  424.         }
  425.  
  426.         //console.log("delx:"+delX);
  427.     }else if(this.startTouchFingers==2){
  428.         // 2个手指触摸
  429.         var touchPt=e.touches[0];
  430.         delX=touchPt.clientX-this.touchDownPt.clientX;
  431.         delY=touchPt.clientY-this.touchDownPt.clientY;
  432.         if(this.sweepDir==0){
  433.             var radius=Math.sqrt(delX*delX+delY*delY);
  434.             var w=videoElement.offsetWidth,h=videoElement.offsetHeight;
  435.             var judge=Math.sqrt(w*w+h*h)/30;
  436.             if(radius>judge){
  437.                 if(Math.abs(delX)>Math.abs(delY)){
  438.                     this._videoElement.playbackRate=this.originalPlayrate;
  439.                     if(delX>0)
  440.                         this.sweepDir=4;
  441.                     else
  442.                         this.sweepDir=3;
  443.                 }else{
  444.                     if(delY>0)
  445.                         this.sweepDir=2;
  446.                     else
  447.                         this.sweepDir=1;
  448.  
  449.                 }
  450.                 // console.log("get sweep dir:"+this.sweepDir);
  451.                 this.touchStartPt=touchPt;
  452.                 
  453.             }
  454.         }else if(this.sweepDir==3||this.sweepDir==4){
  455.             delX=touchPt.clientX-this.touchStartPt.clientX;
  456.             this.touchResult=this.originalPlayrate+Math.floor((delX/videoElement.offsetWidth)*10)*0.25;
  457.             if(this.touchResult>4) this.touchResult=4;
  458.             if(this.touchResult<0.25) this.touchResult=0.25;
  459.             this.setToast("倍速X "+this.touchResult);
  460.         }
  461.     }
  462. };
  463.  
  464.  
  465. TouchGesture.VideoGesture.prototype.onTouchEnd=function(e){
  466.     var videoElement=this._videoElement;
  467.     this.touchDownPt=null;
  468.     if(this.touchResult!=0){
  469.         if(this.startTouchFingers==1){
  470.             if(this.sweepDir==3||this.sweepDir==4){
  471.                 var res=this.startTouchVideoTime+this.touchResult;
  472.                 // console.log(videoElement.currentTime);
  473.                 // console.log("touch end:"+res);
  474.                 videoElement.currentTime=res;
  475.                 // this.hideToast();
  476.                 // videoElement.play();
  477.             }else if(this.sweepDir==1||this.sweepDir==2){
  478.                 // this.hideToast();
  479.                 // videoElement.play();
  480.             }
  481.         }else if(this.startTouchFingers==2){
  482.             if(this.sweepDir==3||this.sweepDir==4){
  483.                 this._videoElement.playbackRate=this.touchResult;
  484.                 this.originalPlayrate=this.touchResult;
  485.             }
  486.         }
  487.     }else{
  488.  
  489.     }
  490.     this.sweepDir=0;
  491.     this.touchResult=0;
  492.     this._videoElement.playbackRate=this.originalPlayrate;
  493.     this.hideToast();
  494.     if(this.longTouch==true)
  495.         this.simMouseMoveCenter();
  496.     this.longTouch=false;
  497.     // this.cancelTouch();
  498.  
  499.     // this.permitcroll();
  500. };
  501.  
  502. // 启动监听
  503. TouchGesture.VideoGesture.prototype.applyDom=function(videoElement){
  504.     this._containElement.appendChild(this._elementFrame);
  505.     this._containElement.appendChild(this._unlockBtn);
  506.  
  507.     var temp=this._videoElement;
  508.     while(temp!=this._eventListenElement){
  509.         temp.classList.add("TouchGestureForbidScroll");
  510.         temp=temp.parentElement;
  511.     }
  512.     this._eventListenElement.classList.add("TouchGestureForbidScroll");
  513.  
  514.     this._eventListenElement.addEventListener("touchstart",this._touchStartHandler,false);
  515.     this._eventListenElement.addEventListener("touchend",this._touchEndHandler,false);
  516.     this._eventListenElement.addEventListener("touchmove",this._touchMoveHandler,false);
  517.  
  518.  
  519. };
  520.  
  521. // Resize时恢复元素原样，取消事件监听
  522. TouchGesture.VideoGesture.prototype.restoreDom=function(){
  523.     this._containElement.appendChild(this._elementFrame);
  524.  
  525.     var temp=this._videoElement;
  526.     while(temp!=this._eventListenElement){
  527.         if(temp.classList!=null)
  528.             temp.classList.remove("TouchGestureForbidScroll");
  529.         temp=temp.parentElement;
  530.         if(temp == null)
  531.             break;
  532.     }
  533.     if(this._eventListenElement==null)
  534.         return;
  535.     this._eventListenElement.classList.remove("TouchGestureForbidScroll");
  536.  
  537.     this._eventListenElement.removeEventListener("touchstart",this._touchStartHandler);
  538.     this._eventListenElement.removeEventListener("touchend",this._touchEndHandler);
  539.     this._eventListenElement.removeEventListener("touchmove",this._touchMoveHandler);
  540. };
  541.  
  542. // 窗口resize时检测是否全屏并且适配
  543. TouchGesture.VideoGesture.prototype.fullScreenDetect=function(){
  544.     // alert("resize");
  545.     this.setUnlockBtnLayout(); 
  546.     var fullScreenState=tg_IsFullscreen();
  547.     if(fullScreenState!=this._fullScreenNow){
  548.         this._fullScreenNow=fullScreenState;
  549.         this.restoreDom();
  550.         this.findBestRoot();
  551.         this.applyDom();
  552.         if(fullScreenState == true){
  553.             // console.log("fullscreen");
  554.             this._elementFrame.style.position = "fixed";
  555.             this.simMouseMoveCenter();
  556.             //模拟鼠标移到中间，使得自动隐藏视频底部
  557.         }
  558.         else{
  559.             this._elementFrame.style.position = "absolute";
  560.         }
  561.     }
  562.     if(fullScreenState==true && this.videoInFullscreenElement()){
  563.         if(this._videoElement.videoWidth/this._videoElement.videoHeight>1.3){
  564.             // console.log("lock");
  565.             if(TouchGesture.orientationLocked == false && TouchGesture.ismobile == true){
  566.                 var self = this;
  567.                 TouchGesture.orientationLocked = true;
  568.                 setTimeout(() => {
  569.                     {
  570.                         screen.orientation.lock("landscape");
  571.                         setTimeout(() => {
  572.                             this._unlockBtn.style.display = "block";
  573.                             this._unlockBtn.classList.remove("fadeout");
  574.                         }, 300);
  575.                         setTimeout(() => {
  576.                             self._unlockBtn.classList.add("fadeout");
  577.                         }, 2300);
  578.                     }
  579.                 }, 300);
  580.             }
  581.             // screen.lockOrientationUniversal("landscape-primary");
  582.         }
  583.     }else if(fullScreenState == false){
  584.         TouchGesture.orientationLocked = false;
  585.         screen.orientation.unlock();
  586.     }
  587. };
  588.  
  589. // TouchGesture.VideoGesture.prototype.onOrientationChange=function(){
  590. //     var self = this;
  591.  
  592. // };
  593.  
  594.  
  595. TouchGesture.VideoGesture.prototype.videoInFullscreenElement=function(){
  596.     var temp = this._videoElement;
  597.     while(temp!=null && temp!=document.body){
  598.         if(temp == document.fullscreenElement)
  599.             return true;
  600.         temp = temp.parentElement;
  601.     }
  602. };
  603.  
  604. //自动调节DIV元素位置
  605. TouchGesture.VideoGesture.prototype.setElementLayout=function(){
  606.     var videoTarget=this._containElement;
  607.     var vw=videoTarget.offsetWidth,vh=videoTarget.offsetHeight;
  608.     var w=vw/5;
  609.     //var h=vh/8;
  610.     var h=w/3;
  611.     var x=(vw-w)/2+videoTarget.offsetLeft;
  612.     var y=(vh-h)/2+videoTarget.offsetTop;
  613.     // console.log("w:"+w," h:"+h+" x:"+x+" y:"+y);
  614.     this._elementFrame.style.width=w+"px";
  615.     this._elementFrame.style.height=h+"px";
  616.     this._elementFrame.style.left=x+"px";
  617.     this._elementFrame.style.top=y+"px";
  618.     // this._element.style.display="block";
  619.     var fontsize=h/3;
  620.     this._toastText.style.fontSize=fontsize+"px";
  621.     this._toastText.style.marginTop=(h-fontsize)/2+"px";
  622.     this._elementFrame.style.display="none";
  623.     this._elementFrame.style.borderRadius = w/10 +"px";
  624.  
  625.  
  626. };
  627.  
  628. TouchGesture.VideoGesture.prototype.setUnlockBtnLayout=function(){
  629.     var videoTarget=this._containElement;
  630.     var vw=window.screen.width,vh=window.screen.height;
  631.     var w = vh/8;
  632.     var h = vh/8;
  633.     var x=(vw-w)/2;
  634.     var y=(vh-h)/2+vh/6;
  635.  
  636.     this._unlockBtn.style.fontSize=w/2+"px";
  637.     this._unlockBtn.style.width=w+"px";
  638.     this._unlockBtn.style.height=h+"px";
  639.     this._unlockBtn.style.lineHeight = h+"px";
  640.     this._unlockBtn.style.left=x+"px";
  641.     this._unlockBtn.style.top=y+"px";
  642.     this._unlockBtn.style.borderRadius = w/2+"px";
  643.     // this._unlockBtn.style.display = "block";
  644.     // this._unlockBtn.classList.remove("fadeout");
  645. }
  646.  
  647. //显示Toast
  648. TouchGesture.VideoGesture.prototype.setToast=function(str){
  649.     // this._element.style.opacity=0.75;
  650.     this._elementFrame.style.display="block";
  651.     this._elementFrame.classList.remove("fadeout");
  652.     this._toastText.innerHTML=str;
  653. }
  654.  
  655. //在Touchend之前取消手势
  656. TouchGesture.VideoGesture.prototype.cancelTouch=function(){
  657.     this.sweepDir=0;
  658.     this._videoElement.playbackRate=this.originalPlayrate;
  659.     this.touchDownPt=null;
  660.     this.hideToast();
  661. }
  662.  
  663. // 隐藏toast
  664. TouchGesture.VideoGesture.prototype.hideToast=function(){
  665.     var element=this._elementFrame;
  666.     setTimeout(function(){
  667.         element.classList.add("fadeout");
  668.     },500);
  669.     // setTimeout(function(){
  670.     //     element.style.opacity=0;
  671.     //     element.classList.remove("fadeout");
  672.     // },1500);
  673. }
  674.  
  675. // 检测<video>并插入元素
  676. TouchGesture.VideoGesture.insertDom=function(dom){
  677.     var videoTagsNative = dom.getElementsByTagName('video');
  678.     // console.log(dom);
  679.     Array.prototype.forEach.call(videoTagsNative, function(videoTag) {
  680.         if (!videoTag.getAttribute('TouchGesture_Video')) {
  681.             videoTag.setAttribute('TouchGesture_Video', true);
  682.             new TouchGesture.VideoGesture(videoTag);
  683.         //   console.log("insert node");
  684.         }
  685.     });
  686.  
  687.     var hostDomain=window.location.host;
  688.     if(CustomizedVideoTAG[hostDomain] == null)
  689.         return;
  690.  
  691.     CustomizedVideoTAG[hostDomain].forEach(function(videoTagName){
  692.         var videoTags = dom.getElementsByTagName(videoTagName);
  693.         // console.log(dom);
  694.         Array.prototype.forEach.call(videoTags, function(videoTag) {
  695.             if (!videoTag.getAttribute('TouchGesture_Video')) {
  696.                 videoTag.setAttribute('TouchGesture_Video', true);
  697.                 new TouchGesture.VideoGesture(videoTag);
  698.             //   console.log("insert node");
  699.             }
  700.         });
  701.     });
  702.     
  703. };
  704.  
  705. TouchGesture.VideoGesture.insertAll=function(){
  706.     // var self=this;
  707.     TouchGesture.VideoGesture.insertDom(document);
  708.  
  709. };
  710.  
  711. // TouchGesture.VideoGesture.prototype.forbidScroll=function(){
  712. //     // var bodies=document.getElementsByTagName("body");
  713. //     // Array.prototype.forEach.call(bodies, function(body) {
  714. //     //     body.style.position="fixed";
  715. //     // });
  716. //     TouchGesture.forbidScroll=true;
  717. // }
  718.  
  719. // TouchGesture.VideoGesture.prototype.permitcroll=function(){
  720. //     // var bodies=document.getElementsByTagName("body");
  721. //     // Array.prototype.forEach.call(bodies, function(body) {
  722. //     //     body.style.position="relative";
  723. //     // });
  724. //     TouchGesture.forbidScroll=false;
  725. // }
  726.  
  727. function seconds2TimeStr(secs){
  728.     var hour=parseInt(secs/3600);
  729.     var min=parseInt(secs/60)-60*hour;
  730.     var sec=secs%60;
  731.     var ret="";
  732.     if(hour>0){
  733.         ret+=hour+":";
  734.     }
  735.     ret+=(min < 10? '0' + min : min) + ':' + (sec < 10? '0' + sec : sec);
  736.     return ret;
  737. }
  738.  
  739. function initForbidScrollList(){
  740.     var hostDomain=window.location.host;
  741.     var defaultSetting=TouchGestureWhiteList[hostDomain];
  742.     if(defaultSetting!=null){
  743.         if(defaultSetting.forbidScrollList!=null)
  744.             forbidScrollList=defaultSetting.forbidScrollList;
  745.         // console.log(forbidScrollList);
  746.     }
  747. }
  748.  
  749. function whetherInBlackList(){
  750.     var hostDomain=window.location.host;
  751.     if(TouchGestureBlackList.indexOf(hostDomain)>=0){
  752.         return true;
  753.     }
  754.     return false;
  755. }
  756. function tg_IsFullscreen(){
  757.     return document.fullscreenElement!=null    ||
  758.            document.msFullscreenElement!=null  ||
  759.            document.mozFullScreenElement!=null ||
  760.            document.webkitFullscreenElement!=null ||
  761.            document.fullscreen == true || false;
  762. }
  763.  
  764. function tg_IsMobile(){
  765.     if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
  766.         return true; // 移动端
  767.     }else if(window.screen.height/window.screen.width>1.3){
  768.         return true; // 屏幕纵向
  769.     }else{
  770.         return false; // PC端
  771.     }
  772. }
  773.  
  774. (function() {
  775.     'use strict';
  776.     GM_addStyle('div.TouchGesture_Toast{  width: 200px;  height: 100px;  opacity: 0.75;  position: absolute;  z-index: 2147483648;  top: 100px;  left: 200px;  background-color: black; pointer-events:none;} ');
  777.     GM_addStyle('span.TouchGesture_ToastText{  position: absolute;  left: 0;  right: 0;  text-align: center;  color: white; pointer-events:none;}');
  778.     GM_addStyle('div.TouchGesture_Toast.fadeout{  -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -ms-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; opacity: 0;}');
  779.     GM_addStyle('div.TouchGesture_UnlockBtn{opacity: 0.75; position: fixed; z-index: 2147483648; width: 50px;height: 50px;text-align: center;font-size: 25;margin: 20;background-color: black;color: white;}');
  780.     GM_addStyle('div.TouchGesture_UnlockBtn.fadeout{  -webkit-transition: all 1.5s; -moz-transition: all 1.5s; -ms-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; opacity: 0;}');
  781.     
  782.     if(whetherInBlackList()){
  783.         return;
  784.     }
  785.     initForbidScrollList();
  786.  
  787.     TouchGesture.ismobile = tg_IsMobile();
  788.     window.addEventListener('resize',function(e){
  789.         TouchGesture.ismobile = tg_IsMobile();
  790.     });
  791.  
  792.     document.addEventListener('touchstart',function(e){
  793.         // console.log(e);
  794.         // if(e.srcElement.tagName!="VIDEO"
  795.         //     &&forbidScrollList.indexOf(e.srcElement.classList[0])<0
  796.         //     &&!e.srcElement.classList.contains("TouchGestureForbidScroll")){
  797.         //     TouchGesture.forbidScroll=false;
  798.         // }else{
  799.         //     document.addEventListener('touchmove',preventDefault,{passive:false});
  800.         // }
  801.         if(forbidScrollList.indexOf(e.srcElement.classList[0])>=0){
  802.             document.addEventListener('touchmove',preventDefault,{passive:false});
  803.         }else{
  804.             var noVideo=true;
  805.             for(var i=0;i<e.path.length;i++){
  806.                 var element=e.path[i];
  807.                 // console.log(element);
  808.                 if(element.tagName=="VIDEO"||(element.classList&&element.classList.contains["TouchGestureForbidScroll"])){
  809.                     // TouchGesture.forbidScroll=true;
  810.                     noVideo=false;
  811.                     break;
  812.                 }
  813.             }
  814.  
  815.             
  816.             if(!noVideo){
  817.                 document.addEventListener('touchmove',preventDefault,{passive:false});
  818.             }else if(tg_IsFullscreen()){
  819.                 if(e.touches[0].clientX>document.body.clientWidth/8&&e.touches[0].clientX<document.body.clientWidth){
  820.                     document.addEventListener('touchmove',preventDefault,{passive:false});
  821.                 }else{
  822.                     // TouchGesture.forbidScroll=false;
  823.                 }
  824.             }
  825.             else{
  826.                 // TouchGesture.forbidScroll=false;
  827.             }
  828.         }
  829.     });
  830.     function preventDefault(e){
  831.         e.preventDefault();
  832.         return false;
  833.     };
  834.     document.addEventListener('touchend',function(e){
  835.         document.removeEventListener('touchmove',preventDefault);
  836.     });
  837.     // document.addEventListener('touchmove',function(e){
  838.     //     console.log(e.srcElement.classList[0]);
  839.     // });
  840.     TouchGesture.VideoGesture.insertAll();
  841.     setInterval(TouchGesture.VideoGesture.insertAll, 1500);
  842. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址