From 65f462720d12e189061519ab5b38c73cd4104b52 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 29 Jan 2018 14:41:36 +0200 Subject: [PATCH] Fixed key events for Chrome --- dist/css/pure_player.css | 2 +- dist/js/pure_player.js | 7 ++++--- dist/js/pure_player.min.js | 2 +- package.json | 2 +- src/css/pure_player.css | 5 ++++- src/js/pure_player.js | 9 +++++---- 6 files changed, 16 insertions(+), 11 deletions(-) diff --git a/dist/css/pure_player.css b/dist/css/pure_player.css index 45f6bcc..1ee398b 100644 --- a/dist/css/pure_player.css +++ b/dist/css/pure_player.css @@ -1 +1 @@ -.pure-player{position:relative;display:inline-block;width:auto;background:#000;font-family:'Open Sans',sans-serif}.pure-player *{margin:0;padding:0;outline:0}.pure-player ul{list-style-type:none;padding:0;margin:0}.pure-player .progress{height:5px;background:#454548;cursor:pointer}.pure-player .progress-wrap{width:100%;height:10px;padding:0 9px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.pure-player .progress-position,.pure-player .volume{height:100%;width:0;background:#15c0ff;position:relative}.pure-player .progress-position:after{content:'';position:absolute;right:-3px;width:9px;height:9px;background:#15c0ff;border-radius:50%;top:-3px;border:1px solid #fff}.pure-player .quality-box-hidden li.active,.pure-player .speed-box-hidden li.active{background:#15c0ff}.pure-player .loader{height:100%;width:0;background:rgba(21,192,255,.28);position:relative;top:-5px}.pure-player video{position:relative;height:100%;max-width:100%;margin:0 auto;display:block}.pure-player .controls-bar{background:rgba(51,51,51,.6);position:absolute;bottom:0;left:0;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.pure-player .play-button{border:none;cursor:pointer;width:25px;display:inline-block;background:0 0;vertical-align:bottom}.pure-player .play-button:before{content:'';background:url(../img/play.png) no-repeat;width:24px;height:24px;display:block;margin:auto}.pure-player .play-button.pause:before{background:url(../img/pause.png) no-repeat}.pure-player .control-buttons{display:inline-block;float:right;font-size:12px}.pure-player .quality-box,.pure-player .speed-box{color:#fff;position:relative;text-align:right;padding-top:3px;margin:0 0 0 10px;display:inline-block}.pure-player .selected-quality,.pure-player .selected-speed{z-index:20;position:relative}.pure-player .quality-box-hidden,.pure-player .speed-box-hidden{display:none;position:absolute;background:rgba(51,51,51,.6);right:-5px;bottom:26px;z-index:10}.pure-player .quality-box li,.pure-player .speed-box li{cursor:pointer}.pure-player .quality li,.pure-player .speed li{padding:5px}.pure-player .quality-box-hidden li:hover,.pure-player .speed-box-hidden li:hover{background:#333}.pure-player .full-size-icon{width:40px;cursor:pointer;display:inline-block;vertical-align:top}.pure-player .full-size-icon:before{content:'';background:url(../img/fullsize.png) no-repeat;width:24px;height:30px;display:block;margin:auto;margin-bottom:2px}.pure-player .volume-box{display:inline-block;margin:0 0 0 10px}.pure-player .volume-box>*{display:inline-block;vertical-align:middle}.pure-player .volume-icon{background:url(../img/volume.png) no-repeat;width:24px;height:24px;cursor:pointer}.pure-player .volume-icon.volume-off{background:url(../img/volume-off.png) no-repeat}.pure-player .volume-bar{height:5px;background:#454548;cursor:pointer;width:50px}.pure-player span.time{color:#fff;font-size:12px;display:inline-block;padding-bottom:6px}.pure-player .zero-opacity{opacity:0}.pure-player .hovered{position:absolute;display:none;background:#000;top:-30px;color:#fff;opacity:.7;padding:5px}.pure-player .progress-wrap:hover .hovered{display:inline-block}.pure-player .preloader{width:50px;display:block;position:absolute;margin:auto;top:36%;left:0;right:0;z-index:10}.pure-player .facebook_blockG{background-color:#15c0ff;float:left;height:45px;margin-left:3px;width:12px;opacity:.1;animation-name:bounceG;-o-animation-name:bounceG;-webkit-animation-name:bounceG;-moz-animation-name:bounceG;animation-duration:1.69s;-o-animation-duration:1.69s;-webkit-animation-duration:1.69s;-moz-animation-duration:1.69s;animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-direction:normal;-o-animation-direction:normal;-webkit-animation-direction:normal;-moz-animation-direction:normal;transform:scale(.7);-o-transform:scale(.7);-ms-transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7)}.pure-player .facebook_blockG:nth-child(1){animation-delay:.51s;-o-animation-delay:.51s;-webkit-animation-delay:.51s;-moz-animation-delay:.51s}.pure-player .facebook_blockG:nth-child(2){animation-delay:.68s;-o-animation-delay:.68s;-webkit-animation-delay:.68s;-moz-animation-delay:.68s}.pure-player .facebook_blockG:nth-child(3){animation-delay:.85s;-o-animation-delay:.85s;-webkit-animation-delay:.85s;-moz-animation-delay:.85s}@keyframes bounceG{0%{transform:scale(1.2);opacity:1}100%{transform:scale(.7);opacity:.1}}@-o-keyframes bounceG{0%{-o-transform:scale(1.2);opacity:1}100%{-o-transform:scale(.7);opacity:.1}}@-ms-keyframes bounceG{0%{-ms-transform:scale(1.2);opacity:1}100%{-ms-transform:scale(.7);opacity:.1}}@-webkit-keyframes bounceG{0%{-webkit-transform:scale(1.2);opacity:1}100%{-webkit-transform:scale(.7);opacity:.1}}@-moz-keyframes bounceG{0%{-moz-transform:scale(1.2);opacity:1}100%{-moz-transform:scale(.7);opacity:.1}} \ No newline at end of file +.pure-player{position:relative;display:inline-block;width:auto;background:#000;font-family:'Open Sans',sans-serif}.pure-player:focus{outline:0}.pure-player *{margin:0;padding:0;outline:0}.pure-player ul{list-style-type:none;padding:0;margin:0}.pure-player .progress{height:5px;background:#454548;cursor:pointer}.pure-player .progress-wrap{width:100%;height:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.pure-player .progress-position,.pure-player .volume{height:100%;width:0;background:#15c0ff;position:relative}.pure-player .progress-position:after{content:'';position:absolute;right:-3px;width:9px;height:9px;background:#15c0ff;border-radius:50%;top:-3px;border:1px solid #fff}.pure-player .quality-box-hidden li.active,.pure-player .speed-box-hidden li.active{background:#15c0ff}.pure-player .loader{height:100%;width:0;background:rgba(21,192,255,.28);position:relative;top:-5px}.pure-player video{position:relative;height:100%;max-width:100%;margin:0 auto;display:block}.pure-player .controls-bar{background:rgba(51,51,51,.6);position:absolute;bottom:0;left:0;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.pure-player .play-button{border:none;cursor:pointer;width:25px;display:inline-block;background:0 0;vertical-align:bottom}.pure-player .play-button:before{content:'';background:url(../img/play.png) no-repeat;width:24px;height:24px;display:block;margin:auto}.pure-player .play-button.pause:before{background:url(../img/pause.png) no-repeat}.pure-player .control-buttons{display:inline-block;float:right;font-size:12px}.pure-player .quality-box,.pure-player .speed-box{color:#fff;position:relative;text-align:right;padding-top:3px;margin:0 0 0 10px;display:inline-block}.pure-player .selected-quality,.pure-player .selected-speed{z-index:20;position:relative}.pure-player .quality-box-hidden,.pure-player .speed-box-hidden{display:none;position:absolute;background:rgba(51,51,51,.6);right:-5px;bottom:26px;z-index:10}.pure-player .quality-box li,.pure-player .speed-box li{cursor:pointer}.pure-player .quality li,.pure-player .speed li{padding:5px}.pure-player .quality-box-hidden li:hover,.pure-player .speed-box-hidden li:hover{background:#333}.pure-player .full-size-icon{width:40px;cursor:pointer;display:inline-block;vertical-align:top}.pure-player .full-size-icon:before{content:'';background:url(../img/fullsize.png) no-repeat;width:24px;height:30px;display:block;margin:auto;margin-bottom:2px}.pure-player .volume-box{display:inline-block;margin:0 0 0 10px}.pure-player .volume-box>*{display:inline-block;vertical-align:middle}.pure-player .volume-icon{background:url(../img/volume.png) no-repeat;width:24px;height:24px;cursor:pointer}.pure-player .volume-icon.volume-off{background:url(../img/volume-off.png) no-repeat}.pure-player .volume-bar{height:5px;background:#454548;cursor:pointer;width:50px}.pure-player span.time{color:#fff;font-size:12px;display:inline-block;padding-bottom:6px}.pure-player .zero-opacity{opacity:0}.pure-player .hovered{position:absolute;display:none;background:#000;top:-30px;color:#fff;opacity:.7;padding:5px}.pure-player .progress-wrap:hover .hovered{display:inline-block}.pure-player .preloader{width:50px;display:block;position:absolute;margin:auto;top:36%;left:0;right:0;z-index:10}.pure-player .facebook_blockG{background-color:#15c0ff;float:left;height:45px;margin-left:3px;width:12px;opacity:.1;animation-name:bounceG;-o-animation-name:bounceG;-webkit-animation-name:bounceG;-moz-animation-name:bounceG;animation-duration:1.69s;-o-animation-duration:1.69s;-webkit-animation-duration:1.69s;-moz-animation-duration:1.69s;animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-direction:normal;-o-animation-direction:normal;-webkit-animation-direction:normal;-moz-animation-direction:normal;transform:scale(.7);-o-transform:scale(.7);-ms-transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7)}.pure-player .facebook_blockG:nth-child(1){animation-delay:.51s;-o-animation-delay:.51s;-webkit-animation-delay:.51s;-moz-animation-delay:.51s}.pure-player .facebook_blockG:nth-child(2){animation-delay:.68s;-o-animation-delay:.68s;-webkit-animation-delay:.68s;-moz-animation-delay:.68s}.pure-player .facebook_blockG:nth-child(3){animation-delay:.85s;-o-animation-delay:.85s;-webkit-animation-delay:.85s;-moz-animation-delay:.85s}@keyframes bounceG{0%{transform:scale(1.2);opacity:1}100%{transform:scale(.7);opacity:.1}}@-o-keyframes bounceG{0%{-o-transform:scale(1.2);opacity:1}100%{-o-transform:scale(.7);opacity:.1}}@-ms-keyframes bounceG{0%{-ms-transform:scale(1.2);opacity:1}100%{-ms-transform:scale(.7);opacity:.1}}@-webkit-keyframes bounceG{0%{-webkit-transform:scale(1.2);opacity:1}100%{-webkit-transform:scale(.7);opacity:.1}}@-moz-keyframes bounceG{0%{-moz-transform:scale(1.2);opacity:1}100%{-moz-transform:scale(.7);opacity:.1}} \ No newline at end of file diff --git a/dist/js/pure_player.js b/dist/js/pure_player.js index ffa2535..e3acdc0 100644 --- a/dist/js/pure_player.js +++ b/dist/js/pure_player.js @@ -378,10 +378,10 @@ progressWrapper.appendChild(hovered); progressWrapper.appendChild(progressCommon); progressWrapper.on('click', function (e) { - video.currentTime = video.duration * e.layerX / (e.target.offsetWidth - e.target.offsetLeft); + video.currentTime = video.duration * (e.offsetX / (this.offsetWidth - e.target.offsetLeft)); }).on('mousemove', function (e) { - hovered.innerText = fn.convertTime((video.duration || 0) * e.layerX / (e.target.offsetWidth - e.target.offsetLeft)); - hovered.style.left = ((e.layerX + e.target.offsetLeft) - hovered.offsetWidth / 2) + 'px'; + hovered.innerText = fn.convertTime((video.duration || 0) * e.offsetX / (this.offsetWidth - this.offsetLeft)); + hovered.style.left = ((e.offsetX + e.target.offsetLeft) - hovered.offsetWidth / 2) + 'px'; }); controlsBar.appendChild(progressWrapper); @@ -390,6 +390,7 @@ controlsBar.appendChild(controlButtons); player.className = 'pure-player'; + player.setAttribute('tabindex', '0'); player.appendChild(preloader); player.appendChild(video); player.appendChild(controlsBar); diff --git a/dist/js/pure_player.min.js b/dist/js/pure_player.min.js index 81d83f3..c5b30e7 100644 --- a/dist/js/pure_player.min.js +++ b/dist/js/pure_player.min.js @@ -1 +1 @@ -"use strict";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].pageX0?s.currentTime-=5:s.currentTime=0;break;case 39:s.currentTime+50?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].pageX0?s.currentTime-=5:s.currentTime=0;break;case 39:s.currentTime+5