// ==UserScript== // @name 触摸屏视频优化 // @namespace https://github.com/HeroChan0330 // @version 2.23 // @description 触摸屏视频播放手势支持,上下滑调整音量,左右滑调整进度 // @author HeroChanSysu // @match https://*/* // @match http://*/* // @match ftp://*/* // @grant GM_addStyle // @grant GM_setValue // @grant GM_getValue // @downloadURL https://update.greasyfork.icu/scripts/405897/%E8%A7%A6%E6%91%B8%E5%B1%8F%E8%A7%86%E9%A2%91%E4%BC%98%E5%8C%96.user.js // @updateURL https://update.greasyfork.icu/scripts/405897/%E8%A7%A6%E6%91%B8%E5%B1%8F%E8%A7%86%E9%A2%91%E4%BC%98%E5%8C%96.meta.js // ==/UserScript== var TGUserDefaultSetting = { global : { gSwitchState:true, gSwitchProgress:true, gSwitchBrightness:true, gSwitchVolume:true, gSwitchSpeedX4:true, gSwitchSpeed:true, gSwitchSpeedX4Sigle:false, gSelectToastPos:"middle" }, website :{ } }; var TGUserSetting; // 黑名单 var TouchGestureBlackList=[ ]; var TouchGesture={forbidScroll:false,orientationLocked:false,ismobile:false,debug:false}; var TouchGestureSetting = {volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true,forbidScrollNFS:false}; /* * WhiteList format * function container(video_element){ * callback(root_element,listen_element,options); * callback(null,null,options); * } * options = {volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true} */ var TouchGestureWhiteList={ "www.bilibili.com":{ container:function(video_element,callback){ var parent = video_element.parentElement; if(parent.classList.contains("bpx-player-video-wrap")){ if(tg_IsFullscreen()==true){ var root_element = seekGrandParentByClass(parent,"bpx-player-video-area"); var listen_element = seekGrandParentByClass(root_element,"video-container-v1"); // return [root_element,listen_element]; callback(root_element,listen_element,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } else{ var root_element = seekGrandParentByClass(parent,"bpx-player-video-area"); var listen_element = seekGrandParentByClass(root_element,"player-wrap"); // return [root_element,listen_element]; callback(root_element,listen_element,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } } else{ // return null; callback(null,null,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } }, forbidScrollList:["bilibili-player-dm-tip-wrap"] }, "m.bilibili.com":{ container:function(video_element,callback){ var parent = video_element.parentElement; if(parent.classList.contains("mplayer-video-wrap")){ var root_element = seekGrandParentByClass(parent,"mplayer"); // return [root_element,listen_element]; callback(root_element,root_element,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } else{ // return null; callback(null,null,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } }, forbidScrollList:["player-mobile-display","mplayer-display"] }, "weibo.com":{ container:function(video_element,callback){ // return null; callback(null,null,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); }, forbidScrollList:["wbpv-tech","wbpv-open-layer-button"] }, "www.youtube.com":{ container:function(video_element,callback){ var parent = video_element.parentElement; if(parent.classList.contains("html5-video-container")){ // var temp = parent; // while(temp!=null){ // if(temp && temp.id=='player'){ // break; // } // temp = temp.parentElement; // } // var root_element; // if(temp!=null){ // root_element = temp; // } // else{ // root_element = parent; // } var root_element = seekGrandParentByClass(parent,"ytd-player"); // return [root_element,listen_element]; callback(root_element,root_element,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } else{ // return null; callback(null,null,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } }, forbidScrollList:["video-stream","ytd-watch-flexy"] }, "m.youtube.com":{ container:function(video_element,callback){ var parent = video_element.parentElement; if(parent.classList.contains("html5-video-container")){ var root_element = seekGrandParentByClass(parent,"player-container"); var listen_element = null; ytFindListenElement(); function ytFindListenElement(){ listen_element = root_element.getElementsByClassName("player-controls-background")[0]; // console.log(root_element); // console.log(listen_element); if(listen_element==null){ setTimeout(() => { ytFindListenElement(); }, 500); } else{ callback(root_element,listen_element,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); // console.log("callback!"); } } } else{ // return null; callback(null,null,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } }, forbidScrollList:["animation-enabled","player-controls-background"] }, "v.youku.com":{ container:function(video_element,callback){ var parent = video_element.parentElement; if(parent.classList.contains("youku-film-player")){ var root_element = seekGrandParentByClass(parent,"youku-film-player"); // return [root_element,listen_element]; callback(root_element,root_element,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } else if(parent.classList.contains("video-layer")){ var root_element = seekGrandParentByClass(parent,"youku-player"); // return [root_element,listen_element]; callback(root_element,root_element,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } else{ // return null; callback(null,null,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } }, forbidScrollList:["yk-trigger-layer","kui-dashboard-display-panel","kui-message-information"] }, "www.facebook.com":{ container:function(video_element,callback){ // return null; callback(null,null,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); }, forbidScrollList:["i09qtzwb"] }, "v.qq.com":{ container:function(video_element,callback){ var parent = video_element.parentElement; if(parent.classList.contains("txp_video_container")){ var root_element = seekGrandParentByClass(parent,"txp_player"); // return [root_element,listen_element]; callback(root_element,root_element,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } else{ // return null; callback(null,null,{volume:true,brightness:true,progress:true,speed:true,speedx4:true,speedx4single:true,state:true}); } }, forbidScrollList:["txp_shadow","plugin_ctrl_txp_shadow"] } }; var CustomizedVideoTAG = { "www.bilibili.com":["bwp-video"] }; function seekGrandParentByClass(child,parentClass){ var temp = child; while(temp!=null){ if(temp.classList!=null && temp.classList.contains(parentClass)){ return temp; } temp = temp.parentElement; } return null; } var forbidScrollList=[]; TouchGesture.VideoGesture=function(videoElement){ this.touchDownPt=null; //触摸按下时得位置 this.touchDownTime = 0; this.touchStartPt=null; //顺着一定方向滑动时并触发功能,开始计算的点 this.sweepDir=0; //0:no sweep 1:up 2:down 3:left 4:right this.startTouchVideoTime; this.startTouchVideoVolume; this.touchResult=0; //触摸结果暂存 this.startTouchFingers=0; //在触发功能前触摸点数 this.originalPlayrate=1; //视频原本的播放速率 //this.bodyPosition=""; this.videoBrightness=1; this.startTouchBrightness=1; this.longTouch=false; this._videoSrcStore=null; this._videoElement=videoElement;//对象video标签 this._videoElementAbLeft=0; //video标签相对页面的left this._elementFrame=null;//文字显示的框架 this._toastText=null; //文字显示 this._unlockBtn = null; //解锁按钮 this._settingBtn = null; // 设置按钮 this._containElement=null; //_elementFrame的父级 this._eventListenElement=null;//监听触摸动作的元素 this._options = TouchGestureSetting; this._contextMenuFunc = document.oncontextmenu; this._fullScreenNow=tg_IsFullscreen(); if(this._videoElement.style.filter=="" || this._videoElement.style.filter==null) this._videoElement.style.filter = "brightness(1)"; // console.log("_fullScreenNow:"+this._fullScreenNow); // console.log(TouchGestureWhiteList); // console.log(TouchGestureWhiteList["www.bilibili.com"]!=null); var self = this; self.createDom(); self.findBestRoot(function(root_element,listen_element){ self.applyDom(); // video内地址更改时,重新设置页面(针对bilibili连续播放) self._videoElement.addEventListener('play', function () { //播放开始执行的函数 if(self._videoSrcStore == null){ // alert("first play"); self._videoSrcStore=self._videoElement.src; }else if(self._videoElement.src!=self._videoSrcStore){ // alert("replay"); self.restoreDom(); self.findBestRoot(function(root_element,listen_element){ self.applyDom(); }); } }); }); this._videoElement.addEventListener('play', function () { self._settingBtn.style.display = "none"; }); this._videoElement.addEventListener('pause', function () { self._settingBtn.style.display = "block"; self.setSettingBtnLayout(); setTimeout(() => { self._settingBtn.style.display = "none"; }, 3000); }); }; // 产生显示元素 TouchGesture.VideoGesture.prototype.createDom=function(parentElement){ var toastDiv=document.createElement("div"); var toastText=document.createElement("span"); var unlockBtn = document.createElement("div"); var settingBtn = document.createElement("div"); toastDiv.appendChild(toastText); toastDiv.classList.add("TouchGesture_Toast"); toastText.classList.add("TouchGesture_ToastText"); unlockBtn.classList.add("TouchGesture_Btn"); settingBtn.classList.add("TouchGesture_Btn"); toastDiv.style.display="none"; unlockBtn.style.display="none"; unlockBtn.style.position="fixed"; unlockBtn.innerHTML = "🔒"; settingBtn.style.display = "none"; settingBtn.style.position="absolute"; settingBtn.innerHTML = "⚙"; this._elementFrame=toastDiv; this._toastText=toastText; this._unlockBtn = unlockBtn; this._settingBtn = settingBtn; this._elementFrame.classList.add("TouchGestureForbidScroll"); this._toastText.classList.add("TouchGestureForbidScroll"); this._unlockBtn.classList.add("TouchGestureForbidScroll"); this._settingBtn.classList.add("TouchGestureForbidScroll"); this._touchStartHandler=this.onTouchStart.bind(this); this._touchEndHandler=this.onTouchEnd.bind(this); this._touchMoveHandler=this.onTouchMove.bind(this); this._windowResizeHandeler=this.fullScreenDetect.bind(this); window.addEventListener("resize",this._windowResizeHandeler,"false"); // this._orientationChange = this.onOrientationChange; // window.addEventListener("orientationchange",this._orientationChange,"false"); var self = this; this._unlockBtn.onclick=function(event){ // console.log("unlock cancel"); screen.orientation.unlock(); event.stopPropagation(); }; this._settingBtn.onclick=function(event){ // alert("setting clicked"); var domain = window.location.host; var url = "https://herochansysu.gitlab.io/touchgesturesetting/index_v2.html?target="+domain; // var url = "http://192.168.1.33:8848/TouchGestureSetting/index_v2.html?target="+domain; // window.parent.open(url); window.parent.location.href = url; }; this._unlockBtn.addEventListener("transitionend",function(){ self._unlockBtn.style.display = "none"; }); }; // 找到显示元素最佳的parent及监听元素 TouchGesture.VideoGesture.prototype.findBestRoot=function(callback){ var self=this; var targetElement=this._videoElement; var hostDomain=window.location.host; var defaultSetting=TouchGestureWhiteList[hostDomain]; var defaultSettingSuccess=false; if(defaultSetting!=null){ // console.log("defaultSetting!=null"); defaultSetting.container(this._videoElement,function(root_element,listen_element,options){ if(root_element!=null&&listen_element!=null){ self._containElement=root_element; self._eventListenElement=listen_element; defaultSettingSuccess = true; } else{ self.findBestRootByParent(); } if(options!=null){ for(var key in self._options){ self._options[key] = TouchGestureSetting[key] && options[key]; } } callback(self._containElement,self._eventListenElement); }); } else{ self.findBestRootByParent(); callback(self._containElement,self._eventListenElement); } }; TouchGesture.VideoGesture.prototype.findBestRootByParent=function(){ var self=this; var targetElement=this._videoElement; var elementInFullScreen = false; if(self._fullScreenNow == true){ var temp = targetElement; while(temp != null){ if(temp == document.fullscreenElement){ elementInFullScreen = true; break; } // console.log(temp); temp = temp.parentElement; } } // console.log("video in fullsceen"); // console.log(elementInFullScreen); if(elementInFullScreen==false){ targetElement=targetElement.parentElement; var topest=false; while(!topest){ // targetElement.classList.add("TouchGestureForbidScroll"); var temp=targetElement.parentElement; var size1=targetElement.offsetWidth*targetElement.offsetHeight; var size2=temp.offsetWidth*temp.offsetHeight; if(temp.offsetWidth>=targetElement.offsetWidth&&temp.offsetHeight>=targetElement.offsetHeight&&size2/size1<=1.2){ targetElement=temp; }else{ topest=true; } if(temp.tagName.toLowerCase()=="body"){ break; } } self._containElement=targetElement; self._eventListenElement=targetElement; }else{ // alert("FULLSCREEN!"); if(document.fullscreenElement!=null){ self._containElement=document.fullscreenElement; self._eventListenElement=document.fullscreenElement; // // delete other toast for other video under fullscreen // if(self._containElement!=null){ // var toasts = self._containElement.getElementsByClassName("TouchGesture_Toast"); // toasts.forEach(t => { // self._containElement.removeChild(t); // }); // } } } } // TouchGesture.findFullScreenRoot=function(){ // }; TouchGesture.VideoGesture.prototype.simMouseMoveDock=function(){ if(this.touchDownPt==null) return; var self=this; var event = new MouseEvent('mousemove', { view: document.defaultView, bubbles: true, cancelable: false, clientX:self._videoElement.clientWidth/2+Math.floor(Math.random()*20), clientY:self._videoElement.clientHeight*1.5 }); self._videoElement.dispatchEvent(event); setTimeout(() => { self.simMouseMoveDock(); }, 1000); }; TouchGesture.VideoGesture.prototype.simMouseMoveCenter=function(){ var self=this; var event = new MouseEvent('mousemove', { view: document.defaultView, bubbles: true, cancelable: false, clientX:self._videoElement.clientWidth/2, clientY:self._videoElement.clientHeight/2 }); self._videoElement.dispatchEvent(event); }; // 触摸开始 TouchGesture.VideoGesture.prototype.onTouchStart=function(e){ if(this._videoElement.src.length<=2){ // 视频的src长度太低,视频基本无效。 return; } if(this.sweepDir!=0){ // 当滑动一定距离后,不再响应touchdown if(e.touches.length!=this.startTouchFingers){ // 触摸点数变化,取消当前的触摸结果 this.cancelTouch(); } return; } // this.forbidScroll(); // console.log(e); this.setElementLayout(TGUserSetting.global.gSelectToastPos); // console.log(e); this.startTouchFingers=e.touches.length; if(this.startTouchFingers>0){ this.originalPlayrate=this._videoElement.playbackRate; if(this.startTouchFingers==2){ 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)); var longside = (document.body.clientWidth>document.body.clientHeight)?document.body.clientWidth:document.body.clientHeight; if(dis>longside/4){ // 两个触摸到相隔太远,取消触摸结果 this.touchDownPt=null; this.startTouchFingers=0; this.cancelTouch(); return; }else{ // 记录原本的播放速率,并且4倍速播放 this.setElementLayout("top"); if(this._options.speedx4==true){ this._videoElement.playbackRate=4.0; this.setToast('4倍速播放>>>'); this._toastText.classList.add("toast_blink"); } } } else if(this.startTouchFingers==1){ var self = this; if(this._options.speedx4==true && this._options.speedx4single==true){ setTimeout(() => { var dt = new Date(); var elipse = dt.getTime() - self.touchDownTime; if(elipse > 400 && self.touchDownPt != null && self.sweepDir==0 && self.startTouchFingers==1){ self.setElementLayout("top"); self._videoElement.playbackRate=4.0; self.setToast('4倍速播放>>>'); self._toastText.classList.add("toast_blink"); // document.addEventListener('contextmenu',tgPreventDefault); self._contextMenuFunc = document.oncontextmenu; document.oncontextmenu = function(){e.preventDefault();return false;} self.sweepDir=-1; } }, 500); }else if(this._options.state==true){ setTimeout(() => { var dt = new Date(); var elipse = dt.getTime() - self.touchDownTime; if(elipse > 400 && self.touchDownPt != null && self.touchResult==0 && self.startTouchFingers==1){ var str = seconds2TimeStr(Math.floor(self._videoElement.currentTime)) + " / " + seconds2TimeStr(Math.floor(self._videoElement.duration)); self.setToast(str); self.simMouseMoveDock(); self.longTouch=true; } }, 500); } } this.touchDownPt=e.touches[0]; var dt = new Date(); this.touchDownTime = dt.getTime(); var tor = window.screen.height/10; if(TouchGesture.ismobile == true && this._fullScreenNow == true && (this.touchDownPt.pageY < tor || this.touchDownPt.pageY > window.screen.height-tor)){ this.cancelTouch(); // 移动端边缘上滑、下滑判定 } var ableft=this._videoElement.offsetLeft; var temp=this._videoElement.offsetParent; while(temp!=null){ ableft+=temp.offsetLeft; temp=temp.offsetParent; } this._videoElementAbLeft=ableft; // console.log("ableft:"+ableft); }else{ this.cancelTouch(); } }; TouchGesture.VideoGesture.prototype.onTouchMove=function(e){ // console.log(e); var videoElement=this._videoElement; if(this.touchDownPt==null) return; // if(e.touches.length!=this.startTouchFingers){ // this.cancelTouch(); // return; // } if(this.startTouchFingers==1){ // 单个手指触摸 var touchPt=e.touches[0]; delX=touchPt.clientX-this.touchDownPt.clientX; delY=touchPt.clientY-this.touchDownPt.clientY; if(this.sweepDir==0){ var radius=Math.sqrt(delX*delX+delY*delY); var w=videoElement.offsetWidth,h=videoElement.offsetHeight; var judge=Math.sqrt(w*w+h*h)/30; if(radius>judge){ if(Math.abs(delX)>Math.abs(delY)){ if(delX>0) this.sweepDir=4; else this.sweepDir=3; }else{ if(delY>0) this.sweepDir=2; else this.sweepDir=1; } // console.log("get sweep dir:"+this.sweepDir); this.startTouchVideoTime=Math.floor(videoElement.currentTime); this.startTouchVideoVolume=videoElement.volume; this.startTouchBrightness=this.videoBrightness; this.touchStartPt=touchPt; } }else if(this._options.progress==true && (this.sweepDir==3||this.sweepDir==4)){ delX=touchPt.clientX-this.touchStartPt.clientX; var delXRatio=delX/videoElement.offsetWidth; // console.log(delXRatio); var duration = this._videoElement.duration; if(isNaN(duration)==true){ duration = 1800; } if(Math.abs(delXRatio)<0.5){ this.touchResult=Math.floor(delXRatio*240); }else{ if(delXRatio>0) this.touchResult=Math.floor((Math.pow(10000,delXRatio-0.5)-1)/50*duration+delXRatio*240); else this.touchResult=Math.floor(-(Math.pow(10000,-delXRatio-0.5)-1)/50*duration+delXRatio*240); //this.touchResult=Math.floor(Math.pow(2*delX/videoElement.offsetWidth,3)*120); } if(this.touchResult+this.startTouchVideoTime<0) this.touchResult=-this.startTouchVideoTime; if(this.touchResult+this.startTouchVideoTime>videoElement.duration){ this.touchResult=Math.floor(videoElement.duration-this.startTouchVideoTime)-1; } if( (this.sweepDir==3&&this.touchResult>0)||(this.sweepDir==4&&this.touchResult<0)){ this.touchResult=0; } var offsetValStr; if(Math.abs(this.touchResult)<60) offsetValStr=this.touchResult+"s"; else{ if(this.touchResult>0){ var sec = this.touchResult%60; offsetValStr=Math.floor(this.touchResult/60)+":"+(sec < 10? '0' + sec : sec); } else{ var sec = (-this.touchResult)%60; offsetValStr="-"+Math.floor(-this.touchResult/60)+":"+(sec < 10? '0' + sec : sec); } } // if(this.touchResult==Infinity){ // this._elementFrame.style.display="none"; // } if(this.touchResult>0) this.setToast(seconds2TimeStr(this.startTouchVideoTime)+" +"+offsetValStr); else this.setToast(seconds2TimeStr(this.startTouchVideoTime)+" "+offsetValStr); // console.log(videoElement); }else if(this.sweepDir==1||this.sweepDir==2){ if(this.touchStartPt.clientX-this._videoElementAbLeft1) this.touchResult=1; this.videoBrightness=this.touchResult; var realBrightness=Math.sqrt(this.touchResult)*0.85+0.15; videoElement.style.filter="brightness("+realBrightness+")"; this.setToast("☀ "+Math.floor(this.touchResult*100)+"%"); } }else{ if(this._options.volume==true){ delY=touchPt.clientY-this.touchStartPt.clientY; var plus=-delY/videoElement.offsetHeight*4; this.touchResult=this.startTouchVideoVolume+plus; if(this.touchResult<0) this.touchResult=0; else if(this.touchResult>1) this.touchResult=1; videoElement.volume =this.touchResult; // if(videoElement.volume!=0) // videoElement.muted=false; this.setToast("♫ "+Math.floor(this.touchResult*100)+"%"); } } } //console.log("delx:"+delX); }else if(this.startTouchFingers==2){ // 2个手指触摸 var touchPt=e.touches[0]; delX=touchPt.clientX-this.touchDownPt.clientX; delY=touchPt.clientY-this.touchDownPt.clientY; if(this.sweepDir==0){ var radius=Math.sqrt(delX*delX+delY*delY); var w=videoElement.offsetWidth,h=videoElement.offsetHeight; var judge=Math.sqrt(w*w+h*h)/30; if(radius>judge){ if(Math.abs(delX)>Math.abs(delY)){ this._videoElement.playbackRate=this.originalPlayrate; if(delX>0) this.sweepDir=4; else this.sweepDir=3; }else{ if(delY>0) this.sweepDir=2; else this.sweepDir=1; } // console.log("get sweep dir:"+this.sweepDir); this.touchStartPt=touchPt; } }else if(this.sweepDir==3||this.sweepDir==4){ if(this._options.speed==true){ delX=touchPt.clientX-this.touchStartPt.clientX; this.touchResult=this.originalPlayrate+Math.floor((delX/videoElement.offsetWidth)*10)*0.25; if(this.touchResult>4) this.touchResult=4; if(this.touchResult<0.25) this.touchResult=0.25; this.setToast("倍速X "+this.touchResult); } } } }; TouchGesture.VideoGesture.prototype.onTouchEnd=function(e){ var videoElement=this._videoElement; this.touchDownPt=null; if(this.touchResult!=0){ if(this.startTouchFingers==1){ if(this.sweepDir==3||this.sweepDir==4){ if(this._options.progress==true){ var res=this.startTouchVideoTime+this.touchResult; // console.log(videoElement.currentTime); // console.log("touch end:"+res); videoElement.currentTime=res; // this.hideToast(); // videoElement.play(); } }else if(this.sweepDir==1||this.sweepDir==2){ // this.hideToast(); // videoElement.play(); } }else if(this.startTouchFingers==2){ if(this.sweepDir==3||this.sweepDir==4){ if(this._options.speed==true){ this._videoElement.playbackRate=this.touchResult; this.originalPlayrate=this.touchResult; } } } }else{ } this.sweepDir=0; this.touchResult=0; this._videoElement.playbackRate=this.originalPlayrate; this.hideToast(); if(this.longTouch==true) this.simMouseMoveCenter(); this.longTouch=false; if(this._options.speedx4==true && this._options.speedx4single==true) document.oncontextmenu = this._contextMenuFunc; // this.cancelTouch(); // this.permitcroll(); }; // 启动监听 TouchGesture.VideoGesture.prototype.applyDom=function(videoElement){ this._containElement.appendChild(this._settingBtn); var hostDomain=window.location.host; if(TGUserSetting.website[hostDomain]!=null && TGUserSetting.website[hostDomain]["wSwitchEnable"]==false){ //用户设置该网站上不可用,不监听手势 return; } this._containElement.appendChild(this._elementFrame); this._containElement.appendChild(this._unlockBtn); var temp=this._videoElement; while(temp!=this._eventListenElement && temp!=null){ if(temp.classList!=null) temp.classList.add("TouchGestureForbidScroll"); temp=temp.parentElement; } this._eventListenElement.classList.add("TouchGestureForbidScroll"); this._eventListenElement.addEventListener("touchstart",this._touchStartHandler,false); this._eventListenElement.addEventListener("touchend",this._touchEndHandler,false); this._eventListenElement.addEventListener("touchmove",this._touchMoveHandler,false); }; // Resize时恢复元素原样,取消事件监听 TouchGesture.VideoGesture.prototype.restoreDom=function(){ if(this._containElement!=null){ this._containElement.appendChild(this._elementFrame); // this._containElement.removeChild(this._elementFrame); } var temp=this._videoElement; while(temp!=this._eventListenElement){ if(temp.classList!=null) temp.classList.remove("TouchGestureForbidScroll"); temp=temp.parentElement; if(temp == null) break; } if(this._eventListenElement==null) return; this._eventListenElement.classList.remove("TouchGestureForbidScroll"); this._eventListenElement.removeEventListener("touchstart",this._touchStartHandler); this._eventListenElement.removeEventListener("touchend",this._touchEndHandler); this._eventListenElement.removeEventListener("touchmove",this._touchMoveHandler); }; // 窗口resize时检测是否全屏并且适配 TouchGesture.VideoGesture.prototype.fullScreenDetect=function(){ // alert("resize"); var self = this; this.setUnlockBtnLayout(); this.setSettingBtnLayout(); var fullScreenState=tg_IsFullscreen(); if(fullScreenState!=this._fullScreenNow){ this._fullScreenNow=fullScreenState; this.restoreDom(); this.findBestRoot(function(root_element,listen_element){ self.applyDom(); if(fullScreenState == true){ // console.log("fullscreen"); self._elementFrame.style.position = "fixed"; self.simMouseMoveCenter(); //模拟鼠标移到中间,使得自动隐藏视频底部 } else{ self._elementFrame.style.position = "absolute"; } }); } if(fullScreenState==true && this.videoInFullscreenElement()){ if(this._videoElement.videoWidth/this._videoElement.videoHeight>1.3){ // console.log("lock"); if(TouchGesture.orientationLocked == false && TouchGesture.ismobile == true){ TouchGesture.orientationLocked = true; setTimeout(() => { { screen.orientation.lock("landscape"); setTimeout(() => { this._unlockBtn.style.display = "block"; this._unlockBtn.classList.remove("fadeout"); }, 300); setTimeout(() => { self._unlockBtn.classList.add("fadeout"); }, 2300); } }, 300); } // screen.lockOrientationUniversal("landscape-primary"); } }else if(fullScreenState == false){ TouchGesture.orientationLocked = false; screen.orientation.unlock(); } }; // TouchGesture.VideoGesture.prototype.onOrientationChange=function(){ // var self = this; // }; TouchGesture.VideoGesture.prototype.videoInFullscreenElement=function(){ var temp = this._videoElement; while(temp!=null && temp!=document.body){ if(temp == document.fullscreenElement) return true; temp = temp.parentElement; } }; //自动调节DIV元素位置 TouchGesture.VideoGesture.prototype.setElementLayout=function(pos){ var videoTarget=this._containElement; var vw=videoTarget.offsetWidth,vh=videoTarget.offsetHeight; var w=vw/5; //var h=vh/8; var h=w/3; var x=(vw-w)/2+videoTarget.offsetLeft; var y; if(pos == "bottom"){ y= vh*7/8-h/2+videoTarget.offsetTop; }else if(pos == "top"){ y= vh*1/8-h/2+videoTarget.offsetTop; } else{ y= vh/2-h/2+videoTarget.offsetTop; } // console.log("w:"+w," h:"+h+" x:"+x+" y:"+y); this._elementFrame.style.width=w+"px"; this._elementFrame.style.height=h+"px"; this._elementFrame.style.left=x+"px"; this._elementFrame.style.top=y+"px"; // this._element.style.display="block"; var fontsize=h/3; this._toastText.style.fontSize=fontsize+"px"; this._toastText.style.marginTop=(h-fontsize)/2+"px"; this._elementFrame.style.display="none"; this._elementFrame.style.borderRadius = w/10 +"px"; }; TouchGesture.VideoGesture.prototype.setUnlockBtnLayout=function(){ var videoTarget=this._containElement; var vw=window.screen.width,vh=window.screen.height; var w = vh/8; var h = vh/8; var x=(vw-w)/2; var y=(vh-h)/2+vh/6; this._unlockBtn.style.fontSize=w/2+"px"; this._unlockBtn.style.width=w+"px"; this._unlockBtn.style.height=h+"px"; this._unlockBtn.style.lineHeight = h+"px"; this._unlockBtn.style.left=x+"px"; this._unlockBtn.style.top=y+"px"; this._unlockBtn.style.borderRadius = w/2+"px"; // this._unlockBtn.style.display = "block"; // this._unlockBtn.classList.remove("fadeout"); } TouchGesture.VideoGesture.prototype.setSettingBtnLayout=function(){ var videoTarget=this._containElement; var vw=videoTarget.offsetWidth,vh=videoTarget.offsetHeight; var w = vh/8; var h = vh/8; var x= vw - w - vw/12; var y=(vh-h)/2; if(vw/window.screen.width<0.3){ this._settingBtn.style.display = "none"; // 隐藏小视频的设置按钮 }else{ this._settingBtn.style.fontSize=w/2+"px"; this._settingBtn.style.width=w+"px"; this._settingBtn.style.height=h+"px"; this._settingBtn.style.lineHeight = h+"px"; this._settingBtn.style.left=x+"px"; this._settingBtn.style.top=y+"px"; this._settingBtn.style.borderRadius = w/2+"px"; } } //显示Toast TouchGesture.VideoGesture.prototype.setToast=function(str){ // this._element.style.opacity=0.75; this._elementFrame.style.display="block"; this._elementFrame.classList.remove("fadeout"); this._toastText.innerHTML=str; } //在Touchend之前取消手势 TouchGesture.VideoGesture.prototype.cancelTouch=function(){ this.sweepDir=0; this._videoElement.playbackRate=this.originalPlayrate; this.touchDownPt=null; this.hideToast(); } // 隐藏toast TouchGesture.VideoGesture.prototype.hideToast=function(){ var self = this; setTimeout(function(){ self._elementFrame.classList.add("fadeout"); self._toastText.classList.remove("toast_blink"); },500); // setTimeout(function(){ // element.style.opacity=0; // element.classList.remove("fadeout"); // },1500); } // 检测