From d00b9dc44b7210b418bbc7c8f970c569eb7a5952 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 17 Feb 2015 15:43:09 +1100 Subject: [PATCH] Tweaks to docs --- assets/less/docs.less | 57 +++++++++++++++--------- assets/less/docs/fontface.less | 16 +++++++ assets/less/{lib => docs}/mixins.less | 14 ++++++ assets/less/{lib => docs}/normalize.less | 0 dist/css/docs.css | 2 +- dist/js/plyr.js | 2 +- index.html | 2 + 7 files changed, 69 insertions(+), 24 deletions(-) create mode 100644 assets/less/docs/fontface.less rename assets/less/{lib => docs}/mixins.less (59%) rename assets/less/{lib => docs}/normalize.less (100%) diff --git a/assets/less/docs.less b/assets/less/docs.less index e3e4086b..ba38a891 100644 --- a/assets/less/docs.less +++ b/assets/less/docs.less @@ -3,27 +3,22 @@ // ========================================================================== // Reset -@import "lib/normalize.less"; +@import "docs/normalize.less"; // Mixins -@import "lib/mixins.less"; +@import "docs/mixins.less"; +// Fonts +@import "docs/fontface.less"; -@font-face { - font-family: "Avenir"; - src: url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), - url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), - url("../../assets/fonts/AvenirLTStd-Medium.ttf") format("truetype"); - font-style: normal; - font-weight: 400; -} +// Variables +// --------------------------------------- +// Colors +@blue: #3498DB; +@gray-dark: #343f4a; +@gray: #565d64; +@gray-light: #cbd0d3; -@font-face { - font-family: "Avenir"; - src: url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), - url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), - url("../../assets/fonts/AvenirLTStd-Heavy.ttf") format("truetype"); - font-style: normal; - font-weight: 600; -} +// Elements +@link-color: @blue; // BORDER-BOX ALL THE THINGS! // http://paulirish.com/2012/box-sizing-border-box-ftw/ @@ -47,8 +42,7 @@ h2 { color: #2E3C44; margin: 0 0 10px; line-height: 1.2; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + .font-smoothing(); } h1 { .font-size(64); @@ -72,14 +66,33 @@ header { } a { text-decoration: none; - color: #3498DB; + color: @link-color; border-bottom: 1px solid currentColor; - transition: color .3s ease, border .3s ease; + transition: all .3s ease; &:hover, &:focus { color: #000; } + &:focus { + .tab-focus(); + } +} +.btn { + display: inline-block; + padding: 10px 25px; + background: @link-color; + border: 0; + color: #fff; + .font-smoothing(on); + font-weight: 600; + border-radius: 3px; + + &:hover, + &:focus { + color: #fff; + background: darken(@link-color, 5%); + } } section { diff --git a/assets/less/docs/fontface.less b/assets/less/docs/fontface.less new file mode 100644 index 00000000..d4df4756 --- /dev/null +++ b/assets/less/docs/fontface.less @@ -0,0 +1,16 @@ +@font-face { + font-family: "Avenir"; + src: url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), + url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), + url("../../assets/fonts/AvenirLTStd-Medium.ttf") format("truetype"); + font-style: normal; + font-weight: 400; +} +@font-face { + font-family: "Avenir"; + src: url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), + url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), + url("../../assets/fonts/AvenirLTStd-Heavy.ttf") format("truetype"); + font-style: normal; + font-weight: 600; +} \ No newline at end of file diff --git a/assets/less/lib/mixins.less b/assets/less/docs/mixins.less similarity index 59% rename from assets/less/lib/mixins.less rename to assets/less/docs/mixins.less index c6412a55..02f44d55 100644 --- a/assets/less/lib/mixins.less +++ b/assets/less/docs/mixins.less @@ -3,6 +3,7 @@ // ========================================================================== // Contain floats: nicolasgallagher.com/micro-clearfix-hack/ +// --------------------------------------- .clearfix() { zoom: 1; &:before, @@ -11,6 +12,7 @@ } // Webkit-style focus +// --------------------------------------- .tab-focus() { // Default outline: thin dotted @gray-dark; @@ -20,8 +22,20 @@ } // Use rems for font sizing +// --------------------------------------- .font-size(@font-size: 16){ @rem: (@font-size / 10); font-size: @font-size * 1px; font-size: ~"@{rem}rem"; +} + +// Font smoothing +// --------------------------------------- +.font-smoothing(@mode: on) when (@mode = on) { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +.font-smoothing(@mode: on) when (@mode = off) { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; } \ No newline at end of file diff --git a/assets/less/lib/normalize.less b/assets/less/docs/normalize.less similarity index 100% rename from assets/less/lib/normalize.less rename to assets/less/docs/normalize.less diff --git a/dist/css/docs.css b/dist/css/docs.css index b7a17840..d63d5952 100644 --- a/dist/css/docs.css +++ b/dist/css/docs.css @@ -1 +1 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:dotted thin}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;font-size:16px;font-size:1.6rem;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:64px;font-size:6.4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;font-size:14px;font-size:1.4rem}header{padding:60px 0;margin-bottom:20px}header p{font-size:18px;font-size:1.8rem}a{text-decoration:none;color:#3498DB;border-bottom:1px solid currentColor;transition:color .3s ease,border .3s ease}a:focus,a:hover{color:#000}section{padding-bottom:80px}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player:-webkit-full-screen,.example-video .player-fullscreen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-moz-full-screen,.example-video .player-fullscreen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-ms-fullscreen,.example-video .player-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:fullscreen,.example-video .player-fullscreen,.example-video .player:fullscreen{max-width:none} \ No newline at end of file +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;font-size:16px;font-size:1.6rem;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:6.4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;font-size:14px;font-size:1.4rem}header{padding:60px 0;margin-bottom:20px}header p{font-size:18px;font-size:1.8rem}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 25px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}section{padding-bottom:80px}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player:-webkit-full-screen,.example-video .player-fullscreen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-moz-full-screen,.example-video .player-fullscreen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-ms-fullscreen,.example-video .player-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:fullscreen,.example-video .player-fullscreen,.example-video .player:fullscreen{max-width:none} \ No newline at end of file diff --git a/dist/js/plyr.js b/dist/js/plyr.js index 2ee7e12b..6a806f74 100644 --- a/dist/js/plyr.js +++ b/dist/js/plyr.js @@ -1 +1 @@ -!function(e){"use strict";function t(){var e,t,n,r=navigator.userAgent,o=navigator.appName,s=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(o="IE",s="11;"):-1!==(t=r.indexOf("MSIE"))?(o="IE",s=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(o="Chrome",s=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(o="Safari",s=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(s=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(o="Firefox",s=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(o=r.substring(e,t),s=r.substring(t+1),o.toLowerCase()==o.toUpperCase()&&(o=navigator.appName)),-1!==(n=s.indexOf(";"))&&(s=s.substring(0,n)),-1!==(n=s.indexOf(" "))&&(s=s.substring(0,n)),i=parseInt(""+s,10),isNaN(i)&&(s=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10)),[o,i]}function n(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 r=n>0?t.cloneNode(!0):t,o=e[n],s=o.parentNode,i=o.nextSibling;r.appendChild(o),i?s.insertBefore(r,i):s.appendChild(r)}}function o(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function s(e,t,n){e.addEventListener(t,n,!1)}function i(e){var t=l().isFullScreen()?{x:0,y:0}:a(e.currentTarget);return{x:e.clientX-t.x,y:e.clientY-t.y}}function a(e){for(var t=0,n=0;e;)t+=e.offsetLeft-e.scrollLeft+e.clientLeft,n+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:t,y:n}}function c(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},c(e[n],t[n])):e[n]=t[n];return e}function l(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;n++)if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}return"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName=e.prefix+"fullscreenchange",e.isFullScreen=function(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;default:return document[this.prefix+"FullScreen"]}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+"RequestFullScreen"]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+"CancelFullScreen"]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function u(e){function a(){for(j.subcount=0;f(j.captions[j.subcount][0])j.captions.length-1){j.subcount=j.captions.length-1;break}}function c(){o(j.container,p.classes.captions.enabled,!0),p.captions.defaultActive&&(o(j.container,p.classes.captions.active,!0),j.buttons.captions.setAttribute("checked","checked"))}function u(e){var t=[];return t=e.split(" --> "),m(t[0])}function f(e){var t=[];return t=e.split(" --> "),m(t[1])}function m(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function b(e){return j.container.querySelectorAll(e)}function g(e){return b(e)[0]}function v(){p.debug&&console.log("Injecting custom controls");var e=p.html;e=n(e,"{aria-label}",p.playAriaLabel),e=n(e,"{id}",j.random),j.container.insertAdjacentHTML("beforeend",e)}function x(){j.controls=g(p.selectors.controls),j.buttons={},j.buttons.play=g(p.selectors.buttons.play),j.buttons.pause=g(p.selectors.buttons.pause),j.buttons.restart=g(p.selectors.buttons.restart),j.buttons.rewind=g(p.selectors.buttons.rewind),j.buttons.forward=g(p.selectors.buttons.forward),j.buttons.mute=g(p.selectors.buttons.mute),j.buttons.captions=g(p.selectors.buttons.captions),j.buttons.fullscreen=g(p.selectors.buttons.fullscreen),j.progress={},j.progress.bar=g(p.selectors.progress),j.progress.text=j.progress.bar.getElementsByTagName("span")[0],j.volume=g(p.selectors.buttons.volume),j.duration=g(p.selectors.duration),j.seekTime=b(p.selectors.seekTime)}function y(){if(j.media=j.container.querySelectorAll("audio, video")[0],!j.media)return console.error("No audio or video element found!"),!1;if(o(j.container,p.classes.stopped,null===j.media.getAttribute("autoplay")),j.media.removeAttribute("controls"),j.type="video"==j.media.tagName.toLowerCase()?"video":"audio","video"===j.type){var e=document.createElement("div");e.setAttribute("class",p.classes.videoContainer),r(j.media,e),j.videoContainer=e}}function h(){if("video"===j.type){j.videoContainer.insertAdjacentHTML("afterbegin","
"),j.captionsContainer=g(p.selectors.captions),j.isTextTracks=!1,j.media.textTracks&&(j.isTextTracks=!0);for(var e,t="",n=j.media.childNodes,r=0;r=31||"Safari"===j.browserName&&j.browserMajorVersion>=7)for(p.debug&&console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+"),j.isTextTracks=!1,l={},i=j.media.textTracks,a=0;au(j.captions[j.subcount][0])&&j.media.currentTime.toFixed(1)f(j.captions[j.subcount][0])&&j.subcountt?0:t,j.isTextTracks||"video"!==j.type||a(j)}function C(e){"undefined"==typeof e&&(e=p.seekInterval);var t=j.media.currentTime+e;j.media.currentTime=t>j.media.duration?j.media.duration:t,j.isTextTracks||"video"!==j.type||a(j)}function I(){d.isFullScreen()?d.cancelFullScreen():d.requestFullScreen(j.container)}function N(e){j.volume.value=e,j.media.volume=parseFloat(e/10),E()}function L(e){"undefined"==typeof active&&(e=!j.media.muted,j.buttons.mute.checked=e),j.media.muted=e,E()}function A(e){"undefined"==typeof e&&(e=-1===j.container.className.indexOf(p.classes.captions.active),j.buttons.captions.checked=e),e?o(j.container,p.classes.captions.active,!0):o(j.container,p.classes.captions.active)}function E(){o(j.container,p.classes.muted,0===j.media.volume||j.media.muted)}function O(){s(j.buttons.fullscreen,"click",I),"video"===j.type&&p.click&&s(j.videoContainer,"click",function(){j.media.paused?w():j.media.ended?F():S()}),s(j.buttons.play,"click",function(){w(),j.buttons.pause.focus()}),s(j.buttons.pause,"click",function(){S(),j.buttons.play.focus()}),s(j.buttons.restart,"click",F),s(j.buttons.rewind,"click",function(){M(p.seekInterval)}),s(j.buttons.forward,"click",function(){C(p.seekInterval)}),s(j.volume,"change",function(){N(this.value)}),s(j.buttons.mute,"change",function(){L(this.checked)}),s(j.media,"timeupdate",function(){j.secs=parseInt(j.media.currentTime%60),j.mins=parseInt(j.media.currentTime/60%60),j.secs=("0"+j.secs).slice(-2),j.mins=("0"+j.mins).slice(-2),j.duration.innerHTML=j.mins+":"+j.secs}),s(j.media,"timeupdate",function(){j.percent=100/j.media.duration*j.media.currentTime,j.percent>0&&(j.progress.bar.value=j.percent,j.progress.text.innerHTML=j.percent)}),s(j.progress.bar,"click",function(e){j.pos=i(e).x/this.offsetWidth,j.media.currentTime=j.pos*j.media.duration,j.isTextTracks||"video"!==j.type||a(j)}),s(j.buttons.captions,"click",function(){A(this.checked)}),s(j.media,"ended",function(){"video"===j.type&&(j.captionsContainer.innerHTML=""),o(j.container,p.classes.stopped,!0),o(j.container,p.classes.playing)})}function V(){return d=l(),j.browserInfo=t(),j.browserName=j.browserInfo[0],j.browserMajorVersion=j.browserInfo[1],p.debug&&console.log(j.browserName+" "+j.browserMajorVersion),"IE"!==j.browserName||8!==j.browserMajorVersion&&9!==j.browserMajorVersion?(p.playAriaLabel="undefined"!=typeof p.title&&p.title.length?"Play "+p.title:"Play",y(),j.random=Math.floor(1e4*Math.random()),v(),x(),N(p.volume),k(),h(),T(),O(),void 0):(p.debug&&console.error("Browser not suppported."),!1)}var j=this;return j.container=e,V(),{media:j.media,play:w,pause:S,restart:F,rewind:M,forward:C,setVolume:N,toggleMute:L,toggleCaptions:A}}var d,p,f={enabled:!0,debug:!1,seekInterval:10,volume:5,click:!0,selectors:{container:".player",controls:".player-controls",buttons:{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:".player-progress",captions:".player-captions",duration:".player-duration",seekTime:".player-seek-time"},classes:{videoContainer:"player-video",stopped:"stopped",playing:"playing",muted:"muted",captions:{active:"captions-active",enabled:"captions-enabled"},fullscreen:{enabled:"fullscreen-enabled"}},captions:{defaultActive:!1},fullscreen:{enabled:!0}};e.setup=function(e){if(p=c(f,e),!p.enabled)return!1;for(var t=document.querySelectorAll(p.selectors.container),n=t.length-1;n>=0;n--){var r=t[n];r.plyr=new u(r)}}}(this.plyr=this.plyr||{}); \ No newline at end of file +!function(e){"use strict";function t(){var e,t,n,r=navigator.userAgent,o=navigator.appName,s=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(o="IE",s="11;"):-1!==(t=r.indexOf("MSIE"))?(o="IE",s=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(o="Chrome",s=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(o="Safari",s=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(s=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(o="Firefox",s=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(o=r.substring(e,t),s=r.substring(t+1),o.toLowerCase()==o.toUpperCase()&&(o=navigator.appName)),-1!==(n=s.indexOf(";"))&&(s=s.substring(0,n)),-1!==(n=s.indexOf(" "))&&(s=s.substring(0,n)),i=parseInt(""+s,10),isNaN(i)&&(s=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10)),[o,i]}function n(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 r=n>0?t.cloneNode(!0):t,o=e[n],s=o.parentNode,i=o.nextSibling;r.appendChild(o),i?s.insertBefore(r,i):s.appendChild(r)}}function o(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function s(e,t,n){e.addEventListener(t,n,!1)}function i(e){var t=l().isFullScreen()?{x:0,y:0}:a(e.currentTarget);return{x:e.clientX-t.x,y:e.clientY-t.y}}function a(e){for(var t=0,n=0;e;)t+=e.offsetLeft-e.scrollLeft+e.clientLeft,n+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:t,y:n}}function c(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},c(e[n],t[n])):e[n]=t[n];return e}function l(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;n++)if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}return"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName=e.prefix+"fullscreenchange",e.isFullScreen=function(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;default:return document[this.prefix+"FullScreen"]}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+"RequestFullScreen"]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+"CancelFullScreen"]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function u(e){function a(){for(j.subcount=0;f(j.captions[j.subcount][0])j.captions.length-1){j.subcount=j.captions.length-1;break}}function c(){o(j.container,p.classes.captions.enabled,!0),p.captions.defaultActive&&(o(j.container,p.classes.captions.active,!0),j.buttons.captions.setAttribute("checked","checked"))}function u(e){var t=[];return t=e.split(" --> "),m(t[0])}function f(e){var t=[];return t=e.split(" --> "),m(t[1])}function m(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function b(e){return j.container.querySelectorAll(e)}function g(e){return b(e)[0]}function v(){p.debug&&console.log("Injecting custom controls");var e=p.html;e=n(e,"{aria-label}",p.playAriaLabel),e=n(e,"{id}",j.random),j.container.insertAdjacentHTML("beforeend",e)}function y(){j.controls=g(p.selectors.controls),j.buttons={},j.buttons.play=g(p.selectors.buttons.play),j.buttons.pause=g(p.selectors.buttons.pause),j.buttons.restart=g(p.selectors.buttons.restart),j.buttons.rewind=g(p.selectors.buttons.rewind),j.buttons.forward=g(p.selectors.buttons.forward),j.buttons.mute=g(p.selectors.buttons.mute),j.buttons.captions=g(p.selectors.buttons.captions),j.buttons.fullscreen=g(p.selectors.buttons.fullscreen),j.progress={},j.progress.bar=g(p.selectors.progress),j.progress.text=j.progress.bar.getElementsByTagName("span")[0],j.volume=g(p.selectors.buttons.volume),j.duration=g(p.selectors.duration),j.seekTime=b(p.selectors.seekTime)}function x(){if(j.media=j.container.querySelectorAll("audio, video")[0],!j.media)return console.error("No audio or video element found!"),!1;if(o(j.container,p.classes.stopped,null===j.media.getAttribute("autoplay")),j.media.removeAttribute("controls"),j.type="video"==j.media.tagName.toLowerCase()?"video":"audio","video"===j.type){var e=document.createElement("div");e.setAttribute("class",p.classes.videoContainer),r(j.media,e),j.videoContainer=e}}function h(){if("video"===j.type){j.videoContainer.insertAdjacentHTML("afterbegin","
"),j.captionsContainer=g(p.selectors.captions),j.isTextTracks=!1,j.media.textTracks&&(j.isTextTracks=!0);for(var e,t="",n=j.media.childNodes,r=0;r=31||"Safari"===j.browserName&&j.browserMajorVersion>=7)for(p.debug&&console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+"),j.isTextTracks=!1,l={},i=j.media.textTracks,a=0;au(j.captions[j.subcount][0])&&j.media.currentTime.toFixed(1)f(j.captions[j.subcount][0])&&j.subcountt?0:t,j.isTextTracks||"video"!==j.type||a(j)}function C(e){"undefined"==typeof e&&(e=p.seekInterval);var t=j.media.currentTime+e;j.media.currentTime=t>j.media.duration?j.media.duration:t,j.isTextTracks||"video"!==j.type||a(j)}function I(){d.isFullScreen()?d.cancelFullScreen():d.requestFullScreen(j.container)}function N(e){"undefined"==typeof e&&(e=p.volume),e>10&&(e=10),j.volume.value=e,j.media.volume=parseFloat(e/10),E()}function L(e){"undefined"==typeof active&&(e=!j.media.muted,j.buttons.mute.checked=e),j.media.muted=e,E()}function A(e){"undefined"==typeof e&&(e=-1===j.container.className.indexOf(p.classes.captions.active),j.buttons.captions.checked=e),e?o(j.container,p.classes.captions.active,!0):o(j.container,p.classes.captions.active)}function E(){o(j.container,p.classes.muted,0===j.media.volume||j.media.muted)}function O(){s(j.buttons.fullscreen,"click",I),"video"===j.type&&p.click&&s(j.videoContainer,"click",function(){j.media.paused?w():j.media.ended?F():S()}),s(j.buttons.play,"click",function(){w(),j.buttons.pause.focus()}),s(j.buttons.pause,"click",function(){S(),j.buttons.play.focus()}),s(j.buttons.restart,"click",F),s(j.buttons.rewind,"click",function(){M(p.seekInterval)}),s(j.buttons.forward,"click",function(){C(p.seekInterval)}),s(j.volume,"change",function(){N(this.value)}),s(j.buttons.mute,"change",function(){L(this.checked)}),s(j.media,"timeupdate",function(){j.secs=parseInt(j.media.currentTime%60),j.mins=parseInt(j.media.currentTime/60%60),j.secs=("0"+j.secs).slice(-2),j.mins=("0"+j.mins).slice(-2),j.duration.innerHTML=j.mins+":"+j.secs}),s(j.media,"timeupdate",function(){j.percent=100/j.media.duration*j.media.currentTime,j.percent>0&&(j.progress.bar.value=j.percent,j.progress.text.innerHTML=j.percent)}),s(j.progress.bar,"click",function(e){j.pos=i(e).x/this.offsetWidth,j.media.currentTime=j.pos*j.media.duration,j.isTextTracks||"video"!==j.type||a(j)}),s(j.buttons.captions,"click",function(){A(this.checked)}),s(j.media,"ended",function(){"video"===j.type&&(j.captionsContainer.innerHTML=""),o(j.container,p.classes.stopped,!0),o(j.container,p.classes.playing)})}function V(){return d=l(),j.browserInfo=t(),j.browserName=j.browserInfo[0],j.browserMajorVersion=j.browserInfo[1],p.debug&&console.log(j.browserName+" "+j.browserMajorVersion),"IE"!==j.browserName||8!==j.browserMajorVersion&&9!==j.browserMajorVersion?(p.playAriaLabel="undefined"!=typeof p.title&&p.title.length?"Play "+p.title:"Play",x(),j.random=Math.floor(1e4*Math.random()),v(),y(),N(p.volume),k(),h(),T(),O(),void 0):(p.debug&&console.error("Browser not suppported."),!1)}var j=this;return j.container=e,V(),{media:j.media,play:w,pause:S,restart:F,rewind:M,forward:C,setVolume:N,toggleMute:L,toggleCaptions:A}}var d,p,f={enabled:!0,debug:!1,seekInterval:10,volume:5,click:!0,selectors:{container:".player",controls:".player-controls",buttons:{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:".player-progress",captions:".player-captions",duration:".player-duration",seekTime:".player-seek-time"},classes:{videoContainer:"player-video",stopped:"stopped",playing:"playing",muted:"muted",captions:{active:"captions-active",enabled:"captions-enabled"},fullscreen:{enabled:"fullscreen-enabled"}},captions:{defaultActive:!1},fullscreen:{enabled:!0}};e.setup=function(e){if(p=c(f,e),!p.enabled)return!1;for(var t=document.querySelectorAll(p.selectors.container),n=t.length-1;n>=0;n--){var r=t[n];r.plyr=new u(r)}}}(this.plyr=this.plyr||{}); \ No newline at end of file diff --git a/index.html b/index.html index aede91e0..c6e15d78 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@

Plyr

A simple HTML5 media player

+ Download on Github
@@ -35,6 +36,7 @@ + Big Buck Bunny. More info can be found at peach.blender.org.