pure_player
Version:
HTML5 Javascript player
1 lines • 7.91 kB
JavaScript
;Element.prototype.on=function(e,t,n){return this.addEventListener(e,t,n),this},HTMLElement.prototype.purePlayer=function(e){var t={format:"video/mp4",video:{"":{src:this.src,subtitles:"link_to_subtitles"}}};e=e||t;for(var n in t)e[n]=void 0!==e[n]?e[n]:t[n];var o,l=this,i=document.createElement("div"),c=document.createElement("div"),a=document.createElement("source"),s=document.createElement("video"),u=document.createElement("div"),r=document.createElement("div"),d=document.createElement("div"),m=document.createElement("span"),p=document.createElement("div"),h=document.createElement("div"),f=document.createElement("div"),v=document.createElement("div"),y=document.createElement("span"),b=document.createElement("div"),T=document.createElement("ul"),N=document.createElement("li"),E=document.createElement("li"),k=document.createElement("ul"),g=document.createElement("li"),C=document.createElement("ul"),w=document.createElement("li"),F=document.createElement("li"),x=document.createElement("ul"),S=document.createElement("div"),P=document.createElement("div"),q=document.createElement("div"),L=document.createElement("div"),M=document.createElement("div"),V=0,z=!0,D=!1,X={toggleFullScreen:function(){document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement?u.webkitExitFullscreen?u.webkitExitFullscreen():document.cancelFullScreen?document.cancelFullScreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitCancelFullScreen&&document.webkitCancelFullScreen():u.webkitEnterFullscreen?u.webkitEnterFullscreen():u.requestFullscreen?u.requestFullscreen():u.mozRequestFullScreen?u.mozRequestFullScreen():u.webkitRequestFullscreen&&u.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)},convertTime:function(e){var t=Math.floor(e/60/60).toFixed(),n=Math.floor((e-60*t*60)/60).toFixed(),o=(e-60*t*60-60*n).toFixed();return n<10&&(n="0"+n),o<10&&(o="0"+o),t>0?t+":"+n+":"+o:n+":"+o},setVolume:function(e){(e=e||0)>1&&(e=1),e<0&&(e=0),P.className=e>0?"volume-icon":"volume-icon volume-off",s.volume=e,L.style.width=100*s.volume+"%",document.cookie="volume="+e},volumeInc:function(e){e=e||.2,X.setVolume(s.volume+e)},volumeDec:function(e){e=e||.2,X.setVolume(s.volume-e)},toggleMute:function(){s.volume>0?X.setVolume(0):X.setVolume(1)},updatePosition:function(){h.style.width=s.currentTime/s.duration*100+"%",y.innerHTML=X.convertTime(s.currentTime||0)+" / "+X.convertTime(s.duration||0),s.duration-s.currentTime==0&&"function"==typeof l.onend&&l.onend()},rewind:function(e){D=!0,s.paused||s.pause(),e?s.currentTime-=10:s.currentTime+=10,this.updatePosition(),this.showPanel(),z?D=!1:setTimeout(function(){X.rewind(e)},100)},hidePanel:function(){r.className="controls-bar zero-opacity",document.body.style.cursor="none"},showPanel:function(){r.className="controls-bar",document.body.style.cursor="auto",clearTimeout(o),o=setTimeout(X.hidePanel,2e3)}};i.className="facebook_blockG",c.className="preloader",c.appendChild(i),c.appendChild(i.cloneNode(!0)),c.appendChild(i.cloneNode(!0)),a.setAttribute("type",e.format),s.appendChild(a),s.oncontextmenu=function(){return!1},s.on("click",function(){this.paused?this.play():this.pause()}).on("progress",function(){this.buffered.length>0&&(f.style.left=this.buffered.start(0)/this.duration*100+"%",f.style.width=this.buffered.end(this.buffered.length-1)/this.duration*100-parseFloat(f.style.left)+"%")}).on("loadstart",function(){c.style.display="block"}).on("loadeddata",function(){L.style.width=100*this.volume+"%",c.style.display="none",y.innerHTML=X.convertTime(this.currentTime)+" / "+X.convertTime(this.duration)}).on("pause",function(){v.className="play-button","function"==typeof l.onpause&&l.onpause(s.currentTime)}).on("play",function(){v.className="play-button pause",X.setVolume(document.cookie.replace(/(?:(?:^|.*;\s*)volume\s*\=\s*([^;]*).*$)|^.*$/,"$1")),"function"==typeof l.onplay&&l.onplay(s.currentTime)}).on("timeupdate",function(){this.duration&&X.updatePosition()}).on("dblclick",X.toggleFullScreen).on("touchstart",function(e){1===e.targetTouches.length&&(V=e.targetTouches[0].pageX)}).on("touchmove",function(e){1===e.targetTouches.length&&(z=!1,e.targetTouches[0].pageX>V+20&&!D?X.rewind(!1):e.targetTouches[0].pageX<V-20&&!D&&X.rewind(!0))}).on("touchend",function(){z=!0}),v.className="play-button",v.on("click",function(){s.paused?s.play():s.pause()}),m.className="hovered",y.className="time",h.className="progress-position",f.className="loader",r.className="controls-bar",N.className="selected-speed",N.innerText="x1.0",N.on("click",function(e){e.stopPropagation(),"block"===E.style.display?E.style.display="none":E.style.display="block"}),w.className="selected-quality",w.on("click",function(e){e.stopPropagation(),"block"===F.style.display?F.style.display="none":F.style.display="block"});for(var R=.5;R<=2;R+=.5){var $=g.cloneNode(!0);$.dataset.v=R,$.innerText="x"+(1===R.toString().length?R+".0":R),$.on("click",function(){var e=k.childNodes;[].forEach.call(e,function(e){e.className=""}),s.playbackRate=this.dataset.v,this.className="active",N.innerHTML=this.innerText,E.style.display="none"}),k.appendChild($)}k.className="speed",k.querySelector('[data-v="1"]').className="active",E.className="speed-box-hidden",E.appendChild(k),P.className="volume-icon",P.on("click",function(){X.toggleMute()}),L.className="volume",q.className="volume-bar",q.appendChild(L),q.on("click",function(e){var t=e.offsetX/this.offsetWidth;X.setVolume(t)}),S.className="volume-box",S.appendChild(P),S.appendChild(q),x.className="quality";for(var W in e.video){var _=document.createElement("li");_.innerText=W,_.on("click",function(){var t=x.childNodes,n=s.paused,o=s.currentTime;[].forEach.call(t,function(e){e.className=""}),this.className="active",w.innerText=this.innerText,a.setAttribute("src",e.video[this.innerText].src),s.src=e.video[this.innerText].src,s.currentTime=o,n||s.play(),F.style.display="none"}),x.appendChild(_)}return F.className="quality-box-hidden",F.appendChild(x),C.className="quality-box",C.appendChild(w),C.appendChild(F),T.className="speed-box",T.appendChild(N),T.appendChild(E),M.className="full-size-icon",M.on("click",X.toggleFullScreen),b.className="control-buttons",b.appendChild(T),b.appendChild(C),b.appendChild(S),b.appendChild(M),p.className="progress",p.appendChild(h),p.appendChild(f),d.className="progress-wrap",d.appendChild(m),d.appendChild(p),d.on("click",function(e){s.currentTime=s.duration*e.layerX/(e.target.offsetWidth-e.target.offsetLeft)}).on("mousemove",function(e){m.innerText=X.convertTime((s.duration||0)*e.layerX/(e.target.offsetWidth-e.target.offsetLeft)),m.style.left=e.layerX+e.target.offsetLeft-m.offsetWidth/2+"px"}),r.appendChild(d),r.appendChild(v),r.appendChild(y),r.appendChild(b),u.className="pure-player",u.appendChild(c),u.appendChild(s),u.appendChild(r),u.on("mousemove",X.showPanel).on("click",function(){F.style.display="none",E.style.display="none"}).on("keydown",function(e){switch((e=e||window.event).preventDefault(),e.which||e.keyCode){case 37:s.currentTime-5>0?s.currentTime-=5:s.currentTime=0;break;case 39:s.currentTime+5<s.duration?s.currentTime+=5:s.currentTime=s.duration;break;case 38:X.volumeInc();break;case 40:X.volumeDec();break;case 32:v.click();break;case 77:X.toggleMute()}X.showPanel()}).on("mousewheel",function(e){e.preventDefault(),e.wheelDelta<0?X.volumeDec():X.volumeInc()}),this.init=function(){this.style.display="none",this.parentNode.insertBefore(u,this.parentNode.nextSibling),x.firstChild.click(),X.setVolume(document.cookie.replace(/(?:(?:^|.*;\s*)volume\s*\=\s*([^;]*).*$)|^.*$/,"$1")||1),e.autoplay&&s.play()},this.destroy=function(){s.pause(),this.parentNode.removeChild(u),this.style.display=""},this.play=function(){s.play()},this.pause=function(){s.pause()},this.stop=function(){s.pause(),s.currentTime=0},this.setPosition=function(e){s.currentTime=e},this.init(),this};