FloatingPlayer!悬浮窗
当前为
// ==UserScript==
// @name FloatingPlayer
// @namespace https://greasyfork.org/zh-CN/scripts/449323/
// @version 0.8
// @description FloatingPlayer!悬浮窗
// @author Ylanty
// @license GPLv3
// @match http*://*/*
// @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=
// @noframes
// ==/UserScript==
var run=1;
(function() {
'use strict';
if(run>1) return;
run++;
var zindex=999999999;
var maxrect=5,maxrspeed=10,fastwinds=20;
var findedVideoElement=false,touchedVideoElement=false,floatingFlag=false,isIframe=false,isRotate=false,isFloatingbtnContainDisplay=false;
var rotate=0;
var screenSize=1,screenSizeChange=0,screenPosition='default';
var videoInfo={};
var videoratio={width:0,height:0};
var allElements={};
var containSize={width:0,height:0};
var cw,ch;
var mouseoverbtn,showMsgT,controlsDT,controlsT,onLongPress,doubleTouchT=null;
var touchInfo={},mouseInfo={};
var floatingPlayerData = {
display: {name: '背景黑色',colspan: 2},
time: {name: '时间',colspan: 4,nolistener:true},
videorect: {name: '🗔'},
videorect_001: {name: '-5%',value: -0.05},
videorectrange: {name: '滑动',colspan: 2,buttontype: 'range'},
videorect001: {name: '+5%',value: 0.05},
videorectshow: {name: '100%'},
volume: {name: '🔊'},
volume_010: {name: '-10%',value: -0.1},
volumerange: {name: '滑动',colspan: 2,buttontype: 'range'},
volume010: {name: '+10%',value: 0.1},
volumeshow: {name: '100%'},
speed: {name: '倍速'},
speed_001: {name: '-x0.1',value: -0.1},
speedrange: {name: '滑动',colspan: 2,buttontype: 'range'},
speed001: {name: '+x0.1',value: 0.1},
speedshow: {name: 'x1.0'},
progress: {name: '进度'},
progress_001: {name: '-1%',value: -0.01},
progressrange: {name: '滑动',colspan: 2,buttontype: 'range'},
progress001: {name: '+1%',value: 0.01},
progressshow: {name: '100%'},
videoratio34: {name: '3:4'},
videoratio43: {name: '4:3'},
videoratio916: {name: '9:16'},
videoratio169: {name: '16:9'},
videoratioauto: {name: '拉伸'},
videoratiosource: {name: '原比'},
positionlefttop: {name: '◰'},
rotate: {name: '↻',value: 90},
positioncenter: {name: '⧈',colspan: 2},
rotate_: {name: '↺',value: -90},
positionrighttop: {name: '◳'},
positionleftbottom: {name: '◱'},
rewind: {name: '⏮ '+fastwinds+'s',value: -fastwinds},
play: {name: '⏵/⏸',colspan: 2},
fastwind: {name: '⏭ '+fastwinds+'s',value: fastwinds},
positionrightbottom: {name: '◲'}
};
//showFloatingBtn();
var findVideoElementInterval = setInterval(function(){
findVideoElement();
if(findedVideoElement){
clearInterval(findVideoElementInterval);
showFloatingBtn();
}
}, 1000);
function findVideoElement(){
//alert(document.querySelector('iframe').contentWindow.document.querySelectorAll('video'));
if(document.querySelector('video')){
allElements.videoElement=document.querySelector('video');
if(allElements.videoElement.readyState >= 2 && allElements.videoElement.duration>=2){
allElements.floatElement=allElements.videoElement;
allElements.floatElementContain=allElements.floatElement.parentElement;
findedVideoElement=true;
}
}else if(document.querySelector('iframe').contentWindow.document.querySelector('video')){
allElements.videoElement=document.querySelector('iframe').contentWindow.document.querySelector('video');
if(allElements.videoElement.readyState >= 2 && allElements.videoElement.duration>=2){
allElements.floatElement=document.querySelector('iframe');
//allElements.floatElement=allElements.videoElement;
allElements.floatElementContain=allElements.floatElement.parentElement;
findedVideoElement=true;
isIframe=true;
}
}
}
function showFloatingBtn(){
var btnCss=`<style type="text/css">.fixedscroll{position: fixed;overflow:hidden;width:100%;}
.floatingvideo{object-fit: fill!important;}
#floatingbtn{width: 32px;height:32px;z-index: `+(zindex+3)+`!important;position: fixed;text-align:center;line-height:1;font-size:30px;color: #717171;}
#floatingshowmsg{z-index: `+(zindex+4)+`!important;position: fixed;text-align:center;line-height:1;font-size:30px;color: #717171;}
#floatingcontrols{height:32px;z-index: `+(zindex+5)+`!important;position: fixed;color: #717171;}
.floatingcontrols{text-align:center;color:white!important;line-height:1.5;background: rgba(30, 29, 32, 0.5);}
#floatingbtn:hover{color: green;}
.floatingbtnContain_display{position:fixed;z-index:`+(zindex-1)+`;background:black;width:100%;height:100%;left:0px;top:0px;}
#floatingplayer_setting{border-collapse: separate;z-index: `+(zindex+2)+`!important;position: fixed;text-align:center;background: rgba(30, 29, 32, 0.5);}
.tablecss{border-spacing:0;line-height:32px;}
.cellcss{width:100%;heght:100%;color: #fff;text-shadow: 1px 1px 0 rgb(0 0 0 / 70%);}</style>`;
document.querySelector('head').insertAdjacentHTML('beforeend',btnCss);
//☫↻
var floatingbtnstr='<a id="floatingbtn" title="打开/关闭悬浮窗" target="_blank" class="floatingbtn" style="right:12px;bottom:40px;">֎</a>';
var floatingshowmsgstr='<span id="floatingshowmsg" class="floatingshowmsg" style="right:40px;top:40px;display:none;">floatingshowinfo</span>';
var floatingprogressstr='<input id="floatingprogress" type="range" class="floatingprogress floatingcontrols" style="width:60%;">';
var floatingtimestr='<div id="floatingtime" class="floatingtime floatingcontrols" style="width:auto;">时间</div>';
var floatingplaystr='<div id="floatingplay" class="floatingplay floatingcontrols" style="width:15%;">⏵/⏸</div>';
var floatingcontrolsstr='<div id="floatingcontrols" class="floatingcontrols" style="display:none;"><div style="display: flex;">'+floatingplaystr+floatingprogressstr+floatingtimestr+'</div></div>';
var floatingbtnContainstr='<div id="floatingbtnContain">'+floatingbtnstr+floatingshowmsgstr+floatingcontrolsstr+'</div>';
allElements.floatElementRect=allElements.floatElement.getBoundingClientRect();
if(isIframe){
allElements.floatElementContain.insertAdjacentHTML('beforeend',floatingbtnContainstr);
allElements.floatingbtnContain=document.getElementById('floatingbtnContain');
allElements.floatingbtnContain.append(allElements.floatElement);
findedVideoElement=false;
var findVideoElementInterval = setInterval(function(){
findVideoElement();
if(findedVideoElement){
clearInterval(findVideoElementInterval);
allElements.floatElement.contentWindow.document.querySelector('head').insertAdjacentHTML('beforeend','<style type="text/css">.floatingvideo{object-fit: fill!important;}div.dplayer-menu{display:none!important;}</style>');
floating();
//showFloatingBtn();
}
}, 1000);
}else{
floating();
document.body.insertAdjacentHTML('beforeend',floatingbtnContainstr);
allElements.floatingbtnContain=document.getElementById('floatingbtnContain');
allElements.floatingbtnContain.append(allElements.floatElement);
}
allElements.floatingbtnContain.insertAdjacentHTML('beforeend',create_table());
allElements.floatingbtn=document.getElementById('floatingbtn');
allElements.floatingshowmsg=document.getElementById('floatingshowmsg');
allElements.floatingcontrols=document.getElementById('floatingcontrols');
allElements.floatingprogress=document.getElementById('floatingprogress');
allElements.floatingtime=document.getElementById('floatingtime');
allElements.floatingplay=document.getElementById('floatingplay');
allElements.floatingplayer_setting=document.getElementById('floatingplayer_setting');
setEventListener();
//showFloatingInfo();
}
function create_table() {
const rows = 6;
var htmlTable = `<div id="floatingplayer_setting" style="right:12px;bottom:80px;display:none;"><table border="1" cellspacing="0" class="tablecss">`;
let htmlTbody = ``;
var datavalue='';
var tdInfo='';
var trEnd=0;
for (let index in floatingPlayerData) {
if (trEnd == 0) {
htmlTbody += `<tr>`;
}
trEnd+=floatingPlayerData[index].colspan?floatingPlayerData[index].colspan:1;
datavalue='undefined';
tdInfo='';
if(floatingPlayerData[index].value) datavalue=floatingPlayerData[index].value;
if(floatingPlayerData[index].colspan) tdInfo+=`colspan="${floatingPlayerData[index].colspan}"`;
//if(floatingPlayerData[index].rowspan) tdInfo+=`rowspan="${floatingPlayerData[index].rowspan}"`;
//console.log('tableData[index].value',floatingPlayerData[index].value);
if(floatingPlayerData[index].buttontype){
htmlTbody += `<td ${tdInfo}><input id="floatingplayer_${index}" type="range" class="cellcss range" dataname="${index}" datavalue="${datavalue}"></td>`;
}else{
htmlTbody += `<td ${tdInfo}><div id="floatingplayer_${index}" class="cellcss" dataname="${index}" datavalue="${datavalue}">${floatingPlayerData[index].name}</div></td>`;
}
if (trEnd >= rows) {
htmlTbody += `</tr>`;
trEnd=0;
}
}
htmlTable += `${htmlTbody}</table></div>`;
return htmlTable;
}
function floating(){
floatingFlag=floatingFlag?false:true;
if(floatingFlag){
videoratio.width=allElements.videoElement.videoWidth;
videoratio.height=allElements.videoElement.videoHeight;
//var fw=cw<ch*vw/vh?cw:ch*vw/vh;
//var fh=ch<cw*vh/vw?ch:cw*vh/vw;
//screenSize=vrfw/cw>vrfh/ch?vrfw/cw:vrfh/ch;
//alert([cw,ch,vw,vh,vr,vrw,vrh,vrl,vrt,vrfw,vrfh,top,floatElement.querySelector('video')]);
//allElements.floatingbtnContain.append(allElements.floatElementContain);
//if(!isIframe) allElements.floatingbtnContain.append(allElements.floatElement);
allElements.floatElement.className='';
allElements.videoElement.classList.add('floatingvideo');
allElements.floatElement.style='';
allElements.floatElement.style.position='fixed';
allElements.floatElement.style.zIndex=zindex;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
screenSize=1;
screenPosition='lefttop';
setFloatingVidooRect();
}else{
cw=document.documentElement.clientWidth;
ch=document.documentElement.clientHeight;
var vw=allElements.videoElement.videoWidth;
var vh=allElements.videoElement.videoHeight;
var vr=allElements.floatElementRect;
var vrw=vr.width;
var vrh=vr.height;
var vrl=vr.left;
var vrt=vr.top;
var vrfw=vrw<vrh*vw/vh?vrw:vrh*vw/vh;
var vrfh=vrh<vrw*vh/vw?vrh:vrw*vh/vw;
var top=vrt+(vrh-vrfh)/2<0?0:(vrt+(vrh-vrfh)/2>ch-vrfh?ch-vrfh:vrt+(vrh-vrfh)/2);
screenSize=vrfw/cw>vrfh/ch?vrfw/cw:vrfh/ch;
//screenPosition='default';
allElements.floatElement.style.width=vrfw+'px';
allElements.floatElement.style.height=vrfh+'px';
allElements.floatElement.style.left=vrl+(vrw-vrfw)/2+'px';
allElements.floatElement.style.top=top+'px';
}
//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>');
//if(isIframe) allElements.videoElement=allElements.floatElement.contentWindow.document.querySelector('video');
}else{
allElements.videoElement.classList.remove('floatingvideo');
//floatElement.style='';
//if(!isIframe) allElements.floatElementContain.prepend(allElements.floatElement);
allElements.floatElement.style.position=null;
allElements.floatElement.style.zIndex=null;
allElements.floatElement.style.width=null;
allElements.floatElement.style.height=null;
allElements.floatElement.style.left=null;
allElements.floatElement.style.top=null;
allElements.floatElement.removeEventListener("touchstart",touchStartHandler,true);
allElements.floatElement.removeEventListener("mousedown",mouseDownHandler,true);
}
}
function showFloatingInfo(){
var showFloatingInfoInterval = setInterval(function(){
var ct=allElements.videoElement.currentTime;
var dt=allElements.videoElement.duration;
allElements.floatingplayer_time.textContent=secondsToTimeStr(ct)+'/'+secondsToTimeStr(dt);
allElements.floatingplayer_videorectrange.value=(screenSize*100/maxrect).toFixed(0);
allElements.floatingplayer_videorectshow.textContent=(screenSize*100).toFixed(0)+'%';
var progressbarvalue=ct/dt*100;
allElements.floatingplayer_progressrange.value=(progressbarvalue).toFixed(0);
allElements.floatingplayer_progressshow.textContent=(progressbarvalue).toFixed(0)+'%';
var speedanyvalue=allElements.videoElement.playbackRate;
allElements.floatingplayer_speedrange.value=(speedanyvalue*100/maxrspeed).toFixed(0);
allElements.floatingplayer_speedshow.textContent='x'+speedanyvalue.toFixed(1);
var volumeanyvalue=allElements.videoElement.volume;
allElements.floatingplayer_volumerange.value=(volumeanyvalue*100).toFixed(0);
allElements.floatingplayer_volumeshow.textContent=(volumeanyvalue*100).toFixed(0)+'%';
if(allElements.floatingplayer_setting.style.display=='none'){
clearInterval(showFloatingInfoInterval);
}
}, 1000);
}
function showMsg(msg){
if(showMsgT) clearTimeout(showMsgT);
allElements.floatingshowmsg.textContent=msg;
allElements.floatingshowmsg.style.display='block';
showMsgT = setTimeout(function() {
allElements.floatingshowmsg.style.display='none';
}, 500);
}
function floatingVidooAtrr(e){
//if(isIframe) videoElement=videoElementContain.querySelector('video');
var ele=e.target;
var value=ele.value;
var dataname=ele.getAttribute('dataname');
var datavalue=ele.getAttribute('datavalue');
//alert([dataname,datavalue]);
if(datavalue!='undefined') datavalue=parseFloat(datavalue);
if(dataname=='display'){
isFloatingbtnContainDisplay=isFloatingbtnContainDisplay?false:true;
if(isFloatingbtnContainDisplay){
allElements.floatingbtnContain.classList.add('floatingbtnContain_display');
}else{
allElements.floatingbtnContain.classList.remove('floatingbtnContain_display');
}
}else if(dataname.substring(0,9)=='videorect'){
setVideoRect(dataname,datavalue,value);
}else if(dataname.substring(0,8)=='progress'){
setProcess(dataname,datavalue,value);
}else if(dataname.substring(0,5)=='speed'){
setSpeed(dataname,datavalue,value);
}else if(dataname.substring(0,6)=='volume'){
setVolume(dataname,datavalue,value);
}else if(dataname=='rewind' || dataname=='fastwind'){
allElements.videoElement.currentTime=allElements.videoElement.currentTime+datavalue;
}else if(dataname=='play'){
allElements.videoElement.paused?allElements.videoElement.play():allElements.videoElement.pause();
}else if(dataname=='rotate' || dataname=='rotate_'){
screenSizeChange=0;
rotate+=datavalue;
if(rotate>=360) rotate-=360;
else if(rotate<0) rotate+=360;
allElements.floatElement.style.transform='rotate('+rotate+'deg)';
allElements.floatingcontrols.style.transform='rotate('+rotate+'deg)';
/*floatingplayer_setting.style.transform='rotate('+rotate+'deg)';}*/
}else if(dataname.substring(0,8)=='position'){
screenPosition=dataname.substring(8);
//setPosition(dataname);
}else if(dataname.substring(0,10)=='videoratio'){
setVideoRatio(dataname);
}
if(dataname=='rotate' || dataname=='rotate_' || dataname.substring(0,5)=='video' || dataname.substring(0,8)=='position'){
setFloatingVidooRect();
}
showFloatingInfo();
}
function setVideoRect(dataname,datavalue,value){
if(dataname=='videorect'){
//setVideoRect();
}else if(dataname=='videorect_001' || dataname=='videorect001'){
var tempScreenSize=screenSize;
screenSize+=datavalue;
screenSize=screenSize>maxrect?maxrect:(screenSize<0?0:screenSize);
screenSizeChange=screenSize-tempScreenSize;
}else if(dataname=='videorectrange'){
screenSizeChange=value/100*maxrect-screenSize;
screenSize=value/100*maxrect;
}else if(dataname=='videorectshow'){
screenSizeChange=1-screenSize;
screenSize=1;
screenPosition='center';
}
}
function setProcess(dataname,datavalue,value){
if(dataname=='progress'){
//screenSize=1;
}else if(dataname=='progress_001' || dataname=='progress001'){
allElements.videoElement.currentTime+=allElements.videoElement.duration*datavalue;
}else if(dataname=='progressrange'){
allElements.videoElement.currentTime=allElements.videoElement.duration*value/100;
}else if(dataname=='progressshow'){
//screenSize=1;
}
}
function setSpeed(dataname,datavalue,value){
if(dataname=='speed' || dataname=='speedshow'){
allElements.videoElement.playbackRate=1;
}else if(dataname=='speed_001' || dataname=='speed001'){
if(allElements.videoElement.playbackRate+datavalue>maxrspeed){
allElements.videoElement.playbackRate=maxrspeed;
}else if(allElements.videoElement.playbackRate+datavalue<=0){
allElements.videoElement.playbackRate=0.1;
}else{
allElements.videoElement.playbackRate+=datavalue;
}
}else if(dataname=='speedrange'){
allElements.videoElement.playbackRate=(value/100*maxrspeed).toFixed(1);
}
}
function setVolume(dataname,datavalue,value){
if(dataname=='volume'){
allElements.videoElement.muted=allElements.videoElement.muted?false:true;
}else if(dataname=='volume_010' || dataname=='volume010'){
if(allElements.videoElement.volume+datavalue>1) allElements.videoElement.volume=1;
else if(allElements.videoElement.volume+datavalue<0) allElements.videoElement.volume=0;
else allElements.videoElement.volume+=datavalue;
}else if(dataname=='volumerange'){
allElements.videoElement.volume=value/100;
}else if(dataname=='volumeshow'){
allElements.videoElement.muted=false;
allElements.videoElement.volume=1;
}
}
function setVideoRatio(dataname){
if(dataname=='videoratiosource'){
videoratio.width=allElements.videoElement.videoWidth;
videoratio.height=allElements.videoElement.videoHeight;
}else if(dataname=='videoratio34'){
videoratio.width=3;
videoratio.height=4;
}else if(dataname=='videoratio43'){
videoratio.width=4;
videoratio.height=3;
}else if(dataname=='videoratio916'){
videoratio.width=9;
videoratio.height=16;
}else if(dataname=='videoratio169'){
videoratio.width=16;
videoratio.height=9;
}else if(dataname=='videoratioauto'){
if(rotate==90||rotate==270){
videoratio.width=document.documentElement.clientHeight;
videoratio.height=document.documentElement.clientWidth;
}else{
videoratio.width=document.documentElement.clientWidth;
videoratio.height=document.documentElement.clientHeight;
}
}
}
function setPosition(dataname,sfwh,cw,ch,sfw,sfh){
var left,top;
if(screenPosition=='lefttop'){
videoInfo.el=isRotate?sfwh:0;
videoInfo.et=isRotate?-sfwh:0;
}else if(screenPosition=='righttop'){
left=isRotate?cw-sfw-sfwh:cw-sfw;
top=isRotate?-sfwh:0;
}else if(screenPosition=='leftbottom'){
left=isRotate?sfwh:0;
top=isRotate?ch-sfh+sfwh:ch-sfh;
}else if(screenPosition=='rightbottom'){
left=isRotate?cw-sfw-sfwh:cw-sfw;
top=isRotate?ch-sfh+sfwh:ch-sfh;
}else if(screenPosition=='center'){
left=(cw-sfw)/2;
top=(ch-sfh)/2;
}
}
function setFloatingVidooRect(){
var left,top;
cw=document.documentElement.clientWidth;
ch=document.documentElement.clientHeight;
var vw=videoratio.width;
var vh=videoratio.height;
var fw,fh;
isRotate=rotate==90||rotate==270;
if(isRotate){
fw=(ch<cw/vh*vw?ch:cw/vh*vw);
fh=(cw<ch/vw*vh?cw:ch/vw*vh);
}else{
fw=(cw<ch*vw/vh?cw:ch*vw/vh);
fh=(ch<cw*vh/vw?ch:cw*vh/vw);
}
var sfw=fw*screenSize;
var sfh=fh*screenSize;
if(isIframe){
allElements.videoElement.style.width=sfw+'px';
allElements.videoElement.style.height=sfh+'px';
}
allElements.floatElement.style.width=sfw+'px';
allElements.floatElement.style.height=sfh+'px';
//var vr=floatElement.getBoundingClientRect();
var fel=allElements.floatElement.offsetLeft;
var fet=allElements.floatElement.offsetTop;
var sfwh=-(sfw-sfh)/2;
if(screenPosition=='lefttop'){
left=isRotate?sfwh:0;
top=isRotate?-sfwh:0;
}else if(screenPosition=='righttop'){
left=isRotate?cw-sfw-sfwh:cw-sfw;
top=isRotate?-sfwh:0;
}else if(screenPosition=='leftbottom'){
left=isRotate?sfwh:0;
top=isRotate?ch-sfh+sfwh:ch-sfh;
}else if(screenPosition=='rightbottom'){
left=isRotate?cw-sfw-sfwh:cw-sfw;
top=isRotate?ch-sfh+sfwh:ch-sfh;
}else if(screenPosition=='center'){
left=(cw-sfw)/2;
top=(ch-sfh)/2;
}else if(screenPosition=='mouse'){
left=fel-(fw*screenSizeChange)*mouseInfo.cx/mouseInfo.ew;
top=fet-(fh*screenSizeChange)*mouseInfo.cy/mouseInfo.eh;
}else{
left=fel-(fw*screenSizeChange)/2;
top=fet-(fh*screenSizeChange)/2;
}
//left=videoInfo.el-(fw*screenSizeChange)*videoInfo.cx/videoInfo.ew;
//top=videoInfo.et-(fh*screenSizeChange)*videoInfo.cy/videoInfo.eh;
allElements.floatElement.style.left=left+'px';
allElements.floatElement.style.top=top+'px';
}
function secondsToTimeStr(secs){
secs=secs.toFixed(0);
var hour=parseInt(secs/3600);
var min=parseInt(secs/60)-60*hour;
var sec=secs%60;
var ret='';
ret+=(hour>0?hour+':':'')+(min < 10? '0' + min : min) + ':' + (sec < 10? '0' + sec : sec);
return ret;
}
function setEventListener(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
allElements.floatingbtn.addEventListener("click",function(){
if(allElements.floatingplayer_setting.style.display=='block'){
allElements.floatingplayer_setting.style.display='none';
}else{
allElements.floatingplayer_setting.style.display='block';
showFloatingInfo();
}
});
allElements.floatingbtn.addEventListener("touchstart",touchStartHandler,true);
allElements.floatElement.addEventListener("touchstart",touchStartHandler,true);
//allElements.floatElement.addEventListener("touchstart",touchStartHandler,true);
}else{
allElements.floatingbtn.addEventListener("mouseover",function(){
if(allElements.floatingplayer_setting.style.display=='none'){
allElements.floatingplayer_setting.style.display='block';
showFloatingInfo();
}
});
allElements.floatingbtn.addEventListener("mouseleave",function(){
if(allElements.floatingplayer_setting.style.display=='block'){
mouseoverbtn = setTimeout(function() {
allElements.floatingplayer_setting.style.display='none';
}, 500);
}
});
allElements.floatingplayer_setting.addEventListener("mouseover",function(){
if(mouseoverbtn) clearTimeout(mouseoverbtn);
});
allElements.floatingplayer_setting.addEventListener("mouseleave",function(){
if(allElements.floatingplayer_setting.style.display=='block'){
mouseoverbtn = setTimeout(function() {
allElements.floatingplayer_setting.style.display='none';
}, 1000);
}
});
allElements.floatingbtn.addEventListener("mousedown",mouseDownHandler,true);
allElements.floatElement.addEventListener("mouseover",feMouseOver,true);
allElements.floatElement.addEventListener("mousedown",mouseDownHandler,true);
}
if(!isIframe){
allElements.floatingplay.addEventListener("click",function(){
allElements.videoElement.paused?allElements.videoElement.play():allElements.videoElement.pause();
if(controlsT) clearTimeout(controlsT);
controlsT = setTimeout(function() {
allElements.floatingcontrols.style.display='none';
}, 3000);
});
allElements.floatingprogress.addEventListener("input",function(e){
var ele=e.target;
var value=ele.value;
allElements.videoElement.currentTime=allElements.videoElement.duration*value/100;
if(controlsT) clearTimeout(controlsT);
controlsT = setTimeout(function() {
allElements.floatingcontrols.style.display='none';
}, 3000);
});
}
for (let index in floatingPlayerData) {
allElements['floatingplayer_'+index]=document.getElementById('floatingplayer_'+index);
if(!floatingPlayerData[index].nolistener){
allElements['floatingplayer_'+index].addEventListener(floatingPlayerData[index].buttontype?'input':'click', floatingVidooAtrr,true);
}
}
}
function feMouseOver(e){
mouseInfo.scrollY=window.scrollY;
mouseInfo.dw=document.documentElement.clientWidth;
document.body.classList.add('fixedscroll');
document.body.style.top = `-${mouseInfo.scrollY}px`;
document.body.style.width = `${mouseInfo.dw}px`;
if(isIframe){
allElements.floatElement.contentWindow.document.addEventListener("mousewheel",feMouseWheel,true);
allElements.floatElement.contentWindow.document.addEventListener("mouseleave",feMouseLeave,true);
}else{
allElements.floatElement.addEventListener("mousewheel",feMouseWheel,true);
allElements.floatElement.addEventListener("mouseleave",feMouseLeave,true);
}
}
function feMouseWheel(e){
var self=e;
var ele=e.target;
var deltaY=self.deltaY;
mouseInfo.cx=self.clientX-ele.offsetLeft;
mouseInfo.cy=self.clientY-ele.offsetTop;
mouseInfo.ew=ele.offsetWidth;
mouseInfo.eh=ele.offsetHeight;
var tempScreenSize=screenSize;
var tempSizeChange=deltaY<0?-0.05:(deltaY>0?0.05:0);
screenSize+=screenSize>2?tempSizeChange*2:tempSizeChange;
screenSize=screenSize>maxrect?maxrect:(screenSize<0?0:screenSize);
screenSizeChange=screenSize-tempScreenSize;
screenPosition='mouse';
if(screenSizeChange!=0) setFloatingVidooRect();
showMsg((screenSize*100).toFixed(0)+'%');
}
function feMouseLeave(e){
document.body.classList.remove('fixedscroll');
document.body.style.top = `0px`;
window.scrollTo({top:mouseInfo.scrollY});
document.body.style.width = null;
if(isIframe){
allElements.floatElement.contentWindow.document.removeEventListener("mousewheel",feMouseWheel,true);
allElements.floatElement.contentWindow.document.removeEventListener("mouseleave",feMouseLeave,true);
}else{
allElements.floatElement.removeEventListener("mousewheel",feMouseWheel,true);
allElements.floatElement.removeEventListener("mouseleave",feMouseLeave,true);
}
}
function touchStartHandler(e){
mouseInfo.scrollY=window.scrollY;
mouseInfo.dw=document.documentElement.clientWidth;
document.body.classList.add('fixedscroll');
document.body.style.top = `-${mouseInfo.scrollY}px`;
document.body.style.width = `${mouseInfo.dw}px`;
cw=document.documentElement.clientWidth;
ch=document.documentElement.clientHeight;
var ele=e.target;
touchInfo.startTouchFingers=e.touches.length;
touchInfo.touchDownPt=e.touches[0];
if(ele.tagName=='VIDEO' && touchInfo.startTouchFingers==1){
onLongPress = setTimeout(function() {
touchInfo.originalPlaybackRate=ele.playbackRate;
ele.playbackRate=4.0;
showMsg('4倍速播放');
}, 500);
if (doubleTouchT == null) {
doubleTouchT = setTimeout(function () {
doubleTouchT = null;
//alert("single");
if(!isIframe){
allElements.floatingcontrols.style.display='block';
allElements.floatingcontrols.style.width=ele.style.width;
isRotate=rotate==90||rotate==270;
if(isRotate){
allElements.floatingcontrols.style.left=ele.offsetLeft-ele.offsetHeight/2+16+'px';
allElements.floatingcontrols.style.top=ele.offsetTop+ele.offsetHeight-ele.offsetHeight/2-16+'px';
}else{
allElements.floatingcontrols.style.left=ele.offsetLeft+'px';
allElements.floatingcontrols.style.top=ele.offsetTop+ele.offsetHeight-32+'px';
}
var ct=ele.currentTime;
var dt=ele.duration;
allElements.floatingtime.textContent=secondsToTimeStr(ct)+'/'+secondsToTimeStr(dt);
allElements.floatingprogress.value=(ct/dt*100).toFixed(0);
controlsT = setTimeout(function() {
allElements.floatingcontrols.style.display='none';
}, 3000);
}
}, 500)
}else{
clearTimeout(doubleTouchT);
doubleTouchT = null;
var cx=ele.offsetLeft+ele.offsetWidth/2;
var cy=ele.offsetTop+ele.offsetHeight/2;
var temp=0;
if(rotate==0){
temp=touchInfo.touchDownPt.clientX>cx?fastwinds:-fastwinds;
}else if(rotate==90){
temp=touchInfo.touchDownPt.clientY>cy?fastwinds:-fastwinds;
}else if(rotate==180){
temp=touchInfo.touchDownPt.clientX>cx?-fastwinds:fastwinds;
}else if(rotate==270){
temp=touchInfo.touchDownPt.clientY>cy?-fastwinds:fastwinds;
}
ele.currentTime+=temp;
showMsg('快进'+temp+'s');
}
}
if(ele.id=='floatingbtn'){
touchInfo.x=cw-ele.offsetLeft-ele.offsetWidth+touchInfo.touchDownPt.clientX;
touchInfo.y=ch-ele.offsetTop-ele.offsetHeight+touchInfo.touchDownPt.clientY;
}else{
touchInfo.x=ele.offsetLeft-touchInfo.touchDownPt.clientX;
touchInfo.y=ele.offsetTop-touchInfo.touchDownPt.clientY;
}
ele.addEventListener("touchend",touchEndHandler,true);
ele.addEventListener("touchmove",touchMoveHandler,true);
}
function touchMoveHandler(e){
var ele=e.target;
if(onLongPress!=null){
clearTimeout(onLongPress);
onLongPress=null;
ele.playbackRate=touchInfo.originalPlaybackRate;
}
if (doubleTouchT != null){
clearTimeout(doubleTouchT);
doubleTouchT = null;
}
if(touchInfo.touchDownPt==null) return;
if(touchInfo.startTouchFingers==1){
// 单个手指触摸
var touchPt=e.touches[0];
if(ele.id=='floatingbtn'){
var x=touchInfo.x-touchPt.clientX;
var y=touchInfo.y-touchPt.clientY;
ele.style.right=x+'px';
ele.style.bottom=y+'px';
allElements.floatingplayer_setting.style.right=x+'px';
allElements.floatingplayer_setting.style.bottom=y+40+'px';
}else{
ele.style.left=touchInfo.x+touchPt.clientX+'px';
ele.style.top=touchInfo.y+touchPt.clientY+'px';
}
if(ele.tagName=='VIDEO') screenPosition='default';
}
}
function touchEndHandler(e){
document.body.classList.remove('fixedscroll');
document.body.style.top = `0px`;
window.scrollTo({top:mouseInfo.scrollY});
document.body.style.width = null;
var ele=e.target;
if(onLongPress!=null){
clearTimeout(onLongPress);
onLongPress=null;
ele.playbackRate=touchInfo.originalPlaybackRate;
}
touchInfo.startTouchFingers=0;
touchInfo.touchDownPt=null;
touchInfo.x=null;
touchInfo.y=null;
ele.removeEventListener("touchmove",touchMoveHandler,true);
ele.removeEventListener("touchend",touchEndHandler,true);
}
function mouseDownHandler(e){
var self=e;
cw=document.documentElement.clientWidth;
ch=document.documentElement.clientHeight;
var ele=e.target;
if(ele.tagName=='VIDEO'){
if (doubleTouchT == null) {
doubleTouchT = setTimeout(function () {
doubleTouchT = null;
//alert("single");
if(!isIframe){
allElements.floatingcontrols.style.display='block';
allElements.floatingcontrols.style.width=ele.style.width;
isRotate=rotate==90||rotate==270;
if(isRotate){
allElements.floatingcontrols.style.left=ele.offsetLeft-ele.offsetHeight/2+16+'px';
allElements.floatingcontrols.style.top=ele.offsetTop+ele.offsetHeight-ele.offsetHeight/2-16+'px';
}else{
allElements.floatingcontrols.style.left=ele.offsetLeft+'px';
allElements.floatingcontrols.style.top=ele.offsetTop+ele.offsetHeight-32+'px';
}
var ct=ele.currentTime;
var dt=ele.duration;
allElements.floatingtime.textContent=secondsToTimeStr(ct)+'/'+secondsToTimeStr(dt);
allElements.floatingprogress.value=(ct/dt*100).toFixed(0);
controlsT = setTimeout(function() {
allElements.floatingcontrols.style.display='none';
}, 3000);
}
}, 500)
}else{
clearTimeout(doubleTouchT);
doubleTouchT = null;
var cx=ele.offsetLeft+ele.offsetWidth/2;
var cy=ele.offsetTop+ele.offsetHeight/2;
var temp=0;
if(rotate==0){
temp=self.clientX>cx?fastwinds:-fastwinds;
}else if(rotate==90){
temp=self.clientY>cy?fastwinds:-fastwinds;
}else if(rotate==180){
temp=self.clientX>cx?-fastwinds:fastwinds;
}else if(rotate==270){
temp=self.clientY>cy?-fastwinds:fastwinds;
}
ele.currentTime+=temp;
showMsg('快进'+temp+'s');
}
}
if(ele.id=='floatingbtn'){
mouseInfo.x=cw-ele.offsetLeft-ele.offsetWidth+self.clientX;
mouseInfo.y=ch-ele.offsetTop-ele.offsetHeight+self.clientY;
}else{
mouseInfo.x=ele.offsetLeft-self.clientX;
mouseInfo.y=ele.offsetTop-self.clientY;
}
//if(isIframe){}else{}
ele.addEventListener("mouseleave",mouseUpHandler,true);
ele.addEventListener("mouseup",mouseUpHandler,true);
ele.addEventListener("mousemove",mouseMoveHandler,true);
}
function mouseMoveHandler(e){
var self=e;
var ele=e.target;
if (doubleTouchT != null){
clearTimeout(doubleTouchT);
doubleTouchT = null;
}
if(mouseInfo.x==null) return;
if(ele.tagName=='VIDEO') screenPosition='default';
if(ele.id=='floatingbtn'){
var x=mouseInfo.x-self.clientX;
var y=mouseInfo.y-self.clientY;
ele.style.right=x+'px';
ele.style.bottom=y+'px';
allElements.floatingplayer_setting.style.right=x+'px';
allElements.floatingplayer_setting.style.bottom=y+40+'px';
}else{
allElements.floatElement.style.left=mouseInfo.x+self.clientX+'px';
allElements.floatElement.style.top=mouseInfo.y+self.clientY+'px';
}
}
function mouseUpHandler(e){
var ele=e.target;
mouseInfo.x=null;
mouseInfo.y=null;
ele.removeEventListener("mousemove",mouseMoveHandler,true);
ele.removeEventListener("mouseleave",mouseMoveHandler,true);
ele.removeEventListener("mouseup",mouseUpHandler,true);
}
// Your code here...
})();