☰

FloatingPlayer

FloatingPlayer!悬浮窗

当前为 2022-08-13 提交的版本，查看 最新版本。

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