@pardnchiu/flexplyr
Version:
FlexPlyr is a lightweight JavaScript library that provides embedded HTML5 video players and YouTube players, featuring highly customizable control panels and visual effects.
2 lines (1 loc) • 16.8 kB
JavaScript
!function(){const t=document,e=String,i=Array,s=Map,l=(JSON,Math),o=/\.([\w_-]+)?/gi,n=/\#([\w_-]+)?/i,a=/^\w+(?=[\#\.]*)/i,u="id",h="option",r="volume",m="match",d="trim",p="body",y="test",c="ceil",P="youtube",b="vimeo",v="audio",g="video",V="length",T="getElementById",f="createTextNode",w="classList",x="dataset",k="add",F="string",M="number",R="floor",I="isArray",_="value",A="innerText",E="innerHTML",C="textContent",Y="contentEditable",S="indexOf",B="appendChild",D="color",$="backgroundColor",L="width",z="height",j="display",q="float",O="head",N="FPlyr",Z="link",G="script",H="style",J="preconnect",K="preload",Q="anonymous",U="stylesheet",W="rel",X="href",tt="async",et="as",it="src",st="crossOrigin",lt="onmousemove",ot="onmouseleave",nt="https://cdn.jsdelivr.net",at=nt+"/npm/@pardnchiu/flexplyr@latest/dist/FlexPlyr.css",ut="https://fonts.googleapis.com",ht=ut+"/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,1,0",rt="https://www.youtube.com",mt=rt+"/iframe_api",dt="https://player.vimeo.com",pt=dt+"/api/player.js",yt="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",ct=/iphone|ipad|ipod|android/i[y](navigator.userAgent),Pt=/iphone|ipad|ipod/i[y](navigator.userAgent),bt={autoplay:0,controls:0,showinfo:0,modestbranding:1,start:0,loop:0,fs:0,[W]:0,cc_load_policty:1,iv_load_policy:3,autohide:1};let vt;t[O][B](Tt(Z,{[W]:J,[X]:nt,[st]:""})),t[O][B](Tt(Z,{[W]:K,[X]:at,[et]:H,[st]:Q})),t[O][B](Tt(Z,{[X]:at,[W]:U})),t[O][B](Tt(Z,{[W]:J,[X]:"https://fonts.gstatic.com",[st]:""})),t[O][B](Tt(Z,{[W]:J,[X]:ut,[st]:""})),t[O][B](Tt(Z,{[W]:K,[X]:ht,[et]:H,[st]:Q})),t[O][B](Tt(Z,{[X]:ht,[W]:U})),t[O][B](Tt(Z,{[W]:J,[X]:rt,[st]:""})),t[O][B](Tt(Z,{[W]:K,[X]:mt,[et]:G,[st]:Q})),t[O][B](Tt(G,{[it]:mt,[tt]:""})),t[O][B](Tt(Z,{[W]:J,[X]:dt,[st]:""})),t[O][B](Tt(Z,{[W]:K,[X]:pt,[et]:G,[st]:Q})),t[O][B](Tt(G,{[it]:pt,[tt]:""}));let gt=new s;function Vt(t=32){const e=yt[V];let s="";do{s=i.from({length:t},(t=>yt.charAt(l[R](l.random()*e)))).join("")}while(gt.has(s));return gt.set(s,1),s}function Tt(e="",i,s){const l=((e[m](a)||[])[0]||"")[d](),u=((e[m](n)||[])[1]||"")[d](),h=(o[y](e)?e[m](o):[]).map((t=>t.replace(/^\./,"")));if(l[V]<1)return;let r,p,c,P=!1;"temp"===e?(P=!0,r=t.createDocumentFragment()):r=t.createElement(l),u[V]&&(r.id=u);for(let t of h)r[w][k](t);if(null==i&&null!=s&&([i,s]=[s,null]),null!=i&&null!=s)[p,c]=[i,s];else if(null==s)typeof i===F||typeof i===M||Array[I](i)?c=i:p=i;else if(null==i)return r;if("object"==typeof p&&null!=p)for(const t in p){if(!p.hasOwnProperty(t))continue;const e=p[t];-1!=[_,A,E,C,Y][S](t)?r[t]=e:-1!=[D,$,L,z,j,q][S](t)?r[H][t]=e:null!=e&&r.setAttribute(t,e)}if(null!=c){const e=typeof c===F,i=typeof c===M,s=Array[I](c);if(e||i){const e=c;"img"===l||"source"===l||"audio"===l?r.src=e:P?r[B](t[f](c)):r[E]=e}else if(s)for(let e of c){const i=e instanceof Element;typeof e===F||typeof e===M?P?r[B](t[f](e)):r[E]+=e:i&&r[B](e)}}return r}function ft(t,e){const i=t,s=l[R](i>3599?i/3600:0),o=l[R](i>3599?i%3600/60:i>59?i/60:0),n=i>3599?i%3600%60:i>59?i%60:i;return e>=3600?`${s<10?`0${s}`:s}:${o<10?`0${o}`:o}:${n<10?`0${n}`:n}`:e>=60?`${o<10?`0${o}`:o}:${n<10?`0${n}`:n}`:`0:${n<10?`0${n}`:n}`}window.PDPlayer=window.FPlyr=class{video;audio;youtube;vimeo;when;option={showThumb:!0,panelType:"",panelItem:["play","progress","time","volumeMini","rate","full"],volume:100,mute:!1};stateFull=!1;#t;#e;#i;#s;#l;#o=!1;#n=100;#a=1;#u=!1;#h=!1;#r=!0;#m=!0;#d=0;#p=0;#y;#c;constructor(t={}){if("object"!=typeof t)return void console.log("config: 不存在。");const s=t[h]||{},l=parseInt(s[r]||t[r]),o=Boolean(s.mute||t.mute),n=Boolean(s.showThumb);if(this.option.panelType=e(s.panelType||t.type||this.option.panelType),this.option.panelItem=i.from(s.panelItem||t.panel||this.option.panelItem),null!=s.showThumb&&(this[h].showThumb=n),null==s[r]||null==t[r]||isNaN(l)||(this[h][r]=l),null!=s.mute&&null!=t.mute&&(this.option.mute=o),this.when=t.when||t.event||{},typeof t[u]===F&&document[T](t[u])?(this[p]=document[T](t[u]),this[p][w][k](N),this[p][x].type=this.option.panelType,this[p][x].thumb=this.option.showThumb?1:0):this[p]=Tt("div."+N,{"data-thumb":this.option.showThumb?1:0,"data-type":this.option.panelType}),null==this[p])return void console.log("body: 不存在");this[p][lt]=this[p][ot]=t=>this.#P(1);const a=e(t[g]||"")[d](),m=e(t[P]||"")[d](),y=e(t[b]||"")[d](),c=e(t[v]||"")[d]();a[V]?(this[g]=a,this.#b()):m[V]?(this[P]=m,this.#v()):y[V]?(this[b]=y,this.#g()):c[V]&&(this[v]=c,this.#V())}#T(t){return ct&&t&&null==this[b]?this.#c:this.#y}isPaused(t){const e=this.#T(t);return this.#t||this.#e?e.paused:this.#i?1!==this.ytState:this.#s?this.#r:void 0}play(t){const e=this.#T(t);!t||this.#l||null==this[P]?(this.#t||this.#e?e.play():this.#i?e.playVideo():this.#s&&t?e.requestFullscreen().then((t=>{e.play()})):this.#s&&e.play(),this.panel.setPlayIcon(!1)):alert("not Ready")}pause(t){const e=this.#T(t);this.#t||this.#e?e.pause():this.#i?e.pauseVideo():this.#s&&e.pause(),this.panel.setPlayIcon(!0)}#f(t){const e=this.isPaused(t);e?this.play():this.pause(),this.panel.setPlayIcon(!e)}#w(t,e){const i=this.#T(e);this.#t||this.#e?i.currentTime=t:this.#i?i.seekTo(t):this.#s&&i.setCurrentTime(t),this.pause()}#x(t){const e=this.#T(t);return this.#t||this.#e?100*e[r]:this.#i?e.getVolume():this.#s?100*this.#n:void 0}#k(t,e){const i=this.#T(e);this[h][r]=parseInt(t),this.#t||this.#e?i[r]=t/100:this.#i?i.setVolume(t):this.#s&&(this.#n=t/100,i.setVolume(t/100)),this.panel.setVolume(t),this.#F(0===parseInt(t))}#F(t,e){const i=null==t?this.isMuted():!t,s=this.#T(e);if(i&&0===this[h][r])return this[h][r]=50,this.#k(50),void this.panel.setMuteIcon(!1);this.#t||this.#e?s.muted=!i:this.#i?i?s.unMute():s.mute():this.#s&&(this.#o=!i,s.setMuted(!i).catch((t=>alert(t)))),this.panel.setMuteIcon(!i)}isMuted(t){const e=this.#T(t);return this.#t||this.#e?e.muted:this.#i?e.isMuted():this.#s?this.#o:void 0}#M(t,e){const i=this.#T(e);this.#t||this.#e?i.playbackRate=t:this.#i?i.setPlaybackRate(t):this.#s&&i.setPlaybackRate(t).catch((t=>alert(t)))}#R(t){const e=this.#T(t);return this.#t||this.#e?e.playbackRate:this.#i?e.getPlaybackRate():this.#s?this.#a:void 0}#I(t){const e=this.#T(t);this.#t||this.#e?this.panel.duration(e.duration):this.#i?this.panel.duration(e.getDuration()):this.#s&&this.#y.getDuration().then((t=>{this.#d=t,this.panel.duration(this.#d)}))}#_(t){const e=this.#T(t);return this.#t||this.#e?l[c](e.duration):null!=this[P]?l[c](e.getDuration()):this.#s?l[c](this.#d):void 0}#A(t){const e=this.#T(t);return this.#t||this.#e?l[c](e.currentTime):null!=this[P]?l[c](e.getCurrentTime()):this.#s?l[c](this.#p):void 0}#E(t){const e=this.#_(t);this.videoTimer=setInterval((()=>{if(this.#s)this.#y.getCurrentTime().then((t=>{this.#p=t,this.panel.setCurrent(l[c](t)),l[c](t)<e||clearInterval(this.videoTimer)}));else{const t=this.#A();if(this.panel.setCurrent(t),l[c](t)<e)return;clearInterval(this.videoTimer)}}),100)}#C(){null!=this.when.ready&&this.when.ready(),null!=this[b]&&(this.#u=this.#r=this.#m=!0,this.#h=!1),this.#t=Boolean(this.video&&this.#y),this.#s=Boolean(this[b]&&this.#y),this.#i=Boolean(this[P]&&this.#y),this.#e=Boolean(this[v]&&this.#y),this.#I(),this.panel.setCurrent(0),this.sec=0,null!=this.option.mute?this.#F(this.option.mute):this.#s&&this.#y.getMuted().then((t=>this.#o=t)),null!=this[h][r]?this.#k(this[h][r]):this.#s&&this.#y.getVolume().then((t=>this.#n=100*t))}#Y(){this.#h=!1,this.#r=this.#m=!1,null!=this.when.playing&&this.when.playing(),this.#i&&(this.start&&(this.start=!1),setTimeout((()=>{this.mask.classList[k]("hide")}),500)),this.#E(),this.panel.hide(1)}#S(){this.#r=!0,this.#h=!1,null!=this.when.pause&&this.when.pause(),clearInterval(this.videoTimer),this.#i&&this.mask.classList.remove("hide"),this.panel.show()}#B(){this.#m=this.#r=!0,this.#h=!1,"function"==typeof this.when.end&&this.when.end(),clearInterval(this.videoTimer),this.panel.reset(),this.#t?this.#y.currentTime=0:this.#i?(this.#w(0),setTimeout((()=>{this.start=!0}),50)):this.#s&&this.#w(0)}#D(){this.pause(),this.#w(this.#A(),!0),this.#k(this.#x(),!0),this.#M(this.#R(),!0),this.play(!0)}#$(){const t=this.#A(!0);this.panel.setCurrent(t),this.#w(t),this.#k(this.#x(!0)),this.#M(this.#R(!0))}#L(){if(this.panel=new wt(this),null!=this.panel.buttonPlay&&(this.panel.buttonPlay.onclick=t=>this.#f()),null!=this.panel.inputProgress){let t,e;this.panel.inputProgress.oninput=i=>{clearTimeout(t),clearTimeout(e),this.pause();const s=i.target.value;this.panel.setCurrent(s),t=setTimeout((t=>{this.#w(s),e=setTimeout((t=>{this.play()}),500)}),500)}}if(null!=this.panel.buttonVolume){let t;this.panel.buttonVolume.onclick=e=>{clearTimeout(t),t=setTimeout((t=>{this.panel.buttonVolume.parentElement.parentElement.open=!1}),1e3)},this.panel.inputVolumeMini.onmouseover=e=>{clearTimeout(t)},this.panel.inputVolumeMini[ot]=e=>{clearTimeout(t),t=setTimeout((t=>{this.panel.buttonVolume.parentElement.parentElement.open=!1}),1e3)},this.panel.inputVolumeMini.oninput=t=>{const e=t.target.value;this.#k(e)}}null!=this.panel.buttonMute&&(this.panel.buttonMute.onclick=t=>this.#F()),null!=this.panel.inputVolume&&(this.panel.inputVolume.oninput=t=>{const e=t.target.value;this.#k(e)}),null!=this.panel.buttonRate&&(this.panel.buttonRate.onclick=t=>{const e=t.target;"1x_mobiledata"===e.innerText?(e.innerText="speed_1_25",this.#M(1.25)):"speed_1_25"===e.innerText?(e.innerText="speed_1_5x",this.#M(1.5)):"speed_1_5x"===e.innerText?(e.innerText="speed_2x",this.#M(2)):"speed_2x"===e.innerText?(e.innerText="speed_0_5x",this.#M(.5)):(e.innerText="1x_mobiledata",this.#M(1))})}#P(t){null!=this.panel&&(this.panel.show(),null!=t&&this.panel.hide(t))}#V(){null!=this[v]&&(this.#y=Tt("audio",{preload:"auto",controls:""},[Tt("source",{src:this[v]})]),this.#L(),this[p][B](this.#y),this[p][B](this.panel[p]),this.#y.onloadedmetadata=()=>this.#C(),this.#y.onplaying=()=>this.#Y(),this.#y.onpause=()=>this.#S(),this.#y.onended=()=>this.#B())}#b(){null!=this[g]&&(this.#y=Tt("video",{preload:"auto",playsinline:""},[Tt("source",this[g])]),ct||(this.#y.onclick=t=>this.#f()),this[p][B](this.#y),this.#L(),this[p][B](this.panel[p]),this.#y.onloadedmetadata=t=>this.#C(),this.#y.onplaying=t=>this.#Y(),this.#y.onpause=t=>this.#S(),this.#y.onended=t=>this.#B(),ct&&(this.#c=Tt("video.PDFullPlayer",{preload:"metadata",playsinline:null},[Tt("source",this[g])]),this.#c.onplaying=t=>this.#D(),this.#c.onpause=t=>this.#$(),this.#c.onended=t=>this.#B(),Pt?this.#c.addEventListener("webkitpresentationmodechanged",(t=>{this.stateFull="fullscreen"===this.#c.webkitPresentationMode})):this.#c.addEventListener("fullscreenchange",(t=>{this.stateFull=document.fullscreenElement===this.#c})),this[p][B](this.#c)))}#v(){if(null==this[P])return;const t=Vt(24),e=Vt(24);this.start=!0;const i=Tt("div#"+t),s=Tt("div[_body]",[i]);ct||(s.onclick=t=>this.#f()),this[p][B](s),this.mask=Tt("div.mask",{sec:this.live?"live":0}),ct||(this.mask.onclick=t=>this.#f()),this[p][B](this.mask),this.#L(),this[p][B](this.panel[p]),vt=async()=>{if(await this.#z(),this.#y=new YT.Player(t,{videoId:this[P],width:"100%",height:"100%",playerVars:{...bt,playsinline:1},events:{onReady:t=>this.#C(),onStateChange:t=>{this.ytState=t.data,0===t.data?this.#B():1===t.data?this.#Y():2===t.data&&this.#S()}}}),!ct)return;const i=Tt("div#"+e+".PDFullPlayer");this[p][B](i),this.#c=new YT.Player(e,{videoId:this[P],width:"100%",height:"100%",playerVars:{...bt,playsinline:0},events:{onReady:t=>{console.log("is Ready"),this.#l=!0},onStateChange:t=>{0===t.data?this.#B():2===t.data?this.#$():3===t.data&&this.#D()}}})},vt()}#g(){if(null==this[b])return;const t=Tt("iframe",{src:dt+"/video/"+this[b]+"?background=1&loop=0&autoplay=0&controls=0",frameborder:"0",allowfullscreen:"",allow:"autoplay;"}),e=Tt("div[_body]",[t]);ct||(e.onclick=t=>this.#f()),this[p][B](e),this.mask=Tt("div.mask.hide"),ct||(this.mask.onclick=t=>this.#f()),this[p][B](this.mask),this.#L(),this[p][B](this.panel[p]),this.#y=new Vimeo.Player(t),this.#y.ready().then((t=>this.#C())),this.#y.on("play",(t=>this.#Y())),this.#y.on("pause",(t=>this.#S())),this.#y.on("ended",(t=>this.#B())),ct&&this.#y.on("fullscreenchange",(t=>{this.panel.setPlayIcon(!t.fullscreen)}))}async#z(t){const e=t=>{if(this[P])return this[P],t(t);if(this[P]=prompt("Youtube 影片ID / 網址"),/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/.test(this[P])){let e=videoId.match(/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/);this[P]=e&&11==e[7][V]?e[7]:null,this[P]?(history.pushState(null,null,location.href.split("?")[0]+`?videoId=${this[P]}`),t()):fitVideoId(t)}else t(t)};if(!t)return new Promise(((t,i)=>e(t)));e(t)}destroy(){this[p][lt]=this[p][ot]=null,clearInterval(this.videoTimer),this.#s?this.#y.destroy():this.#i?(this.#y.destroy(),this.#c&&this.#c.destroy()):(this.#t||this.#e)&&(this.#y.pause(),this.#y.src=""),this[p].remove(),"function"==typeof this.when.destroyed&&this.when.destroyed()}};class wt{body;#j;#T;#I;buttonPlay;buttonVolume;buttonMute;buttonRate;buttonFull;inputProgress;inputVolume;inputVolumeMini;#q;#O;#N=8;constructor(t){this.#T=t,this.body=Tt("div.panel"),this.body.onmouseover=t=>this.show();for(let e of t.option.panelItem)this.#Z(e),this.#G(t,e),this.#H(t,e),this.#J(t,e),this.#K(e,t.option.volume),this.#Q(e,t.option.volume),this.#U(t,e,1),this.#W(t,e);"minimal"===t.option.panelType&&(this.body.style.width=this.#N+"px")}#Z(t){"play"===t&&(this.#N+=24,this.buttonPlay=Tt("span.material-symbols-outlined","play_arrow"),this.body[B](this.buttonPlay))}#G(t,e){"progress"===e&&(this.inputProgress=Tt("input.progress",{type:"range",name:"progress",min:0,value:0}),this.body[B](Tt("section.progress",[Tt("progress",{min:0,max:100}),this.inputProgress])))}#H(t,e){"timeMini"===e&&"minimal"!==t.option.panelType&&(this.#q=Tt("p.time","--:--"),this.body[B](this.#q))}#J(t,e){"time"===e&&"minimal"!==t.option.panelType&&(this.#O=Tt("p.time","--:--/--:--"),this.body[B](this.#O))}#K(t,e){"volume"===t&&(this.#N+=104,this.buttonMute=Tt("span.material-symbols-outlined",this.#X),this.inputVolume=Tt("input.volume",{type:"range",name:"volume",min:0,max:100,value:e}),this.body[B](Tt("section.volume",[this.buttonMute,Tt("section",[Tt("progress",{min:0,max:100,value:e}),this.inputVolume])])))}#Q(t,e){"volumeMini"===t&&(this.#N+=32,this.buttonVolume=Tt("span.material-symbols-outlined",this.#X),this.inputVolumeMini=Tt("input",{type:"range",name:"volume",min:0,max:100,value:e}),this.body[B](Tt("details.volume",[Tt("summary",[this.buttonVolume]),Tt("section",[Tt("progress",{min:0,max:100,value:e}),this.inputVolumeMini])])))}#U(t,e,i){"rate"===e&&(this.#N+=32,this.buttonRate=Tt("span.material-symbols-outlined","1x_mobiledata"),this.body[B](this.buttonRate))}#W(t,e){"full"===e&&null==this.#T.audio&&(this.#N+=32,this.buttonFull=Tt("span.material-symbols-outlined","fullscreen"),this.buttonFull.onclick=e=>{const i=document.fullScreen||document.mozFullScreen||document.webkitIsFullScreen||!1,s=t.body.requestFullscreen||t.body.msRequestFullscreen||t.body.mozRequestFullScreen||t.body.webkitRequestFullscreen,l=document.exitFullscreen||document.msExitFullscree||document.mozCancelFullScreen||document.webkitExitFullscreen;t.stateFull=!i,i?ct?t.mobilePause():l&&l.call(document):ct?(t.pause(),t.play(!0)):s&&s.call(t.body)},this.body[B](this.buttonFull))}get#X(){return this.#T.isMuted()?"no_sound":"volume_up"}setPlayIcon(t){null!=this.buttonPlay&&(this.buttonPlay.innerText=t?"play_arrow":"pause")}setMuteIcon(t){null!=this.buttonMute&&(this.buttonMute[A]=t?"no_sound":"volume_up"),null!=this.inputVolume&&(this.inputVolume.value=t?0:this.#T.option.volume,this.inputVolume.previousElementSibling.value=t?0:this.#T.option.volume)}reset(){null!=this.buttonPlay&&(this.buttonPlay.innerText="play_arrow"),this.show(),this.setCurrent(0)}setVolume(t){null!=this.inputVolume&&(this.inputVolume.value=t,this.inputVolume.previousElementSibling.value=t),null!=this.inputVolumeMini&&(this.inputVolumeMini.value=t,this.inputVolumeMini.previousElementSibling.value=t)}duration(t){const e=Math.ceil(t);this.#I=e,null!=this.inputProgress&&(this.inputProgress.max=e,this.inputProgress.previousElementSibling.max=e),null!=this.#O&&(this.#O.innerText=ft(0,e)+"/"+ft(this.#I,this.#I))}setCurrent(t){null!=this.inputProgress&&(this.inputProgress.value=t,this.inputProgress.previousElementSibling.value=t),null==t||null==this.#q&&null==this.#O||(null!=this.#q&&(this.#q.innerText=ft(t,this.#I)),null!=this.#O&&(this.#O.innerText=ft(t,this.#I)+"/"+ft(this.#I,this.#I)))}show(){clearTimeout(this.#j),this.body.classList.remove("hide")}hide(t){clearTimeout(this.#j),this.#j=setTimeout((t=>{this.#T.isPaused()||this.body.classList.add("hide")}),1e3*t)}}}("undefined"==typeof window?window={}:window);export const player = window.FPlyr; export const FPlyr = window.FPlyr;