diff --git a/dist/plyr.css b/dist/plyr.css index b72d8c25..83165cd6 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.player{position:relative;max-width:100%;min-width:290px;overflow:hidden}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video-wrapper{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;font-weight:600;text-shadow:-1px -1px 0 #565d64,1px -1px 0 #565d64,-1px 1px 0 #565d64,1px 1px 0 #565d64;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1;text-align:center}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-sound{display:block;margin:10px auto 0}@media (min-width:560px){.player-controls-playback{float:left}.player-controls-sound{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls .inverted:checked+label,.player-controls [type=checkbox]+label{color:#565d64}.player-controls .inverted+label,.player-controls [type=checkbox]:checked+label,.player-controls button{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls [type=checkbox]+label:hover,.player-controls [type=checkbox]:focus+label,.player-controls button:focus,.player-controls button:hover{background:#3498db;color:#fff}.player-controls [type=checkbox]:focus+label,.player-controls button:focus{outline:0}.player-controls .icon-captions-on,.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#cbd0d3;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;background:#6e777f}.player-progress-buffer,.player-progress-played,.player-progress-seek[type=range]{position:absolute;left:0;top:0;width:100%;height:10px;margin:0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;background:0 0}.player-progress-buffer::-webkit-progress-bar,.player-progress-played::-webkit-progress-bar{background:0 0}.player-progress-buffer::-webkit-progress-value,.player-progress-played::-webkit-progress-value{background:currentColor}.player-progress-buffer::-moz-progress-bar,.player-progress-played::-moz-progress-bar{background:currentColor}.player-progress-played{z-index:2;color:#3498db}.player-progress-buffer{color:#565d64}.player-progress-seek[type=range]{z-index:3;cursor:pointer;outline:0}.player-progress-seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.player-progress-seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]::-moz-range-track{background:0 0;border:0}.player-progress-seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.player-progress-seek[type=range]::-ms-fill-lower,.player-progress-seek[type=range]::-ms-fill-upper{background:0 0;border:0}.player-progress-seek[type=range]::-ms-thumb{background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]:focus{outline:0}.player-progress-seek[type=range]::-moz-focus-outer{border:0}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player-volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0}.player-volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-moz-range-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume[type=range]::-ms-fill-lower,.player-volume[type=range]::-ms-fill-upper{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]:focus{outline:0}.player-volume[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player-volume[type=range]:focus::-moz-range-thumb{background:#3498db}.player-volume[type=range]:focus::-ms-thumb{background:#3498db}.player-fullscreen,.player.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.player-fullscreen .player-video-wrapper,.player.fullscreen-active .player-video-wrapper{height:100%;width:100%}.player-fullscreen .player-video-wrapper video,.player.fullscreen-active .player-video-wrapper video{height:100%}.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{top:auto;bottom:90px}@media (min-width:560px) and (max-width:767px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:60px}}@media (min-width:768px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:80px}}.player-fullscreen .player-controls,.player.fullscreen-active .player-controls{position:absolute;bottom:0;left:0;right:0}.player.captions-active .player-controls .icon-captions-on,.player.fullscreen-active .icon-exit-fullscreen,.player.muted .player-controls .icon-muted{display:block}.player [data-player=captions],.player [data-player=captions]+label,.player [data-player=fullscreen],.player [data-player=fullscreen]+label,.player.captions-active .player-controls .icon-captions-on+svg,.player.fullscreen-active .icon-exit-fullscreen+svg,.player.muted .player-controls .icon-muted+svg{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block}.player-fullscreen [data-player=fullscreen],.player-fullscreen [data-player=fullscreen]+label{display:none!important} \ No newline at end of file +.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.player{position:relative;max-width:100%;min-width:290px;overflow:hidden}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video-wrapper{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;font-weight:600;text-shadow:-1px -1px 0 #565d64,1px -1px 0 #565d64,-1px 1px 0 #565d64,1px 1px 0 #565d64;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1;text-align:center}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-sound{display:block;margin:10px auto 0}@media (min-width:560px){.player-controls-playback{float:left}.player-controls-sound{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls .inverted:checked+label,.player-controls input+label{color:#565d64}.player-controls .inverted+label,.player-controls button,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls button:focus,.player-controls button:hover,.player-controls input+label:hover,.player-controls input:focus+label{background:#3498db;color:#fff}.player-controls button:focus,.player-controls input:focus+label{outline:0}.player-controls .icon-captions-on,.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#cbd0d3;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;background:#6e777f}.player-progress-buffer[value],.player-progress-played[value],.player-progress-seek[type=range]{position:absolute;left:0;top:0;width:100%;height:10px;margin:0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;background:0 0}.player-progress-buffer[value]::-webkit-progress-bar,.player-progress-played[value]::-webkit-progress-bar{background:0 0}.player-progress-buffer[value]::-webkit-progress-value,.player-progress-played[value]::-webkit-progress-value{background:currentColor;transition:width .1s ease}.player-progress-buffer[value]::-moz-progress-bar,.player-progress-played[value]::-moz-progress-bar{background:currentColor;transition:width .1s ease}.player-progress-played[value]{z-index:2;color:#3498db}.player-progress-buffer[value]{color:#565d64}.player-progress-seek[type=range]{z-index:3;cursor:pointer;outline:0}.player-progress-seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.player-progress-seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]::-moz-range-track{background:0 0;border:0}.player-progress-seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.player-progress-seek[type=range]::-ms-fill-lower,.player-progress-seek[type=range]::-ms-fill-upper{background:0 0;border:0}.player-progress-seek[type=range]::-ms-thumb{background:0 0;border:0;width:2px;height:10px}.player-progress-seek[type=range]:focus{outline:0}.player-progress-seek[type=range]::-moz-focus-outer{border:0}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player-volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0}.player-volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-moz-range-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume[type=range]::-ms-fill-lower,.player-volume[type=range]::-ms-fill-upper{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]:focus{outline:0}.player-volume[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player-volume[type=range]:focus::-moz-range-thumb{background:#3498db}.player-volume[type=range]:focus::-ms-thumb{background:#3498db}.player-fullscreen,.player.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.player-fullscreen .player-video-wrapper,.player.fullscreen-active .player-video-wrapper{height:100%;width:100%}.player-fullscreen .player-video-wrapper video,.player.fullscreen-active .player-video-wrapper video{height:100%}.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{top:auto;bottom:90px}@media (min-width:560px) and (max-width:767px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:60px}}@media (min-width:768px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:80px}}.player-fullscreen .player-controls,.player.fullscreen-active .player-controls{position:absolute;bottom:0;left:0;right:0}.player.captions-active .player-controls .icon-captions-on,.player.fullscreen-active .icon-exit-fullscreen,.player.muted .player-controls .icon-muted{display:block}.player [data-player=captions],.player [data-player=captions]+label,.player [data-player=fullscreen],.player [data-player=fullscreen]+label,.player.captions-active .player-controls .icon-captions-on+svg,.player.fullscreen-active .icon-exit-fullscreen+svg,.player.muted .player-controls .icon-muted+svg{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block}.player-fullscreen [data-player=fullscreen],.player-fullscreen [data-player=fullscreen]+label{display:none!important} \ No newline at end of file diff --git a/dist/plyr.js b/dist/plyr.js index 16995914..0c556429 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1 +1 @@ -!function(e){"use strict";function t(e,t){b.debug&&window.console&&console[t?"error":"log"](e)}function n(){var e,t,n,s=navigator.userAgent,r=navigator.appName,a=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(r="IE",a="11;"):-1!==(t=s.indexOf("MSIE"))?(r="IE",a=s.substring(t+5)):-1!==(t=s.indexOf("Chrome"))?(r="Chrome",a=s.substring(t+7)):-1!==(t=s.indexOf("Safari"))?(r="Safari",a=s.substring(t+7),-1!==(t=s.indexOf("Version"))&&(a=s.substring(t+8))):-1!==(t=s.indexOf("Firefox"))?(r="Firefox",a=s.substring(t+8)):(e=s.lastIndexOf(" ")+1)<(t=s.lastIndexOf("/"))&&(r=s.substring(e,t),a=s.substring(t+1),r.toLowerCase()==r.toUpperCase()&&(r=navigator.appName)),-1!==(n=a.indexOf(";"))&&(a=a.substring(0,n)),-1!==(n=a.indexOf(" "))&&(a=a.substring(0,n)),o=parseInt(""+a,10),isNaN(o)&&(a=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10)),[r,o]}function s(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function r(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var s=n>0?t.cloneNode(!0):t,r=e[n],a=r.parentNode,o=r.nextSibling;s.appendChild(r),o?a.insertBefore(s,o):a.appendChild(s)}}function a(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(n?" "+t:"")}}function o(e,t,n,s){t=t.split(" ");for(var r=0;rn;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;case"ms":return null!==document.msFullscreenElement;default:return document[this.prefix+"FullScreen"]}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function d(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function f(e){function o(){for(D.subcount=0;v(D.captions[D.subcount][0])D.captions.length-1){D.subcount=D.captions.length-1;break}}function u(){a(D.container,b.classes.captions.enabled,!0),b.captions.defaultActive&&(a(D.container,b.classes.captions.active,!0),D.buttons.captions.setAttribute("checked","checked"))}function f(e){var t=[];return t=e.split(" --> "),g(t[0])}function v(e){var t=[];return t=e.split(" --> "),g(t[1])}function g(e){if(null===e||void 0===e)return 0;var t,n=[],s=[];return n=e.split(","),s=n[0].split(":"),t=Math.floor(60*s[0]*60)+Math.floor(60*s[1])+Math.floor(s[2])}function y(e){return D.container.querySelectorAll(e)}function h(e){return y(e)[0]}function k(){try{return window.self!==window.top}catch(e){return!0}}function x(){t("Injecting custom controls.");var e=b.html;e=s(e,"{seektime}",b.seekTime),e=s(e,"{id}",D.random),D.container.insertAdjacentHTML("beforeend",e)}function w(){try{return D.controls=h(b.selectors.controls),D.buttons={},D.buttons.seek=h(b.selectors.buttons.seek),D.buttons.play=h(b.selectors.buttons.play),D.buttons.pause=h(b.selectors.buttons.pause),D.buttons.restart=h(b.selectors.buttons.restart),D.buttons.rewind=h(b.selectors.buttons.rewind),D.buttons.forward=h(b.selectors.buttons.forward),D.buttons.mute=h(b.selectors.buttons.mute),D.buttons.captions=h(b.selectors.buttons.captions),D.buttons.fullscreen=h(b.selectors.buttons.fullscreen),D.progress={},D.progress.container=h(b.selectors.progress.container),D.progress.buffer={},D.progress.buffer.bar=h(b.selectors.progress.buffer),D.progress.buffer.text=D.progress.buffer.bar.getElementsByTagName("span")[0],D.progress.played={},D.progress.played.bar=h(b.selectors.progress.played),D.progress.played.text=D.progress.played.bar.getElementsByTagName("span")[0],D.volume=h(b.selectors.buttons.volume),D.duration=h(b.selectors.duration),D.seekTime=y(b.selectors.seekTime),!0}catch(e){return t("It looks like there's a problem with your controls html. Bailing.",!0),!1}}function T(){var e=D.buttons.play.innerText||"Play";"undefined"!=typeof b.title&&b.title.length&&(e+=", "+b.title),D.buttons.play.setAttribute("aria-label",e)}function S(){if(D.media=D.container.querySelectorAll("audio, video")[0],!D.media)return t("No audio or video element found!",!0),!1;if(D.media.removeAttribute("controls"),D.type="video"==D.media.tagName.toLowerCase()?"video":"audio",a(D.container,b.classes[D.type],!0),a(D.container,b.classes.stopped,null===D.media.getAttribute("autoplay")),"video"===D.type){var e=document.createElement("div");e.setAttribute("class",b.classes.videoWrapper),r(D.media,e),D.videoContainer=e}}function F(){if("video"===D.type){D.videoContainer.insertAdjacentHTML("afterbegin","
"),D.captionsContainer=h(b.selectors.captions),D.isTextTracks=!1,D.media.textTracks&&(D.isTextTracks=!0);for(var e,n="",s=D.media.childNodes,r=0;r=31||"Safari"===D.browserName&&D.browserMajorVersion>=7)&&(t("Detected IE 10/11 or Firefox 31+ or Safari 7+."),D.isTextTracks=!1),D.isTextTracks){t("TextTracks supported.");for(var c=0;cf(D.captions[D.subcount][0])&&D.media.currentTime.toFixed(1)v(D.captions[D.subcount][0])&&D.subcount=7){t("Safari 7+ detected; removing track from DOM."),o=D.media.getElementsByTagName("track");for(var m=0;mt?0:t,D.isTextTracks||"video"!==D.type||o(D)}function I(e){"number"!=typeof e&&(e=b.seekTime);var t=D.media.currentTime+e;D.media.currentTime=t>D.media.duration?D.media.duration:t,D.isTextTracks||"video"!==D.type||o(D)}function V(){a(D.container,b.classes.playing,!D.media.paused),a(D.container,b.classes.stopped,D.media.paused)}function L(e){var t=m.supportsFullScreen;e&&e.type===m.fullScreenEventName?b.fullscreen.active=m.isFullScreen():t?(m.isFullScreen()?m.cancelFullScreen():m.requestFullScreen(D.container),b.fullscreen.active=m.isFullScreen()):(b.fullscreen.active=!b.fullscreen.active,b.fullscreen.active?(i(document,"keyup",O),document.body.style.overflow="hidden"):(l(document,"keyup",O),document.body.style.overflow="")),a(D.container,b.classes.fullscreen.active,b.fullscreen.active)}function O(e){27===(e.which||e.charCode||e.keyCode)&&b.fullscreen.active&&L()}function j(e){"undefined"==typeof e&&(e=b.storage.enabled&&d().supported?window.localStorage.plyr_volume||b.volume:b.volume),e>10&&(e=10),D.volume.value=e,D.media.volume=parseFloat(e/10),R(),b.storage.enabled&&d().supported&&(window.localStorage.plyr_volume=e)}function q(e){"undefined"==typeof active&&(e=!D.media.muted,D.buttons.mute.checked=e),D.media.muted=e,R()}function H(e){"undefined"==typeof e&&(e=-1===D.container.className.indexOf(b.classes.captions.active),D.buttons.captions.checked=e),e?a(D.container,b.classes.captions.active,!0):a(D.container,b.classes.captions.active)}function R(){a(D.container,b.classes.muted,0===D.media.volume||D.media.muted)}function B(e){var t,n,s=0;switch(e.type){case"timeupdate":t=D.progress.played.bar,n=D.progress.played.text,s=c(D.media.currentTime,D.media.duration),D.buttons.seek.value=s;break;case"change":case"input":t=D.progress.played.bar,n=D.progress.played.text,s=e.target.value;break;case"playing":case"progress":t=D.progress.buffer.bar,n=D.progress.buffer.text,s=function(){var e=D.media.buffered;return e.length?c(e.end(0),D.media.duration):0}()}t&&s>0&&(t.value=s,n.innerHTML=s)}function P(){D.secs=parseInt(D.media.currentTime%60),D.mins=parseInt(D.media.currentTime/60%60),D.secs=("0"+D.secs).slice(-2),D.mins=("0"+D.mins).slice(-2),D.duration.innerHTML=D.mins+":"+D.secs}function W(){i(D.buttons.play,"click",function(){C(),setTimeout(function(){D.buttons.pause.focus()},100)}),i(D.buttons.pause,"click",function(){E(),setTimeout(function(){D.buttons.play.focus()},100)}),i(D.buttons.restart,"click",M),i(D.buttons.rewind,"click",A),i(D.buttons.forward,"click",I),i(D.volume,"change input",function(){j(this.value)}),i(D.buttons.mute,"change",function(){q(this.checked)}),i(D.buttons.fullscreen,"click",L),i(document,m.fullScreenEventName,L),"video"===D.type&&b.click&&i(D.videoContainer,"click",function(){D.media.paused?C():D.media.ended?M():E()}),i(D.media,"timeupdate",function(e){P(),B(e)}),i(D.buttons.seek,"change input",function(e){B(e),P(),D.media.currentTime=this.value/this.max*D.media.duration,D.isTextTracks||"video"!==D.type||o(D)}),i(D.buttons.captions,"click",function(){H(this.checked)}),i(D.media,"ended",function(){"video"===D.type&&(D.captionsContainer.innerHTML=""),V()}),i(D.media,"progress",B),i(D.media,"playing",B),i(D.media,"volumechange",R),i(D.media,"play pause",V)}function _(){return m=p(),D.browserInfo=n(),D.browserName=D.browserInfo[0],D.browserMajorVersion=D.browserInfo[1],t(D.browserName+" "+D.browserMajorVersion),"IE"!==D.browserName||8!==D.browserMajorVersion&&9!==D.browserMajorVersion?(S(),D.random=Math.floor(1e4*Math.random()),x(),w()?(T(),F(),j(),N(),W(),void 0):!1):(t("Browser not suppported.",!0),!1)}var D=this;return D.container=e,_(),{media:D.media,play:C,pause:E,restart:M,rewind:A,forward:I,setVolume:j,toggleMute:q,toggleCaptions:H}}var m,b,v={enabled:!0,debug:!1,seekTime:10,volume:5,click:!0,selectors:{container:".player",controls:".player-controls",buttons:{seek:"[data-player='seek']",play:"[data-player='play']",pause:"[data-player='pause']",restart:"[data-player='restart']",rewind:"[data-player='rewind']",forward:"[data-player='fast-forward']",mute:"[data-player='mute']",volume:"[data-player='volume']",captions:"[data-player='captions']",fullscreen:"[data-player='fullscreen']"},progress:{container:".player-progress",buffer:".player-progress-buffer",played:".player-progress-played"},captions:".player-captions",duration:".player-duration"},classes:{video:"player-video",videoWrapper:"player-video-wrapper",audio:"player-audio",stopped:"stopped",playing:"playing",muted:"muted",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0},storage:{enabled:!0},html:function(){return["
","
","","0% played","","","0% buffered","","
","","","","","","","","Time","00:00","","","","","","","","","","","","
"].join("\n")}()};e.setup=function(e){if(b=u(v,e),!b.enabled)return!1;for(var t=document.querySelectorAll(b.selectors.container),n=[],s=t.length-1;s>=0;s--){var r=t[s];"undefined"==typeof r.plyr&&(r.plyr=new f(r)),n.push(r.plyr)}return n}}(this.plyr=this.plyr||{}); \ No newline at end of file +!function(e){"use strict";function t(e,t){b.debug&&window.console&&console[t?"error":"log"](e)}function n(){var e,t,n,s=navigator.userAgent,r=navigator.appName,a=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(r="IE",a="11;"):-1!==(t=s.indexOf("MSIE"))?(r="IE",a=s.substring(t+5)):-1!==(t=s.indexOf("Chrome"))?(r="Chrome",a=s.substring(t+7)):-1!==(t=s.indexOf("Safari"))?(r="Safari",a=s.substring(t+7),-1!==(t=s.indexOf("Version"))&&(a=s.substring(t+8))):-1!==(t=s.indexOf("Firefox"))?(r="Firefox",a=s.substring(t+8)):(e=s.lastIndexOf(" ")+1)<(t=s.lastIndexOf("/"))&&(r=s.substring(e,t),a=s.substring(t+1),r.toLowerCase()==r.toUpperCase()&&(r=navigator.appName)),-1!==(n=a.indexOf(";"))&&(a=a.substring(0,n)),-1!==(n=a.indexOf(" "))&&(a=a.substring(0,n)),o=parseInt(""+a,10),isNaN(o)&&(a=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10)),[r,o]}function s(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function r(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var s=n>0?t.cloneNode(!0):t,r=e[n],a=r.parentNode,o=r.nextSibling;s.appendChild(r),o?a.insertBefore(s,o):a.appendChild(s)}}function a(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(n?" "+t:"")}}function o(e,t,n,s){t=t.split(" ");for(var r=0;rn;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;case"ms":return null!==document.msFullscreenElement;default:return document[this.prefix+"FullScreen"]}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function d(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function f(e){function o(){for(U.subcount=0;v(U.captions[U.subcount][0])U.captions.length-1){U.subcount=U.captions.length-1;break}}function u(){a(U.container,b.classes.captions.enabled,!0),b.captions.defaultActive&&(a(U.container,b.classes.captions.active,!0),U.buttons.captions.setAttribute("checked","checked"))}function f(e){var t=[];return t=e.split(" --> "),g(t[0])}function v(e){var t=[];return t=e.split(" --> "),g(t[1])}function g(e){if(null===e||void 0===e)return 0;var t,n=[],s=[];return n=e.split(","),s=n[0].split(":"),t=Math.floor(60*s[0]*60)+Math.floor(60*s[1])+Math.floor(s[2])}function y(e){return U.container.querySelectorAll(e)}function h(e){return y(e)[0]}function k(){try{return window.self!==window.top}catch(e){return!0}}function x(){t("Injecting custom controls.");var e=b.html;e=s(e,"{seektime}",b.seekTime),e=s(e,"{id}",U.random),U.container.insertAdjacentHTML("beforeend",e)}function w(){try{return U.controls=h(b.selectors.controls),U.buttons={},U.buttons.seek=h(b.selectors.buttons.seek),U.buttons.play=h(b.selectors.buttons.play),U.buttons.pause=h(b.selectors.buttons.pause),U.buttons.restart=h(b.selectors.buttons.restart),U.buttons.rewind=h(b.selectors.buttons.rewind),U.buttons.forward=h(b.selectors.buttons.forward),U.buttons.mute=h(b.selectors.buttons.mute),U.buttons.captions=h(b.selectors.buttons.captions),U.buttons.fullscreen=h(b.selectors.buttons.fullscreen),U.progress={},U.progress.container=h(b.selectors.progress.container),U.progress.buffer={},U.progress.buffer.bar=h(b.selectors.progress.buffer),U.progress.buffer.text=U.progress.buffer.bar.getElementsByTagName("span")[0],U.progress.played={},U.progress.played.bar=h(b.selectors.progress.played),U.progress.played.text=U.progress.played.bar.getElementsByTagName("span")[0],U.volume=h(b.selectors.buttons.volume),U.duration=h(b.selectors.duration),U.seekTime=y(b.selectors.seekTime),!0}catch(e){return t("It looks like there's a problem with your controls html. Bailing.",!0),!1}}function T(){var e=U.buttons.play.innerText||"Play";"undefined"!=typeof b.title&&b.title.length&&(e+=", "+b.title),U.buttons.play.setAttribute("aria-label",e)}function S(){if(U.media=U.container.querySelectorAll("audio, video")[0],!U.media)return t("No audio or video element found!",!0),!1;if(U.media.removeAttribute("controls"),U.type="video"==U.media.tagName.toLowerCase()?"video":"audio",a(U.container,b.classes[U.type],!0),a(U.container,b.classes.stopped,null===U.media.getAttribute("autoplay")),"video"===U.type){var e=document.createElement("div");e.setAttribute("class",b.classes.videoWrapper),r(U.media,e),U.videoContainer=e}}function F(){if("video"===U.type){U.videoContainer.insertAdjacentHTML("afterbegin","
"),U.captionsContainer=h(b.selectors.captions),U.isTextTracks=!1,U.media.textTracks&&(U.isTextTracks=!0);for(var e,n="",s=U.media.childNodes,r=0;r=31||"Safari"===U.browserName&&U.browserMajorVersion>=7)&&(t("Detected IE 10/11 or Firefox 31+ or Safari 7+."),U.isTextTracks=!1),U.isTextTracks){t("TextTracks supported.");for(var c=0;cf(U.captions[U.subcount][0])&&U.media.currentTime.toFixed(1)v(U.captions[U.subcount][0])&&U.subcount=7){t("Safari 7+ detected; removing track from DOM."),o=U.media.getElementsByTagName("track");for(var m=0;m10&&(e=10),U.volume.value=e,U.media.volume=parseFloat(e/10),R(),b.storage.enabled&&d().supported&&(window.localStorage.plyr_volume=e)}function q(e){"undefined"==typeof active&&(e=!U.media.muted,U.buttons.mute.checked=e),U.media.muted=e,R()}function H(e){"undefined"==typeof e&&(e=-1===U.container.className.indexOf(b.classes.captions.active),U.buttons.captions.checked=e),e?a(U.container,b.classes.captions.active,!0):a(U.container,b.classes.captions.active)}function R(){a(U.container,b.classes.muted,0===U.media.volume||U.media.muted)}function B(e){var t,n,s=0;switch(e.type){case"timeupdate":case"seeking":t=U.progress.played.bar,n=U.progress.played.text,s=c(U.media.currentTime,U.media.duration),"timeupdate"==e.type&&(U.buttons.seek.value=s);break;case"change":case"input":t=U.progress.played.bar,n=U.progress.played.text,s=e.target.value;break;case"playing":case"progress":t=U.progress.buffer.bar,n=U.progress.buffer.text,s=function(){var e=U.media.buffered;return e.length?c(e.end(0),U.media.duration):0}()}t&&s>0&&(t.value=s,n.innerHTML=s)}function P(){U.secs=parseInt(U.media.currentTime%60),U.mins=parseInt(U.media.currentTime/60%60),U.secs=("0"+U.secs).slice(-2),U.mins=("0"+U.mins).slice(-2),U.duration.innerHTML=U.mins+":"+U.secs}function W(e){P(),B(e)}function _(){i(U.buttons.play,"click",function(){C(),setTimeout(function(){U.buttons.pause.focus()},100)}),i(U.buttons.pause,"click",function(){E(),setTimeout(function(){U.buttons.play.focus()},100)}),i(U.buttons.restart,"click",M),i(U.buttons.rewind,"click",A),i(U.buttons.forward,"click",I),i(U.volume,"change input",function(){j(this.value)}),i(U.buttons.mute,"change",function(){q(this.checked)}),i(U.buttons.fullscreen,"click",L),i(document,m.fullScreenEventName,L),"video"===U.type&&b.click&&i(U.videoContainer,"click",function(){U.media.paused?C():U.media.ended?M():E()}),i(U.media,"timeupdate seeking",W),i(U.buttons.seek,"change input",X),i(U.buttons.captions,"click",function(){H(this.checked)}),i(U.media,"ended",function(){"video"===U.type&&(U.captionsContainer.innerHTML=""),V()}),i(U.media,"progress",B),i(U.media,"playing",B),i(U.media,"volumechange",R),i(U.media,"play pause",V)}function D(){return m=p(),U.browserInfo=n(),U.browserName=U.browserInfo[0],U.browserMajorVersion=U.browserInfo[1],t(U.browserName+" "+U.browserMajorVersion),"IE"!==U.browserName||8!==U.browserMajorVersion&&9!==U.browserMajorVersion?(S(),U.random=Math.floor(1e4*Math.random()),x(),w()?(T(),F(),j(),N(),_(),void 0):!1):(t("Browser not suppported.",!0),!1)}var U=this;U.container=e;var X=function(e){var n=0;"undefined"!=typeof e&&("number"==typeof e?n=e:("change"===e.type||"input"===e.type)&&(n=(this.value/this.max*U.media.duration).toFixed(1)),U.media.currentTime=n>U.media.duration?U.media.duration:0>n?0:n,t("Seeking to "+U.media.currentTime+" seconds"),U.isTextTracks||"video"!==U.type||o(U))};return D(),{media:U.media,play:C,pause:E,restart:M,rewind:A,forward:I,seek:X,setVolume:j,toggleMute:q,toggleCaptions:H}}var m,b,v={enabled:!0,debug:!1,seekTime:10,volume:5,click:!0,selectors:{container:".player",controls:".player-controls",buttons:{seek:"[data-player='seek']",play:"[data-player='play']",pause:"[data-player='pause']",restart:"[data-player='restart']",rewind:"[data-player='rewind']",forward:"[data-player='fast-forward']",mute:"[data-player='mute']",volume:"[data-player='volume']",captions:"[data-player='captions']",fullscreen:"[data-player='fullscreen']"},progress:{container:".player-progress",buffer:".player-progress-buffer",played:".player-progress-played"},captions:".player-captions",duration:".player-duration"},classes:{video:"player-video",videoWrapper:"player-video-wrapper",audio:"player-audio",stopped:"stopped",playing:"playing",muted:"muted",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0},storage:{enabled:!0},html:function(){return["
","
","","","","0% played","","","0% buffered","","
","","","","","","","","Time","00:00","","","","","","","","","","","","
"].join("\n")}()};e.setup=function(e){if(b=u(v,e),!b.enabled)return!1;for(var t=document.querySelectorAll(b.selectors.container),n=[],s=t.length-1;s>=0;s--){var r=t[s];"undefined"==typeof r.plyr&&(r.plyr=new f(r)),n.push(r.plyr)}return n}}(this.plyr=this.plyr||{}); \ No newline at end of file diff --git a/notes.md b/notes.md new file mode 100644 index 00000000..8c5b033a --- /dev/null +++ b/notes.md @@ -0,0 +1,9 @@ +Loading +-------------- +http://stackoverflow.com/questions/8685038/tell-whether-video-is-loaded-or-not-in-javascript +http://stackoverflow.com/questions/5181865/checking-if-a-html5-video-is-ready + +Events +-------------- +https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement +https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events \ No newline at end of file diff --git a/readme.md b/readme.md index 353f022c..489bd0e2 100644 --- a/readme.md +++ b/readme.md @@ -263,6 +263,11 @@ Here's a list of the methods supported: Number Fast forwards by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds). + + seek + Number + Seeks the media to the provided parameter, time in seconds. + setVolume Number @@ -346,6 +351,9 @@ Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([s - [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/) - [HTML5 Weekly #177](http://html5weekly.com/issues/177) - [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/) +- [Hacker News](https://news.ycombinator.com/item?id=9136774) +- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04) +- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player) ## Used by - [Selz.com](https://selz.com) @@ -356,6 +364,7 @@ Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the abo Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from: - [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player) - The icons used in Plyr are [Vicons](https://dribbble.com/shots/1663443-60-Vicons-Free-Icon-Set) plus some ones I made +- [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw) Also these links helped created Plyr: - [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html) diff --git a/src/js/plyr.js b/src/js/plyr.js index 86144e9d..6dfe29bc 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -274,7 +274,7 @@ // Get percentage function _getPercentage(current, max) { - return Math.floor((current / max) * 100); + return ((current / max) * 100).toFixed(2); } // Deep extend/merge two Objects @@ -781,19 +781,7 @@ if(typeof seekTime !== "number") { seekTime = config.seekTime; } - - var targetTime = player.media.currentTime - seekTime; - - if (targetTime < 0) { - player.media.currentTime = 0; - } - else { - player.media.currentTime = targetTime; - } - // Special handling for "manual" captions - if (!player.isTextTracks && player.type === "video") { - _adjustManualCaptions(player); - } + _seek(player.media.currentTime - seekTime); } // Fast forward @@ -802,15 +790,43 @@ if(typeof seekTime !== "number") { seekTime = config.seekTime; } + _seek(player.media.currentTime + seekTime); + } - var targetTime = player.media.currentTime + seekTime; + // Seek to time + var _seek = function(input) { + //var value = config.seekTime; + var targetTime = 0; + // If no event or time is passed, bail + if (typeof input === "undefined") { + return; + } + // Explicit position + else if (typeof input === "number") { + targetTime = input; + } + // Event + else if (input.type === "change" || input.type === "input") { + // It's the seek slider + // Seek to the selected time + targetTime = ((this.value / this.max) * player.media.duration).toFixed(1); + } + + // Handle min and max values if (targetTime > player.media.duration) { player.media.currentTime = player.media.duration; } + else if (targetTime < 0) { + player.media.currentTime = 0; + } else { player.media.currentTime = targetTime; } + + // Logging + _log("Seeking to " + player.media.currentTime + " seconds"); + // Special handling for "manual" captions if (!player.isTextTracks && player.type === "video") { _adjustManualCaptions(player); @@ -939,16 +955,19 @@ switch(event.type) { // Video playing case "timeupdate": + case "seeking": progress = player.progress.played.bar; text = player.progress.played.text; value = _getPercentage(player.media.currentTime, player.media.duration); - // Set seeking value - player.buttons.seek.value = value; - + // Set seek range value only if it's a "natural" time event + if(event.type == "timeupdate") { + player.buttons.seek.value = value; + } + break; - // Seeking + // Events from seek range case "change": case "input": progress = player.progress.played.bar; @@ -995,6 +1014,13 @@ player.duration.innerHTML = player.mins + ":" + player.secs; } + function _timeUpdate(event) { + // Duration + _updateTimeDisplay(); + // Playing progress + _updateProgress(event); + } + // Listen for events function _listeners() { // Play @@ -1051,29 +1077,26 @@ } // Time change on media - _on(player.media, "timeupdate", function(event) { - // Duration - _updateTimeDisplay(); - // Playing progress - _updateProgress(event); + _on(player.media, "timeupdate seeking", _timeUpdate); + + // Pause and resume while seeking + /*_on(player.media, "seeking", function() { + if(!player.media.paused && !player.seekPaused) { + player.seekPaused = true; + _pause(); + } + _log("Seeking") }); + _on(player.media, "seeked", function() { + if(player.seekPaused) { + player.seekPaused = false; + _play(); + } + _log("Seeked") + });*/ // Seek - _on(player.buttons.seek, "change input", function(event) { - // Update progress elements - _updateProgress(event); - - // Update the text label - _updateTimeDisplay(); - - // Seek to the selected time - player.media.currentTime = ((this.value / this.max) * player.media.duration); - - // Special handling for "manual" captions - if (!player.isTextTracks && player.type === "video") { - _adjustManualCaptions(player); - } - }); + _on(player.buttons.seek, "change input", _seek); // Captions _on(player.buttons.captions, "click", function() { @@ -1159,6 +1182,7 @@ restart: _restart, rewind: _rewind, forward: _forward, + seek: _seek, setVolume: _setVolume, toggleMute: _toggleMute, toggleCaptions: _toggleCaptions diff --git a/src/less/plyr.less b/src/less/plyr.less index 11bcd701..b72f0ec7 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -66,7 +66,7 @@ outline-offset: 0; } -// Range styling +// styling // --------------------------------------- .volume-thumb() { height: @volume-thumb-height; @@ -205,13 +205,13 @@ transition: fill .3s ease; } } - [type="checkbox"] + label, + input + label, .inverted:checked + label { color: @control-color-inactive; } button, .inverted + label, - [type="checkbox"]:checked + label { + input:checked + label { color: @control-color; } button { @@ -222,13 +222,13 @@ button:focus, button:hover, - [type="checkbox"]:focus + label, - [type="checkbox"] + label:hover { + input:focus + label, + input + label:hover { background: @control-bg-hover; color: @control-color-hover; } button:focus, - [type="checkbox"]:focus + label { + input:focus + label { outline: 0; } .icon-exit-fullscreen, @@ -258,8 +258,8 @@ height: @control-spacing; background: @progress-bg; - &-buffer, - &-played, + &-buffer[value], + &-played[value], &-seek[type=range] { position: absolute; left: 0; @@ -275,8 +275,8 @@ border: none; background: transparent; } - &-buffer, - &-played { + &-buffer[value], + &-played[value] { &::-webkit-progress-bar { background: transparent; } @@ -284,18 +284,18 @@ // Inherit from currentColor; &::-webkit-progress-value { background: currentColor; + transition: width .1s ease; } &::-moz-progress-bar { background: currentColor; + transition: width .1s ease; } } - &-played { + &-played[value] { z-index: 2; - } - &-played{ color: @progress-playing-bg; } - &-buffer { + &-buffer[value] { color: @progress-buffered-bg; } @@ -339,7 +339,6 @@ } &:focus { - //.tab-focus(); outline: 0; } &::-moz-focus-outer { diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 51eae73d..34ab288f 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -30,12 +30,12 @@ $progress-playing-bg: $blue; $progress-buffered-bg: $gray; // Range -$range-track-height: 6px; -$range-track-bg: $gray; -$range-thumb-height: ($range-track-height * 2); -$range-thumb-width: ($range-track-height * 2); -$range-thumb-bg: $control-color; -$range-thumb-bg-focus: $control-bg-hover; +$volume-track-height: 6px; +$volume-track-bg: $gray; +$volume-thumb-height: ($volume-track-height * 2); +$volume-thumb-width: ($volume-track-height * 2); +$volume-thumb-bg: $control-color; +$volume-thumb-bg-focus: $control-bg-hover; // Breakpoints $bp-control-split: 560px; // When controls split into left/right @@ -66,27 +66,37 @@ $bp-captions-large: 768px; // When captions jump to the larger font size @mixin tab-focus() { outline: thin dotted #000; - outline-offset: 1px; + outline-offset: 0; } -// Range styling +// styling // --------------------------------------- -@mixin range-thumb() +@mixin volume-thumb() { - height: $range-thumb-height; - width: $range-thumb-width; - background: $range-thumb-bg; + height: $volume-thumb-height; + width: $volume-thumb-width; + background: $volume-thumb-bg; border: 0; - border-radius: ($range-thumb-height / 2); + border-radius: ($volume-thumb-height / 2); transition: background .3s ease; cursor: ew-resize; } -@mixin range-track() +@mixin volume-track() { - height: $range-track-height; - background: $range-track-bg; + height: $volume-track-height; + background: $volume-track-bg; + border: 0; + border-radius: ($volume-track-height / 2); +} +@mixin seek-thumb() { + background: transparent; + border: 0; + width: 2px; + height: $control-spacing; +} +@mixin seek-track() { + background: none; border: 0; - border-radius: ($range-track-height / 2); } // Font smoothing @@ -202,13 +212,13 @@ $bp-captions-large: 768px; // When captions jump to the larger font size transition: fill .3s ease; } } - [type="checkbox"] + label, + input + label, .inverted:checked + label { color: $control-color-inactive; } button, .inverted + label, - [type="checkbox"]:checked + label { + input:checked + label { color: $control-color; } button { @@ -216,13 +226,13 @@ $bp-captions-large: 768px; // When captions jump to the larger font size background: transparent; overflow: hidden; } - [type="checkbox"]:focus + label, + input:focus + label, button:focus { @include tab-focus(); color: $control-color-focus; } button:hover, - [type="checkbox"] + label:hover { + input + label:hover { background: $control-bg-hover; color: $control-color-hover; } @@ -253,8 +263,9 @@ $bp-captions-large: 768px; // When captions jump to the larger font size height: $control-spacing; background: $progress-bg; - &-buffer, - &-played { + &-buffer[value], + &-played[value], + &-seek[type=range] { position: absolute; left: 0; top: 0; @@ -263,34 +274,82 @@ $bp-captions-large: 768px; // When captions jump to the larger font size margin: 0; vertical-align: top; - &[value] { - -webkit-appearance: none; - border: none; + -webkit-appearance: none; + -moz-appearance: none; + border: none; + background: transparent; + } + + &-buffer[value], + &-played[value] { + &::-webkit-progress-bar { background: transparent; + } - &::-webkit-progress-bar { - background: transparent; - } - - // Inherit from currentColor; - &::-webkit-progress-value { - background: currentColor; - } - &::-moz-progress-bar { - background: currentColor; - } + // Inherit from currentColor; + &::-webkit-progress-value { + background: currentColor; + transition: width .1s ease; + } + &::-moz-progress-bar { + background: currentColor; + transition: width .1s ease; } } - &-played { - z-index: 2; - } &-played[value] { - cursor: pointer; + z-index: 2; color: $progress-playing-bg; } &-buffer[value] { color: $progress-buffered-bg; } + + // Seek control + // element + // Specificity is for bootstrap compatibility + &-seek[type=range] { + z-index: 3; + cursor: pointer; + outline: 0; + + // Webkit + &::-webkit-slider-runnable-track { + @include seek-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + @include seek-thumb(); + } + + // Mozilla + &::-moz-range-track { + @include seek-track(); + } + &::-moz-range-thumb { + -moz-appearance: none; + @include seek-thumb(); + } + + // Microsoft + &::-ms-track { + color: transparent; + @include seek-track(); + } + &::-ms-fill-lower, + &::-ms-fill-upper { + @include seek-track(); + } + &::-ms-thumb { + @include seek-thumb(); + } + + &:focus { + outline: 0; + } + &::-moz-focus-outer { + border: 0; + } + } } // States @@ -321,7 +380,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size } &::-webkit-slider-thumb { -webkit-appearance: none; - margin-top: -(($range-thumb-height - $range-track-height) / 2); + margin-top: -(($volume-thumb-height - $volume-track-height) / 2); @include range-thumb(); } @@ -335,10 +394,10 @@ $bp-captions-large: 768px; // When captions jump to the larger font size // Microsoft &::-ms-track { - height: $range-track-height; + height: $volume-track-height; background: transparent; border-color: transparent; - border-width: (($range-thumb-height - $range-track-height) / 2) 0; + border-width: (($volume-thumb-height - $volume-track-height) / 2) 0; color: transparent; } &::-ms-fill-lower, @@ -353,13 +412,13 @@ $bp-captions-large: 768px; // When captions jump to the larger font size outline: 0; &::-webkit-slider-thumb { - background: $range-thumb-bg-focus; + background: $volume-thumb-bg-focus; } &::-moz-range-thumb { - background: $range-thumb-bg-focus; + background: $volume-thumb-bg-focus; } &::-ms-thumb { - background: $range-thumb-bg-focus; + background: $volume-thumb-bg-focus; } } }