☰

FloatingPlayer

FloatingPlayer!悬浮窗

  1. // ==UserScript==
  2. // @name        FloatingPlayer
  3. // @namespace   https://greasyfork.org/zh-CN/scripts/449323/
  4. // @version     1.0.2
  5. // @description FloatingPlayer!悬浮窗
  6. // @author      Ylanty
  7. // @license     GPLv3
  8. // @match       http*://*/*
  9. // @icon        data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAE7mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4xLWMwMDAgNzkuYTg3MzFiOSwgMjAyMS8wOS8wOS0wMDozNzozOCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIzLjAgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMi0wNy0yM1QyMTozMzo0MiswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjItMDctMjlUMTY6NTk6MjgrMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDctMjlUMTY6NTk6MjgrMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmViNWUxNzAxLTIzNTYtYWI0NS1hNThhLWNjODA2NGRiZWQzYiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDplYjVlMTcwMS0yMzU2LWFiNDUtYTU4YS1jYzgwNjRkYmVkM2IiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplYjVlMTcwMS0yMzU2LWFiNDUtYTU4YS1jYzgwNjRkYmVkM2IiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmViNWUxNzAxLTIzNTYtYWI0NS1hNThhLWNjODA2NGRiZWQzYiIgc3RFdnQ6d2hlbj0iMjAyMi0wNy0yM1QyMTozMzo0MiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIzLjAgKFdpbmRvd3MpIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoBFavEAAAJ5SURBVEiJtZZNSFRRGIYfwyKYTSudJlfa2pkCEWtRlqFtLjZabkqkP9oEZRH9oQiVuIiMAhnMZeCNfsYxSTOTCSa1UjIqghJ/R8tQR0ObmWq+Fnab6XIdnTFfOHD4zj3vc97DOffeBBFhJbXKqLj5DvnX3/Dg3STf2r30nfRwzaqixEUQkX9aer0ot95Lq+jUNiJ9O5xyML1eFP2caM0QMB0IG/8Khfu+gMj5TnHEAjEEaIZnO6TGpkr+aY/cmPKHQW6vDOY0yOGlgKICNqmSr9WynVLSNix92thMUKSsS+qsi0CiAvQrTK8X5VyHOHwRW+gZE2+uS44ulMbwFC2k3iJcTYM02Zs55B5lAGCLGcu9PByFaRTYjE5aLAn0z13slNqZYDhN52cZ290oxyLnxZRAn8Y1QKP9EUc8Y4wAZCZjvptHTZaZrL/3Jt4E+jllXVKnnbSpgEi2U0qWlUCfxtlPQ8UrqgHWrYGcFHbBAq+KeBUSQlr/R4jgfwPYVJTCNAoqMigF8M5CyxAtAInLMbaqKBtMWGqzqchIIgnAF4Qzz7kw+5O5ZQFsKsq+jew9YWW/6Y/LkxE+Xenm8oSfyd4iXHEBrCqKxYTFsZ3yzGTMAJN+qOzh5uNhWjVjTTEBtL0utVGsrbpliA+VPVROBfDpzRcFJK6aH7eqKOtNmGu2UZ5lxgIw4YdL3VQ/HaHdyHhJAHsqe7beZ21BKrmnbBSbVs/XmwZ5W9VD1XSQmWjmgPFNjnz3R2p8TuT4M7kaywfH8B7c/shDfa2hn9f2Zg64R3EvuupoW9RbhMumgi+Ab2cKOV+/M+4awPXiCy9jMdaUICv82/IbKqHswvE0TmsAAAAASUVORK5CYII=
  10. // ==/UserScript==
  11. var run=1;
  12. //// @noframes
  13. (function() {
  14.     'use strict';
  15.     if(run>1) return;
  16.     run++;
  17.     var zindex=999999999;
  18.     var maxrect=5,minrect=0.25,steprect=0.05,maxrspeed=10,fastwinds=20;
  19.     var findedVideoElement=false,touchedVideoElement=false,floatingFlag=false,isIframe=false,isRotate=false,isFloatingbtnContainDisplay=false,isPhone=false;
  20.     var rotate=0;
  21.     var screenSize=1,screenSizeChange=0,screenPosition='default';
  22.     var videoInfo={};
  23.     var videoratio={width:0,height:0};
  24.     var allElements={};
  25.     var containSize={width:0,height:0};
  26.     var cw,ch;
  27.     var showFloatingInfoInterval=null,showSettingsT=null,showMsgT=null,onLongPress=null,doubleTouchT=null;
  28.     var touchInfo={},mouseInfo={};
  29.     var floatingPlayerData = {
  30.         videoratio34: {name: '3:4',trstart:true,tr:'videoratio'},
  31.         videoratio43: {name: '4:3'},
  32.         videoratio916: {name: '9:16'},
  33.         videoratio169: {name: '16:9'},
  34.         videoratioauto: {name: '拉伸',colspan: 2},
  35.         videoratiosource: {name: '原比',colspan: 2,trend:true},
  36.  
  37.         //videorect: {name: '🗔'},
  38.         videorect_001: {name: -steprect*100+'%',value: -steprect,trstart:true,tr:'videorect'},
  39.         videorectrange: {name: '滑动',colspan: 5,buttontype: 'range'},
  40.         videorect001: {name: '+'+steprect*100+'%',value: steprect},
  41.         videorectshow: {name: '100%',trend:true},
  42.  
  43.         //volume: {name: '🔊'},
  44.         volume_010: {name: '-10%',value: -0.1,trstart:true,tr:'volume'},
  45.         volumerange: {name: '滑动',colspan: 5,buttontype: 'range'},
  46.         volume010: {name: '+10%',value: 0.1},
  47.         volumeshow: {name: '100%',trend:true},
  48.  
  49.         //speed: {name: '倍速'},
  50.         speed_001: {name: '-x0.1',value: -0.1,trstart:true,tr:'speed'},
  51.         speedrange: {name: '滑动',colspan: 5,buttontype: 'range'},
  52.         speed001: {name: '+x0.1',value: 0.1},
  53.         speedshow: {name: 'x1.0',trend:true},
  54.  
  55.         positionlefttop: {name: '◰',trstart:true},
  56.         rotate: {name: '↻',value: 90},
  57.         volume: {name: '🔊'},
  58.         speed: {name: '倍速'},
  59.         videoratio: {name: '比例'},
  60.         videorect: {name: '🗔'},
  61.         rotate_: {name: '↺',value: -90},
  62.         positionrighttop: {name: '◳',trend:true},
  63.  
  64.         progress: {name: '进度',nolistener:true,trstart:true},
  65.         progressrange: {name: '滑动',colspan: 6,buttontype: 'range'},
  66.         progressshow: {name: '100%',nolistener:true,trend:true},
  67.  
  68.         positionleftbottom: {name: '◱',trstart:true},
  69.         rewind: {name: '⏪'+fastwinds+'s',value: -fastwinds},
  70.         progress_001: {name: '⏪1%',value: -0.01},
  71.         play: {name: '⏯'},
  72.         progress001: {name: '⏩1%',value: 0.01},
  73.         fastwind: {name: '⏩'+fastwinds+'s',value: fastwinds},
  74.         positioncenter: {name: '⧈'},
  75.         positionrightbottom: {name: '◲',trend:true}
  76.     };
  77.  
  78.     findVideoElement();
  79.     function findVideoElement(){
  80.         //alert(document.querySelector('iframe').contentWindow.document.querySelectorAll('video'));
  81.         //var k=0;
  82.         var findVideoElementInterval = setInterval(function(){
  83.             if(document.querySelector('video')){
  84.                 //alert(1);
  85.                 allElements.videoElement=document.querySelector('video');
  86.                 if(allElements.videoElement.readyState >= 2){
  87.                     //alert(window.top===window.self);
  88.                     allElements.floatElement=allElements.videoElement;
  89.                     if(window.top===window.self){
  90.                         isIframe=false;
  91.                     }else{
  92.                         //allElements.floatElement=window.top.document.querySelector('iframe');
  93.                         isIframe=true;
  94.                     }
  95.                     allElements.floatElementContain=allElements.floatElement.parentElement;
  96.                     findedVideoElement=true;
  97.                     //clearInterval(findVideoElementInterval);
  98.                     if(window.top.document.querySelector('#fptlh')) window.top.document.querySelector('#fptlh').remove();
  99.                     window.top.document.body.insertAdjacentHTML('beforeend','<input id="fptlh" value="'+window.top.location.href+'" style="display:none;">');
  100.                     isPhone=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  101.                     showFloatingBtn();
  102.                 }
  103.             }
  104.             //k++;
  105.             if(window.top.document.querySelector('#fptlh')){
  106.                 var fptlh=window.top.document.querySelector('#fptlh');
  107.                 if(fptlh.value==window.top.location.href) clearInterval(findVideoElementInterval);
  108.             }
  109.         }, 1000);
  110.     }
  111.     /*function findVideoElement(){
  112.        //alert(document.querySelector('iframe').contentWindow.document.querySelectorAll('video'));
  113.         if(document.querySelector('video')){
  114.             //alert(1);
  115.             allElements.videoElement=document.querySelector('video');
  116.             if(allElements.videoElement.readyState >= 2 && allElements.videoElement.duration>=20){
  117.                 allElements.floatElement=allElements.videoElement;
  118.                 allElements.floatElementContain=allElements.floatElement.parentElement;
  119.                 findedVideoElement=true;
  120.             }
  121.         }else if(document.querySelector('iframe').contentWindow.document.querySelector('video')){
  122.             //alert(2);
  123.             allElements.videoElement=document.querySelector('iframe').contentWindow.document.querySelector('video');
  124.             if(allElements.videoElement.readyState >= 2 && allElements.videoElement.duration>=20){
  125.                 allElements.floatElement=document.querySelector('iframe');
  126.                 //allElements.floatElement=allElements.videoElement;
  127.                 allElements.floatElementContain=allElements.floatElement.parentElement;
  128.                 findedVideoElement=true;
  129.                 isIframe=true;
  130.             }
  131.         }
  132.     }*/
  133.     function showFloatingBtn(){
  134.         var btnCss=`<style type="text/css">.fixedscroll{position: fixed;overflow:hidden;width:100%;}
  135.                     .floatingvideo{object-fit: fill!important;}div.dplayer-menu{display:none!important;}
  136.                     #floatingshowmsg{z-index: `+(zindex+4)+`!important;position: fixed;text-align:center;line-height:1;font-size:30px;color: #fff;margin: 0 4px 0 0;padding: 1px 1px 1px 0;text-shadow: 1px 1px 0 rgb(0 0 0 / 70%);}
  137.                     #floatingplayer_setting{border-collapse: separate;z-index: `+(zindex+2)+`!important;position: fixed;text-align:center;background: rgba(30, 29, 32, 0.5);}
  138.                     .tablecss{border-spacing:0;}
  139.                     .cellcss{width:100%;heght:100%;color: #fff;text-shadow: 1px 1px 0 rgb(0 0 0 / 70%);}</style>`;
  140.         document.head.insertAdjacentHTML('beforeend',btnCss);
  141.         //&#9771;&#x21BB;
  142.         //var floatingbtnstr='<a id="floatingbtn" title="打开/关闭悬浮窗" target="_blank" class="floatingbtn" style="right:12px;bottom:40px;">&#1422;</a>';
  143.         var floatingshowmsgstr='<span id="floatingshowmsg" class="floatingshowmsg" style="display:none;">floatingshowinfo</span>';
  144.         var floatingcontrols=create_table('floatingplayer_setting',floatingPlayerData,8);
  145.         var floatingbtnContainstr='<div id="floatingbtnContain">'+floatingshowmsgstr+floatingcontrols+'</div>';
  146.         allElements.floatElementRect=allElements.floatElement.getBoundingClientRect();
  147.         document.body.insertAdjacentHTML('beforeend',floatingbtnContainstr);
  148.         allElements.floatingbtnContain=document.getElementById('floatingbtnContain');
  149.         floating();
  150.         allElements.floatingbtnContain.append(allElements.floatElement);
  151.         /*if(isIframe){
  152.                 //allElements.floatingbtnContain=window.top.document.getElementById('floatingbtnContain');
  153.             }else{
  154.             //window.top.document.querySelector('head').insertAdjacentHTML('beforeend','<style type="text/css">.fixedscroll{position: fixed;overflow:hidden;width:100%;}</style>');
  155.                 //allElements.floatingbtnContain.append(allElements.floatElement);
  156.             }*/
  157.         allElements.floatingshowmsg=document.getElementById('floatingshowmsg');
  158.         allElements.floatingplayer_setting=document.getElementById('floatingplayer_setting');
  159.         allElements.floatingplayer_setting_table=document.getElementById('floatingplayer_setting_table');
  160.         allElements.floatingbtnContain=document.getElementById('floatingbtnContain');
  161.         if(allElements.videoElement.paused) allElements.videoElement.play();
  162.         setEventListener();
  163.         showFloatingInfo();
  164.     }
  165.     function create_table(id,data,rows) {
  166.         var htmlTable = `<div id="`+id+`" style="display:none;overflow: auto;"><table id="`+id+`_table" border="1" cellspacing="0" class="tablecss">`;
  167.         var datavalue='',tdInfo='',trInfo='',tdWidth='',inputInfo='';
  168.         for (let index in data) {
  169.             datavalue='undefined';
  170.             tdInfo='';
  171.             tdWidth=100/rows;
  172.             inputInfo='';
  173.             if (data[index].trstart) {
  174.                 trInfo='';
  175.                 if(data[index].tr) trInfo=`id="${data[index].tr}_tr" style="display:none;"`;
  176.                 htmlTable += `<tr ${trInfo}>`;
  177.             }
  178.             if(data[index].value) datavalue=data[index].value;
  179.             if(data[index].colspan){
  180.                 tdInfo+=`colspan="${data[index].colspan}" `;
  181.                 tdWidth*=data[index].colspan;
  182.             }
  183.             if(data[index].rowspan) tdInfo+=`rowspan="${data[index].rowspan}" `;
  184.             tdInfo+=`style="width:${tdWidth}%;height:25%;"`;
  185.             inputInfo=`id="floatingplayer_${index}" class="cellcss" dataname="${index}" datavalue="${datavalue}" datatitle="${data[index].name}"`;
  186.             if(data[index].buttontype){
  187.                 htmlTable += `<td ${tdInfo}><input ${inputInfo} type="range"></td>`;
  188.             }else{
  189.                 htmlTable += `<td ${tdInfo}><div ${inputInfo}>${data[index].name}</div></td>`;
  190.             }
  191.             if (data[index].trend) {
  192.                 htmlTable += `</tr>`;
  193.             }
  194.         }
  195.         htmlTable += `</table></div>`;
  196.         return htmlTable;
  197.     }
  198.     function floating(){
  199.         floatingFlag=floatingFlag?false:true;
  200.         if(floatingFlag){
  201.             videoratio.width=allElements.videoElement.videoWidth;
  202.             videoratio.height=allElements.videoElement.videoHeight;
  203.             allElements.floatElement.className='';
  204.             allElements.videoElement.classList.add('floatingvideo');
  205.             /*if(!isIframe){
  206.                 //allElements.videoElement.removeAttribute('controls');
  207.                 //allElements.videoElement.className='floatingvideo';
  208.                 allElements.videoElement.style='';
  209.                 allElements.videoElement.id='';
  210.                 //allElements.videoElement.controlsList='nofullscreen';
  211.             }*/
  212.             allElements.floatElement.style='';
  213.             allElements.floatElement.style.position='fixed';
  214.             allElements.floatElement.style.zIndex=zindex;
  215.             if(isPhone){
  216.                 screenSize=1;
  217.                 screenPosition='lefttop';
  218.                 setFloatingVidooRect();
  219.             }else{
  220.                 cw=window.top.document.documentElement.clientWidth;
  221.                 ch=window.top.document.documentElement.clientHeight;
  222.                 var vw=allElements.videoElement.videoWidth;
  223.                 var vh=allElements.videoElement.videoHeight;
  224.                 var vr=allElements.floatElementRect;
  225.                 var vrw=vr.width;
  226.                 var vrh=vr.height;
  227.                 var vrl=vr.left;
  228.                 var vrt=vr.top;
  229.                 var vrfw=vrw<vrh*vw/vh?vrw:vrh*vw/vh;
  230.                 var vrfh=vrh<vrw*vh/vw?vrh:vrw*vh/vw;
  231.                 var top=vrt+(vrh-vrfh)/2<0?0:(vrt+(vrh-vrfh)/2>ch-vrfh?ch-vrfh:vrt+(vrh-vrfh)/2);
  232.                 screenSize=vrfw/cw>vrfh/ch?vrfw/cw:vrfh/ch;
  233.                 //screenPosition='default';
  234.                 allElements.floatElement.style.width=vrfw+'px';
  235.                 allElements.floatElement.style.height=vrfh+'px';
  236.                 allElements.floatElement.style.left=vrl+(vrw-vrfw)/2+'px';
  237.                 allElements.floatElement.style.top=top+'px';
  238.             }
  239.         }
  240.     }
  241.     function setSettings(dataname){
  242.         var vr=allElements.videoElement.getBoundingClientRect();
  243.         //cw=document.documentElement.clientWidth;
  244.         var width=1/12;
  245.         if(dataname.substring(0,6)=='volume' || dataname.substring(0,5)=='speed' || dataname.substring(0,10)=='videoratio' || dataname.substring(0,9)=='videorect'){
  246.             width*=4;
  247.         }else{
  248.             width*=3;
  249.         }
  250.         allElements.floatingplayer_setting.style.left=vr.left+'px';
  251.         allElements.floatingplayer_setting.style.top=vr.top+vr.height*(1-width)+'px';
  252.         var fer=allElements.floatingplayer_setting.getBoundingClientRect();
  253.         if(fer.top+fer.height>ch){
  254.             ch=document.documentElement.clientHeight;
  255.             allElements.floatingplayer_setting.style.top=ch-fer.height+'px';
  256.         }
  257.         //allElements.floatingplayer_setting.style.maxWidth=vr.width+'px';
  258.         //allElements.floatingplayer_setting.style.maxHeight=vr.height/2+'px';
  259.         allElements.floatingplayer_setting_table.style.width=vr.width+'px';
  260.         allElements.floatingplayer_setting_table.style.height=vr.height*width+'px';
  261.         //console.log('fer',allElements.floatingplayer_setting.getBoundingClientRect().top);
  262.     }
  263.     function showSettings(dataname){
  264.         if(showSettingsT!=null) clearTimeout(showSettingsT);
  265.         allElements.volume_tr.style.display='none';
  266.         allElements.speed_tr.style.display='none';
  267.         allElements.videoratio_tr.style.display='none';
  268.         allElements.videorect_tr.style.display='none';
  269.         var tempdataname='';
  270.         if((tempdataname=dataname.substring(0,6))=='volume' || (tempdataname=dataname.substring(0,5))=='speed' || (tempdataname=dataname.substring(0,10))=='videoratio' || (tempdataname=dataname.substring(0,9))=='videorect'){
  271.             allElements[tempdataname+'_tr'].style='';
  272.         }else{
  273.             allElements.floatingplayer_setting.style.display='block';
  274.         }
  275.         setSettings(dataname);
  276.         showFloatingInfo();
  277.         showSettingsT = setTimeout(function() {
  278.             showSettingsT=null;
  279.             allElements.floatingplayer_setting.style.display='none';
  280.             //allElements[dataname+'_tr'].style.display='none';
  281.             setSettings('controls');
  282.         }, 3000);
  283.     }
  284.     function toggleSettings(){
  285.         if(allElements.floatingplayer_setting.style.display=='none'){
  286.             showSettings('controls');
  287.         }else{
  288.             if(showSettingsT!=null) clearTimeout(showSettingsT);
  289.             allElements.floatingplayer_setting.style.display='none';
  290.         }
  291.     }
  292.     function showFloatingInfo(){
  293.         if(showFloatingInfoInterval==null){
  294.             showFloatingInfoInterval = setInterval(function(){
  295.                 var ct=allElements.videoElement.currentTime;
  296.                 var dt=allElements.videoElement.duration;
  297.                 //allElements.floatingplayer_time.textContent=secondsToTimeStr(ct)+'/'+secondsToTimeStr(dt);
  298.  
  299.                 allElements.floatingplayer_videorectrange.value=(screenSize*100/maxrect).toFixed(0);
  300.                 allElements.floatingplayer_videorectshow.textContent=(screenSize*100).toFixed(0)+'%';
  301.  
  302.                 var progressbarvalue=ct/dt*100;
  303.                 allElements.floatingplayer_progressrange.value=(progressbarvalue).toFixed(0);
  304.                 //allElements.floatingplayer_progressshow.textContent=(progressbarvalue).toFixed(0)+'%';
  305.                 allElements.floatingplayer_progress.textContent=secondsToTimeStr(ct);
  306.                 allElements.floatingplayer_progressshow.textContent=secondsToTimeStr(dt);
  307.  
  308.                 var speedanyvalue=allElements.videoElement.playbackRate;
  309.                 allElements.floatingplayer_speedrange.value=(speedanyvalue*100/maxrspeed).toFixed(0);
  310.                 allElements.floatingplayer_speedshow.textContent='x'+speedanyvalue.toFixed(1);
  311.  
  312.                 var volumeanyvalue=allElements.videoElement.volume;
  313.                 allElements.floatingplayer_volumerange.value=(volumeanyvalue*100).toFixed(0);
  314.                 allElements.floatingplayer_volumeshow.textContent=(volumeanyvalue*100).toFixed(0)+'%';
  315.                 if(allElements.floatingplayer_setting.style.display=='none'){
  316.                     clearInterval(showFloatingInfoInterval);
  317.                     showFloatingInfoInterval=null;
  318.                 }
  319.             }, 1000);
  320.         }
  321.     }
  322.  
  323.     function setMsg(){
  324.         var vr=allElements.videoElement.getBoundingClientRect();
  325.         var left=vr.left<0?0:vr.left;
  326.         var top=vr.top<0?0:vr.top;
  327.         allElements.floatingshowmsg.style.left=left+'px';
  328.         allElements.floatingshowmsg.style.top=top+'px';
  329.     }
  330.     function showMsg(msg){
  331.         if(showMsgT!=null) clearTimeout(showMsgT);
  332.         setMsg();
  333.         allElements.floatingshowmsg.textContent=msg;
  334.         allElements.floatingshowmsg.style.display='block';
  335.         showMsgT = setTimeout(function() {
  336.             showMsgT=null;
  337.             allElements.floatingshowmsg.style.display='none';
  338.         }, 2000);
  339.     }
  340.  
  341.     function floatingVidooAttr(e){
  342.         //if(isIframe) videoElement=videoElementContain.querySelector('video');
  343.         var ele=e.target;
  344.         var value=ele.value;
  345.         var dataname=ele.getAttribute('dataname');
  346.         var datavalue=ele.getAttribute('datavalue');
  347.         var datatitle=ele.getAttribute('datatitle');
  348.         //alert([dataname,datavalue]);
  349.         if(datavalue!='undefined') datavalue=parseFloat(datavalue);
  350.         if(dataname.substring(0,9)=='videorect'){
  351.             setVideoRect(dataname,datavalue,value);
  352.         }else if(dataname.substring(0,8)=='progress'){
  353.             setProcess(dataname,datavalue,value);
  354.         }else if(dataname.substring(0,5)=='speed'){
  355.             setSpeed(dataname,datavalue,value);
  356.         }else if(dataname.substring(0,6)=='volume'){
  357.             setVolume(dataname,datavalue,value);
  358.         }else if(dataname=='rewind' || dataname=='fastwind'){
  359.             allElements.videoElement.currentTime=allElements.videoElement.currentTime+datavalue;
  360.         }else if(dataname=='play'){
  361.             allElements.videoElement.paused?allElements.videoElement.play():allElements.videoElement.pause();
  362.         }else if(dataname=='rotate' || dataname=='rotate_'){
  363.             screenSizeChange=0;
  364.             rotate+=datavalue;
  365.             if(rotate>=360) rotate-=360;
  366.             else if(rotate<0) rotate+=360;
  367.             allElements.floatElement.style.transform='rotate('+rotate+'deg)';
  368.             //allElements.floatingcontrols.style.transform='rotate('+rotate+'deg)';
  369.             /*floatingplayer_setting.style.transform='rotate('+rotate+'deg)';}*/
  370.         }else if(dataname.substring(0,8)=='position'){
  371.             screenPosition=dataname.substring(8);
  372.             if(screenPosition=='center') screenSize=1;
  373.             //setPosition(dataname);
  374.         }else if(dataname.substring(0,10)=='videoratio'){
  375.             setVideoRatio(dataname);
  376.         }
  377.         if(dataname=='rotate' || dataname=='rotate_' || dataname.substring(0,5)=='video' || dataname.substring(0,8)=='position'){
  378.             setFloatingVidooRect();
  379.         }
  380.         showSettings(dataname);
  381.         //setSettings(dataname);
  382.         showMsg(datatitle);
  383.     }
  384.     function setVideoRect(dataname,datavalue,value){
  385.         if(dataname=='videorect'){
  386.             //setVideoRect();
  387.             //showSettings(dataname);
  388.         }else if(dataname=='videorect_001' || dataname=='videorect001'){
  389.             var tempScreenSize=screenSize;
  390.             screenSize+=datavalue;
  391.             screenSize=screenSize>maxrect?maxrect:(screenSize<minrect?minrect:screenSize);
  392.             screenSizeChange=screenSize-tempScreenSize;
  393.         }else if(dataname=='videorectrange'){
  394.             value=value<minrect*100/maxrect?minrect*100/maxrect:value;
  395.             screenSizeChange=value/100*maxrect-screenSize;
  396.             screenSize=value/100*maxrect;
  397.         }else if(dataname=='videorectshow'){
  398.             screenSizeChange=1-screenSize;
  399.             screenSize=1;
  400.             screenPosition='center';
  401.         }
  402.     }
  403.     function setProcess(dataname,datavalue,value){
  404.         if(dataname=='progress'){
  405.             //screenSize=1;
  406.         }else if(dataname=='progress_001' || dataname=='progress001'){
  407.             allElements.videoElement.currentTime+=allElements.videoElement.duration*datavalue;
  408.         }else if(dataname=='progressrange'){
  409.             allElements.videoElement.currentTime=allElements.videoElement.duration*value/100;
  410.         }else if(dataname=='progressshow'){
  411.             //screenSize=1;
  412.         }
  413.     }
  414.     function setSpeed(dataname,datavalue,value){
  415.         if(dataname=='speed'){
  416.             //showSettings(dataname);
  417.         }else if(dataname=='speedshow'){
  418.             allElements.videoElement.playbackRate=1;
  419.         }else if(dataname=='speed_001' || dataname=='speed001'){
  420.             if(allElements.videoElement.playbackRate+datavalue>maxrspeed){
  421.                 allElements.videoElement.playbackRate=maxrspeed;
  422.             }else if(allElements.videoElement.playbackRate+datavalue<=0){
  423.                 allElements.videoElement.playbackRate=0.1;
  424.             }else{
  425.                 allElements.videoElement.playbackRate+=datavalue;
  426.             }
  427.         }else if(dataname=='speedrange'){
  428.             allElements.videoElement.playbackRate=(value/100*maxrspeed).toFixed(1);
  429.         }
  430.     }
  431.     function setVolume(dataname,datavalue,value){
  432.         if(dataname=='volume'){
  433.             //allElements.videoElement.muted=allElements.videoElement.muted?false:true;
  434.             //showSettings(dataname);
  435.         }else if(dataname=='volume_010' || dataname=='volume010'){
  436.             if(allElements.videoElement.volume+datavalue>1) allElements.videoElement.volume=1;
  437.             else if(allElements.videoElement.volume+datavalue<0) allElements.videoElement.volume=0;
  438.             else allElements.videoElement.volume+=datavalue;
  439.         }else if(dataname=='volumerange'){
  440.             allElements.videoElement.volume=value/100;
  441.         }else if(dataname=='volumeshow'){
  442.             allElements.videoElement.muted=false;
  443.             allElements.videoElement.volume=1;
  444.         }
  445.     }
  446.     function setVideoRatio(dataname){
  447.         if(dataname=='videoratio'){
  448.             //showSettings(dataname);
  449.         }else if(dataname=='videoratiosource'){
  450.             videoratio.width=allElements.videoElement.videoWidth;
  451.             videoratio.height=allElements.videoElement.videoHeight;
  452.         }else if(dataname=='videoratio34'){
  453.             videoratio.width=3;
  454.             videoratio.height=4;
  455.         }else if(dataname=='videoratio43'){
  456.             videoratio.width=4;
  457.             videoratio.height=3;
  458.         }else if(dataname=='videoratio916'){
  459.             videoratio.width=9;
  460.             videoratio.height=16;
  461.         }else if(dataname=='videoratio169'){
  462.             videoratio.width=16;
  463.             videoratio.height=9;
  464.         }else if(dataname=='videoratioauto'){
  465.             if(rotate==90||rotate==270){
  466.                 videoratio.width=window.top.document.documentElement.clientHeight;
  467.                 videoratio.height=window.top.document.documentElement.clientWidth;
  468.             }else{
  469.                 videoratio.width=window.top.document.documentElement.clientWidth;
  470.                 videoratio.height=window.top.document.documentElement.clientHeight;
  471.             }
  472.         }
  473.     }
  474.  
  475.     function setFloatingVidooRect(){
  476.         var left,top;
  477.         cw=window.top.document.documentElement.clientWidth;
  478.         ch=window.top.document.documentElement.clientHeight;
  479.  
  480.         var vw=videoratio.width;
  481.         var vh=videoratio.height;
  482.         var fw,fh;
  483.         isRotate=rotate==90||rotate==270;
  484.         if(isRotate){
  485.             fw=(ch<cw/vh*vw?ch:cw/vh*vw);
  486.             fh=(cw<ch/vw*vh?cw:ch/vw*vh);
  487.         }else{
  488.             fw=(cw<ch*vw/vh?cw:ch*vw/vh);
  489.             fh=(ch<cw*vh/vw?ch:cw*vh/vw);
  490.         }
  491.         var sfw=fw*screenSize;
  492.         var sfh=fh*screenSize;
  493.         /*if(isIframe){
  494.             allElements.videoElement.style.width=sfw+'px';
  495.             allElements.videoElement.style.height=sfh+'px';
  496.         }*/
  497.         allElements.floatElement.style.width=sfw+'px';
  498.         allElements.floatElement.style.height=sfh+'px';
  499.         //var vr=floatElement.getBoundingClientRect();
  500.         var fel=allElements.floatElement.offsetLeft;
  501.         var fet=allElements.floatElement.offsetTop;
  502.         var sfwh=-(sfw-sfh)/2;
  503.         if(screenPosition=='lefttop'){
  504.             left=isRotate?sfwh:0;
  505.             top=isRotate?-sfwh:0;
  506.         }else if(screenPosition=='righttop'){
  507.             left=isRotate?cw-sfw-sfwh:cw-sfw;
  508.             top=isRotate?-sfwh:0;
  509.         }else if(screenPosition=='leftbottom'){
  510.             left=isRotate?sfwh:0;
  511.             top=isRotate?ch-sfh+sfwh:ch-sfh;
  512.         }else if(screenPosition=='rightbottom'){
  513.             left=isRotate?cw-sfw-sfwh:cw-sfw;
  514.             top=isRotate?ch-sfh+sfwh:ch-sfh;
  515.         }else if(screenPosition=='center'){
  516.             left=(cw-sfw)/2;
  517.             top=(ch-sfh)/2;
  518.         }else if(screenPosition=='mousewheel'){
  519.             left=fel-(fw*screenSizeChange)*videoInfo.cx/videoInfo.ew;
  520.             top=fet-(fh*screenSizeChange)*videoInfo.cy/videoInfo.eh;
  521.         }else if(screenPosition=='mousemove'){
  522.             left=fel-(fw*screenSizeChange)/2;
  523.             top=fet-(fh*screenSizeChange)/2;
  524.         }else{
  525.             left=fel;
  526.             top=fet;
  527.         }
  528.         allElements.floatElement.style.left=left+'px';
  529.         allElements.floatElement.style.top=top+'px';
  530.     }
  531.     function secondsToTimeStr(secs){
  532.         secs=secs.toFixed(0);
  533.         var hour=parseInt(secs/3600);
  534.         var min=parseInt(secs/60)-60*hour;
  535.         var sec=secs%60;
  536.         var ret='';
  537.         ret+=(hour>0?hour+':':'')+(min < 10? '0' + min : min) + ':' + (sec < 10? '0' + sec : sec);
  538.         return ret;
  539.     }
  540.  
  541.     function setEventListener(){
  542.         if(isPhone){
  543.             allElements.videoElement.addEventListener("touchstart",videoEvent,true);
  544.         }else{
  545.             if(!isIframe) allElements.videoElement.addEventListener("mouseover",videoEvent,true);
  546.             allElements.videoElement.addEventListener("mousedown",videoEvent,true);
  547.             if(!isIframe) allElements.videoElement.addEventListener("mousewheel",videoEvent,true);
  548.         }
  549.         for (let index in floatingPlayerData) {
  550.             if(floatingPlayerData[index].tr) allElements[floatingPlayerData[index].tr+'_tr']=document.getElementById(floatingPlayerData[index].tr+'_tr');
  551.             allElements['floatingplayer_'+index]=document.getElementById('floatingplayer_'+index);
  552.             if(!floatingPlayerData[index].nolistener){
  553.                 allElements['floatingplayer_'+index].addEventListener(floatingPlayerData[index].buttontype?'input':'click', floatingVidooAttr,true);
  554.             }
  555.         }
  556.     }
  557.     function fixedscroll(type){
  558.         if(type=='scroll'){
  559.             if(!window.top.document.body.classList.value.includes('fixedscroll')){
  560.                 videoInfo.scrollY=window.top.scrollY;
  561.                 videoInfo.dw=window.top.document.documentElement.clientWidth;
  562.                 window.top.document.body.classList.add('fixedscroll');
  563.                 window.top.document.body.style.top = `-${videoInfo.scrollY}px`;
  564.                 window.top.document.body.style.width = `${videoInfo.dw}px`;
  565.             }
  566.         }else if(type=='leave'){
  567.             if(window.top.document.body.classList.value.includes('fixedscroll')){
  568.                 window.top.document.body.classList.remove('fixedscroll');
  569.                 window.top.document.body.style.top = `0px`;
  570.                 window.top.scrollTo({top:videoInfo.scrollY});
  571.                 window.top.document.body.style.width = null;
  572.                 videoInfo.scrollY=null;
  573.             }
  574.         }
  575.     }
  576.     function videoEvent(e){
  577.         var self=e;
  578.         var ele=e.target;
  579.         var etype=e.type;
  580.         //ele.paused?ele.play():ele.play();
  581.         if(etype=='mouseover'){
  582.             //videoInfo.scrollY=null;
  583.             ele.addEventListener("mouseleave",videoEvent,true);
  584.             //showSettings();
  585.         }else if(etype=='mousewheel'){
  586.             fixedscroll('scroll');
  587.             var deltaY=self.deltaY;
  588.             videoInfo.cx=self.clientX-ele.offsetLeft;
  589.             videoInfo.cy=self.clientY-ele.offsetTop;
  590.             videoInfo.ew=ele.offsetWidth;
  591.             videoInfo.eh=ele.offsetHeight;
  592.             var tempScreenSize=screenSize;
  593.             var tempSizeChange=deltaY<0?-steprect:(deltaY>0?steprect:0);
  594.             screenSize+=screenSize>2?tempSizeChange*2:tempSizeChange;
  595.             screenSize=screenSize>maxrect?maxrect:(screenSize<minrect?minrect:screenSize);
  596.             screenSizeChange=screenSize-tempScreenSize;
  597.             screenPosition='mousewheel';
  598.             if(screenSizeChange!=0) setFloatingVidooRect();
  599.             setSettings('controls');
  600.             showMsg((screenSize*100).toFixed(0)+'%');
  601.         }else if(etype=='touchstart' || etype=='mousedown'){
  602.             fixedscroll('scroll');
  603.             //cw=document.documentElement.clientWidth;
  604.             //ch=document.documentElement.clientHeight;
  605.             videoInfo.self=etype=='touchstart'?self.touches[0]:self;
  606.             videoInfo.originalPlaybackRate=ele.playbackRate;
  607.             if (onLongPress == null){
  608.                 onLongPress = setTimeout(function() {
  609.                     if (doubleTouchT != null){
  610.                         clearTimeout(doubleTouchT);
  611.                         doubleTouchT = null;
  612.                     }
  613.                     ele.playbackRate=5.0;
  614.                     showMsg('倍速x'+ele.playbackRate);
  615.                 }, 200);
  616.             }
  617.             if (doubleTouchT == null) {
  618.                 doubleTouchT = setTimeout(function () {
  619.                     doubleTouchT = null;
  620.                     toggleSettings();
  621.                     //alert("single");
  622.                 }, 300)
  623.             }else{
  624.                 clearTimeout(doubleTouchT);
  625.                 doubleTouchT = null;
  626.                 var cx=ele.offsetLeft+ele.offsetWidth/2;
  627.                 var cy=ele.offsetTop+ele.offsetHeight/2;
  628.                 var isfastwinds=false;
  629.                 if((rotate==0 && videoInfo.self.clientX>cx)||(rotate==90 && videoInfo.self.clientY>cy)||(rotate==180 && videoInfo.self.clientX<cx)||(rotate==270 && videoInfo.self.clientY<cy)){
  630.                     isfastwinds=true;
  631.                 }
  632.                 ele.currentTime+=isfastwinds?fastwinds:-fastwinds;
  633.                 showMsg(String.fromCodePoint(isfastwinds?'0x23E9':'0x23EA')+fastwinds+'s');
  634.             }
  635.             videoInfo.x=allElements.floatElement.offsetLeft-videoInfo.self.clientX;
  636.             videoInfo.y=allElements.floatElement.offsetTop-videoInfo.self.clientY;
  637.             if(etype=='touchstart'){
  638.                 //videoInfo.startTouchFingers=e.touches.length;
  639.                 ele.addEventListener("touchend",videoEvent,true);
  640.                 ele.addEventListener("touchmove",videoEvent,true);
  641.             }else{
  642.                 ele.addEventListener("mouseup",videoEvent,true);
  643.                 ele.addEventListener("mousemove",videoEvent,true);
  644.             }
  645.         }else if(etype=='touchmove' || etype=='mousemove'){
  646.             if(onLongPress!=null){
  647.                 clearTimeout(onLongPress);
  648.                 onLongPress=null;
  649.                 ele.playbackRate=videoInfo.originalPlaybackRate;
  650.                 //showMsg(ele.playbackRate+'倍速播放');
  651.             }
  652.             if (doubleTouchT != null){
  653.                 clearTimeout(doubleTouchT);
  654.                 doubleTouchT = null;
  655.             }
  656.             //showSettings(e);
  657.             if(!isIframe){
  658.                 screenPosition='mousemove';
  659.                 screenSizeChange=0;
  660.                 videoInfo.self=etype=='touchmove'?self.touches[0]:self;
  661.                 allElements.floatElement.style.left=videoInfo.x+videoInfo.self.clientX+'px';
  662.                 allElements.floatElement.style.top=videoInfo.y+videoInfo.self.clientY+'px';
  663.                 setSettings('controls');
  664.                 setMsg();
  665.             }
  666.         }else if(etype=='touchend' || etype=='mouseup' || etype=='mouseleave'){
  667.             if(onLongPress!=null){
  668.                 clearTimeout(onLongPress);
  669.                 onLongPress=null;
  670.                 ele.playbackRate=videoInfo.originalPlaybackRate;
  671.                 //showMsg(ele.playbackRate+'倍速播放');
  672.             }
  673.             videoInfo.self=null;
  674.             videoInfo.x=null;
  675.             videoInfo.y=null;
  676.             if(etype=='touchend'){
  677.                 ele.removeEventListener("touchmove",videoEvent,true);
  678.                 ele.removeEventListener("touchend",videoEvent,true);
  679.             }else{
  680.                 ele.removeEventListener("mousemove",videoEvent,true);
  681.                 ele.removeEventListener("mouseup",videoEvent,true);
  682.                 if(etype=='mouseleave'){
  683.                     ele.removeEventListener("mouseleave",videoEvent,true);
  684.                 }
  685.             }
  686.             fixedscroll('leave');
  687.         }
  688.     }
  689.  
  690.     // Your code here...
  691. })();