aboutsummaryrefslogtreecommitdiffstats
path: root/docs
diff options
context:
space:
mode:
Diffstat (limited to 'docs')
-rw-r--r--docs/dist/docs.css2
-rw-r--r--docs/dist/docs.js2
-rw-r--r--docs/dist/templates.js2
-rw-r--r--docs/error.html28
-rw-r--r--docs/index.html152
-rw-r--r--docs/src/js/docs.js13
-rw-r--r--docs/src/less/docs.less170
-rw-r--r--docs/src/less/lib/fontface.less24
-rw-r--r--docs/src/less/lib/mixins.less32
-rw-r--r--docs/src/templates/controls.html118
10 files changed, 287 insertions, 256 deletions
diff --git a/docs/dist/docs.css b/docs/dist/docs.css
index 7737f4d8..55fb76d7 100644
--- a/docs/dist/docs.css
+++ b/docs/dist/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: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(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff"),url(//cdn.plyr.io/fonts/avenir-medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff"),url(//cdn.plyr.io/fonts/avenir-bold.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}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:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}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}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.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.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px} \ 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(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff"),url(//cdn.plyr.io/fonts/avenir-medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff"),url(//cdn.plyr.io/fonts/avenir-bold.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}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:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}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}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:520px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px} \ No newline at end of file
diff --git a/docs/dist/docs.js b/docs/dist/docs.js
index 3d9b0748..b478db69 100644
--- a/docs/dist/docs.js
+++ b/docs/dist/docs.js
@@ -1 +1 @@
-var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,r,a){function i(){}function o(){}i.prototype=t,o.prototype=t.subs;var l,u=new i;u.subs=new o,u.subsText={},u.buf="",s=s||{},u.stackSubs=s,u.subsText=a;for(l in n)s[l]||(s[l]=n[l]);for(l in s)u.subs[l]=s[l];r=r||{},u.stackPartials=r;for(l in e)r[l]||(r[l]=e[l]);for(l in r)u.partials[l]=r[l];return u}function s(t){return String(null===t||void 0===t?"":t)}function r(t){return t=s(t),c.test(t)?t.replace(a,"&amp;").replace(i,"&lt;").replace(o,"&gt;").replace(l,"&#39;").replace(u,"&quot;"):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:r,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],r=n[s.name];if(s.instance&&s.base==r)return s.instance;if("string"==typeof r){if(!this.c)throw new Error("No compiler available.");r=this.c.compile(r,this.options)}if(!r)return null;if(this.partials[t].base=r,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);r=e(r,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=r,r},rp:function(t,n,e,s){var r=this.ep(t,e);return r?r.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var r=0;r<s.length;r++)t.push(s[r]),e(t,n,this),t.pop()},s:function(t,n,e,s,r,a,i){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,r,a,i)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,r){var a,i=t.split("."),o=this.f(i[0],e,s,r),l=this.options.modelGet,u=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var c=1;c<i.length;c++)a=n(i[c],o,l),void 0!==a?(u=o,o=a):o="";return r&&!o?!1:(r||"function"!=typeof o||(e.push(u),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,r){for(var a=!1,i=null,o=!1,l=this.options.modelGet,u=e.length-1;u>=0;u--)if(i=e[u],a=n(t,i,l),void 0!==a){o=!0;break}return o?(r||"function"!=typeof a||(a=this.mv(a,e,s)),a):r?!1:""},ls:function(t,n,e,r,a){var i=this.options.delimiters;return this.options.delimiters=a,this.b(this.ct(s(t.call(n,r)),n,e)),this.options.delimiters=i,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,r,a,i){var o,l=n[n.length-1],u=t.call(l);return"function"==typeof u?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(u,l,e,o.substring(r,a),i)):u},mv:function(t,n,e){var r=n[n.length-1],a=t.call(r);return"function"==typeof a?this.ct(s(a.call(r)),r,e):a},sub:function(t,n,e,s){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,s),this.activeSub=!1)}};var a=/&/g,i=/</g,o=/>/g,l=/\'/g,u=/\"/g,c=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,r=t.length;r>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function r(n,e,s,o){var l=[],u=null,c=null,p=null;for(c=s[s.length-1];n.length>0;){if(p=n.shift(),c&&"<"==c.tag&&!(p.tag in k))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||a(p,o))s.push(p),p.nodes=r(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(u=s.pop(),p.n!=u.n&&!i(p.n,u.n,o))throw new Error("Nesting error: "+u.n+" vs. "+p.n);return u.end=p.i,l}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}l.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return l}function a(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function i(t,n,e){for(var s=0,r=e.length;r>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+u(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function l(t){var n=[];for(var e in t.partials)n.push('"'+u(e)+'":{name:"'+u(t.partials[e].name)+'", '+l(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function u(t){return t.replace(y,"\\\\").replace(g,'\\"').replace(d,"\\n").replace(v,"\\r").replace(m,"\\u2028").replace(x,"\\u2029")}function c(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+w++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+u(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+c(t.n)+'("'+u(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var h=/\S/,g=/\"/g,d=/\n/g,v=/\r/g,y=/\\/g,m=/\u2028/,x=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,a){function i(){y.length>0&&(m.push({tag:"_t",text:new String(y)}),y="")}function o(){for(var n=!0,e=w;e<m.length;e++)if(n=t.tags[m[e].tag]<t.tags._v||"_t"==m[e].tag&&null===m[e].text.match(h),!n)return!1;return n}function l(t,n){if(i(),t&&o())for(var e,s=w;s<m.length;s++)m[s].text&&((e=m[s+1])&&">"==e.tag&&(e.indent=m[s].text.toString()),m.splice(s,1));else n||m.push({tag:"\n"});x=!1,w=m.length}function u(t,n){var s="="+S,r=t.indexOf(s,n),a=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return T=a[0],S=a[a.length-1],r+s.length-1}var c=r.length,p=0,b=1,f=2,g=p,d=null,v=null,y="",m=[],x=!1,k=0,w=0,T="{{",S="}}";for(a&&(a=a.split(" "),T=a[0],S=a[1]),k=0;c>k;k++)g==p?s(T,r,k)?(--k,i(),g=b):"\n"==r.charAt(k)?l(x):y+=r.charAt(k):g==b?(k+=T.length-1,v=t.tags[r.charAt(k+1)],d=v?r.charAt(k+1):"_v","="==d?(k=u(r,k),g=p):(v&&k++,g=f),x=k):s(S,r,k)?(m.push({tag:d,n:e(y),otag:T,ctag:S,i:"/"==d?x-T.length:k+S.length}),y="",k+=S.length-1,g=p,"{"==d&&("}}"==S?k++:n(m[m.length-1]))):y+=r.charAt(k);return l(x,!0),m};var k={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+l(n)+"}"};var w=0;t.generate=function(n,e,s){w=0;var r={code:"",subs:{},partials:{}};return t.walk(n,r),s.asString?this.stringify(r,e,s):this.makeTemplate(r,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+c(n.n)+'("'+u(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+c(n.n)+'("'+u(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var r=e.partials[p(n,e)];r.subs=s.subs,r.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+u(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+c(t.n)+'("'+u(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+u(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,r=0,a=n.length;a>r;r++)s=t.codegen[n[r].tag],s&&s(n[r],e);return e},t.parse=function(t,n,e){return e=e||{},r(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),r=this.cache[s];if(r){var a=r.partials;for(var i in a)delete a[i].instance;return r}return r=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=r}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,r){var a=this.f(n,e,s,0),i=e;return a&&(i=i.concat(a)),t.Template.prototype.rp.call(this,n,i,s,r)}var e=function(e,s,r){this.rp=n,t.Template.call(this,e,s,r)};e.prototype=t.Template.prototype;var s,r=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return r.prototype=t,s=new r,{to_html:function(t,n,e,r){var a=s.compile(t),i=a.render(n,e);return r?(r(i),void 0):i}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="player-controls">'),s.b("\n"+e),s.b(' <div class="player-progress">'),s.b("\n"+e),s.b(' <label for="seek{id}" class="sr-only">Seek</label>'),s.b("\n"+e),s.b(' <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">'),s.b("\n"+e),s.b(' <progress class="player-progress-played" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% played"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(' <progress class="player-progress-buffer" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% buffered"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(' <span class="player-controls-playback">'),s.b("\n"+e),s.b(' <button type="button" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-restart"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Restart</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="rewind">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-rewind"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Rewind {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="play">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-play"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Play</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="pause">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-pause"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Pause</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="fast-forward">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-fast-forward"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Forward {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Time</span>'),s.b("\n"+e),s.b(' <span class="player-duration">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-controls-sound">'),s.b("\n"+e),s.b(' <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">'),s.b("\n"+e),s.b(' <label id="mute{id}" for="mute{id}">'),s.b("\n"+e),s.b(' <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-volume"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <label for="volume{id}" class="sr-only">Volume</label>'),s.b("\n"+e),s.b(' <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">'),s.b("\n"),s.b("\n"+e),s.b(' <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">'),s.b("\n"+e),s.b(' <label for="captions{id}">'),s.b("\n"+e),s.b(' <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-captions-off"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <button type="button" data-player="fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Fullscreen</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b("</div>"),s.fl()},partials:{},subs:{}}),plyr.setup({debug:!0,title:"Video demo",html:templates.controls.render({}),captions:{defaultActive:!0},tooltips:!0}),document.domain.indexOf("plyr.io")>-1&&(!function(t,n,e,s,r,a,i){t.GoogleAnalyticsObject=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},t[r].l=1*new Date,a=n.createElement(e),i=n.getElementsByTagName(e)[0],a.async=1,a.src=s,i.parentNode.insertBefore(a,i)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview")); \ No newline at end of file
+var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,a,r){function i(){}function o(){}i.prototype=t,o.prototype=t.subs;var l,u=new i;u.subs=new o,u.subsText={},u.buf="",s=s||{},u.stackSubs=s,u.subsText=r;for(l in n)s[l]||(s[l]=n[l]);for(l in s)u.subs[l]=s[l];a=a||{},u.stackPartials=a;for(l in e)a[l]||(a[l]=e[l]);for(l in a)u.partials[l]=a[l];return u}function s(t){return String(null===t||void 0===t?"":t)}function a(t){return t=s(t),c.test(t)?t.replace(r,"&amp;").replace(i,"&lt;").replace(o,"&gt;").replace(l,"&#39;").replace(u,"&quot;"):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:a,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],a=n[s.name];if(s.instance&&s.base==a)return s.instance;if("string"==typeof a){if(!this.c)throw new Error("No compiler available.");a=this.c.compile(a,this.options)}if(!a)return null;if(this.partials[t].base=a,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);a=e(a,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=a,a},rp:function(t,n,e,s){var a=this.ep(t,e);return a?a.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var a=0;a<s.length;a++)t.push(s[a]),e(t,n,this),t.pop()},s:function(t,n,e,s,a,r,i){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,a,r,i)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,a){var r,i=t.split("."),o=this.f(i[0],e,s,a),l=this.options.modelGet,u=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var c=1;c<i.length;c++)r=n(i[c],o,l),void 0!==r?(u=o,o=r):o="";return a&&!o?!1:(a||"function"!=typeof o||(e.push(u),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,a){for(var r=!1,i=null,o=!1,l=this.options.modelGet,u=e.length-1;u>=0;u--)if(i=e[u],r=n(t,i,l),void 0!==r){o=!0;break}return o?(a||"function"!=typeof r||(r=this.mv(r,e,s)),r):a?!1:""},ls:function(t,n,e,a,r){var i=this.options.delimiters;return this.options.delimiters=r,this.b(this.ct(s(t.call(n,a)),n,e)),this.options.delimiters=i,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,a,r,i){var o,l=n[n.length-1],u=t.call(l);return"function"==typeof u?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(u,l,e,o.substring(a,r),i)):u},mv:function(t,n,e){var a=n[n.length-1],r=t.call(a);return"function"==typeof r?this.ct(s(r.call(a)),a,e):r},sub:function(t,n,e,s){var a=this.subs[t];a&&(this.activeSub=t,a(n,e,this,s),this.activeSub=!1)}};var r=/&/g,i=/</g,o=/>/g,l=/\'/g,u=/\"/g,c=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,a=t.length;a>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function a(n,e,s,o){var l=[],u=null,c=null,p=null;for(c=s[s.length-1];n.length>0;){if(p=n.shift(),c&&"<"==c.tag&&!(p.tag in k))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||r(p,o))s.push(p),p.nodes=a(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(u=s.pop(),p.n!=u.n&&!i(p.n,u.n,o))throw new Error("Nesting error: "+u.n+" vs. "+p.n);return u.end=p.i,l}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}l.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return l}function r(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function i(t,n,e){for(var s=0,a=e.length;a>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+u(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function l(t){var n=[];for(var e in t.partials)n.push('"'+u(e)+'":{name:"'+u(t.partials[e].name)+'", '+l(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function u(t){return t.replace(m,"\\\\").replace(g,'\\"').replace(d,"\\n").replace(v,"\\r").replace(y,"\\u2028").replace(x,"\\u2029")}function c(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+w++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+u(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+c(t.n)+'("'+u(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var h=/\S/,g=/\"/g,d=/\n/g,v=/\r/g,m=/\\/g,y=/\u2028/,x=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(a,r){function i(){m.length>0&&(y.push({tag:"_t",text:new String(m)}),m="")}function o(){for(var n=!0,e=w;e<y.length;e++)if(n=t.tags[y[e].tag]<t.tags._v||"_t"==y[e].tag&&null===y[e].text.match(h),!n)return!1;return n}function l(t,n){if(i(),t&&o())for(var e,s=w;s<y.length;s++)y[s].text&&((e=y[s+1])&&">"==e.tag&&(e.indent=y[s].text.toString()),y.splice(s,1));else n||y.push({tag:"\n"});x=!1,w=y.length}function u(t,n){var s="="+S,a=t.indexOf(s,n),r=e(t.substring(t.indexOf("=",n)+1,a)).split(" ");return T=r[0],S=r[r.length-1],a+s.length-1}var c=a.length,p=0,b=1,f=2,g=p,d=null,v=null,m="",y=[],x=!1,k=0,w=0,T="{{",S="}}";for(r&&(r=r.split(" "),T=r[0],S=r[1]),k=0;c>k;k++)g==p?s(T,a,k)?(--k,i(),g=b):"\n"==a.charAt(k)?l(x):m+=a.charAt(k):g==b?(k+=T.length-1,v=t.tags[a.charAt(k+1)],d=v?a.charAt(k+1):"_v","="==d?(k=u(a,k),g=p):(v&&k++,g=f),x=k):s(S,a,k)?(y.push({tag:d,n:e(m),otag:T,ctag:S,i:"/"==d?x-T.length:k+S.length}),m="",k+=S.length-1,g=p,"{"==d&&("}}"==S?k++:n(y[y.length-1]))):m+=a.charAt(k);return l(x,!0),y};var k={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+l(n)+"}"};var w=0;t.generate=function(n,e,s){w=0;var a={code:"",subs:{},partials:{}};return t.walk(n,a),s.asString?this.stringify(a,e,s):this.makeTemplate(a,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+c(n.n)+'("'+u(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+c(n.n)+'("'+u(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var a=e.partials[p(n,e)];a.subs=s.subs,a.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+u(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+c(t.n)+'("'+u(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+u(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,a=0,r=n.length;r>a;a++)s=t.codegen[n[a].tag],s&&s(n[a],e);return e},t.parse=function(t,n,e){return e=e||{},a(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),a=this.cache[s];if(a){var r=a.partials;for(var i in r)delete r[i].instance;return a}return a=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=a}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,a){var r=this.f(n,e,s,0),i=e;return r&&(i=i.concat(r)),t.Template.prototype.rp.call(this,n,i,s,a)}var e=function(e,s,a){this.rp=n,t.Template.call(this,e,s,a)};e.prototype=t.Template.prototype;var s,a=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return a.prototype=t,s=new a,{to_html:function(t,n,e,a){var r=s.compile(t),i=r.render(n,e);return a?(a(i),void 0):i}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="player-controls">'),s.b("\n"+e),s.b(' <div class="player-progress">'),s.b("\n"+e),s.b(' <label for="seek{id}" class="sr-only">Seek</label>'),s.b("\n"+e),s.b(' <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">'),s.b("\n"+e),s.b(' <progress class="player-progress-played" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% played"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(' <progress class="player-progress-buffer" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% buffered"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(' <span class="player-controls-left">'),s.b("\n"+e),s.b(' <button type="button" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-restart"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Restart</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="rewind">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-rewind"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Rewind {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="play">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-play"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Play</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="pause">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-pause"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Pause</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="fast-forward">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-fast-forward"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Forward {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Current time</span>'),s.b("\n"+e),s.b(' <span class="player-current-time">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Duration</span>'),s.b("\n"+e),s.b(' <span class="player-duration">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-controls-right">'),s.b("\n"+e),s.b(' <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">'),s.b("\n"+e),s.b(' <label id="mute{id}" for="mute{id}">'),s.b("\n"+e),s.b(' <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-volume"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <label for="volume{id}" class="sr-only">Volume</label>'),s.b("\n"+e),s.b(' <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">'),s.b("\n"),s.b("\n"+e),s.b(' <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">'),s.b("\n"+e),s.b(' <label for="captions{id}">'),s.b("\n"+e),s.b(' <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-captions-off"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <button type="button" data-player="fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Fullscreen</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b("</div>"),s.fl()},partials:{},subs:{}}),plyr.setup({debug:!0,title:"Video demo",html:templates.controls.render({}),captions:{defaultActive:!0},onSetup:function(){var t=this,n=t.media.tagName.toLowerCase(),e=document.querySelector("[data-toggle='fullscreen']");console.log("✓ Setup done for <"+n+">"),"video"===n&&e&&e.addEventListener("click",t.toggleFullscreen,!1)}}),document.domain.indexOf("plyr.io")>-1&&(!function(t,n,e,s,a,r,i){t.GoogleAnalyticsObject=a,t[a]=t[a]||function(){(t[a].q=t[a].q||[]).push(arguments)},t[a].l=1*new Date,r=n.createElement(e),i=n.getElementsByTagName(e)[0],r.async=1,r.src=s,i.parentNode.insertBefore(r,i)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview")); \ No newline at end of file
diff --git a/docs/dist/templates.js b/docs/dist/templates.js
index b4cc6db2..0cb6d126 100644
--- a/docs/dist/templates.js
+++ b/docs/dist/templates.js
@@ -1,2 +1,2 @@
var templates = {};
- templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }}); \ No newline at end of file
+ templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-left\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Current time</span>");t.b("\n" + i);t.b(" <span class=\"player-current-time\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Duration</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-right\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }}); \ No newline at end of file
diff --git a/docs/error.html b/docs/error.html
index 05c19563..63cd0f0b 100644
--- a/docs/error.html
+++ b/docs/error.html
@@ -1,18 +1,18 @@
<!doctype html>
<html lang="en" class="error">
- <head>
- <meta charset="utf-8" />
- <title>Doh. Looks like something went wrong.</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <head>
+ <meta charset="utf-8" />
+ <title>Doh. Looks like something went wrong.</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- Docs styles -->
- <link rel="stylesheet" href="//cdn.plyr.io/1.0.24/docs.css">
- </head>
- <body>
- <main>
- <h1>Doh.</h1>
- <p>Looks like something went wrong.</p>
- <a href="http://plyr.io" class="btn">Back to plyr.io</a>
- </main>
- </body>
+ <!-- Docs styles -->
+ <link rel="stylesheet" href="//cdn.plyr.io/1.1.5/docs.css">
+ </head>
+ <body>
+ <main>
+ <h1>Doh.</h1>
+ <p>Looks like something went wrong.</p>
+ <a href="http://plyr.io" class="btn">Back to plyr.io</a>
+ </main>
+ </body>
</html> \ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index d8a08997..3d383d8c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,79 +1,95 @@
<!doctype html>
<html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>Plyr - A simple HTML5 media player</title>
- <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
- <meta name="author" content="Sam Potts">
- <meta name="viewport" content="width=device-width, initial-scale=1">
+ <head>
+ <meta charset="utf-8" />
+ <title>Plyr - A simple HTML5 media player</title>
+ <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
+ <meta name="author" content="Sam Potts">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- Styles -->
- <link rel="stylesheet" href="//cdn.plyr.io/1.0.24/plyr.css">
+ <!-- Styles -->
+ <link rel="stylesheet" href="//cdn.plyr.io/1.1.5/plyr.css">
- <!-- Docs styles -->
- <link rel="stylesheet" href="//cdn.plyr.io/1.0.24/docs.css">
- </head>
- <body>
- <header>
- <h1>Plyr</h1>
- <p>A simple HTML5 media player with custom controls and WebVTT captions.</p>
- <a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on GitHub</a>
- </header>
+ <!-- Docs styles -->
+ <link rel="stylesheet" href="//cdn.plyr.io/1.1.5/docs.css">
+ </head>
+ <body>
+ <header>
+ <h1>Plyr</h1>
+ <p>A simple HTML5 media player with custom controls and WebVTT captions.</p>
+ <a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on GitHub</a>
+ </header>
- <main>
- <section class="example-video">
- <div class="player">
- <video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
- <!-- Video files -->
- <source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
- <source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
-
- <!-- Text track file -->
- <track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default>
-
- <!-- Fallback for browsers that don't support the <video> element -->
- <div>
- <a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
- </div>
- </video>
- </div>
- <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
- </section>
+ <main>
+ <section class="example-video">
+ <div class="player">
+ <video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
+ <!-- Video files -->
+ <source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
+ <source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
+
+ <!-- Text track file -->
+ <track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default>
+
+ <!-- Fallback for browsers that don't support the <video> element -->
+ <div>
+ <a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
+ </div>
+ </video>
+ </div>
+ <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
+ </section>
- <section class="example-audio">
- <div class="player">
- <audio controls>
- <!-- Audio files -->
- <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
- <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
-
- <!-- Fallback for browsers that don't support the <audio> element -->
- <div>
- <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
- </div>
- </audio>
- </div>
- <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
- </section>
- </main>
+ <section class="example-audio">
+ <div class="player">
+ <audio controls>
+ <!-- Audio files -->
+ <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
+ <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
+
+ <!-- Fallback for browsers that don't support the <audio> element -->
+ <div>
+ <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
+ </div>
+ </audio>
+ </div>
+ <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
+ </section>
+ </main>
- <footer>
- <p>Used by &hellip;</p>
- <a href="https://selz.com" target="_blank" class="logo">
- <img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
- </a>
- </footer>
+ <footer>
+ <p>Used by &hellip;</p>
+ <a href="https://selz.com" target="_blank" class="logo">
+ <img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
+ </a>
+ </footer>
- <!-- Load SVG defs -->
- <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
- <script>
- (function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.24/sprite.svg");
- </script>
+ <!-- Load SVG defs -->
+ <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
+ <script>
+ (function(d, u){
+ var a = new XMLHttpRequest(),
+ b = d.body;
- <!-- Plyr core script -->
- <script src="//cdn.plyr.io/1.0.24/plyr.js"></script>
+ // Check for CORS support
+ // If you're loading from same domain, you can remove the if statement
+ if("withCredentials" in a) {
+ a.open("GET", u, true);
+ a.send();
+ a.onload = function(){
+ var c = d.createElement("div");
+ c.style.display="none";
+ c.innerHTML = a.responseText;
+ b.insertBefore(c, b.childNodes[0]);
+ }
+ }
+ })(document, "https://cdn.plyr.io/1.1.5/sprite.svg");
+ </script>
- <!-- Docs script -->
- <script src="//cdn.plyr.io/1.0.24/docs.js"></script>
- </body>
+ <!-- Plyr core script -->
+ <script src="//cdn.plyr.io/1.1.5/plyr.js"></script>
+
+ <!-- Docs script -->
+ <script src="//cdn.plyr.io/1.1.5/docs.js"></script>
+ </body>
</html> \ No newline at end of file
diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js
index b977290c..18e88d90 100644
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@@ -12,9 +12,20 @@ plyr.setup({
captions: {
defaultActive: true
},
- tooltips: true
+ onSetup: function() {
+ var player = this,
+ type = player.media.tagName.toLowerCase(),
+ toggle = document.querySelector("[data-toggle='fullscreen']");
+
+ console.log("✓ Setup done for <" + type + ">");
+
+ if(type === "video" && toggle) {
+ toggle.addEventListener("click", player.toggleFullscreen, false);
+ }
+ }
});
+
// Google analytics
// For demo site (http://[www.]plyr.io) only
if(document.domain.indexOf("plyr.io") > -1) {
diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less
index 7cb191d7..f68e0148 100644
--- a/docs/src/less/docs.less
+++ b/docs/src/less/docs.less
@@ -12,153 +12,153 @@
// Variables
// ---------------------------------------
// Colors
-@blue: #3498DB;
-@gray-dark: #343f4a;
-@gray: #565d64;
-@gray-light: #cbd0d3;
+@blue: #3498DB;
+@gray-dark: #343f4a;
+@gray: #565d64;
+@gray-light: #cbd0d3;
// Elements
-@link-color: @blue;
-@padding-base: 20px;
+@link-color: @blue;
+@padding-base: 20px;
// Breakpoints
-@screen-md: 768px;
+@screen-md: 768px;
// BORDER-BOX ALL THE THINGS!
// http://paulirish.com/2012/box-sizing-border-box-ftw/
*, *::after, *::before {
- box-sizing: border-box;
+ box-sizing: border-box;
}
// Base
body {
- font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
- background: #fff;
- line-height: 1.5;
- text-align: center;
- color: #6D797F;
+ font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ background: #fff;
+ line-height: 1.5;
+ text-align: center;
+ color: #6D797F;
}
// Error page
html.error,
.error body {
- height: 100%;
+ height: 100%;
}
.error body {
- width: 100%;
- display: table;
- table-layout: fixed;
+ width: 100%;
+ display: table;
+ table-layout: fixed;
}
.error main {
- display: table-cell;
- width: 100%;
- vertical-align: middle;
+ display: table-cell;
+ width: 100%;
+ vertical-align: middle;
}
// Type
h1,
h2 {
- letter-spacing: -.025em;
- color: #2E3C44;
- margin: 0 0 (@padding-base / 2);
- line-height: 1.2;
- .font-smoothing();
+ letter-spacing: -.025em;
+ color: #2E3C44;
+ margin: 0 0 (@padding-base / 2);
+ line-height: 1.2;
+ .font-smoothing();
}
h1 {
- .font-size(64);
- color: #3498DB;
+ .font-size(64);
+ color: #3498DB;
}
p,
small {
- margin: 0 0 @padding-base;
+ margin: 0 0 @padding-base;
}
small {
- display: block;
- padding: 0 (@padding-base / 2);
- .font-size(14);
+ display: block;
+ padding: 0 (@padding-base / 2);
+ .font-size(14);
}
// Header
header {
- padding: @padding-base;
- margin-bottom: @padding-base;
+ padding: @padding-base;
+ margin-bottom: @padding-base;
- p {
- .font-size(18);
- }
- @media (min-width: 560px) {
- padding-top: (@padding-base * 3);
- padding-bottom: (@padding-base * 3);
- }
+ p {
+ .font-size(18);
+ }
+ @media (min-width: 560px) {
+ padding-top: (@padding-base * 3);
+ padding-bottom: (@padding-base * 3);
+ }
}
// Sections
section {
- padding-bottom: @padding-base;
+ padding-bottom: @padding-base;
- @media (min-width: 560px) {
- padding-bottom: (@padding-base * 2);
- }
+ @media (min-width: 560px) {
+ padding-bottom: (@padding-base * 2);
+ }
}
// Links & Buttons
a {
- text-decoration: none;
- color: @link-color;
- border-bottom: 1px solid currentColor;
- transition: all .3s ease;
-
- &:hover,
- &:focus {
- color: #000;
- }
- &:focus {
- .tab-focus();
- }
- &.logo {
- border: 0;
- }
+ text-decoration: none;
+ color: @link-color;
+ border-bottom: 1px solid currentColor;
+ transition: all .3s ease;
+
+ &:hover,
+ &:focus {
+ color: #000;
+ }
+ &:focus {
+ .tab-focus();
+ }
+ &.logo {
+ border: 0;
+ }
}
.btn {
- display: inline-block;
- padding: (@padding-base / 2) (@padding-base * 1.5);
- background: @link-color;
- border: 0;
- color: #fff;
- .font-smoothing(on);
- font-weight: 600;
- border-radius: 3px;
- user-select: none;
-
- &:hover,
- &:focus {
- color: #fff;
- background: darken(@link-color, 5%);
- }
+ display: inline-block;
+ padding: (@padding-base / 2) (@padding-base * 1.5);
+ background: @link-color;
+ border: 0;
+ color: #fff;
+ .font-smoothing(on);
+ font-weight: 600;
+ border-radius: 3px;
+ user-select: none;
+
+ &:hover,
+ &:focus {
+ color: #fff;
+ background: darken(@link-color, 5%);
+ }
}
// Players
.example-audio .player {
- max-width: 480px;
+ max-width: 520px;
}
.example-video .player {
- max-width: 1200px;
+ max-width: 1200px;
}
.example-audio .player,
.example-video .player {
- margin: 0 auto @padding-base;
+ margin: 0 auto @padding-base;
- &-fullscreen,
- &.fullscreen-active {
- max-width: none;
- }
+ &-fullscreen,
+ &.fullscreen-active {
+ max-width: none;
+ }
}
// Footer
footer {
- margin-bottom: @padding-base;
+ margin-bottom: @padding-base;
- p {
- margin-bottom: (@padding-base / 2);
- }
+ p {
+ margin-bottom: (@padding-base / 2);
+ }
} \ No newline at end of file
diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less
index 704503d1..479f7fa4 100644
--- a/docs/src/less/lib/fontface.less
+++ b/docs/src/less/lib/fontface.less
@@ -1,16 +1,16 @@
@font-face {
- font-family: "Avenir";
- src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
- url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"),
- url("//cdn.plyr.io/fonts/avenir-medium.ttf") format("truetype");
- font-style: normal;
- font-weight: 400;
+ font-family: "Avenir";
+ src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
+ url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"),
+ url("//cdn.plyr.io/fonts/avenir-medium.ttf") format("truetype");
+ font-style: normal;
+ font-weight: 400;
}
@font-face {
- font-family: "Avenir";
- src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
- url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"),
- url("//cdn.plyr.io/fonts/avenir-bold.ttf") format("truetype");
- font-style: normal;
- font-weight: 600;
+ font-family: "Avenir";
+ src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
+ url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"),
+ url("//cdn.plyr.io/fonts/avenir-bold.ttf") format("truetype");
+ font-style: normal;
+ font-weight: 600;
} \ No newline at end of file
diff --git a/docs/src/less/lib/mixins.less b/docs/src/less/lib/mixins.less
index b3a1f63b..a4451b1c 100644
--- a/docs/src/less/lib/mixins.less
+++ b/docs/src/less/lib/mixins.less
@@ -5,38 +5,38 @@
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
// ---------------------------------------
.clearfix() {
- zoom: 1;
- &:before,
- &:after { content: ""; display: table; }
- &:after { clear: both; }
+ zoom: 1;
+ &:before,
+ &:after { content: ""; display: table; }
+ &:after { clear: both; }
}
// Webkit-style focus
// ---------------------------------------
.tab-focus() {
- // Default
- outline: thin dotted @gray-dark;
- // Webkit
- //outline: 5px auto -webkit-focus-ring-color;
- outline-offset: 1px;
+ // Default
+ outline: thin dotted @gray-dark;
+ // Webkit
+ //outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: 1px;
}
// Use rems for font sizing
// Leave <body> at 100%/16px
// ---------------------------------------
.font-size(@font-size: 16){
- @rem: round((@font-size / 16), 1);
- font-size: (@font-size * 1px);
- font-size: ~"@{rem}rem";
+ @rem: round((@font-size / 16), 1);
+ 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;
+ -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;
+ -moz-osx-font-smoothing: auto;
+ -webkit-font-smoothing: subpixel-antialiased;
} \ No newline at end of file
diff --git a/docs/src/templates/controls.html b/docs/src/templates/controls.html
index 6d93faa4..47ccbd55 100644
--- a/docs/src/templates/controls.html
+++ b/docs/src/templates/controls.html
@@ -1,62 +1,66 @@
<div class="player-controls">
- <div class="player-progress">
- <label for="seek{id}" class="sr-only">Seek</label>
- <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">
- <progress class="player-progress-played" max="100" value="0">
- <span>0</span>% played
- </progress>
- <progress class="player-progress-buffer" max="100" value="0">
- <span>0</span>% buffered
- </progress>
- </div>
- <span class="player-controls-playback">
- <button type="button" data-player="restart">
- <svg><use xlink:href="#icon-restart"></use></svg>
- <span class="sr-only">Restart</span>
- </button>
- <button type="button" data-player="rewind">
- <svg><use xlink:href="#icon-rewind"></use></svg>
- <span class="sr-only">Rewind {seektime} secs</span>
- </button>
- <button type="button" data-player="play">
- <svg><use xlink:href="#icon-play"></use></svg>
- <span class="sr-only">Play</span>
- </button>
- <button type="button" data-player="pause">
- <svg><use xlink:href="#icon-pause"></use></svg>
- <span class="sr-only">Pause</span>
- </button>
- <button type="button" data-player="fast-forward">
- <svg><use xlink:href="#icon-fast-forward"></use></svg>
- <span class="sr-only">Forward {seektime} secs</span>
- </button>
- <span class="player-time">
- <span class="sr-only">Time</span>
- <span class="player-duration">00:00</span>
- </span>
- </span>
- <span class="player-controls-sound">
- <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
- <label id="mute{id}" for="mute{id}">
- <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
- <svg><use xlink:href="#icon-volume"></use></svg>
- <span class="sr-only">Toggle Mute</span>
- </label>
+ <div class="player-progress">
+ <label for="seek{id}" class="sr-only">Seek</label>
+ <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">
+ <progress class="player-progress-played" max="100" value="0">
+ <span>0</span>% played
+ </progress>
+ <progress class="player-progress-buffer" max="100" value="0">
+ <span>0</span>% buffered
+ </progress>
+ </div>
+ <span class="player-controls-left">
+ <button type="button" data-player="restart">
+ <svg><use xlink:href="#icon-restart"></use></svg>
+ <span class="sr-only">Restart</span>
+ </button>
+ <button type="button" data-player="rewind">
+ <svg><use xlink:href="#icon-rewind"></use></svg>
+ <span class="sr-only">Rewind {seektime} secs</span>
+ </button>
+ <button type="button" data-player="play">
+ <svg><use xlink:href="#icon-play"></use></svg>
+ <span class="sr-only">Play</span>
+ </button>
+ <button type="button" data-player="pause">
+ <svg><use xlink:href="#icon-pause"></use></svg>
+ <span class="sr-only">Pause</span>
+ </button>
+ <button type="button" data-player="fast-forward">
+ <svg><use xlink:href="#icon-fast-forward"></use></svg>
+ <span class="sr-only">Forward {seektime} secs</span>
+ </button>
+ <span class="player-time">
+ <span class="sr-only">Current time</span>
+ <span class="player-current-time">00:00</span>
+ </span>
+ <span class="player-time">
+ <span class="sr-only">Duration</span>
+ <span class="player-duration">00:00</span>
+ </span>
+ </span>
+ <span class="player-controls-right">
+ <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
+ <label id="mute{id}" for="mute{id}">
+ <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
+ <svg><use xlink:href="#icon-volume"></use></svg>
+ <span class="sr-only">Toggle Mute</span>
+ </label>
- <label for="volume{id}" class="sr-only">Volume</label>
- <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">
+ <label for="volume{id}" class="sr-only">Volume</label>
+ <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">
- <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
- <label for="captions{id}">
- <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>
- <svg><use xlink:href="#icon-captions-off"></use></svg>
- <span class="sr-only">Toggle Captions</span>
- </label>
+ <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
+ <label for="captions{id}">
+ <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>
+ <svg><use xlink:href="#icon-captions-off"></use></svg>
+ <span class="sr-only">Toggle Captions</span>
+ </label>
- <button type="button" data-player="fullscreen">
- <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>
- <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>
- <span class="sr-only">Toggle Fullscreen</span>
- </button>
- </span>
+ <button type="button" data-player="fullscreen">
+ <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>
+ <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>
+ <span class="sr-only">Toggle Fullscreen</span>
+ </button>
+ </span>
</div> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-13 06:26:01 +0000