aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--changelog.md12
-rw-r--r--demo/dist/demo.css2
-rw-r--r--demo/dist/demo.js2
-rw-r--r--demo/error.html37
-rw-r--r--demo/index.html167
-rw-r--r--demo/src/js/main.js176
-rw-r--r--demo/src/less/lib/fontface.less20
-rw-r--r--dist/plyr.css2
-rw-r--r--dist/plyr.js4
-rw-r--r--gulpfile.js14
-rw-r--r--package.json90
-rw-r--r--readme.md8
-rw-r--r--src/js/plyr.js1786
-rw-r--r--src/less/plyr.less83
-rw-r--r--src/scss/plyr.scss103
15 files changed, 1385 insertions, 1121 deletions
diff --git a/changelog.md b/changelog.md
index 46547433..000423d0 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,17 @@
# Changelog
+## v2.0.16
+- Fullscreen bug fix (fixes #664)
+
+## v2.0.15
+- Demo fix
+
+## v2.0.14
+- CDN URL updates. Sorry, still working on V3 as hard as I can...
+
+## v2.0.13
+- Repo moved and Vimeo demo fix
+
## v2.0.12
- Ability to set custom `blankUrl` for source changes (https://github.com/sampotts/plyr/pull/504)
- Ability to set caption button listener (https://github.com/sampotts/plyr/pull/468)
diff --git a/demo/dist/demo.css b/demo/dist/demo.css
index a9b2f5bc..7e128dc7 100644
--- a/demo/dist/demo.css
+++ b/demo/dist/demo.css
@@ -1 +1 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */a.logo,img,legend{border:0}a,h1,h2{color:#3498db}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}body,figure,li,ul{margin:0}[hidden],template{display:none}li,nav ul,ul{list-style:none;padding:0}legend,li,nav ul,ul{padding:0}.btn__bar,sub,sup{position:relative}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0;text-decoration:none;border-bottom:1px dotted currentColor;transition:background .3s ease,color .3s ease,border .3s ease}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}.btn__bar,nav li{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}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}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@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");font-style:normal;font-weight:500}@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");font-style:normal;font-weight:700}html{font-size:100%;height:100%;background:fixed #f2f5f7}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b;font-weight:500;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:10px}h1,h2{letter-spacing:-.025em;margin:0 0 10px;line-height:1.2;font-weight:700}h1{font-size:64px;font-size:4rem}p,small{margin:0 0 20px}small{padding:0 10px;font-size:14px;font-size:.875rem}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.color--vimeo{color:#19b7ed}.color--youtube{color:#cc181e}*,::after,::before{box-sizing:border-box}.btn__bar ul,nav li{display:inline-block}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}section{max-width:1200px;margin:0 auto 20px}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}section{margin-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}.btn,.btn__count,.error main,video{vertical-align:middle}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}.btn:not(.btn-large) .icon{width:16px;height:16px}nav ul{margin:0;font-size:0}nav li{margin-top:10px;font-size:16px;font-size:1rem}nav li+li{margin-left:20px}.btn__bar{margin:0 auto 20px;max-width:1200px}.btn__bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#dbe3e8}.btn__bar ul{position:relative;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn__bar li{margin:0}.btn__bar li:first-child .btn{border-radius:4px 0 0 4px}.btn__bar li:last-child .btn{border-radius:0 4px 4px 0}.btn__bar li+li .btn{margin-left:-1px}.btn__bar li.active .btn{position:relative;z-index:1}.btn__bar li.active .btn .icon{color:inherit}.btn__bar li.active+li .btn:hover{z-index:0}.btn__bar .btn{position:relative;display:block;border-radius:0}.btn__bar .btn:focus,.btn__bar .btn:hover{z-index:1}@media (min-width:560px){.btn__bar{margin-bottom:40px}}.btn,.btn__count{display:inline-block;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700}.btn{padding:10px 12px;background:linear-gradient(#f8fafb,#e9eef1);border:1px solid #cbd0d3;box-shadow:0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .1s ease,color .1s ease;font-size:14px;font-size:.875rem}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn--large{padding:10px 20px;font-size:16px;font-size:1rem}.btn--primary,.btn__bar li.active .btn{background-image:linear-gradient(#3498db,#258cd1);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn--primary:focus,.btn--primary:hover{color:#fff;border-color:#196090}.btn--youtube .icon{color:#cc181e}.btn--vimeo .icon{color:#19b7ed}.btn--twitter .icon{color:#4BAAF4}.btn__count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn__count::before,.plyr__video-wrapper::after{content:"";position:absolute}.btn__count::before{display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;transform:rotate(-45deg) translate(-50%,-50%)}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%}video{max-width:100%}.plyr{margin:0 auto;border-radius:6px}.plyr--audio{max-width:520px}.plyr__video-wrapper::after{pointer-events:none;top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block} \ No newline at end of file
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */a.logo,img,legend{border:0}a,h1,h2{color:#3498db}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}body,figure,li,ul{margin:0}[hidden],template{display:none}li,nav ul,ul{list-style:none;padding:0}legend,li,nav ul,ul{padding:0}.btn__bar,sub,sup{position:relative}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0;text-decoration:none;border-bottom:1px dotted currentColor;transition:background .3s ease,color .3s ease,border .3s ease}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}.btn__bar,nav li{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}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}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/static/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/static/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:500;font-display:swap}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/static/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/static/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:700;font-display:swap}html{font-size:100%;height:100%;background:fixed #f2f5f7}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b;font-weight:500;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:10px}h1,h2{letter-spacing:-.025em;margin:0 0 10px;line-height:1.2;font-weight:700}h1{font-size:64px;font-size:4rem}p,small{margin:0 0 20px}small{padding:0 10px;font-size:14px;font-size:.875rem}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.color--vimeo{color:#19b7ed}.color--youtube{color:#cc181e}*,::after,::before{box-sizing:border-box}.btn__bar ul,nav li{display:inline-block}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}section{max-width:1200px;margin:0 auto 20px}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}section{margin-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}.btn,.btn__count,.error main,video{vertical-align:middle}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}.btn:not(.btn-large) .icon{width:16px;height:16px}nav ul{margin:0;font-size:0}nav li{margin-top:10px;font-size:16px;font-size:1rem}nav li+li{margin-left:20px}.btn__bar{margin:0 auto 20px;max-width:1200px}.btn__bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#dbe3e8}.btn__bar ul{position:relative;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn__bar li{margin:0}.btn__bar li:first-child .btn{border-radius:4px 0 0 4px}.btn__bar li:last-child .btn{border-radius:0 4px 4px 0}.btn__bar li+li .btn{margin-left:-1px}.btn__bar li.active .btn{position:relative;z-index:1}.btn__bar li.active .btn .icon{color:inherit}.btn__bar li.active+li .btn:hover{z-index:0}.btn__bar .btn{position:relative;display:block;border-radius:0}.btn__bar .btn:focus,.btn__bar .btn:hover{z-index:1}@media (min-width:560px){.btn__bar{margin-bottom:40px}}.btn,.btn__count{display:inline-block;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700}.btn{padding:10px 12px;background:linear-gradient(#f8fafb,#e9eef1);border:1px solid #cbd0d3;box-shadow:0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .1s ease,color .1s ease;font-size:14px;font-size:.875rem}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn--large{padding:10px 20px;font-size:16px;font-size:1rem}.btn--primary,.btn__bar li.active .btn{background-image:linear-gradient(#3498db,#258cd1);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn--primary:focus,.btn--primary:hover{color:#fff;border-color:#196090}.btn--youtube .icon{color:#cc181e}.btn--vimeo .icon{color:#19b7ed}.btn--twitter .icon{color:#4BAAF4}.btn__count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn__count::before,.plyr__video-wrapper::after{content:"";position:absolute}.btn__count::before{display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;transform:rotate(-45deg) translate(-50%,-50%)}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%}video{max-width:100%}.plyr{margin:0 auto;border-radius:6px}.plyr--audio{max-width:520px}.plyr__video-wrapper::after{pointer-events:none;top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block} \ No newline at end of file
diff --git a/demo/dist/demo.js b/demo/dist/demo.js
index e21530ec..0bc0ff0d 100644
--- a/demo/dist/demo.js
+++ b/demo/dist/demo.js
@@ -1 +1 @@
-"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;i<s;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;s<o;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!==r)&&(r.length||t!==n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(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
+"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var i,o=arguments.length;for(i=0;i<o;i++)t=arguments[i],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:i.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var e="classList",i="prototype",o=t.Element[i],s=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(t){for(var e=0,i=this.length;e<i;e++)if(e in this&&this[e]===t)return e;return-1},a=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},c=function(t,e){if(""===e)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(t,e)},l=function(t){for(var e=n.call(t.getAttribute("class")||""),i=e?e.split(/\s+/):[],o=0,s=i.length;o<s;o++)this.push(i[o]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(t){return this[t]||null},u.contains=function(t){return t+="",c(this,t)!==-1},u.add=function(){var t,e=arguments,i=0,o=e.length,s=!1;do t=e[i]+"",c(this,t)===-1&&(this.push(t),s=!0);while(++i<o);s&&this._updateClassName()},u.remove=function(){var t,e,i=arguments,o=0,s=i.length,n=!1;do for(t=i[o]+"",e=c(this,t);e!==-1;)this.splice(e,1),n=!0,e=c(this,t);while(++o<s);n&&this._updateClassName()},u.toggle=function(t,e){t+="";var i=this.contains(t),o=i?e!==!0&&"remove":e!==!1&&"add";return o&&this[o](t),e===!0||e===!1?e:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(o,e,p)}catch(h){h.number===-2146823252&&(p.enumerable=!1,s.defineProperty(o,e,p))}}else s[i].__defineGetter__&&o.__defineGetter__(e,d)}}(self)),function(){function t(t,e,i){if(t)if(t.classList)t.classList[i?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(/\s+/g," ").replace(" "+e+" ","");t.className=o+(i?" "+e:"")}}function e(e,i){if(e in n&&(i||e!==r)&&(r.length||e!==n.video)){switch(e){case n.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt","default":!0}]});break;case n.audio:o.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=e;for(var a=s.length-1;a>=0;a--)t(s[a].parentElement,"active",!1);t(document.querySelector('[data-source="'+e+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var o=i[0],s=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=s.length-1;c>=0;c--)s[c].addEventListener("click",function(){var t=this.getAttribute("data-source");e(t),a&&history.pushState({type:t},"","#"+t)});if(window.addEventListener("popstate",function(t){t.state&&"type"in t.state&&e(t.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&e(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,i,o,s,n,r){t.GoogleAnalyticsObject=s,t[s]=t[s]||function(){(t[s].q=t[s].q||[]).push(arguments)},t[s].l=1*new Date,n=e.createElement(i),r=e.getElementsByTagName(i)[0],n.async=1,n.src=o,r.parentNode.insertBefore(n,r)}(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/demo/error.html b/demo/error.html
index c9ba8c36..6dc22cb1 100644
--- a/demo/error.html
+++ b/demo/error.html
@@ -1,18 +1,25 @@
<!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">
- <!-- Docs styles -->
- <link rel="stylesheet" href="dist/demo.css">
- </head>
- <body>
- <main>
- <h1>Doh.</h1>
- <p>Looks like something went wrong.</p>
- <a href="http://plyr.io" class="btn btn--primary">Back to plyr.io</a>
- </main>
- </body>
-</html>
+<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="dist/demo.css">
+
+ <!-- Preload -->
+ <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2">
+ <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2">
+</head>
+
+<body>
+ <main>
+ <h1>Doh.</h1>
+ <p>Looks like something went wrong.</p>
+ <a href="http://plyr.io" class="btn btn--primary">Back to plyr.io</a>
+ </main>
+</body>
+
+</html> \ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index b21fa6cc..b6941537 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,88 +1,103 @@
<!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">
- <!-- Styles -->
- <link rel="stylesheet" href="../dist/plyr.css">
+<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">
- <!-- Docs styles -->
- <link rel="stylesheet" href="dist/demo.css">
- </head>
- <body>
- <header>
- <h1>Plyr</h1>
- <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
- <nav>
- <ul>
- <li>
- <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
- <svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub
- </a>
- </li>
- <li>
- <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
- <svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
- </a>
- </li>
- </ul>
- </nav>
- </header>
+ <!-- Styles -->
+ <link rel="stylesheet" href="../dist/plyr.css">
- <main role="main" id="main">
- <nav class="btn__bar">
- <ul>
- <li class="active">
- <button type="button" class="btn" data-source="video">Video</button>
- </li>
- <li>
- <button type="button" class="btn" data-source="audio">Audio</button>
- </li>
- <li>
- <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
- </li>
- <li>
- <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
- </li>
- </ul>
- </nav>
- <section>
- <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
- <!-- Video files -->
- <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
- <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
+ <!-- Docs styles -->
+ <link rel="stylesheet" href="dist/demo.css">
- <!-- Text track file -->
- <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
+ <!-- Preload -->
+ <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2">
+ <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2">
+</head>
- <!-- Fallback for browsers that don't support the <video> element -->
- <a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
- </video>
+<body>
+ <header>
+ <h1>Plyr</h1>
+ <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
+ <nav>
+ <ul>
+ <li>
+ <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
+ <svg class="icon">
+ <use xlink:href="#icon-github" />
+ </svg>Download on GitHub
+ </a>
+ </li>
+ <li>
+ <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
+ target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
+ <svg class="icon">
+ <use xlink:href="#icon-twitter" />
+ </svg>Tweet
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </header>
- <ul>
- <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li>
- <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi</small></li>
- <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li>
- <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li>
- </ul>
- </section>
- </main>
+ <main role="main" id="main">
+ <nav class="btn__bar">
+ <ul>
+ <li class="active">
+ <button type="button" class="btn" data-source="video">Video</button>
+ </li>
+ <li>
+ <button type="button" class="btn" data-source="audio">Audio</button>
+ </li>
+ <li>
+ <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
+ </li>
+ <li>
+ <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
+ </li>
+ </ul>
+ </nav>
+ <section>
+ <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
+ <!-- Video files -->
+ <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
+ <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
- <!-- Plyr core script -->
- <script src="../dist/plyr.js"></script>
+ <!-- Text track file -->
+ <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
+ default>
- <!-- Docs script -->
- <script src="dist/demo.js"></script>
+ <!-- Fallback for browsers that don't support the <video> element -->
+ <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
+ </video>
- <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
- <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
+ <ul>
+ <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li>
+ <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi</small></li>
+ <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li>
+ <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li>
+ </ul>
+ </section>
+ </main>
- <!-- Sharing libary (https://shr.one) -->
- <script src="https://cdn.shr.one/1.0.1/shr.js"></script>
- <script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script>
- </body>
-</html>
+ <!-- Plyr core script -->
+ <script src="../dist/plyr.js"></script>
+
+ <!-- Docs script -->
+ <script src="dist/demo.js"></script>
+
+ <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
+ <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
+
+ <!-- Sharing libary (https://shr.one) -->
+ <script src="https://cdn.shr.one/1.0.1/shr.js"></script>
+ <script>
+ if (window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }
+ </script>
+</body>
+
+</html> \ No newline at end of file
diff --git a/demo/src/js/main.js b/demo/src/js/main.js
index e2926df5..7d732dcd 100644
--- a/demo/src/js/main.js
+++ b/demo/src/js/main.js
@@ -12,68 +12,68 @@
// Setup the player
var instances = plyr.setup({
- debug: true,
- title: 'Video demo',
- iconUrl: '../dist/plyr.svg',
+ debug: true,
+ title: "Video demo",
+ iconUrl: "../dist/plyr.svg",
tooltips: {
- controls: true
+ controls: true
},
captions: {
- defaultActive: true
+ defaultActive: true
}
});
- plyr.loadSprite('dist/demo.svg');
+ plyr.loadSprite("dist/demo.svg");
// Plyr returns an array regardless
var player = instances[0];
// Setup type toggle
- var buttons = document.querySelectorAll('[data-source]'),
+ var buttons = document.querySelectorAll("[data-source]"),
types = {
- video: 'video',
- audio: 'audio',
- youtube: 'youtube',
- vimeo: 'vimeo'
+ video: "video",
+ audio: "audio",
+ youtube: "youtube",
+ vimeo: "vimeo"
},
- currentType = window.location.hash.replace('#', ''),
- historySupport = (window.history && window.history.pushState);
+ currentType = window.location.hash.replace("#", ""),
+ historySupport = window.history && window.history.pushState;
// Bind to each button
for (var i = buttons.length - 1; i >= 0; i--) {
- buttons[i].addEventListener('click', function() {
- var type = this.getAttribute('data-source');
+ buttons[i].addEventListener("click", function() {
+ var type = this.getAttribute("data-source");
newSource(type);
if (historySupport) {
- history.pushState({ 'type': type }, '', '#' + type);
+ history.pushState({ type: type }, "", "#" + type);
}
});
}
// List for backwards/forwards
- window.addEventListener('popstate', function(event) {
- if(event.state && 'type' in event.state) {
+ window.addEventListener("popstate", function(event) {
+ if (event.state && "type" in event.state) {
newSource(event.state.type);
}
});
// On load
- if(historySupport) {
+ if (historySupport) {
var video = !currentType.length;
// If there's no current type set, assume video
- if(video) {
+ if (video) {
currentType = types.video;
}
// Replace current history state
- if(currentType in types) {
- history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
+ if (currentType in types) {
+ history.replaceState({ type: currentType }, "", video ? "" : "#" + currentType);
}
// If it's not video, load the source
- if(currentType !== types.video) {
+ if (currentType !== types.video) {
newSource(currentType, true);
}
}
@@ -82,11 +82,10 @@
function toggleClass(element, className, state) {
if (element) {
if (element.classList) {
- element.classList[state ? 'add' : 'remove'](className);
- }
- else {
- var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
- element.className = name + (state ? ' ' + className : '');
+ element.classList[state ? "add" : "remove"](className);
+ } else {
+ var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + className + " ", "");
+ element.className = name + (state ? " " + className : "");
}
}
}
@@ -94,68 +93,78 @@
// Set a new source
function newSource(type, init) {
// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
- if(!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
+ if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
return;
}
- switch(type) {
+ switch (type) {
case types.video:
player.source({
- type: 'video',
- title: 'View From A Blue Moon',
- sources: [{
- src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
- type: 'video/mp4'
- },
- {
- src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
- type: 'video/webm'
- }],
- poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
- tracks: [{
- kind: 'captions',
- label: 'English',
- srclang:'en',
- src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
- default: true
- }]
+ type: "video",
+ title: "View From A Blue Moon",
+ sources: [
+ {
+ src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",
+ type: "video/mp4"
+ },
+ {
+ src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",
+ type: "video/webm"
+ }
+ ],
+ poster: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",
+ tracks: [
+ {
+ kind: "captions",
+ label: "English",
+ srclang: "en",
+ src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",
+ default: true
+ }
+ ]
});
break;
case types.audio:
player.source({
- type: 'audio',
- title: 'Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;',
- sources: [{
- src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
- type: 'audio/mp3'
- },
- {
- src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
- type: 'audio/ogg'
- }]
+ type: "audio",
+ title: "Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",
+ sources: [
+ {
+ src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",
+ type: "audio/mp3"
+ },
+ {
+ src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",
+ type: "audio/ogg"
+ }
+ ]
});
break;
case types.youtube:
player.source({
- type: 'video',
- title: 'View From A Blue Moon',
- sources: [{
- src: 'bTqVqk7FSmY',
- type: 'youtube'
- }]
+ type: "video",
+ title: "View From A Blue Moon",
+ sources: [
+ {
+ src: "bTqVqk7FSmY",
+ type: "youtube"
+ }
+ ]
});
break;
case types.vimeo:
player.source({
- type: 'video',
- title: 'View From A Blue Moon',
- sources: [{
- src: '147865858',
- type: 'vimeo'
- }]
+ type: "video",
+ title: "View From A Blue Moon",
+ sources: [
+ {
+ src: "147865858",
+ type: "vimeo"
+ }
+ ]
});
break;
}
@@ -165,21 +174,30 @@
// Remove active classes
for (var x = buttons.length - 1; x >= 0; x--) {
- toggleClass(buttons[x].parentElement, 'active', false);
+ toggleClass(buttons[x].parentElement, "active", false);
}
// Set active on parent
- toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
+ toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, "active", true);
}
})();
// Google analytics
// For demo site (http://[www.]plyr.io) only
-if(document.domain.indexOf('plyr.io') > -1) {
- (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
- ga('create', 'UA-40881672-11', 'auto');
- ga('send', 'pageview');
+if (document.domain.indexOf("plyr.io") > -1) {
+ (function(i, s, o, g, r, a, m) {
+ i.GoogleAnalyticsObject = r;
+ (i[r] =
+ i[r] ||
+ function() {
+ (i[r].q = i[r].q || []).push(arguments);
+ }),
+ (i[r].l = 1 * new Date());
+ (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+ a.async = 1;
+ a.src = g;
+ m.parentNode.insertBefore(a, m);
+ })(window, document, "script", "//www.google-analytics.com/analytics.js", "ga");
+ ga("create", "UA-40881672-11", "auto");
+ ga("send", "pageview");
}
diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less
index a7da5ad9..cdecc256 100644
--- a/demo/src/less/lib/fontface.less
+++ b/demo/src/less/lib/fontface.less
@@ -4,15 +4,17 @@
@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");
- font-style: normal;
- font-weight: @font-weight-base;
+ src: url("//cdn.plyr.io/static/fonts/avenir-medium.woff2") format("woff2"),
+ url("//cdn.plyr.io/static/fonts/avenir-medium.woff") format("woff");
+ font-style: normal;
+ font-weight: @font-weight-base;
+ font-display: swap;
}
@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");
- font-style: normal;
- font-weight: @font-weight-bold;
-} \ No newline at end of file
+ src: url("//cdn.plyr.io/static/fonts/avenir-bold.woff2") format("woff2"),
+ url("//cdn.plyr.io/static/fonts/avenir-bold.woff") format("woff");
+ font-style: normal;
+ font-weight: @font-weight-bold;
+ font-display: swap;
+}
diff --git a/dist/plyr.css b/dist/plyr.css
index e92820ce..834635e9 100644
--- a/dist/plyr.css
+++ b/dist/plyr.css
@@ -1 +1 @@
-.plyr input[type=range]:focus,.plyr:focus{outline:0}.plyr .plyr__video-embed iframe,.plyr__tooltip{pointer-events:none}@keyframes plyr-progress{to{background-position:25px 0}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;direction:ltr}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;background:0 0}.plyr input[type=range]::-webkit-slider-runnable-track{height:8px;background:0 0;border:0;border-radius:4px;-webkit-user-select:none;user-select:none}.plyr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:0 0;border:0;border-radius:4px;-moz-user-select:none;user-select:none}.plyr input[type=range]::-moz-range-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-ms-track{height:8px;background:0 0;border:0;color:transparent}.plyr input[type=range]::-ms-fill-upper{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none}.plyr input[type=range]::-ms-fill-lower{height:8px;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#3498db}.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box;margin-top:0}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--video input[type=range].tab-focus:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio input[type=range].tab-focus:focus{outline:rgba(86,93,100,.5) dotted 1px}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute!important;padding:0!important;border:0!important;height:1px!important;width:1px!important}.plyr__video-wrapper{position:relative;background:#000;border-radius:inherit}.plyr__video-embed{padding-bottom:56.25%;height:0;border-radius:inherit;overflow:hidden;z-index:0}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;transform:translateY(-35.95%)}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;transform:translateY(-40px);transition:transform .3s ease;color:#fff;font-size:16px;text-align:center;font-weight:400}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.7);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:150%}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}@media (min-width:1024px){.plyr--fullscreen-active .plyr__captions{font-size:32px}}.plyr ::-webkit-media-controls{display:none}.plyr__controls{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;line-height:1;text-align:center}.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:5px}.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__time:first-child,.plyr__controls>button:first-child{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}.plyr__controls [data-plyr=pause]{margin-left:0}.plyr__controls button{position:relative;display:inline-block;-ms-flex-negative:0;flex-shrink:0;overflow:visible;vertical-align:middle;padding:7px;border:0;background:0 0;border-radius:3px;cursor:pointer;transition:background .3s ease,color .3s ease,opacity .3s ease;color:inherit}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor}.plyr__controls button:focus{outline:0}.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted{display:none}@media (min-width:480px){.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:10px}}.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none}.plyr--video .plyr__controls{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:50px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff;transition:opacity .3s ease}.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__controls button:hover{background:#3498db;color:#fff}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;border:1px solid #dbe3e8;color:#565D64}.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__controls button:hover,.plyr__play-large{background:#3498db;color:#fff}.plyr__play-large{display:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);transition:all .3s ease}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor}.plyr__play-large:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr .plyr__play-large{display:inline-block}.plyr--audio .plyr__play-large,.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__play-large{opacity:0;visibility:hidden}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr--captions-active .plyr__controls .icon--captions-on,.plyr--fullscreen-active .icon--exit-fullscreen,.plyr--muted .plyr__controls .icon--muted{display:block}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr--captions-active .plyr__controls .icon--captions-on+svg,.plyr--fullscreen-active .icon--exit-fullscreen+svg,.plyr--muted .plyr__controls .icon--muted+svg{display:none}.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen]{display:inline-block}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;opacity:0;background:rgba(0,0,0,.7);border-radius:3px;color:#fff;font-size:14px;line-height:1.3;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;transform:translateX(-50%);bottom:-4px;border-right:4px solid transparent;border-top:4px solid rgba(0,0,0,.7);border-left:4px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr__controls button:first-child .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls button:first-child .plyr__tooltip::before{left:16px}.plyr__controls button:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls button:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls button:first-child .plyr__tooltip--visible,.plyr__controls button:first-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:first-child:hover .plyr__tooltip,.plyr__controls button:last-child .plyr__tooltip--visible,.plyr__controls button:last-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr__progress{position:relative;display:none;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-upper{background:0 0}.plyr__progress .plyr__tooltip{left:0}.plyr .plyr__progress{display:inline-block}.plyr__progress--buffer,.plyr__progress--played,.plyr__volume--display{position:absolute;left:0;top:50%;width:100%;height:8px;margin:-4px 0 0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:100px}.plyr__progress--buffer::-webkit-progress-bar,.plyr__progress--played::-webkit-progress-bar,.plyr__volume--display::-webkit-progress-bar{background:0 0}.plyr__progress--buffer::-webkit-progress-value,.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-moz-progress-bar,.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-ms-fill,.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{border-radius:100px}.plyr__progress--played,.plyr__volume--display{z-index:1;color:#3498db;background:0 0;transition:none}.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{display:none}.plyr__progress--buffer::-webkit-progress-value{transition:width .2s ease}.plyr__progress--buffer::-moz-progress-bar{transition:width .2s ease}.plyr__progress--buffer::-ms-fill{transition:width .2s ease}.plyr--video .plyr__progress--buffer,.plyr--video .plyr__volume--display{background:rgba(255,255,255,.25)}.plyr--video .plyr__progress--buffer{color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display{background:rgba(198,214,219,.66)}.plyr--audio .plyr__progress--buffer{color:rgba(198,214,219,.66)}.plyr--loading .plyr__progress--buffer{animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(198,214,219,.66)}.plyr__time{display:inline-block;vertical-align:middle;font-size:14px}.plyr__time+.plyr__time{display:none}@media (min-width:768px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr__volume{display:none}.plyr .plyr__volume{-ms-flex:1;flex:1;position:relative}.plyr .plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr .plyr__volume{display:block;max-width:60px}}@media (min-width:768px){.plyr .plyr__volume{max-width:100px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr--fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000;border-radius:0!important}.plyr--fullscreen-active video{height:100%}.plyr--fullscreen-active .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-active .plyr__video-embed{overflow:visible}.plyr--fullscreen-active .plyr__controls{position:absolute;bottom:0;left:0;right:0}.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)} \ No newline at end of file
+.plyr input[type=range]:focus,.plyr:focus{outline:0}.plyr .plyr__video-embed iframe,.plyr__tooltip{pointer-events:none}@keyframes plyr-progress{to{background-position:25px 0}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;direction:ltr}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;background:0 0}.plyr input[type=range]::-webkit-slider-runnable-track{height:8px;background:0 0;border:0;border-radius:4px;-webkit-user-select:none;user-select:none}.plyr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:0 0;border:0;border-radius:4px;-moz-user-select:none;user-select:none}.plyr input[type=range]::-moz-range-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-ms-track{height:8px;background:0 0;border:0;color:transparent}.plyr input[type=range]::-ms-fill-upper{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none}.plyr input[type=range]::-ms-fill-lower{height:8px;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#3498db}.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box;margin-top:0}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--video input[type=range].tab-focus:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio input[type=range].tab-focus:focus{outline:rgba(86,93,100,.5) dotted 1px}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute!important;padding:0!important;border:0!important;height:1px!important;width:1px!important}.plyr__video-wrapper{position:relative;background:#000;border-radius:inherit}.plyr__video-embed{padding-bottom:56.25%;height:0;border-radius:inherit;overflow:hidden;z-index:0}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;transform:translateY(-35.95%)}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;transform:translateY(-40px);transition:transform .3s ease;color:#fff;font-size:16px;text-align:center;font-weight:400}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.7);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:150%}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}@media (min-width:1024px){.plyr--fullscreen-active .plyr__captions{font-size:32px}}.plyr ::-webkit-media-controls{display:none}.plyr__controls{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;line-height:1;text-align:center}.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:5px}.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__time:first-child,.plyr__controls>button:first-child{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}.plyr__controls [data-plyr=pause]{margin-left:0}.plyr__controls button{position:relative;display:inline-block;-ms-flex-negative:0;flex-shrink:0;overflow:visible;vertical-align:middle;padding:7px;border:0;background:0 0;border-radius:3px;cursor:pointer;transition:background .3s ease,color .3s ease,opacity .3s ease;color:inherit}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor}.plyr__controls button:focus{outline:0}.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted{display:none}@media (min-width:480px){.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:10px}}.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none}.plyr--video .plyr__controls{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:50px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff;transition:opacity .3s ease}.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__controls button:hover{background:#3498db;color:#fff}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;border:1px solid #dbe3e8;color:#565D64}.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__controls button:hover,.plyr__play-large{background:#3498db;color:#fff}.plyr__play-large{display:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);transition:all .3s ease}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor}.plyr__play-large:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr .plyr__play-large{display:inline-block}.plyr--audio .plyr__play-large,.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__play-large{opacity:0;visibility:hidden}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr--captions-active .plyr__controls .icon--captions-on,.plyr--fullscreen-active .icon--exit-fullscreen,.plyr--muted .plyr__controls .icon--muted{display:block}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr--captions-active .plyr__controls .icon--captions-on+svg,.plyr--fullscreen-active .icon--exit-fullscreen+svg,.plyr--muted .plyr__controls .icon--muted+svg{display:none}.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen]{display:inline-block}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;opacity:0;background:rgba(0,0,0,.7);border-radius:3px;color:#fff;font-size:14px;line-height:1.3;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease}.plyr__tooltip::before{content:"";position:absolute;width:0;height:0;left:50%;transform:translateX(-50%);bottom:-4px;border-right:4px solid transparent;border-top:4px solid rgba(0,0,0,.7);border-left:4px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr__controls button:first-child .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls button:first-child .plyr__tooltip::before{left:16px}.plyr__controls button:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls button:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls button:first-child .plyr__tooltip--visible,.plyr__controls button:first-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:first-child:hover .plyr__tooltip,.plyr__controls button:last-child .plyr__tooltip--visible,.plyr__controls button:last-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr__progress{position:relative;display:none;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-upper{background:0 0}.plyr__progress .plyr__tooltip{left:0}.plyr .plyr__progress{display:inline-block}.plyr__progress--buffer,.plyr__progress--played,.plyr__volume--display{position:absolute;left:0;top:50%;width:100%;height:8px;margin:-4px 0 0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:100px}.plyr__progress--buffer::-webkit-progress-bar,.plyr__progress--played::-webkit-progress-bar,.plyr__volume--display::-webkit-progress-bar{background:0 0}.plyr__progress--buffer::-webkit-progress-value,.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-moz-progress-bar,.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-ms-fill,.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{border-radius:100px}.plyr__progress--played,.plyr__volume--display{z-index:1;color:#3498db;background:0 0;transition:none}.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{display:none}.plyr__progress--buffer::-webkit-progress-value{transition:width .2s ease}.plyr__progress--buffer::-moz-progress-bar{transition:width .2s ease}.plyr__progress--buffer::-ms-fill{transition:width .2s ease}.plyr--video .plyr__progress--buffer,.plyr--video .plyr__volume--display{background:rgba(255,255,255,.25)}.plyr--video .plyr__progress--buffer{color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display{background:rgba(198,214,219,.66)}.plyr--audio .plyr__progress--buffer{color:rgba(198,214,219,.66)}.plyr--loading .plyr__progress--buffer{animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(198,214,219,.66)}.plyr__time{display:inline-block;vertical-align:middle;font-size:14px}.plyr__time+.plyr__time{display:none}@media (min-width:768px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:"\2044";margin-right:10px}.plyr__volume{display:none}.plyr .plyr__volume{-ms-flex:1;flex:1;position:relative}.plyr .plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr .plyr__volume{display:block;max-width:60px}}@media (min-width:768px){.plyr .plyr__volume{max-width:100px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr--fullscreen-active{height:100%;width:100%;background:#000;border-radius:0!important}.plyr--fullscreen-active video{height:100%}.plyr--fullscreen-active .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-active .plyr__video-embed{overflow:visible}.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr--fullscreen-fallback.plyr--fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000000} \ No newline at end of file
diff --git a/dist/plyr.js b/dist/plyr.js
index 8016e06a..dfc4d7c7 100644
--- a/dist/plyr.js
+++ b/dist/plyr.js
@@ -1,2 +1,2 @@
-!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define([],function(){return t(e,document)}):e.plyr=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(){var e,n,r,a=navigator.userAgent,s=navigator.appName,o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10),l=!1,u=!1,c=!1,d=!1;return navigator.appVersion.indexOf("Windows NT")!==-1&&navigator.appVersion.indexOf("rv:11")!==-1?(l=!0,s="IE",o="11"):(n=a.indexOf("MSIE"))!==-1?(l=!0,s="IE",o=a.substring(n+5)):(n=a.indexOf("Chrome"))!==-1?(c=!0,s="Chrome",o=a.substring(n+7)):(n=a.indexOf("Safari"))!==-1?(d=!0,s="Safari",o=a.substring(n+7),(n=a.indexOf("Version"))!==-1&&(o=a.substring(n+8))):(n=a.indexOf("Firefox"))!==-1?(u=!0,s="Firefox",o=a.substring(n+8)):(e=a.lastIndexOf(" ")+1)<(n=a.lastIndexOf("/"))&&(s=a.substring(e,n),o=a.substring(n+1),s.toLowerCase()===s.toUpperCase()&&(s=navigator.appName)),(r=o.indexOf(";"))!==-1&&(o=o.substring(0,r)),(r=o.indexOf(" "))!==-1&&(o=o.substring(0,r)),i=parseInt(""+o,10),isNaN(i)&&(o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10)),{name:s,version:i,isIE:l,isFirefox:u,isChrome:c,isSafari:d,isIos:/(iPad|iPhone|iPod)/g.test(navigator.platform),isIphone:/(iPhone|iPod)/g.test(navigator.userAgent),isTouch:"ontouchstart"in t.documentElement}}function r(e,t){var n=e.media;if("video"===e.type)switch(t){case"video/webm":return!(!n.canPlayType||!n.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/,""));case"video/mp4":return!(!n.canPlayType||!n.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/,""));case"video/ogg":return!(!n.canPlayType||!n.canPlayType('video/ogg; codecs="theora"').replace(/no/,""))}else if("audio"===e.type)switch(t){case"audio/mpeg":return!(!n.canPlayType||!n.canPlayType("audio/mpeg;").replace(/no/,""));case"audio/ogg":return!(!n.canPlayType||!n.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/,""));case"audio/wav":return!(!n.canPlayType||!n.canPlayType('audio/wav; codecs="1"').replace(/no/,""))}return!1}function a(e){if(!t.querySelectorAll('script[src="'+e+'"]').length){var n=t.createElement("script");n.src=e;var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(n,r)}}function s(e,t){return Array.prototype.indexOf&&e.indexOf(t)!==-1}function o(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function i(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],s=a.parentNode,o=a.nextSibling;return r.appendChild(a),o?s.insertBefore(r,o):s.appendChild(r),r}}function l(e){e&&e.parentNode.removeChild(e)}function u(e,t){e.insertBefore(t,e.firstChild)}function c(e,t){for(var n in t)e.setAttribute(n,O.boolean(t[n])&&t[n]?"":t[n])}function d(e,n,r){var a=t.createElement(e);c(a,r),u(n,a)}function p(e){return e.replace(".","")}function m(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 f(e,t){return!!e&&(e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className))}function y(e,n){var r=Element.prototype,a=r.matches||r.webkitMatchesSelector||r.mozMatchesSelector||r.msMatchesSelector||function(e){return[].indexOf.call(t.querySelectorAll(e),this)!==-1};return a.call(e,n)}function b(e,t,n,r,a){g(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])},a)}function v(e,t,n,r,a){var s=t.split(" ");if(O.boolean(a)||(a=!1),e instanceof NodeList)for(var o=0;o<e.length;o++)e[o]instanceof Node&&v(e[o],arguments[1],arguments[2],arguments[3]);else for(var i=0;i<s.length;i++)e[r?"addEventListener":"removeEventListener"](s[i],n,a)}function g(e,t,n,r){e&&v(e,t,n,!0,r)}function h(e,t,n,r){if(e&&t){O.boolean(n)||(n=!1);var a=new CustomEvent(t,{bubbles:n,detail:r});e.dispatchEvent(a)}}function k(e,t){if(e)return t=O.boolean(t)?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t}function w(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function x(){var e=arguments;if(e.length){if(1===e.length)return e[0];for(var t=Array.prototype.shift.call(e),n=e.length,r=0;r<n;r++){var a=e[r];for(var s in a)a[s]&&a[s].constructor&&a[s].constructor===Object?(t[s]=t[s]||{},x(t[s],a[s])):t[s]=a[s]}return t}}function T(e){var t=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;return e.match(t)?RegExp.$2:e}function S(e){var t=/^.*(vimeo.com\/|video\/)(\d+).*/;return e.match(t)?RegExp.$2:e}function _(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit o moz ms khtml".split(" ");if(O.undefined(t.cancelFullScreen))for(var r=0,a=n.length;r<a;r++){if(e.prefix=n[r],!O.undefined(t[e.prefix+"CancelFullScreen"])){e.supportsFullScreen=!0;break}if(!O.undefined(t.msExitFullscreen)&&t.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}else e.supportsFullScreen=!0;return e.supportsFullScreen&&(e.fullScreenEventName="ms"===e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch(O.undefined(e)&&(e=t.body),this.prefix){case"":return t.fullscreenElement===e;case"moz":return t.mozFullScreenElement===e;default:return t[this.prefix+"FullscreenElement"]===e}},e.requestFullScreen=function(e){return O.undefined(e)&&(e=t.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"===this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?t.cancelFullScreen():t[this.prefix+("ms"===this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?t.fullscreenElement:t[this.prefix+"FullscreenElement"]}),e}function E(v,E){function A(e,t,n,r){h(e,t,n,x({},r,{plyr:Ue}))}function j(t,n){E.debug&&e.console&&(n=Array.prototype.slice.call(n),O.string(E.logPrefix)&&E.logPrefix.length&&n.unshift(E.logPrefix),console[t].apply(console,n))}function V(){return{url:E.iconUrl,absolute:0===E.iconUrl.indexOf("http")||Be.browser.isIE}}function R(){var e=[],t=V(),n=(t.absolute?"":t.url)+"#"+E.iconPrefix;return s(E.controls,"play-large")&&e.push('<button type="button" data-plyr="play" class="plyr__play-large">','<svg><use xlink:href="'+n+'-play" /></svg>','<span class="plyr__sr-only">'+E.i18n.play+"</span>","</button>"),e.push('<div class="plyr__controls">'),s(E.controls,"restart")&&e.push('<button type="button" data-plyr="restart">','<svg><use xlink:href="'+n+'-restart" /></svg>','<span class="plyr__sr-only">'+E.i18n.restart+"</span>","</button>"),s(E.controls,"rewind")&&e.push('<button type="button" data-plyr="rewind">','<svg><use xlink:href="'+n+'-rewind" /></svg>','<span class="plyr__sr-only">'+E.i18n.rewind+"</span>","</button>"),s(E.controls,"play")&&e.push('<button type="button" data-plyr="play">','<svg><use xlink:href="'+n+'-play" /></svg>','<span class="plyr__sr-only">'+E.i18n.play+"</span>","</button>",'<button type="button" data-plyr="pause">','<svg><use xlink:href="'+n+'-pause" /></svg>','<span class="plyr__sr-only">'+E.i18n.pause+"</span>","</button>"),s(E.controls,"fast-forward")&&e.push('<button type="button" data-plyr="fast-forward">','<svg><use xlink:href="'+n+'-fast-forward" /></svg>','<span class="plyr__sr-only">'+E.i18n.forward+"</span>","</button>"),s(E.controls,"progress")&&(e.push('<span class="plyr__progress">','<label for="seek{id}" class="plyr__sr-only">Seek</label>','<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">','<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>','<progress class="plyr__progress--buffer" max="100" value="0">',"<span>0</span>% "+E.i18n.buffered,"</progress>"),E.tooltips.seek&&e.push('<span class="plyr__tooltip">00:00</span>'),e.push("</span>")),s(E.controls,"current-time")&&e.push('<span class="plyr__time">','<span class="plyr__sr-only">'+E.i18n.currentTime+"</span>",'<span class="plyr__time--current">00:00</span>',"</span>"),s(E.controls,"duration")&&e.push('<span class="plyr__time">','<span class="plyr__sr-only">'+E.i18n.duration+"</span>",'<span class="plyr__time--duration">00:00</span>',"</span>"),s(E.controls,"mute")&&e.push('<button type="button" data-plyr="mute">','<svg class="icon--muted"><use xlink:href="'+n+'-muted" /></svg>','<svg><use xlink:href="'+n+'-volume" /></svg>','<span class="plyr__sr-only">'+E.i18n.toggleMute+"</span>","</button>"),s(E.controls,"volume")&&e.push('<span class="plyr__volume">','<label for="volume{id}" class="plyr__sr-only">'+E.i18n.volume+"</label>",'<input id="volume{id}" class="plyr__volume--input" type="range" min="'+E.volumeMin+'" max="'+E.volumeMax+'" value="'+E.volume+'" data-plyr="volume">','<progress class="plyr__volume--display" max="'+E.volumeMax+'" value="'+E.volumeMin+'" role="presentation"></progress>',"</span>"),s(E.controls,"captions")&&e.push('<button type="button" data-plyr="captions">','<svg class="icon--captions-on"><use xlink:href="'+n+'-captions-on" /></svg>','<svg><use xlink:href="'+n+'-captions-off" /></svg>','<span class="plyr__sr-only">'+E.i18n.toggleCaptions+"</span>","</button>"),s(E.controls,"fullscreen")&&e.push('<button type="button" data-plyr="fullscreen">','<svg class="icon--exit-fullscreen"><use xlink:href="'+n+'-exit-fullscreen" /></svg>','<svg><use xlink:href="'+n+'-enter-fullscreen" /></svg>','<span class="plyr__sr-only">'+E.i18n.toggleFullscreen+"</span>","</button>"),e.push("</div>"),e.join("")}function q(){if(Be.supported.full&&("audio"!==Be.type||E.fullscreen.allowAudio)&&E.fullscreen.enabled){var e=N.supportsFullScreen;e||E.fullscreen.fallback&&!X()?(Je((e?"Native":"Fallback")+" fullscreen enabled"),m(Be.container,E.classes.fullscreen.enabled,!0)):Je("Fullscreen not supported and fallback disabled"),Be.buttons&&Be.buttons.fullscreen&&k(Be.buttons.fullscreen,!1),$()}}function D(){if("video"===Be.type){B(E.selectors.captions)||Be.videoContainer.insertAdjacentHTML("afterbegin",'<div class="'+p(E.selectors.captions)+'"></div>'),Be.usingTextTracks=!1,Be.media.textTracks&&(Be.usingTextTracks=!0);for(var e,t="",n=Be.media.childNodes,r=0;r<n.length;r++)"track"===n[r].nodeName.toLowerCase()&&(e=n[r].kind,"captions"!==e&&"subtitles"!==e||(t=n[r].getAttribute("src")));if(Be.captionExists=!0,""===t?(Be.captionExists=!1,Je("No caption track found")):Je("Caption track found; URI: "+t),Be.captionExists){for(var a=Be.media.textTracks,s=0;s<a.length;s++)a[s].mode="hidden";if(Y(Be),(Be.browser.isIE&&Be.browser.version>=10||Be.browser.isFirefox&&Be.browser.version>=31)&&(Je("Detected browser with known TextTrack issues - using manual fallback"),Be.usingTextTracks=!1),Be.usingTextTracks){Je("TextTracks supported");for(var o=0;o<a.length;o++){var i=a[o];"captions"!==i.kind&&"subtitles"!==i.kind||g(i,"cuechange",function(){this.activeCues[0]&&"text"in this.activeCues[0]?H(this.activeCues[0].getCueAsHTML()):H()})}}else if(Je("TextTracks not supported so rendering captions manually"),Be.currentCaption="",Be.captions=[],""!==t){var l=new XMLHttpRequest;l.onreadystatechange=function(){if(4===l.readyState)if(200===l.status){var e,t=[],n=l.responseText,r="\r\n";n.indexOf(r+r)===-1&&(r=n.indexOf("\r\r")!==-1?"\r":"\n"),t=n.split(r+r);for(var a=0;a<t.length;a++){e=t[a],Be.captions[a]=[];var s=e.split(r),o=0;s[o].indexOf(":")===-1&&(o=1),Be.captions[a]=[s[o],s[o+1]]}Be.captions.shift(),Je("Successfully loaded the caption file via AJAX")}else ze(E.logPrefix+"There was a problem loading the caption file via AJAX")},l.open("get",t,!0),l.send()}}else m(Be.container,E.classes.captions.enabled)}}function H(e){var n=B(E.selectors.captions),r=t.createElement("span");n.innerHTML="",O.undefined(e)&&(e=""),O.string(e)?r.innerHTML=e.trim():r.appendChild(e),n.appendChild(r);n.offsetHeight}function W(e){function t(e,t){var n=[];n=e.split(" --> ");for(var r=0;r<n.length;r++)n[r]=n[r].replace(/(\d+:\d+:\d+\.\d+).*/,"$1");return a(n[t])}function n(e){return t(e,0)}function r(e){return t(e,1)}function a(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])}if(!Be.usingTextTracks&&"video"===Be.type&&Be.supported.full&&(Be.subcount=0,e=O.number(e)?e:Be.media.currentTime,Be.captions[Be.subcount])){for(;r(Be.captions[Be.subcount][0])<e.toFixed(1);)if(Be.subcount++,Be.subcount>Be.captions.length-1){Be.subcount=Be.captions.length-1;break}Be.media.currentTime.toFixed(1)>=n(Be.captions[Be.subcount][0])&&Be.media.currentTime.toFixed(1)<=r(Be.captions[Be.subcount][0])?(Be.currentCaption=Be.captions[Be.subcount][1],H(Be.currentCaption)):H()}}function Y(){if(Be.buttons.captions){m(Be.container,E.classes.captions.enabled,!0);var e=Be.storage.captionsEnabled;O.boolean(e)||(e=E.captions.defaultActive),e&&(m(Be.container,E.classes.captions.active,!0),k(Be.buttons.captions,!0))}}function U(e){return Be.container.querySelectorAll(e)}function B(e){return U(e)[0]}function X(){try{return e.self!==e.top}catch(e){return!0}}function $(){function e(e){9===e.which&&Be.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=U("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];g(Be.container,"keydown",e)}function J(e,t){if(O.string(t))d(e,Be.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)d(e,Be.media,t[n])}function z(){if(E.loadSprite){var e=V();e.absolute?(Je("AJAX loading absolute SVG sprite"+(Be.browser.isIE?" (due to IE)":"")),C(e.url,"sprite-plyr")):Je("Sprite will be used as external resource directly")}var n=E.html;Je("Injecting custom controls"),n||(n=R()),n=o(n,"{seektime}",E.seekTime),n=o(n,"{id}",Math.floor(1e4*Math.random()));var r;if(O.string(E.selectors.controls.container)&&(r=t.querySelector(E.selectors.controls.container)),O.htmlElement(r)||(r=Be.container),r.insertAdjacentHTML("beforeend",n),E.tooltips.controls)for(var a=U([E.selectors.controls.wrapper," ",E.selectors.labels," .",E.classes.hidden].join("")),s=a.length-1;s>=0;s--){var i=a[s];m(i,E.classes.hidden,!1),m(i,E.classes.tooltip,!0)}}function G(){try{return Be.controls=B(E.selectors.controls.wrapper),Be.buttons={},Be.buttons.seek=B(E.selectors.buttons.seek),Be.buttons.play=U(E.selectors.buttons.play),Be.buttons.pause=B(E.selectors.buttons.pause),Be.buttons.restart=B(E.selectors.buttons.restart),Be.buttons.rewind=B(E.selectors.buttons.rewind),Be.buttons.forward=B(E.selectors.buttons.forward),Be.buttons.fullscreen=B(E.selectors.buttons.fullscreen),Be.buttons.mute=B(E.selectors.buttons.mute),Be.buttons.captions=B(E.selectors.buttons.captions),Be.progress={},Be.progress.container=B(E.selectors.progress.container),Be.progress.buffer={},Be.progress.buffer.bar=B(E.selectors.progress.buffer),Be.progress.buffer.text=Be.progress.buffer.bar&&Be.progress.buffer.bar.getElementsByTagName("span")[0],Be.progress.played=B(E.selectors.progress.played),Be.progress.tooltip=Be.progress.container&&Be.progress.container.querySelector("."+E.classes.tooltip),Be.volume={},Be.volume.input=B(E.selectors.volume.input),Be.volume.display=B(E.selectors.volume.display),Be.duration=B(E.selectors.duration),Be.currentTime=B(E.selectors.currentTime),Be.seekTime=U(E.selectors.seekTime),!0}catch(e){return ze("It looks like there is a problem with your controls HTML"),Q(!0),!1}}function K(){m(Be.container,E.selectors.container.replace(".",""),Be.supported.full)}function Q(e){e&&s(E.types.html5,Be.type)?Be.media.setAttribute("controls",""):Be.media.removeAttribute("controls")}function Z(e){var t=E.i18n.play;if(O.string(E.title)&&E.title.length&&(t+=", "+E.title,Be.container.setAttribute("aria-label",E.title)),Be.supported.full&&Be.buttons.play)for(var n=Be.buttons.play.length-1;n>=0;n--)Be.buttons.play[n].setAttribute("aria-label",t);O.htmlElement(e)&&e.setAttribute("title",E.i18n.frameTitle.replace("{title}",E.title))}function ee(){var t=null;Be.storage={},L.supported&&E.storage.enabled&&(e.localStorage.removeItem("plyr-volume"),t=e.localStorage.getItem(E.storage.key),t&&(/^\d+(\.\d+)?$/.test(t)?te({volume:parseFloat(t)}):Be.storage=JSON.parse(t)))}function te(t){L.supported&&E.storage.enabled&&(x(Be.storage,t),e.localStorage.setItem(E.storage.key,JSON.stringify(Be.storage)))}function ne(){if(!Be.media)return void ze("No media element found!");if(Be.supported.full&&(m(Be.container,E.classes.type.replace("{0}",Be.type),!0),s(E.types.embed,Be.type)&&m(Be.container,E.classes.type.replace("{0}","video"),!0),m(Be.container,E.classes.stopped,E.autoplay),m(Be.container,E.classes.isIos,Be.browser.isIos),m(Be.container,E.classes.isTouch,Be.browser.isTouch),"video"===Be.type)){var e=t.createElement("div");e.setAttribute("class",E.classes.videoWrapper),i(Be.media,e),Be.videoContainer=e}s(E.types.embed,Be.type)&&re()}function re(){var n,r=t.createElement("div"),s=Be.type+"-"+Math.floor(1e4*Math.random());switch(Be.type){case"youtube":n=T(Be.embedId);break;case"vimeo":n=S(Be.embedId);break;default:n=Be.embedId}for(var o=U('[id^="'+Be.type+'-"]'),i=o.length-1;i>=0;i--)l(o[i]);if(m(Be.media,E.classes.videoWrapper,!0),m(Be.media,E.classes.embedWrapper,!0),"youtube"===Be.type)Be.media.appendChild(r),r.setAttribute("id",s),O.object(e.YT)?se(n,r):(a(E.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){se(n,r)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Be.type)if(Be.supported.full?Be.media.appendChild(r):r=Be.media,r.setAttribute("id",s),O.object(e.Vimeo))oe(n,r);else{a(E.urls.vimeo.api);var u=e.setInterval(function(){O.object(e.Vimeo)&&(e.clearInterval(u),oe(n,r))},50)}else if("soundcloud"===Be.type){var d=t.createElement("iframe");d.loaded=!1,g(d,"load",function(){d.loaded=!0}),c(d,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+n,id:s}),r.appendChild(d),Be.media.appendChild(r),e.SC||a(E.urls.soundcloud.api);var p=e.setInterval(function(){e.SC&&d.loaded&&(e.clearInterval(p),ie.call(d))},50)}}function ae(){Be.supported.full&&(We(),Ye()),Z(B("iframe"))}function se(t,n){Be.embed=new e.YT.Player(n.id,{videoId:t,playerVars:{autoplay:E.autoplay?1:0,controls:Be.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:E.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onError:function(e){A(Be.container,"error",!0,{code:e.data,embed:e.target})},onReady:function(t){var n=t.target;Be.media.play=function(){n.playVideo(),Be.media.paused=!1},Be.media.pause=function(){n.pauseVideo(),Be.media.paused=!0},Be.media.stop=function(){n.stopVideo(),Be.media.paused=!0},Be.media.duration=n.getDuration(),Be.media.paused=!0,Be.media.currentTime=0,Be.media.muted=n.isMuted(),E.title=n.getVideoData().title,Be.supported.full&&Be.media.querySelector("iframe").setAttribute("tabindex","-1"),ae(),A(Be.media,"timeupdate"),A(Be.media,"durationchange"),e.clearInterval(Xe.buffering),Xe.buffering=e.setInterval(function(){Be.media.buffered=n.getVideoLoadedFraction(),(null===Be.media.lastBuffered||Be.media.lastBuffered<Be.media.buffered)&&A(Be.media,"progress"),Be.media.lastBuffered=Be.media.buffered,1===Be.media.buffered&&(e.clearInterval(Xe.buffering),A(Be.media,"canplaythrough"))},200)},onStateChange:function(t){var n=t.target;switch(e.clearInterval(Xe.playing),t.data){case 0:Be.media.paused=!0,A(Be.media,"ended");break;case 1:Be.media.paused=!1,Be.media.seeking&&A(Be.media,"seeked"),Be.media.seeking=!1,A(Be.media,"play"),A(Be.media,"playing"),Xe.playing=e.setInterval(function(){Be.media.currentTime=n.getCurrentTime(),A(Be.media,"timeupdate")},100),Be.media.duration!==n.getDuration()&&(Be.media.duration=n.getDuration(),A(Be.media,"durationchange"));break;case 2:Be.media.paused=!0,A(Be.media,"pause")}A(Be.container,"statechange",!1,{code:t.data})}}})}function oe(t,n){Be.embed=new e.Vimeo.Player(n,{id:parseInt(t),loop:E.loop,autoplay:E.autoplay,byline:!1,portrait:!1,title:!1}),Be.media.play=function(){Be.embed.play(),Be.media.paused=!1},Be.media.pause=function(){Be.embed.pause(),Be.media.paused=!0},Be.media.stop=function(){Be.embed.stop(),Be.media.paused=!0},Be.media.paused=!0,Be.media.currentTime=0,ae(),Be.embed.getCurrentTime().then(function(e){Be.media.currentTime=e,A(Be.media,"timeupdate")}),Be.embed.getDuration().then(function(e){Be.media.duration=e,A(Be.media,"durationchange")}),Be.embed.on("loaded",function(){O.htmlElement(Be.embed.element)&&Be.supported.full&&Be.embed.element.setAttribute("tabindex","-1")}),Be.embed.on("play",function(){Be.media.paused=!1,A(Be.media,"play"),A(Be.media,"playing")}),Be.embed.on("pause",function(){Be.media.paused=!0,A(Be.media,"pause")}),Be.embed.on("timeupdate",function(e){Be.media.seeking=!1,Be.media.currentTime=e.seconds,A(Be.media,"timeupdate")}),Be.embed.on("progress",function(e){Be.media.buffered=e.percent,A(Be.media,"progress"),1===parseInt(e.percent)&&A(Be.media,"canplaythrough")}),Be.embed.on("seeked",function(){Be.media.seeking=!1,A(Be.media,"seeked"),A(Be.media,"play")}),Be.embed.on("ended",function(){Be.media.paused=!0,A(Be.media,"ended")})}function ie(){Be.embed=e.SC.Widget(this),Be.embed.bind(e.SC.Widget.Events.READY,function(){Be.media.play=function(){Be.embed.play(),Be.media.paused=!1},Be.media.pause=function(){Be.embed.pause(),Be.media.paused=!0},Be.media.stop=function(){Be.embed.seekTo(0),Be.embed.pause(),Be.media.paused=!0},Be.media.paused=!0,Be.media.currentTime=0,Be.embed.getDuration(function(e){Be.media.duration=e/1e3,ae()}),Be.embed.getPosition(function(e){Be.media.currentTime=e,A(Be.media,"timeupdate")}),Be.embed.bind(e.SC.Widget.Events.PLAY,function(){Be.media.paused=!1,A(Be.media,"play"),A(Be.media,"playing")}),Be.embed.bind(e.SC.Widget.Events.PAUSE,function(){Be.media.paused=!0,A(Be.media,"pause")}),Be.embed.bind(e.SC.Widget.Events.PLAY_PROGRESS,function(e){Be.media.seeking=!1,Be.media.currentTime=e.currentPosition/1e3,A(Be.media,"timeupdate")}),Be.embed.bind(e.SC.Widget.Events.LOAD_PROGRESS,function(e){Be.media.buffered=e.loadProgress,A(Be.media,"progress"),1===parseInt(e.loadProgress)&&A(Be.media,"canplaythrough")}),Be.embed.bind(e.SC.Widget.Events.FINISH,function(){Be.media.paused=!0,A(Be.media,"ended")})})}function le(){"play"in Be.media&&Be.media.play()}function ue(){"pause"in Be.media&&Be.media.pause()}function ce(e){return O.boolean(e)||(e=Be.media.paused),e?le():ue(),e}function de(e){O.number(e)||(e=E.seekTime),me(Be.media.currentTime-e)}function pe(e){O.number(e)||(e=E.seekTime),me(Be.media.currentTime+e)}function me(e){var t=0,n=Be.media.paused,r=fe();O.number(e)?t=e:O.object(e)&&s(["input","change"],e.type)&&(t=e.target.value/e.target.max*r),t<0?t=0:t>r&&(t=r),Ne(t);try{Be.media.currentTime=t.toFixed(4)}catch(e){}if(s(E.types.embed,Be.type)){switch(Be.type){case"youtube":Be.embed.seekTo(t);break;case"vimeo":Be.embed.setCurrentTime(t.toFixed(0));break;case"soundcloud":Be.embed.seekTo(1e3*t)}n&&ue(),A(Be.media,"timeupdate"),Be.media.seeking=!0,A(Be.media,"seeking")}Je("Seeking to "+Be.media.currentTime+" seconds"),W(t)}function fe(){var e=parseInt(E.duration),t=0;return null===Be.media.duration||isNaN(Be.media.duration)||(t=Be.media.duration),isNaN(e)?t:e}function ye(){m(Be.container,E.classes.playing,!Be.media.paused),m(Be.container,E.classes.stopped,Be.media.paused),Me(Be.media.paused)}function be(){P={x:e.pageXOffset||0,y:e.pageYOffset||0}}function ve(){e.scrollTo(P.x,P.y)}function ge(e){var n=N.supportsFullScreen;if(n){if(!e||e.type!==N.fullScreenEventName)return N.isFullScreen(Be.container)?N.cancelFullScreen():(be(),N.requestFullScreen(Be.container)),void(Be.isFullscreen=N.isFullScreen(Be.container));Be.isFullscreen=N.isFullScreen(Be.container)}else Be.isFullscreen=!Be.isFullscreen,t.body.style.overflow=Be.isFullscreen?"hidden":"";m(Be.container,E.classes.fullscreen.active,Be.isFullscreen),$(Be.isFullscreen),Be.buttons&&Be.buttons.fullscreen&&k(Be.buttons.fullscreen,Be.isFullscreen),A(Be.container,Be.isFullscreen?"enterfullscreen":"exitfullscreen",!0),!Be.isFullscreen&&n&&ve()}function he(e){if(O.boolean(e)||(e=!Be.media.muted),k(Be.buttons.mute,e),Be.media.muted=e,0===Be.media.volume&&ke(E.volume),s(E.types.embed,Be.type)){switch(Be.type){case"youtube":Be.embed[Be.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":Be.embed.setVolume(Be.media.muted?0:parseFloat(E.volume/E.volumeMax))}A(Be.media,"volumechange")}}function ke(e){var t=E.volumeMax,n=E.volumeMin;if(O.undefined(e)&&(e=Be.storage.volume),(null===e||isNaN(e))&&(e=E.volume),e>t&&(e=t),e<n&&(e=n),Be.media.volume=parseFloat(e/t),Be.volume.display&&(Be.volume.display.value=e),s(E.types.embed,Be.type)){switch(Be.type){case"youtube":Be.embed.setVolume(100*Be.media.volume);break;case"vimeo":case"soundcloud":Be.embed.setVolume(Be.media.volume)}A(Be.media,"volumechange")}0===e?Be.media.muted=!0:Be.media.muted&&e>0&&he()}function we(e){var t=Be.media.muted?0:Be.media.volume*E.volumeMax;O.number(e)||(e=E.volumeStep),ke(t+e)}function xe(e){var t=Be.media.muted?0:Be.media.volume*E.volumeMax;O.number(e)||(e=E.volumeStep),ke(t-e)}function Te(){var e=Be.media.muted?0:Be.media.volume*E.volumeMax;Be.supported.full&&(Be.volume.input&&(Be.volume.input.value=e),Be.volume.display&&(Be.volume.display.value=e)),te({volume:e}),m(Be.container,E.classes.muted,0===e),Be.supported.full&&Be.buttons.mute&&k(Be.buttons.mute,0===e)}function Se(e){Be.supported.full&&Be.buttons.captions&&(O.boolean(e)||(e=Be.container.className.indexOf(E.classes.captions.active)===-1),Be.captionsEnabled=e,k(Be.buttons.captions,Be.captionsEnabled),m(Be.container,E.classes.captions.active,Be.captionsEnabled),A(Be.container,Be.captionsEnabled?"captionsenabled":"captionsdisabled",!0),te({captionsEnabled:Be.captionsEnabled}))}function _e(e){var t="waiting"===e.type;clearTimeout(Xe.loading),Xe.loading=setTimeout(function(){m(Be.container,E.classes.loading,t),Me(t)},t?250:0)}function Ee(e){if(Be.supported.full){var t=Be.progress.played,n=0,r=fe();if(e)switch(e.type){case"timeupdate":case"seeking":if(Be.controls.pressed)return;n=w(Be.media.currentTime,r),"timeupdate"===e.type&&Be.buttons.seek&&(Be.buttons.seek.value=n);break;case"playing":case"progress":t=Be.progress.buffer,n=function(){var e=Be.media.buffered;return e&&e.length?w(e.end(0),r):O.number(e)?100*e:0}()}Ce(t,n)}}function Ce(e,t){if(Be.supported.full){if(O.undefined(t)&&(t=0),O.undefined(e)){if(!Be.progress||!Be.progress.buffer)return;e=Be.progress.buffer}O.htmlElement(e)?e.value=t:e&&(e.bar&&(e.bar.value=t),e.text&&(e.text.innerHTML=t))}}function Fe(e,t){if(t){isNaN(e)&&(e=0),Be.secs=parseInt(e%60),Be.mins=parseInt(e/60%60),Be.hours=parseInt(e/60/60%60);var n=parseInt(fe()/60/60%60)>0;Be.secs=("0"+Be.secs).slice(-2),Be.mins=("0"+Be.mins).slice(-2),t.innerHTML=(n?Be.hours+":":"")+Be.mins+":"+Be.secs}}function Ae(){if(Be.supported.full){var e=fe()||0;!Be.duration&&E.displayDuration&&Be.media.paused&&Fe(e,Be.currentTime),Be.duration&&Fe(e,Be.duration),Pe()}}function Ie(e){Fe(Be.media.currentTime,Be.currentTime),e&&"timeupdate"===e.type&&Be.media.seeking||Ee(e)}function Ne(e){O.number(e)||(e=0);var t=fe(),n=w(e,t);Be.progress&&Be.progress.played&&(Be.progress.played.value=n),Be.buttons&&Be.buttons.seek&&(Be.buttons.seek.value=n)}function Pe(e){var t=fe();if(E.tooltips.seek&&Be.progress.container&&0!==t){var n=Be.progress.container.getBoundingClientRect(),r=0,a=E.classes.tooltip+"--visible";if(e)r=100/n.width*(e.pageX-n.left);else{if(!f(Be.progress.tooltip,a))return;r=Be.progress.tooltip.style.left.replace("%","")}r<0?r=0:r>100&&(r=100),Fe(t/100*r,Be.progress.tooltip),Be.progress.tooltip.style.left=r+"%",e&&s(["mouseenter","mouseleave"],e.type)&&m(Be.progress.tooltip,a,"mouseenter"===e.type)}}function Me(t){if(E.hideControls&&"audio"!==Be.type){var n=0,r=!1,a=t,o=f(Be.container,E.classes.loading);if(O.boolean(t)||(t&&t.type?(r="enterfullscreen"===t.type,a=s(["mousemove","touchstart","mouseenter","focus"],t.type),s(["mousemove","touchmove"],t.type)&&(n=2e3),"focus"===t.type&&(n=3e3)):a=f(Be.container,E.classes.hideControls)),e.clearTimeout(Xe.hover),a||Be.media.paused||o){if(m(Be.container,E.classes.hideControls,!1),Be.media.paused||o)return;Be.browser.isTouch&&(n=3e3)}a&&Be.media.paused||(Xe.hover=e.setTimeout(function(){(!Be.controls.pressed&&!Be.controls.hover||r)&&m(Be.container,E.classes.hideControls,!0)},n))}}function Oe(e){if(!O.undefined(e))return void Le(e);var t;switch(Be.type){case"youtube":t=Be.embed.getVideoUrl();break;case"vimeo":Be.embed.getVideoUrl.then(function(e){t=e});break;case"soundcloud":Be.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=Be.media.currentSrc}return t||""}function Le(e){function n(){if(Be.embed=null,l(Be.media),"video"===Be.type&&Be.videoContainer&&l(Be.videoContainer),Be.container&&Be.container.removeAttribute("class"),"type"in e&&(Be.type=e.type,"video"===Be.type)){var n=e.sources[0];"type"in n&&s(E.types.embed,n.type)&&(Be.type=n.type)}switch(Be.supported=F(Be.type),Be.type){case"video":Be.media=t.createElement("video");break;case"audio":Be.media=t.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":Be.media=t.createElement("div"),Be.embedId=e.sources[0].src}u(Be.container,Be.media),O.boolean(e.autoplay)&&(E.autoplay=e.autoplay),s(E.types.html5,Be.type)&&(E.crossorigin&&Be.media.setAttribute("crossorigin",""),E.autoplay&&Be.media.setAttribute("autoplay",""),"poster"in e&&Be.media.setAttribute("poster",e.poster),E.loop&&Be.media.setAttribute("loop","")),m(Be.container,E.classes.fullscreen.active,Be.isFullscreen),m(Be.container,E.classes.captions.active,Be.captionsEnabled),K(),s(E.types.html5,Be.type)&&J("source",e.sources),ne(),s(E.types.html5,Be.type)&&("tracks"in e&&J("track",e.tracks),Be.media.load()),(s(E.types.html5,Be.type)||s(E.types.embed,Be.type)&&!Be.supported.full)&&(We(),Ye()),E.title=e.title,Z()}return O.object(e)&&"sources"in e&&e.sources.length?(m(Be.container,E.classes.ready,!1),ue(),Ne(),Ce(),qe(),void De(n,!1)):void ze("Invalid source format")}function je(e){"video"===Be.type&&Be.media.setAttribute("poster",e)}function Ve(){function n(){var e=ce(),t=Be.buttons[e?"play":"pause"],n=Be.buttons[e?"pause":"play"];if(n=n&&n.length>1?n[n.length-1]:n[0]){var r=f(t,E.classes.tabFocus);setTimeout(function(){n.focus(),r&&(m(t,E.classes.tabFocus,!1),m(n,E.classes.tabFocus,!0))},100)}}function r(){var e=t.activeElement;return e=e&&e!==t.body?t.querySelector(":focus"):null}function a(e){return e.keyCode?e.keyCode:e.which}function o(e){for(var t in Be.buttons){var n=Be.buttons[t];if(O.nodeList(n))for(var r=0;r<n.length;r++)m(n[r],E.classes.tabFocus,n[r]===e);else m(n,E.classes.tabFocus,n===e)}}function i(e){function t(){var e=Be.media.duration;O.number(e)&&me(e/10*(n-48))}var n=a(e),r="keydown"===e.type,o=r&&n===u;if(O.number(n))if(r){var i=[48,49,50,51,52,53,54,56,57,32,75,38,40,77,39,37,70,67];switch(s(i,n)&&(e.preventDefault(),e.stopPropagation()),n){case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:o||t();break;case 32:case 75:o||ce();break;case 38:we();break;case 40:xe();break;case 77:o||he();break;case 39:pe();break;case 37:de();break;case 70:ge();break;case 67:o||Se()}!N.supportsFullScreen&&Be.isFullscreen&&27===n&&ge(),u=n}else u=null}var l=Be.browser.isIE?"change":"input";if(E.keyboardShorcuts.focused){var u=null;E.keyboardShorcuts.global&&g(e,"keydown keyup",function(e){var t=a(e),n=r(),o=[48,49,50,51,52,53,54,56,57,75,77,70,67],l=I().length;1!==l||!s(o,t)||O.htmlElement(n)&&y(n,E.selectors.editable)||i(e)}),g(Be.container,"keydown keyup",i)}g(e,"keyup",function(e){var t=a(e),n=r();9===t&&o(n)}),g(t.body,"click",function(){m(B("."+E.classes.tabFocus),E.classes.tabFocus,!1)});for(var c in Be.buttons){var d=Be.buttons[c];g(d,"blur",function(){m(d,"tab-focus",!1);
-})}b(Be.buttons.play,"click",E.listeners.play,n),b(Be.buttons.pause,"click",E.listeners.pause,n),b(Be.buttons.restart,"click",E.listeners.restart,me),b(Be.buttons.rewind,"click",E.listeners.rewind,de),b(Be.buttons.forward,"click",E.listeners.forward,pe),b(Be.buttons.seek,l,E.listeners.seek,me),b(Be.volume.input,l,E.listeners.volume,function(){ke(Be.volume.input.value)}),b(Be.buttons.mute,"click",E.listeners.mute,he),b(Be.buttons.fullscreen,"click",E.listeners.fullscreen,ge),N.supportsFullScreen&&g(t,N.fullScreenEventName,ge),b(Be.buttons.captions,"click",E.listeners.captions,Se),g(Be.progress.container,"mouseenter mouseleave mousemove",Pe),E.hideControls&&(g(Be.container,"mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen",Me),g(Be.controls,"mouseenter mouseleave",function(e){Be.controls.hover="mouseenter"===e.type}),g(Be.controls,"mousedown mouseup touchstart touchend touchcancel",function(e){Be.controls.pressed=s(["mousedown","touchstart"],e.type)}),g(Be.controls,"focus blur",Me,!0)),g(Be.volume.input,"wheel",function(e){e.preventDefault();var t=e.webkitDirectionInvertedFromDevice,n=E.volumeStep/5;(e.deltaY<0||e.deltaX>0)&&(t?xe(n):we(n)),(e.deltaY>0||e.deltaX<0)&&(t?we(n):xe(n))})}function Re(){if(g(Be.media,"timeupdate seeking",Ie),g(Be.media,"timeupdate",W),g(Be.media,"durationchange loadedmetadata",Ae),g(Be.media,"ended",function(){"video"===Be.type&&E.showPosterOnEnd&&("video"===Be.type&&H(),me(),Be.media.load())}),g(Be.media,"progress playing",Ee),g(Be.media,"volumechange",Te),g(Be.media,"play pause ended",ye),g(Be.media,"waiting canplay seeked",_e),E.clickToPlay&&"audio"!==Be.type){var e=B("."+E.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",g(e,"click",function(){E.hideControls&&Be.browser.isTouch&&!Be.media.paused||(Be.media.paused?le():Be.media.ended?(me(),le()):ue())})}E.disableContextMenu&&g(Be.media,"contextmenu",function(e){e.preventDefault()}),g(Be.media,E.events.concat(["keyup","keydown"]).join(" "),function(e){A(Be.container,e.type,!0)})}function qe(){if(s(E.types.html5,Be.type)){for(var e=Be.media.querySelectorAll("source"),t=0;t<e.length;t++)l(e[t]);Be.media.setAttribute("src",E.blankUrl),Be.media.load(),Je("Cancelled network requests")}}function De(n,r){function a(){clearTimeout(Xe.cleanUp),O.boolean(r)||(r=!0),O.function(n)&&n.call($e),r&&(Be.init=!1,Be.container.parentNode.replaceChild($e,Be.container),t.body.style.overflow="",A($e,"destroyed",!0))}if(!Be.init)return null;switch(Be.type){case"youtube":e.clearInterval(Xe.buffering),e.clearInterval(Xe.playing),Be.embed.destroy(),a();break;case"vimeo":Be.embed.unload().then(a),Xe.cleanUp=e.setTimeout(a,200);break;case"video":case"audio":Q(!0),a()}}function He(){if(Be.init)return null;if(N=_(),Be.browser=n(),O.htmlElement(Be.media)){ee();var e=v.tagName.toLowerCase();"div"===e?(Be.type=v.getAttribute("data-type"),Be.embedId=v.getAttribute("data-video-id"),v.removeAttribute("data-type"),v.removeAttribute("data-video-id")):(Be.type=e,E.crossorigin=null!==v.getAttribute("crossorigin"),E.autoplay=E.autoplay||null!==v.getAttribute("autoplay"),E.loop=E.loop||null!==v.getAttribute("loop")),Be.supported=F(Be.type),Be.supported.basic&&(Be.container=i(v,t.createElement("div")),Be.container.setAttribute("tabindex",0),K(),Je(""+Be.browser.name+" "+Be.browser.version),ne(),(s(E.types.html5,Be.type)||s(E.types.embed,Be.type)&&!Be.supported.full)&&(We(),Ye(),Z()),Be.init=!0)}}function We(){if(!Be.supported.full)return ze("Basic support only",Be.type),l(B(E.selectors.controls.wrapper)),l(B(E.selectors.buttons.play)),void Q(!0);var e=!U(E.selectors.controls.wrapper).length;e&&z(),G()&&(e&&Ve(),Re(),Q(),q(),D(),ke(),Te(),Ie(),ye())}function Ye(){e.setTimeout(function(){A(Be.media,"ready")},0),m(Be.media,M.classes.setup,!0),m(Be.container,E.classes.ready,!0),Be.media.plyr=Ue,E.autoplay&&le()}var Ue,Be=this,Xe={};Be.media=v;var $e=v.cloneNode(!0),Je=function(){j("log",arguments)},ze=function(){j("warn",arguments)};return Je("Config",E),Ue={getOriginal:function(){return $e},getContainer:function(){return Be.container},getEmbed:function(){return Be.embed},getMedia:function(){return Be.media},getType:function(){return Be.type},getDuration:fe,getCurrentTime:function(){return Be.media.currentTime},getVolume:function(){return Be.media.volume},isMuted:function(){return Be.media.muted},isReady:function(){return f(Be.container,E.classes.ready)},isLoading:function(){return f(Be.container,E.classes.loading)},isPaused:function(){return Be.media.paused},on:function(e,t){return g(Be.container,e,t),this},play:le,pause:ue,stop:function(){ue(),me()},restart:me,rewind:de,forward:pe,seek:me,source:Oe,poster:je,setVolume:ke,togglePlay:ce,toggleMute:he,toggleCaptions:Se,toggleFullscreen:ge,toggleControls:Me,isFullscreen:function(){return Be.isFullscreen||!1},support:function(e){return r(Be,e)},destroy:De},He(),Be.init?Ue:null}function C(e,n){var r=new XMLHttpRequest;if(!O.string(n)||!O.htmlElement(t.querySelector("#"+n))){var a=t.createElement("div");a.setAttribute("hidden",""),O.string(n)&&a.setAttribute("id",n),t.body.insertBefore(a,t.body.childNodes[0]),"withCredentials"in r&&(r.open("GET",e,!0),r.onload=function(){a.innerHTML=r.responseText},r.send())}}function F(e){var r=n(),a=r.isIE&&r.version<=9,s=r.isIos,o=r.isIphone,i=!!t.createElement("audio").canPlayType,l=!!t.createElement("video").canPlayType,u=!1,c=!1;switch(e){case"video":u=l,c=u&&!a&&!o;break;case"audio":u=i,c=u&&!a;break;case"vimeo":u=!0,c=!a&&!s;break;case"youtube":u=!0,c=!a&&!s,s&&!o&&r.version>=10&&(c=!0);break;case"soundcloud":u=!0,c=!a&&!o;break;default:u=i&&l,c=u&&!a}return{basic:u,full:c}}function A(e,n){function r(e,t){f(t,M.classes.hook)||a.push({target:e,media:t})}var a=[],s=[],o=[M.selectors.html5,M.selectors.embed].join(",");if(O.string(e)?e=t.querySelectorAll(e):O.htmlElement(e)?e=[e]:O.nodeList(e)||O.array(e)||O.string(e)||(O.undefined(n)&&O.object(e)&&(n=e),e=t.querySelectorAll(o)),O.nodeList(e)&&(e=Array.prototype.slice.call(e)),!F().basic||!e.length)return!1;for(var i=0;i<e.length;i++){var l=e[i],u=l.querySelectorAll(o);if(u.length)for(var c=0;c<u.length;c++)r(l,u[c]);else y(l,o)&&r(l,l)}return a.forEach(function(e){var t=e.target,r=e.media,a=!1;r===t&&(a=!0);var o={};try{o=JSON.parse(t.getAttribute("data-plyr"))}catch(e){}var i=x({},M,n,o);if(!i.enabled)return null;var l=new E(r,i);if(O.object(l)){if(i.debug){var u=i.events.concat(["setup","statechange","enterfullscreen","exitfullscreen","captionsenabled","captionsdisabled"]);g(l.getContainer(),u.join(" "),function(e){console.log([i.logPrefix,"event:",e.type].join(" "),e.detail.plyr)})}h(l.getContainer(),"setup",!0,{plyr:l}),s.push(l)}}),s}function I(e){if(O.string(e)?e=t.querySelector(e):O.undefined(e)&&(e=t.body),O.htmlElement(e)){var n=e.querySelectorAll("."+M.classes.setup),r=[];return Array.prototype.slice.call(n).forEach(function(e){O.object(e.plyr)&&r.push(e.plyr)}),r}return[]}var N,P={x:0,y:0},M={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:10,volumeMin:0,volumeMax:10,volumeStep:1,duration:null,displayDuration:!0,loadSprite:!0,iconPrefix:"plyr",iconUrl:"https://cdn.plyr.io/2.0.13/plyr.svg",blankUrl:"https://cdn.selz.com/plyr/blank.mp4",clickToPlay:!0,hideControls:!0,showPosterOnEnd:!1,disableContextMenu:!0,keyboardShorcuts:{focused:!0,global:!1},tooltips:{controls:!1,seek:!0},selectors:{html5:"video, audio",embed:"[data-type]",editable:"input, textarea, select, [contenteditable]",container:".plyr",controls:{container:null,wrapper:".plyr__controls"},labels:"[data-plyr]",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},volume:{input:'[data-plyr="volume"]',display:".plyr__volume--display"},progress:{container:".plyr__progress",buffer:".plyr__progress--buffer",played:".plyr__progress--played"},captions:".plyr__captions",currentTime:".plyr__time--current",duration:".plyr__time--duration"},classes:{setup:"plyr--setup",ready:"plyr--ready",videoWrapper:"plyr__video-wrapper",embedWrapper:"plyr__video-embed",type:"plyr--{0}",stopped:"plyr--stopped",playing:"plyr--playing",muted:"plyr--muted",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",hidden:"plyr__sr-only",hideControls:"plyr--hide-controls",isIos:"plyr--is-ios",isTouch:"plyr--is-touch",captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",active:"plyr--fullscreen-active"},tabFocus:"tab-focus"},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,allowAudio:!1},storage:{enabled:!0,key:"plyr"},controls:["play-large","play","progress","current-time","mute","volume","captions","fullscreen"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",played:"played",buffered:"buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen",frameTitle:"Player for {title}"},types:{embed:["youtube","vimeo","soundcloud"],html5:["video","audio"]},urls:{vimeo:{api:"https://player.vimeo.com/api/player.js"},youtube:{api:"https://www.youtube.com/iframe_api"},soundcloud:{api:"https://w.soundcloud.com/player/api.js"}},listeners:{seek:null,play:null,pause:null,restart:null,rewind:null,forward:null,mute:null,volume:null,captions:null,fullscreen:null},events:["ready","ended","progress","stalled","playing","waiting","canplay","canplaythrough","loadstart","loadeddata","loadedmetadata","timeupdate","volumechange","play","pause","error","seeking","seeked","emptied"],logPrefix:"[Plyr]"},O={object:function(e){return null!==e&&"object"==typeof e},array:function(e){return null!==e&&"object"==typeof e&&e.constructor===Array},number:function(e){return null!==e&&("number"==typeof e&&!isNaN(e-0)||"object"==typeof e&&e.constructor===Number)},string:function(e){return null!==e&&("string"==typeof e||"object"==typeof e&&e.constructor===String)},boolean:function(e){return null!==e&&"boolean"==typeof e},nodeList:function(e){return null!==e&&e instanceof NodeList},htmlElement:function(e){return null!==e&&e instanceof HTMLElement},function:function(e){return null!==e&&"function"==typeof e},undefined:function(e){return null!==e&&"undefined"==typeof e}},L={supported:function(){if(!("localStorage"in e))return!1;try{e.localStorage.setItem("___test","OK");var t=e.localStorage.getItem("___test");return e.localStorage.removeItem("___test"),"OK"===t}catch(e){return!1}return!1}()};return{setup:A,supported:F,loadSprite:C,get:I}}),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}"function"!=typeof window.CustomEvent&&(e.prototype=window.Event.prototype,window.CustomEvent=e)}(); \ No newline at end of file
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define([],function(){return t(e,document)}):e.plyr=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(){var e,n,r,a=navigator.userAgent,s=navigator.appName,o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10),l=!1,u=!1,c=!1,d=!1;return navigator.appVersion.indexOf("Windows NT")!==-1&&navigator.appVersion.indexOf("rv:11")!==-1?(l=!0,s="IE",o="11"):(n=a.indexOf("MSIE"))!==-1?(l=!0,s="IE",o=a.substring(n+5)):(n=a.indexOf("Chrome"))!==-1?(c=!0,s="Chrome",o=a.substring(n+7)):(n=a.indexOf("Safari"))!==-1?(d=!0,s="Safari",o=a.substring(n+7),(n=a.indexOf("Version"))!==-1&&(o=a.substring(n+8))):(n=a.indexOf("Firefox"))!==-1?(u=!0,s="Firefox",o=a.substring(n+8)):(e=a.lastIndexOf(" ")+1)<(n=a.lastIndexOf("/"))&&(s=a.substring(e,n),o=a.substring(n+1),s.toLowerCase()===s.toUpperCase()&&(s=navigator.appName)),(r=o.indexOf(";"))!==-1&&(o=o.substring(0,r)),(r=o.indexOf(" "))!==-1&&(o=o.substring(0,r)),i=parseInt(""+o,10),isNaN(i)&&(o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10)),{name:s,version:i,isIE:l,isFirefox:u,isChrome:c,isSafari:d,isIos:/(iPad|iPhone|iPod)/g.test(navigator.platform),isIphone:/(iPhone|iPod)/g.test(navigator.userAgent),isTouch:"ontouchstart"in t.documentElement}}function r(e,t){var n=e.media;if("video"===e.type)switch(t){case"video/webm":return!(!n.canPlayType||!n.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/,""));case"video/mp4":return!(!n.canPlayType||!n.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/,""));case"video/ogg":return!(!n.canPlayType||!n.canPlayType('video/ogg; codecs="theora"').replace(/no/,""))}else if("audio"===e.type)switch(t){case"audio/mpeg":return!(!n.canPlayType||!n.canPlayType("audio/mpeg;").replace(/no/,""));case"audio/ogg":return!(!n.canPlayType||!n.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/,""));case"audio/wav":return!(!n.canPlayType||!n.canPlayType('audio/wav; codecs="1"').replace(/no/,""))}return!1}function a(e){if(!t.querySelectorAll('script[src="'+e+'"]').length){var n=t.createElement("script");n.src=e;var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(n,r)}}function s(e,t){return Array.prototype.indexOf&&e.indexOf(t)!==-1}function o(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function i(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],s=a.parentNode,o=a.nextSibling;return r.appendChild(a),o?s.insertBefore(r,o):s.appendChild(r),r}}function l(e){e&&e.parentNode.removeChild(e)}function u(e,t){e.insertBefore(t,e.firstChild)}function c(e,t){for(var n in t)e.setAttribute(n,O["boolean"](t[n])&&t[n]?"":t[n])}function d(e,n,r){var a=t.createElement(e);c(a,r),u(n,a)}function p(e){return e.replace(".","")}function m(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 f(e,t){return!!e&&(e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className))}function y(e,n){var r=Element.prototype,a=r.matches||r.webkitMatchesSelector||r.mozMatchesSelector||r.msMatchesSelector||function(e){return[].indexOf.call(t.querySelectorAll(e),this)!==-1};return a.call(e,n)}function b(e,t,n,r,a){g(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])},a)}function v(e,t,n,r,a){var s=t.split(" ");if(O["boolean"](a)||(a=!1),e instanceof NodeList)for(var o=0;o<e.length;o++)e[o]instanceof Node&&v(e[o],arguments[1],arguments[2],arguments[3]);else for(var i=0;i<s.length;i++)e[r?"addEventListener":"removeEventListener"](s[i],n,a)}function g(e,t,n,r){e&&v(e,t,n,!0,r)}function h(e,t,n,r){if(e&&t){O["boolean"](n)||(n=!1);var a=new CustomEvent(t,{bubbles:n,detail:r});e.dispatchEvent(a)}}function k(e,t){if(e)return t=O["boolean"](t)?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t}function w(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function x(){var e=arguments;if(e.length){if(1===e.length)return e[0];for(var t=Array.prototype.shift.call(e),n=e.length,r=0;r<n;r++){var a=e[r];for(var s in a)a[s]&&a[s].constructor&&a[s].constructor===Object?(t[s]=t[s]||{},x(t[s],a[s])):t[s]=a[s]}return t}}function T(e){var t=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;return e.match(t)?RegExp.$2:e}function S(e){var t=/^.*(vimeo.com\/|video\/)(\d+).*/;return e.match(t)?RegExp.$2:e}function _(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit o moz ms khtml".split(" ");if(O.undefined(t.cancelFullScreen))for(var r=0,a=n.length;r<a;r++){if(e.prefix=n[r],!O.undefined(t[e.prefix+"CancelFullScreen"])){e.supportsFullScreen=!0;break}if(!O.undefined(t.msExitFullscreen)&&t.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}else e.supportsFullScreen=!0;return e.supportsFullScreen&&(e.fullScreenEventName="ms"===e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch(O.undefined(e)&&(e=t.body),this.prefix){case"":return t.fullscreenElement===e;case"moz":return t.mozFullScreenElement===e;default:return t[this.prefix+"FullscreenElement"]===e}},e.requestFullScreen=function(e){return O.undefined(e)&&(e=t.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"===this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?t.cancelFullScreen():t[this.prefix+("ms"===this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?t.fullscreenElement:t[this.prefix+"FullscreenElement"]}),e}function E(v,E){function A(e,t,n,r){h(e,t,n,x({},r,{plyr:Ue}))}function j(t,n){E.debug&&e.console&&(n=Array.prototype.slice.call(n),O.string(E.logPrefix)&&E.logPrefix.length&&n.unshift(E.logPrefix),console[t].apply(console,n))}function V(){return{url:E.iconUrl,absolute:0===E.iconUrl.indexOf("http")||Be.browser.isIE}}function R(){var e=[],t=V(),n=(t.absolute?"":t.url)+"#"+E.iconPrefix;return s(E.controls,"play-large")&&e.push('<button type="button" data-plyr="play" class="plyr__play-large">','<svg><use xlink:href="'+n+'-play" /></svg>','<span class="plyr__sr-only">'+E.i18n.play+"</span>","</button>"),e.push('<div class="plyr__controls">'),s(E.controls,"restart")&&e.push('<button type="button" data-plyr="restart">','<svg><use xlink:href="'+n+'-restart" /></svg>','<span class="plyr__sr-only">'+E.i18n.restart+"</span>","</button>"),s(E.controls,"rewind")&&e.push('<button type="button" data-plyr="rewind">','<svg><use xlink:href="'+n+'-rewind" /></svg>','<span class="plyr__sr-only">'+E.i18n.rewind+"</span>","</button>"),s(E.controls,"play")&&e.push('<button type="button" data-plyr="play">','<svg><use xlink:href="'+n+'-play" /></svg>','<span class="plyr__sr-only">'+E.i18n.play+"</span>","</button>",'<button type="button" data-plyr="pause">','<svg><use xlink:href="'+n+'-pause" /></svg>','<span class="plyr__sr-only">'+E.i18n.pause+"</span>","</button>"),s(E.controls,"fast-forward")&&e.push('<button type="button" data-plyr="fast-forward">','<svg><use xlink:href="'+n+'-fast-forward" /></svg>','<span class="plyr__sr-only">'+E.i18n.forward+"</span>","</button>"),s(E.controls,"progress")&&(e.push('<span class="plyr__progress">','<label for="seek{id}" class="plyr__sr-only">Seek</label>','<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">','<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>','<progress class="plyr__progress--buffer" max="100" value="0">',"<span>0</span>% "+E.i18n.buffered,"</progress>"),E.tooltips.seek&&e.push('<span class="plyr__tooltip">00:00</span>'),e.push("</span>")),s(E.controls,"current-time")&&e.push('<span class="plyr__time">','<span class="plyr__sr-only">'+E.i18n.currentTime+"</span>",'<span class="plyr__time--current">00:00</span>',"</span>"),s(E.controls,"duration")&&e.push('<span class="plyr__time">','<span class="plyr__sr-only">'+E.i18n.duration+"</span>",'<span class="plyr__time--duration">00:00</span>',"</span>"),s(E.controls,"mute")&&e.push('<button type="button" data-plyr="mute">','<svg class="icon--muted"><use xlink:href="'+n+'-muted" /></svg>','<svg><use xlink:href="'+n+'-volume" /></svg>','<span class="plyr__sr-only">'+E.i18n.toggleMute+"</span>","</button>"),s(E.controls,"volume")&&e.push('<span class="plyr__volume">','<label for="volume{id}" class="plyr__sr-only">'+E.i18n.volume+"</label>",'<input id="volume{id}" class="plyr__volume--input" type="range" min="'+E.volumeMin+'" max="'+E.volumeMax+'" value="'+E.volume+'" data-plyr="volume">','<progress class="plyr__volume--display" max="'+E.volumeMax+'" value="'+E.volumeMin+'" role="presentation"></progress>',"</span>"),s(E.controls,"captions")&&e.push('<button type="button" data-plyr="captions">','<svg class="icon--captions-on"><use xlink:href="'+n+'-captions-on" /></svg>','<svg><use xlink:href="'+n+'-captions-off" /></svg>','<span class="plyr__sr-only">'+E.i18n.toggleCaptions+"</span>","</button>"),s(E.controls,"fullscreen")&&e.push('<button type="button" data-plyr="fullscreen">','<svg class="icon--exit-fullscreen"><use xlink:href="'+n+'-exit-fullscreen" /></svg>','<svg><use xlink:href="'+n+'-enter-fullscreen" /></svg>','<span class="plyr__sr-only">'+E.i18n.toggleFullscreen+"</span>","</button>"),e.push("</div>"),e.join("")}function q(){if(Be.supported.full&&("audio"!==Be.type||E.fullscreen.allowAudio)&&E.fullscreen.enabled){var e=N.supportsFullScreen;e||E.fullscreen.fallback&&!X()?(Je((e?"Native":"Fallback")+" fullscreen enabled"),e||m(Be.container,E.classes.fullscreen.fallback,!0),m(Be.container,E.classes.fullscreen.enabled,!0)):Je("Fullscreen not supported and fallback disabled"),Be.buttons&&Be.buttons.fullscreen&&k(Be.buttons.fullscreen,!1),$()}}function D(){if("video"===Be.type){B(E.selectors.captions)||Be.videoContainer.insertAdjacentHTML("afterbegin",'<div class="'+p(E.selectors.captions)+'"></div>'),Be.usingTextTracks=!1,Be.media.textTracks&&(Be.usingTextTracks=!0);for(var e,t="",n=Be.media.childNodes,r=0;r<n.length;r++)"track"===n[r].nodeName.toLowerCase()&&(e=n[r].kind,"captions"!==e&&"subtitles"!==e||(t=n[r].getAttribute("src")));if(Be.captionExists=!0,""===t?(Be.captionExists=!1,Je("No caption track found")):Je("Caption track found; URI: "+t),Be.captionExists){for(var a=Be.media.textTracks,s=0;s<a.length;s++)a[s].mode="hidden";if(Y(Be),(Be.browser.isIE&&Be.browser.version>=10||Be.browser.isFirefox&&Be.browser.version>=31)&&(Je("Detected browser with known TextTrack issues - using manual fallback"),Be.usingTextTracks=!1),Be.usingTextTracks){Je("TextTracks supported");for(var o=0;o<a.length;o++){var i=a[o];"captions"!==i.kind&&"subtitles"!==i.kind||g(i,"cuechange",function(){this.activeCues[0]&&"text"in this.activeCues[0]?H(this.activeCues[0].getCueAsHTML()):H()})}}else if(Je("TextTracks not supported so rendering captions manually"),Be.currentCaption="",Be.captions=[],""!==t){var l=new XMLHttpRequest;l.onreadystatechange=function(){if(4===l.readyState)if(200===l.status){var e,t=[],n=l.responseText,r="\r\n";n.indexOf(r+r)===-1&&(r=n.indexOf("\r\r")!==-1?"\r":"\n"),t=n.split(r+r);for(var a=0;a<t.length;a++){e=t[a],Be.captions[a]=[];var s=e.split(r),o=0;s[o].indexOf(":")===-1&&(o=1),Be.captions[a]=[s[o],s[o+1]]}Be.captions.shift(),Je("Successfully loaded the caption file via AJAX")}else ze(E.logPrefix+"There was a problem loading the caption file via AJAX")},l.open("get",t,!0),l.send()}}else m(Be.container,E.classes.captions.enabled)}}function H(e){var n=B(E.selectors.captions),r=t.createElement("span");n.innerHTML="",O.undefined(e)&&(e=""),O.string(e)?r.innerHTML=e.trim():r.appendChild(e),n.appendChild(r);n.offsetHeight}function W(e){function t(e,t){var n=[];n=e.split(" --> ");for(var r=0;r<n.length;r++)n[r]=n[r].replace(/(\d+:\d+:\d+\.\d+).*/,"$1");return a(n[t])}function n(e){return t(e,0)}function r(e){return t(e,1)}function a(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])}if(!Be.usingTextTracks&&"video"===Be.type&&Be.supported.full&&(Be.subcount=0,e=O.number(e)?e:Be.media.currentTime,Be.captions[Be.subcount])){for(;r(Be.captions[Be.subcount][0])<e.toFixed(1);)if(Be.subcount++,Be.subcount>Be.captions.length-1){Be.subcount=Be.captions.length-1;break}Be.media.currentTime.toFixed(1)>=n(Be.captions[Be.subcount][0])&&Be.media.currentTime.toFixed(1)<=r(Be.captions[Be.subcount][0])?(Be.currentCaption=Be.captions[Be.subcount][1],H(Be.currentCaption)):H()}}function Y(){if(Be.buttons.captions){m(Be.container,E.classes.captions.enabled,!0);var e=Be.storage.captionsEnabled;O["boolean"](e)||(e=E.captions.defaultActive),e&&(m(Be.container,E.classes.captions.active,!0),k(Be.buttons.captions,!0))}}function U(e){return Be.container.querySelectorAll(e)}function B(e){return U(e)[0]}function X(){try{return e.self!==e.top}catch(t){return!0}}function $(){function e(e){9===e.which&&Be.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=U("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];g(Be.container,"keydown",e)}function J(e,t){if(O.string(t))d(e,Be.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)d(e,Be.media,t[n])}function z(){if(E.loadSprite){var e=V();e.absolute?(Je("AJAX loading absolute SVG sprite"+(Be.browser.isIE?" (due to IE)":"")),C(e.url,"sprite-plyr")):Je("Sprite will be used as external resource directly")}var n=E.html;Je("Injecting custom controls"),n||(n=R()),n=o(n,"{seektime}",E.seekTime),n=o(n,"{id}",Math.floor(1e4*Math.random()));var r;if(O.string(E.selectors.controls.container)&&(r=t.querySelector(E.selectors.controls.container)),O.htmlElement(r)||(r=Be.container),r.insertAdjacentHTML("beforeend",n),E.tooltips.controls)for(var a=U([E.selectors.controls.wrapper," ",E.selectors.labels," .",E.classes.hidden].join("")),s=a.length-1;s>=0;s--){var i=a[s];m(i,E.classes.hidden,!1),m(i,E.classes.tooltip,!0)}}function G(){try{return Be.controls=B(E.selectors.controls.wrapper),Be.buttons={},Be.buttons.seek=B(E.selectors.buttons.seek),Be.buttons.play=U(E.selectors.buttons.play),Be.buttons.pause=B(E.selectors.buttons.pause),Be.buttons.restart=B(E.selectors.buttons.restart),Be.buttons.rewind=B(E.selectors.buttons.rewind),Be.buttons.forward=B(E.selectors.buttons.forward),Be.buttons.fullscreen=B(E.selectors.buttons.fullscreen),Be.buttons.mute=B(E.selectors.buttons.mute),Be.buttons.captions=B(E.selectors.buttons.captions),Be.progress={},Be.progress.container=B(E.selectors.progress.container),Be.progress.buffer={},Be.progress.buffer.bar=B(E.selectors.progress.buffer),Be.progress.buffer.text=Be.progress.buffer.bar&&Be.progress.buffer.bar.getElementsByTagName("span")[0],Be.progress.played=B(E.selectors.progress.played),Be.progress.tooltip=Be.progress.container&&Be.progress.container.querySelector("."+E.classes.tooltip),Be.volume={},Be.volume.input=B(E.selectors.volume.input),Be.volume.display=B(E.selectors.volume.display),Be.duration=B(E.selectors.duration),Be.currentTime=B(E.selectors.currentTime),Be.seekTime=U(E.selectors.seekTime),!0}catch(e){return ze("It looks like there is a problem with your controls HTML"),Q(!0),!1}}function K(){m(Be.container,E.selectors.container.replace(".",""),Be.supported.full)}function Q(e){e&&s(E.types.html5,Be.type)?Be.media.setAttribute("controls",""):Be.media.removeAttribute("controls")}function Z(e){var t=E.i18n.play;if(O.string(E.title)&&E.title.length&&(t+=", "+E.title,Be.container.setAttribute("aria-label",E.title)),Be.supported.full&&Be.buttons.play)for(var n=Be.buttons.play.length-1;n>=0;n--)Be.buttons.play[n].setAttribute("aria-label",t);O.htmlElement(e)&&e.setAttribute("title",E.i18n.frameTitle.replace("{title}",E.title))}function ee(){var t=null;Be.storage={},L.supported&&E.storage.enabled&&(e.localStorage.removeItem("plyr-volume"),t=e.localStorage.getItem(E.storage.key),t&&(/^\d+(\.\d+)?$/.test(t)?te({volume:parseFloat(t)}):Be.storage=JSON.parse(t)))}function te(t){L.supported&&E.storage.enabled&&(x(Be.storage,t),e.localStorage.setItem(E.storage.key,JSON.stringify(Be.storage)))}function ne(){if(!Be.media)return void ze("No media element found!");if(Be.supported.full&&(m(Be.container,E.classes.type.replace("{0}",Be.type),!0),s(E.types.embed,Be.type)&&m(Be.container,E.classes.type.replace("{0}","video"),!0),m(Be.container,E.classes.stopped,E.autoplay),m(Be.container,E.classes.isIos,Be.browser.isIos),m(Be.container,E.classes.isTouch,Be.browser.isTouch),"video"===Be.type)){var e=t.createElement("div");e.setAttribute("class",E.classes.videoWrapper),i(Be.media,e),Be.videoContainer=e}s(E.types.embed,Be.type)&&re()}function re(){var n,r=t.createElement("div"),s=Be.type+"-"+Math.floor(1e4*Math.random());switch(Be.type){case"youtube":n=T(Be.embedId);break;case"vimeo":n=S(Be.embedId);break;default:n=Be.embedId}for(var o=U('[id^="'+Be.type+'-"]'),i=o.length-1;i>=0;i--)l(o[i]);if(m(Be.media,E.classes.videoWrapper,!0),m(Be.media,E.classes.embedWrapper,!0),"youtube"===Be.type)Be.media.appendChild(r),r.setAttribute("id",s),O.object(e.YT)?se(n,r):(a(E.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){se(n,r)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Be.type)if(Be.supported.full?Be.media.appendChild(r):r=Be.media,r.setAttribute("id",s),O.object(e.Vimeo))oe(n,r);else{a(E.urls.vimeo.api);var u=e.setInterval(function(){O.object(e.Vimeo)&&(e.clearInterval(u),oe(n,r))},50)}else if("soundcloud"===Be.type){var d=t.createElement("iframe");d.loaded=!1,g(d,"load",function(){d.loaded=!0}),c(d,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+n,id:s}),r.appendChild(d),Be.media.appendChild(r),e.SC||a(E.urls.soundcloud.api);var p=e.setInterval(function(){e.SC&&d.loaded&&(e.clearInterval(p),ie.call(d))},50)}}function ae(){Be.supported.full&&(We(),Ye()),Z(B("iframe"))}function se(t,n){Be.embed=new e.YT.Player(n.id,{videoId:t,playerVars:{autoplay:E.autoplay?1:0,controls:Be.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:E.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onError:function(e){A(Be.container,"error",!0,{code:e.data,embed:e.target})},onReady:function(t){var n=t.target;Be.media.play=function(){n.playVideo(),Be.media.paused=!1},Be.media.pause=function(){n.pauseVideo(),Be.media.paused=!0},Be.media.stop=function(){n.stopVideo(),Be.media.paused=!0},Be.media.duration=n.getDuration(),Be.media.paused=!0,Be.media.currentTime=0,Be.media.muted=n.isMuted(),E.title=n.getVideoData().title,Be.supported.full&&Be.media.querySelector("iframe").setAttribute("tabindex","-1"),ae(),A(Be.media,"timeupdate"),A(Be.media,"durationchange"),e.clearInterval(Xe.buffering),Xe.buffering=e.setInterval(function(){Be.media.buffered=n.getVideoLoadedFraction(),(null===Be.media.lastBuffered||Be.media.lastBuffered<Be.media.buffered)&&A(Be.media,"progress"),Be.media.lastBuffered=Be.media.buffered,1===Be.media.buffered&&(e.clearInterval(Xe.buffering),A(Be.media,"canplaythrough"))},200)},onStateChange:function(t){var n=t.target;switch(e.clearInterval(Xe.playing),t.data){case 0:Be.media.paused=!0,A(Be.media,"ended");break;case 1:Be.media.paused=!1,Be.media.seeking&&A(Be.media,"seeked"),Be.media.seeking=!1,A(Be.media,"play"),A(Be.media,"playing"),Xe.playing=e.setInterval(function(){Be.media.currentTime=n.getCurrentTime(),A(Be.media,"timeupdate")},100),Be.media.duration!==n.getDuration()&&(Be.media.duration=n.getDuration(),A(Be.media,"durationchange"));break;case 2:Be.media.paused=!0,A(Be.media,"pause")}A(Be.container,"statechange",!1,{code:t.data})}}})}function oe(t,n){Be.embed=new e.Vimeo.Player(n,{id:parseInt(t),loop:E.loop,autoplay:E.autoplay,byline:!1,portrait:!1,title:!1}),Be.media.play=function(){Be.embed.play(),Be.media.paused=!1},Be.media.pause=function(){Be.embed.pause(),Be.media.paused=!0},Be.media.stop=function(){Be.embed.stop(),Be.media.paused=!0},Be.media.paused=!0,Be.media.currentTime=0,ae(),Be.embed.getCurrentTime().then(function(e){Be.media.currentTime=e,A(Be.media,"timeupdate")}),Be.embed.getDuration().then(function(e){Be.media.duration=e,A(Be.media,"durationchange")}),Be.embed.on("loaded",function(){O.htmlElement(Be.embed.element)&&Be.supported.full&&Be.embed.element.setAttribute("tabindex","-1")}),Be.embed.on("play",function(){Be.media.paused=!1,A(Be.media,"play"),A(Be.media,"playing")}),Be.embed.on("pause",function(){Be.media.paused=!0,A(Be.media,"pause")}),Be.embed.on("timeupdate",function(e){Be.media.seeking=!1,Be.media.currentTime=e.seconds,A(Be.media,"timeupdate")}),Be.embed.on("progress",function(e){Be.media.buffered=e.percent,A(Be.media,"progress"),1===parseInt(e.percent)&&A(Be.media,"canplaythrough")}),Be.embed.on("seeked",function(){Be.media.seeking=!1,A(Be.media,"seeked"),A(Be.media,"play")}),Be.embed.on("ended",function(){Be.media.paused=!0,A(Be.media,"ended")})}function ie(){Be.embed=e.SC.Widget(this),Be.embed.bind(e.SC.Widget.Events.READY,function(){Be.media.play=function(){Be.embed.play(),Be.media.paused=!1},Be.media.pause=function(){Be.embed.pause(),Be.media.paused=!0},Be.media.stop=function(){Be.embed.seekTo(0),Be.embed.pause(),Be.media.paused=!0},Be.media.paused=!0,Be.media.currentTime=0,Be.embed.getDuration(function(e){Be.media.duration=e/1e3,ae()}),Be.embed.getPosition(function(e){Be.media.currentTime=e,A(Be.media,"timeupdate")}),Be.embed.bind(e.SC.Widget.Events.PLAY,function(){Be.media.paused=!1,A(Be.media,"play"),A(Be.media,"playing")}),Be.embed.bind(e.SC.Widget.Events.PAUSE,function(){Be.media.paused=!0,A(Be.media,"pause")}),Be.embed.bind(e.SC.Widget.Events.PLAY_PROGRESS,function(e){Be.media.seeking=!1,Be.media.currentTime=e.currentPosition/1e3,A(Be.media,"timeupdate")}),Be.embed.bind(e.SC.Widget.Events.LOAD_PROGRESS,function(e){Be.media.buffered=e.loadProgress,A(Be.media,"progress"),1===parseInt(e.loadProgress)&&A(Be.media,"canplaythrough")}),Be.embed.bind(e.SC.Widget.Events.FINISH,function(){Be.media.paused=!0,A(Be.media,"ended")})})}function le(){"play"in Be.media&&Be.media.play()}function ue(){"pause"in Be.media&&Be.media.pause()}function ce(e){return O["boolean"](e)||(e=Be.media.paused),e?le():ue(),e}function de(e){O.number(e)||(e=E.seekTime),me(Be.media.currentTime-e)}function pe(e){O.number(e)||(e=E.seekTime),me(Be.media.currentTime+e)}function me(e){var t=0,n=Be.media.paused,r=fe();O.number(e)?t=e:O.object(e)&&s(["input","change"],e.type)&&(t=e.target.value/e.target.max*r),t<0?t=0:t>r&&(t=r),Ne(t);try{Be.media.currentTime=t.toFixed(4)}catch(a){}if(s(E.types.embed,Be.type)){switch(Be.type){case"youtube":Be.embed.seekTo(t);break;case"vimeo":Be.embed.setCurrentTime(t.toFixed(0));break;case"soundcloud":Be.embed.seekTo(1e3*t)}n&&ue(),A(Be.media,"timeupdate"),Be.media.seeking=!0,A(Be.media,"seeking")}Je("Seeking to "+Be.media.currentTime+" seconds"),W(t)}function fe(){var e=parseInt(E.duration),t=0;return null===Be.media.duration||isNaN(Be.media.duration)||(t=Be.media.duration),isNaN(e)?t:e}function ye(){m(Be.container,E.classes.playing,!Be.media.paused),m(Be.container,E.classes.stopped,Be.media.paused),Me(Be.media.paused)}function be(){P={x:e.pageXOffset||0,y:e.pageYOffset||0}}function ve(){e.scrollTo(P.x,P.y)}function ge(e){var n=N.supportsFullScreen;if(n){if(!e||e.type!==N.fullScreenEventName)return N.isFullScreen(Be.container)?N.cancelFullScreen():(be(),N.requestFullScreen(Be.container)),void(Be.isFullscreen=N.isFullScreen(Be.container));Be.isFullscreen=N.isFullScreen(Be.container)}else Be.isFullscreen=!Be.isFullscreen,t.body.style.overflow=Be.isFullscreen?"hidden":"";m(Be.container,E.classes.fullscreen.active,Be.isFullscreen),$(Be.isFullscreen),Be.buttons&&Be.buttons.fullscreen&&k(Be.buttons.fullscreen,Be.isFullscreen),A(Be.container,Be.isFullscreen?"enterfullscreen":"exitfullscreen",!0),!Be.isFullscreen&&n&&ve()}function he(e){if(O["boolean"](e)||(e=!Be.media.muted),k(Be.buttons.mute,e),Be.media.muted=e,0===Be.media.volume&&ke(E.volume),s(E.types.embed,Be.type)){switch(Be.type){case"youtube":Be.embed[Be.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":Be.embed.setVolume(Be.media.muted?0:parseFloat(E.volume/E.volumeMax))}A(Be.media,"volumechange")}}function ke(e){var t=E.volumeMax,n=E.volumeMin;if(O.undefined(e)&&(e=Be.storage.volume),(null===e||isNaN(e))&&(e=E.volume),e>t&&(e=t),e<n&&(e=n),Be.media.volume=parseFloat(e/t),Be.volume.display&&(Be.volume.display.value=e),s(E.types.embed,Be.type)){switch(Be.type){case"youtube":Be.embed.setVolume(100*Be.media.volume);break;case"vimeo":case"soundcloud":Be.embed.setVolume(Be.media.volume)}A(Be.media,"volumechange")}0===e?Be.media.muted=!0:Be.media.muted&&e>0&&he()}function we(e){var t=Be.media.muted?0:Be.media.volume*E.volumeMax;O.number(e)||(e=E.volumeStep),ke(t+e)}function xe(e){var t=Be.media.muted?0:Be.media.volume*E.volumeMax;O.number(e)||(e=E.volumeStep),ke(t-e)}function Te(){var e=Be.media.muted?0:Be.media.volume*E.volumeMax;Be.supported.full&&(Be.volume.input&&(Be.volume.input.value=e),Be.volume.display&&(Be.volume.display.value=e)),te({volume:e}),m(Be.container,E.classes.muted,0===e),Be.supported.full&&Be.buttons.mute&&k(Be.buttons.mute,0===e)}function Se(e){Be.supported.full&&Be.buttons.captions&&(O["boolean"](e)||(e=Be.container.className.indexOf(E.classes.captions.active)===-1),Be.captionsEnabled=e,k(Be.buttons.captions,Be.captionsEnabled),m(Be.container,E.classes.captions.active,Be.captionsEnabled),A(Be.container,Be.captionsEnabled?"captionsenabled":"captionsdisabled",!0),te({captionsEnabled:Be.captionsEnabled}))}function _e(e){var t="waiting"===e.type;clearTimeout(Xe.loading),Xe.loading=setTimeout(function(){m(Be.container,E.classes.loading,t),Me(t)},t?250:0)}function Ee(e){if(Be.supported.full){var t=Be.progress.played,n=0,r=fe();if(e)switch(e.type){case"timeupdate":case"seeking":if(Be.controls.pressed)return;n=w(Be.media.currentTime,r),"timeupdate"===e.type&&Be.buttons.seek&&(Be.buttons.seek.value=n);break;case"playing":case"progress":t=Be.progress.buffer,n=function(){var e=Be.media.buffered;return e&&e.length?w(e.end(0),r):O.number(e)?100*e:0}()}Ce(t,n)}}function Ce(e,t){if(Be.supported.full){if(O.undefined(t)&&(t=0),O.undefined(e)){if(!Be.progress||!Be.progress.buffer)return;e=Be.progress.buffer}O.htmlElement(e)?e.value=t:e&&(e.bar&&(e.bar.value=t),e.text&&(e.text.innerHTML=t))}}function Fe(e,t){if(t){isNaN(e)&&(e=0),Be.secs=parseInt(e%60),Be.mins=parseInt(e/60%60),Be.hours=parseInt(e/60/60%60);var n=parseInt(fe()/60/60%60)>0;Be.secs=("0"+Be.secs).slice(-2),Be.mins=("0"+Be.mins).slice(-2),t.innerHTML=(n?Be.hours+":":"")+Be.mins+":"+Be.secs}}function Ae(){if(Be.supported.full){var e=fe()||0;!Be.duration&&E.displayDuration&&Be.media.paused&&Fe(e,Be.currentTime),Be.duration&&Fe(e,Be.duration),Pe()}}function Ie(e){Fe(Be.media.currentTime,Be.currentTime),e&&"timeupdate"===e.type&&Be.media.seeking||Ee(e)}function Ne(e){O.number(e)||(e=0);var t=fe(),n=w(e,t);Be.progress&&Be.progress.played&&(Be.progress.played.value=n),Be.buttons&&Be.buttons.seek&&(Be.buttons.seek.value=n)}function Pe(e){var t=fe();if(E.tooltips.seek&&Be.progress.container&&0!==t){var n=Be.progress.container.getBoundingClientRect(),r=0,a=E.classes.tooltip+"--visible";if(e)r=100/n.width*(e.pageX-n.left);else{if(!f(Be.progress.tooltip,a))return;r=Be.progress.tooltip.style.left.replace("%","")}r<0?r=0:r>100&&(r=100),Fe(t/100*r,Be.progress.tooltip),Be.progress.tooltip.style.left=r+"%",e&&s(["mouseenter","mouseleave"],e.type)&&m(Be.progress.tooltip,a,"mouseenter"===e.type)}}function Me(t){if(E.hideControls&&"audio"!==Be.type){var n=0,r=!1,a=t,o=f(Be.container,E.classes.loading);if(O["boolean"](t)||(t&&t.type?(r="enterfullscreen"===t.type,a=s(["mousemove","touchstart","mouseenter","focus"],t.type),s(["mousemove","touchmove"],t.type)&&(n=2e3),"focus"===t.type&&(n=3e3)):a=f(Be.container,E.classes.hideControls)),e.clearTimeout(Xe.hover),a||Be.media.paused||o){if(m(Be.container,E.classes.hideControls,!1),Be.media.paused||o)return;Be.browser.isTouch&&(n=3e3)}a&&Be.media.paused||(Xe.hover=e.setTimeout(function(){(!Be.controls.pressed&&!Be.controls.hover||r)&&m(Be.container,E.classes.hideControls,!0)},n))}}function Oe(e){if(!O.undefined(e))return void Le(e);var t;switch(Be.type){case"youtube":t=Be.embed.getVideoUrl();break;case"vimeo":Be.embed.getVideoUrl.then(function(e){t=e});break;case"soundcloud":Be.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=Be.media.currentSrc}return t||""}function Le(e){function n(){if(Be.embed=null,l(Be.media),"video"===Be.type&&Be.videoContainer&&l(Be.videoContainer),Be.container&&Be.container.removeAttribute("class"),"type"in e&&(Be.type=e.type,"video"===Be.type)){var n=e.sources[0];"type"in n&&s(E.types.embed,n.type)&&(Be.type=n.type)}switch(Be.supported=F(Be.type),Be.type){case"video":Be.media=t.createElement("video");break;case"audio":Be.media=t.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":Be.media=t.createElement("div"),Be.embedId=e.sources[0].src}u(Be.container,Be.media),O["boolean"](e.autoplay)&&(E.autoplay=e.autoplay),s(E.types.html5,Be.type)&&(E.crossorigin&&Be.media.setAttribute("crossorigin",""),E.autoplay&&Be.media.setAttribute("autoplay",""),"poster"in e&&Be.media.setAttribute("poster",e.poster),E.loop&&Be.media.setAttribute("loop","")),m(Be.container,E.classes.fullscreen.active,Be.isFullscreen),m(Be.container,E.classes.captions.active,Be.captionsEnabled),K(),s(E.types.html5,Be.type)&&J("source",e.sources),ne(),s(E.types.html5,Be.type)&&("tracks"in e&&J("track",e.tracks),Be.media.load()),(s(E.types.html5,Be.type)||s(E.types.embed,Be.type)&&!Be.supported.full)&&(We(),Ye()),E.title=e.title,Z()}return O.object(e)&&"sources"in e&&e.sources.length?(m(Be.container,E.classes.ready,!1),ue(),Ne(),Ce(),qe(),void De(n,!1)):void ze("Invalid source format")}function je(e){"video"===Be.type&&Be.media.setAttribute("poster",e)}function Ve(){function n(){var e=ce(),t=Be.buttons[e?"play":"pause"],n=Be.buttons[e?"pause":"play"];if(n=n&&n.length>1?n[n.length-1]:n[0]){var r=f(t,E.classes.tabFocus);setTimeout(function(){n.focus(),r&&(m(t,E.classes.tabFocus,!1),m(n,E.classes.tabFocus,!0))},100)}}function r(){var e=t.activeElement;return e=e&&e!==t.body?t.querySelector(":focus"):null}function a(e){return e.keyCode?e.keyCode:e.which}function o(e){for(var t in Be.buttons){var n=Be.buttons[t];if(O.nodeList(n))for(var r=0;r<n.length;r++)m(n[r],E.classes.tabFocus,n[r]===e);else m(n,E.classes.tabFocus,n===e)}}function i(e){function t(){var e=Be.media.duration;O.number(e)&&me(e/10*(n-48))}var n=a(e),r="keydown"===e.type,o=r&&n===u;if(O.number(n))if(r){var i=[48,49,50,51,52,53,54,56,57,32,75,38,40,77,39,37,70,67];switch(s(i,n)&&(e.preventDefault(),e.stopPropagation()),n){case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:o||t();break;case 32:case 75:o||ce();break;case 38:we();break;case 40:xe();break;case 77:o||he();break;case 39:pe();break;case 37:de();break;case 70:ge();break;case 67:o||Se()}!N.supportsFullScreen&&Be.isFullscreen&&27===n&&ge(),u=n}else u=null}var l=Be.browser.isIE?"change":"input";if(E.keyboardShorcuts.focused){var u=null;E.keyboardShorcuts.global&&g(e,"keydown keyup",function(e){var t=a(e),n=r(),o=[48,49,50,51,52,53,54,56,57,75,77,70,67],l=I().length;1!==l||!s(o,t)||O.htmlElement(n)&&y(n,E.selectors.editable)||i(e)}),g(Be.container,"keydown keyup",i)}g(e,"keyup",function(e){var t=a(e),n=r();9===t&&o(n)}),g(t.body,"click",function(){m(B("."+E.classes.tabFocus),E.classes.tabFocus,!1);
+});for(var c in Be.buttons){var d=Be.buttons[c];g(d,"blur",function(){m(d,"tab-focus",!1)})}b(Be.buttons.play,"click",E.listeners.play,n),b(Be.buttons.pause,"click",E.listeners.pause,n),b(Be.buttons.restart,"click",E.listeners.restart,me),b(Be.buttons.rewind,"click",E.listeners.rewind,de),b(Be.buttons.forward,"click",E.listeners.forward,pe),b(Be.buttons.seek,l,E.listeners.seek,me),b(Be.volume.input,l,E.listeners.volume,function(){ke(Be.volume.input.value)}),b(Be.buttons.mute,"click",E.listeners.mute,he),b(Be.buttons.fullscreen,"click",E.listeners.fullscreen,ge),N.supportsFullScreen&&g(t,N.fullScreenEventName,ge),b(Be.buttons.captions,"click",E.listeners.captions,Se),g(Be.progress.container,"mouseenter mouseleave mousemove",Pe),E.hideControls&&(g(Be.container,"mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen",Me),g(Be.controls,"mouseenter mouseleave",function(e){Be.controls.hover="mouseenter"===e.type}),g(Be.controls,"mousedown mouseup touchstart touchend touchcancel",function(e){Be.controls.pressed=s(["mousedown","touchstart"],e.type)}),g(Be.controls,"focus blur",Me,!0)),g(Be.volume.input,"wheel",function(e){e.preventDefault();var t=e.webkitDirectionInvertedFromDevice,n=E.volumeStep/5;(e.deltaY<0||e.deltaX>0)&&(t?xe(n):we(n)),(e.deltaY>0||e.deltaX<0)&&(t?we(n):xe(n))})}function Re(){if(g(Be.media,"timeupdate seeking",Ie),g(Be.media,"timeupdate",W),g(Be.media,"durationchange loadedmetadata",Ae),g(Be.media,"ended",function(){"video"===Be.type&&E.showPosterOnEnd&&("video"===Be.type&&H(),me(),Be.media.load())}),g(Be.media,"progress playing",Ee),g(Be.media,"volumechange",Te),g(Be.media,"play pause ended",ye),g(Be.media,"waiting canplay seeked",_e),E.clickToPlay&&"audio"!==Be.type){var e=B("."+E.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",g(e,"click",function(){E.hideControls&&Be.browser.isTouch&&!Be.media.paused||(Be.media.paused?le():Be.media.ended?(me(),le()):ue())})}E.disableContextMenu&&g(Be.media,"contextmenu",function(e){e.preventDefault()}),g(Be.media,E.events.concat(["keyup","keydown"]).join(" "),function(e){A(Be.container,e.type,!0)})}function qe(){if(s(E.types.html5,Be.type)){for(var e=Be.media.querySelectorAll("source"),t=0;t<e.length;t++)l(e[t]);Be.media.setAttribute("src",E.blankUrl),Be.media.load(),Je("Cancelled network requests")}}function De(n,r){function a(){clearTimeout(Xe.cleanUp),O["boolean"](r)||(r=!0),O["function"](n)&&n.call($e),r&&(Be.init=!1,Be.container.parentNode.replaceChild($e,Be.container),t.body.style.overflow="",A($e,"destroyed",!0))}if(!Be.init)return null;switch(Be.type){case"youtube":e.clearInterval(Xe.buffering),e.clearInterval(Xe.playing),Be.embed.destroy(),a();break;case"vimeo":Be.embed.unload().then(a),Xe.cleanUp=e.setTimeout(a,200);break;case"video":case"audio":Q(!0),a()}}function He(){if(Be.init)return null;if(N=_(),Be.browser=n(),O.htmlElement(Be.media)){ee();var e=v.tagName.toLowerCase();"div"===e?(Be.type=v.getAttribute("data-type"),Be.embedId=v.getAttribute("data-video-id"),v.removeAttribute("data-type"),v.removeAttribute("data-video-id")):(Be.type=e,E.crossorigin=null!==v.getAttribute("crossorigin"),E.autoplay=E.autoplay||null!==v.getAttribute("autoplay"),E.loop=E.loop||null!==v.getAttribute("loop")),Be.supported=F(Be.type),Be.supported.basic&&(Be.container=i(v,t.createElement("div")),Be.container.setAttribute("tabindex",0),K(),Je(""+Be.browser.name+" "+Be.browser.version),ne(),(s(E.types.html5,Be.type)||s(E.types.embed,Be.type)&&!Be.supported.full)&&(We(),Ye(),Z()),Be.init=!0)}}function We(){if(!Be.supported.full)return ze("Basic support only",Be.type),l(B(E.selectors.controls.wrapper)),l(B(E.selectors.buttons.play)),void Q(!0);var e=!U(E.selectors.controls.wrapper).length;e&&z(),G()&&(e&&Ve(),Re(),Q(),q(),D(),ke(),Te(),Ie(),ye())}function Ye(){e.setTimeout(function(){A(Be.media,"ready")},0),m(Be.media,M.classes.setup,!0),m(Be.container,E.classes.ready,!0),Be.media.plyr=Ue,E.autoplay&&le()}var Ue,Be=this,Xe={};Be.media=v;var $e=v.cloneNode(!0),Je=function(){j("log",arguments)},ze=function(){j("warn",arguments)};return Je("Config",E),Ue={getOriginal:function(){return $e},getContainer:function(){return Be.container},getEmbed:function(){return Be.embed},getMedia:function(){return Be.media},getType:function(){return Be.type},getDuration:fe,getCurrentTime:function(){return Be.media.currentTime},getVolume:function(){return Be.media.volume},isMuted:function(){return Be.media.muted},isReady:function(){return f(Be.container,E.classes.ready)},isLoading:function(){return f(Be.container,E.classes.loading)},isPaused:function(){return Be.media.paused},on:function(e,t){return g(Be.container,e,t),this},play:le,pause:ue,stop:function(){ue(),me()},restart:me,rewind:de,forward:pe,seek:me,source:Oe,poster:je,setVolume:ke,togglePlay:ce,toggleMute:he,toggleCaptions:Se,toggleFullscreen:ge,toggleControls:Me,isFullscreen:function(){return Be.isFullscreen||!1},support:function(e){return r(Be,e)},destroy:De},He(),Be.init?Ue:null}function C(e,n){var r=new XMLHttpRequest;if(!O.string(n)||!O.htmlElement(t.querySelector("#"+n))){var a=t.createElement("div");a.setAttribute("hidden",""),O.string(n)&&a.setAttribute("id",n),t.body.insertBefore(a,t.body.childNodes[0]),"withCredentials"in r&&(r.open("GET",e,!0),r.onload=function(){a.innerHTML=r.responseText},r.send())}}function F(e){var r=n(),a=r.isIE&&r.version<=9,s=r.isIos,o=r.isIphone,i=!!t.createElement("audio").canPlayType,l=!!t.createElement("video").canPlayType,u=!1,c=!1;switch(e){case"video":u=l,c=u&&!a&&!o;break;case"audio":u=i,c=u&&!a;break;case"vimeo":u=!0,c=!a&&!s;break;case"youtube":u=!0,c=!a&&!s,s&&!o&&r.version>=10&&(c=!0);break;case"soundcloud":u=!0,c=!a&&!o;break;default:u=i&&l,c=u&&!a}return{basic:u,full:c}}function A(e,n){function r(e,t){f(t,M.classes.hook)||a.push({target:e,media:t})}var a=[],s=[],o=[M.selectors.html5,M.selectors.embed].join(",");if(O.string(e)?e=t.querySelectorAll(e):O.htmlElement(e)?e=[e]:O.nodeList(e)||O.array(e)||O.string(e)||(O.undefined(n)&&O.object(e)&&(n=e),e=t.querySelectorAll(o)),O.nodeList(e)&&(e=Array.prototype.slice.call(e)),!F().basic||!e.length)return!1;for(var i=0;i<e.length;i++){var l=e[i],u=l.querySelectorAll(o);if(u.length)for(var c=0;c<u.length;c++)r(l,u[c]);else y(l,o)&&r(l,l)}return a.forEach(function(e){var t=e.target,r=e.media,a=!1;r===t&&(a=!0);var o={};try{o=JSON.parse(t.getAttribute("data-plyr"))}catch(i){}var l=x({},M,n,o);if(!l.enabled)return null;var u=new E(r,l);if(O.object(u)){if(l.debug){var c=l.events.concat(["setup","statechange","enterfullscreen","exitfullscreen","captionsenabled","captionsdisabled"]);g(u.getContainer(),c.join(" "),function(e){console.log([l.logPrefix,"event:",e.type].join(" "),e.detail.plyr)})}h(u.getContainer(),"setup",!0,{plyr:u}),s.push(u)}}),s}function I(e){if(O.string(e)?e=t.querySelector(e):O.undefined(e)&&(e=t.body),O.htmlElement(e)){var n=e.querySelectorAll("."+M.classes.setup),r=[];return Array.prototype.slice.call(n).forEach(function(e){O.object(e.plyr)&&r.push(e.plyr)}),r}return[]}var N,P={x:0,y:0},M={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:10,volumeMin:0,volumeMax:10,volumeStep:1,duration:null,displayDuration:!0,loadSprite:!0,iconPrefix:"plyr",iconUrl:"https://cdn.plyr.io/2.0.15/plyr.svg",blankUrl:"https://cdn.plyr.io/static/blank.mp4",clickToPlay:!0,hideControls:!0,showPosterOnEnd:!1,disableContextMenu:!0,keyboardShorcuts:{focused:!0,global:!1},tooltips:{controls:!1,seek:!0},selectors:{html5:"video, audio",embed:"[data-type]",editable:"input, textarea, select, [contenteditable]",container:".plyr",controls:{container:null,wrapper:".plyr__controls"},labels:"[data-plyr]",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},volume:{input:'[data-plyr="volume"]',display:".plyr__volume--display"},progress:{container:".plyr__progress",buffer:".plyr__progress--buffer",played:".plyr__progress--played"},captions:".plyr__captions",currentTime:".plyr__time--current",duration:".plyr__time--duration"},classes:{setup:"plyr--setup",ready:"plyr--ready",videoWrapper:"plyr__video-wrapper",embedWrapper:"plyr__video-embed",type:"plyr--{0}",stopped:"plyr--stopped",playing:"plyr--playing",muted:"plyr--muted",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",hidden:"plyr__sr-only",hideControls:"plyr--hide-controls",isIos:"plyr--is-ios",isTouch:"plyr--is-touch",captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",fallback:"plyr--fullscreen-fallback",active:"plyr--fullscreen-active"},tabFocus:"tab-focus"},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,allowAudio:!1},storage:{enabled:!0,key:"plyr"},controls:["play-large","play","progress","current-time","mute","volume","captions","fullscreen"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",played:"played",buffered:"buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen",frameTitle:"Player for {title}"},types:{embed:["youtube","vimeo","soundcloud"],html5:["video","audio"]},urls:{vimeo:{api:"https://player.vimeo.com/api/player.js"},youtube:{api:"https://www.youtube.com/iframe_api"},soundcloud:{api:"https://w.soundcloud.com/player/api.js"}},listeners:{seek:null,play:null,pause:null,restart:null,rewind:null,forward:null,mute:null,volume:null,captions:null,fullscreen:null},events:["ready","ended","progress","stalled","playing","waiting","canplay","canplaythrough","loadstart","loadeddata","loadedmetadata","timeupdate","volumechange","play","pause","error","seeking","seeked","emptied"],logPrefix:"[Plyr]"},O={object:function(e){return null!==e&&"object"==typeof e},array:function(e){return null!==e&&"object"==typeof e&&e.constructor===Array},number:function(e){return null!==e&&("number"==typeof e&&!isNaN(e-0)||"object"==typeof e&&e.constructor===Number)},string:function(e){return null!==e&&("string"==typeof e||"object"==typeof e&&e.constructor===String)},"boolean":function(e){return null!==e&&"boolean"==typeof e},nodeList:function(e){return null!==e&&e instanceof NodeList},htmlElement:function(e){return null!==e&&e instanceof HTMLElement},"function":function(e){return null!==e&&"function"==typeof e},undefined:function(e){return null!==e&&"undefined"==typeof e}},L={supported:function(){try{e.localStorage.setItem("___test","OK");var t=e.localStorage.getItem("___test");return e.localStorage.removeItem("___test"),"OK"===t}catch(n){return!1}return!1}()};return{setup:A,supported:F,loadSprite:C,get:I}}),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}"function"!=typeof window.CustomEvent&&(e.prototype=window.Event.prototype,window.CustomEvent=e)}(); \ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 923483e5..26b97238 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -77,20 +77,20 @@ function loadJSON(path) {
// Create a file from a string
// http://stackoverflow.com/questions/23230569/how-do-you-create-a-file-from-a-string-in-gulp
function createFile(filename, string) {
- var src = require('stream').Readable({
- objectMode: true
+ var src = require('stream').Readable({
+ objectMode: true
});
src._read = function () {
- this.push(new gutil.File({
- cwd: "",
- base: "",
- path: filename,
+ this.push(new gutil.File({
+ cwd: "",
+ base: "",
+ path: filename,
contents: new Buffer(string),
// stats also required for some functions
// https://nodejs.org/api/fs.html#fs_class_fs_stats
stat: {
size: string.length
- }
+ }
}));
this.push(null);
}
diff --git a/package.json b/package.json
index fc2c9930..8a4d95d9 100644
--- a/package.json
+++ b/package.json
@@ -1,51 +1,43 @@
{
- "name": "plyr",
- "version": "2.0.13",
- "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
- "homepage": "http://plyr.io",
- "main": "src/js/plyr.js",
- "dependencies": {},
- "devDependencies": {
- "gulp": "^3.9.1",
- "gulp-autoprefixer": "^3.1.0",
- "gulp-clean-css": "^2.0.6",
- "gulp-concat": "^2.3.3",
- "gulp-less": "^3.0.5",
- "gulp-open": "^2.0.0",
- "gulp-rename": "^1.2.0",
- "gulp-replace": "^0.5.3",
- "gulp-s3": "^0.3.0",
- "gulp-sass": "^2.3.1",
- "gulp-size": "^2.1.0",
- "gulp-svgmin": "^1.2.2",
- "gulp-svgstore": "^5.0.5",
- "gulp-uglify": "^1.5.3",
- "gulp-util": "^3.0.7",
- "run-sequence": "^1.1.5",
- "through2": "^2.0.1"
- },
- "keywords": [
- "HTML5 Video",
- "HTML5 Audio",
- "Media Player",
- "DASH",
- "Shaka",
- "WordPress",
- "HLS"
- ],
- "repository": {
- "type": "git",
- "url": "git://github.com/sampotts/plyr.git"
- },
- "license": "MIT",
- "bugs": {
- "url": "https://github.com/sampotts/plyr/issues"
- },
- "directories": {
- "doc": "readme.md"
- },
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "author": "Sam Potts <sam@potts.es>"
+ "name": "plyr",
+ "version": "2.0.16",
+ "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
+ "homepage": "http://plyr.io",
+ "main": "src/js/plyr.js",
+ "dependencies": {},
+ "devDependencies": {
+ "gulp": "^3.9.1",
+ "gulp-autoprefixer": "^3.1.0",
+ "gulp-clean-css": "^2.0.6",
+ "gulp-concat": "^2.3.3",
+ "gulp-less": "^3.0.5",
+ "gulp-open": "^2.0.0",
+ "gulp-rename": "^1.2.0",
+ "gulp-replace": "^0.5.3",
+ "gulp-s3": "^0.3.0",
+ "gulp-sass": "^2.3.1",
+ "gulp-size": "^2.1.0",
+ "gulp-svgmin": "^1.2.2",
+ "gulp-svgstore": "^5.0.5",
+ "gulp-uglify": "^1.5.3",
+ "gulp-util": "^3.0.7",
+ "run-sequence": "^1.1.5",
+ "through2": "^2.0.1"
+ },
+ "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
+ "repository": {
+ "type": "git",
+ "url": "git://github.com/sampotts/plyr.git"
+ },
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/sampotts/plyr/issues"
+ },
+ "directories": {
+ "doc": "readme.md"
+ },
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "Sam Potts <sam@potts.es>"
}
diff --git a/readme.md b/readme.md
index a3aa6298..6acf8c3f 100644
--- a/readme.md
+++ b/readme.md
@@ -5,7 +5,7 @@ A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
[Checkout the demo](https://plyr.io)
-[![Image of Plyr](https://cdn.selz.com/plyr/plyr_v1.8.9.png)](https://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png)](https://plyr.io)
## Why?
We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
@@ -137,7 +137,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
```html
-<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script>
+<script src="https://cdn.plyr.io/2.0.16/plyr.js"></script>
```
### CSS
@@ -150,11 +150,11 @@ Include the `plyr.css` stylsheet into your `<head>`
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
```html
-<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/2.0.16/plyr.css">
```
### SVG Sprite
-The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.13/plyr.svg`.
+The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.16/plyr.svg`.
## Advanced
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 352e0114..e625504e 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,192 +1,214 @@
// ==========================================================================
// Plyr
-// plyr.js v2.0.13
+// plyr.js v2.0.16
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/
// ==========================================================================
-;(function(root, factory) {
- 'use strict';
+(function(root, factory) {
+ "use strict";
/*global define,module*/
- if (typeof module === 'object' && typeof module.exports === 'object') {
+ if (typeof module === "object" && typeof module.exports === "object") {
// Node, CommonJS-like
module.exports = factory(root, document);
- } else if (typeof define === 'function' && define.amd) {
+ } else if (typeof define === "function" && define.amd) {
// AMD
- define([], function () { return factory(root, document); });
+ define([], function() {
+ return factory(root, document);
+ });
} else {
// Browser globals (root is window)
root.plyr = factory(root, document);
}
-}(typeof window !== 'undefined' ? window : this, function(window, document) {
- 'use strict';
+})(typeof window !== "undefined" ? window : this, function(window, document) {
+ "use strict";
// Globals
var fullscreen,
- scroll = { x: 0, y: 0 },
-
- // Default config
- defaults = {
- enabled: true,
- debug: false,
- autoplay: false,
- loop: false,
- seekTime: 10,
- volume: 10,
- volumeMin: 0,
- volumeMax: 10,
- volumeStep: 1,
- duration: null,
- displayDuration: true,
- loadSprite: true,
- iconPrefix: 'plyr',
- iconUrl: 'https://cdn.plyr.io/2.0.13/plyr.svg',
- blankUrl: 'https://cdn.selz.com/plyr/blank.mp4',
- clickToPlay: true,
- hideControls: true,
- showPosterOnEnd: false,
- disableContextMenu: true,
- keyboardShorcuts: {
- focused: true,
- global: false
- },
- tooltips: {
- controls: false,
- seek: true
- },
- selectors: {
- html5: 'video, audio',
- embed: '[data-type]',
- editable: 'input, textarea, select, [contenteditable]',
- container: '.plyr',
- controls: {
- container: null,
- wrapper: '.plyr__controls'
+ scroll = { x: 0, y: 0 },
+ // Default config
+ defaults = {
+ enabled: true,
+ debug: false,
+ autoplay: false,
+ loop: false,
+ seekTime: 10,
+ volume: 10,
+ volumeMin: 0,
+ volumeMax: 10,
+ volumeStep: 1,
+ duration: null,
+ displayDuration: true,
+ loadSprite: true,
+ iconPrefix: "plyr",
+ iconUrl: "https://cdn.plyr.io/2.0.16/plyr.svg",
+ blankUrl: "https://cdn.plyr.io/static/blank.mp4",
+ clickToPlay: true,
+ hideControls: true,
+ showPosterOnEnd: false,
+ disableContextMenu: true,
+ keyboardShorcuts: {
+ focused: true,
+ global: false
},
- labels: '[data-plyr]',
- buttons: {
- seek: '[data-plyr="seek"]',
- play: '[data-plyr="play"]',
- pause: '[data-plyr="pause"]',
- restart: '[data-plyr="restart"]',
- rewind: '[data-plyr="rewind"]',
- forward: '[data-plyr="fast-forward"]',
- mute: '[data-plyr="mute"]',
- captions: '[data-plyr="captions"]',
- fullscreen: '[data-plyr="fullscreen"]'
+ tooltips: {
+ controls: false,
+ seek: true
},
- volume: {
- input: '[data-plyr="volume"]',
- display: '.plyr__volume--display'
+ selectors: {
+ html5: "video, audio",
+ embed: "[data-type]",
+ editable: "input, textarea, select, [contenteditable]",
+ container: ".plyr",
+ controls: {
+ container: null,
+ wrapper: ".plyr__controls"
+ },
+ labels: "[data-plyr]",
+ buttons: {
+ seek: '[data-plyr="seek"]',
+ play: '[data-plyr="play"]',
+ pause: '[data-plyr="pause"]',
+ restart: '[data-plyr="restart"]',
+ rewind: '[data-plyr="rewind"]',
+ forward: '[data-plyr="fast-forward"]',
+ mute: '[data-plyr="mute"]',
+ captions: '[data-plyr="captions"]',
+ fullscreen: '[data-plyr="fullscreen"]'
+ },
+ volume: {
+ input: '[data-plyr="volume"]',
+ display: ".plyr__volume--display"
+ },
+ progress: {
+ container: ".plyr__progress",
+ buffer: ".plyr__progress--buffer",
+ played: ".plyr__progress--played"
+ },
+ captions: ".plyr__captions",
+ currentTime: ".plyr__time--current",
+ duration: ".plyr__time--duration"
},
- progress: {
- container: '.plyr__progress',
- buffer: '.plyr__progress--buffer',
- played: '.plyr__progress--played'
+ classes: {
+ setup: "plyr--setup",
+ ready: "plyr--ready",
+ videoWrapper: "plyr__video-wrapper",
+ embedWrapper: "plyr__video-embed",
+ type: "plyr--{0}",
+ stopped: "plyr--stopped",
+ playing: "plyr--playing",
+ muted: "plyr--muted",
+ loading: "plyr--loading",
+ hover: "plyr--hover",
+ tooltip: "plyr__tooltip",
+ hidden: "plyr__sr-only",
+ hideControls: "plyr--hide-controls",
+ isIos: "plyr--is-ios",
+ isTouch: "plyr--is-touch",
+ captions: {
+ enabled: "plyr--captions-enabled",
+ active: "plyr--captions-active"
+ },
+ fullscreen: {
+ enabled: "plyr--fullscreen-enabled",
+ fallback: "plyr--fullscreen-fallback",
+ active: "plyr--fullscreen-active"
+ },
+ tabFocus: "tab-focus"
},
- captions: '.plyr__captions',
- currentTime: '.plyr__time--current',
- duration: '.plyr__time--duration'
- },
- classes: {
- setup: 'plyr--setup',
- ready: 'plyr--ready',
- videoWrapper: 'plyr__video-wrapper',
- embedWrapper: 'plyr__video-embed',
- type: 'plyr--{0}',
- stopped: 'plyr--stopped',
- playing: 'plyr--playing',
- muted: 'plyr--muted',
- loading: 'plyr--loading',
- hover: 'plyr--hover',
- tooltip: 'plyr__tooltip',
- hidden: 'plyr__sr-only',
- hideControls: 'plyr--hide-controls',
- isIos: 'plyr--is-ios',
- isTouch: 'plyr--is-touch',
captions: {
- enabled: 'plyr--captions-enabled',
- active: 'plyr--captions-active'
+ defaultActive: false
},
fullscreen: {
- enabled: 'plyr--fullscreen-enabled',
- active: 'plyr--fullscreen-active'
+ enabled: true,
+ fallback: true,
+ allowAudio: false
},
- tabFocus: 'tab-focus'
- },
- captions: {
- defaultActive: false
- },
- fullscreen: {
- enabled: true,
- fallback: true,
- allowAudio: false
- },
- storage: {
- enabled: true,
- key: 'plyr'
- },
- controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'],
- i18n: {
- restart: 'Restart',
- rewind: 'Rewind {seektime} secs',
- play: 'Play',
- pause: 'Pause',
- forward: 'Forward {seektime} secs',
- played: 'played',
- buffered: 'buffered',
- currentTime: 'Current time',
- duration: 'Duration',
- volume: 'Volume',
- toggleMute: 'Toggle Mute',
- toggleCaptions: 'Toggle Captions',
- toggleFullscreen: 'Toggle Fullscreen',
- frameTitle: 'Player for {title}'
- },
- types: {
- embed: ['youtube', 'vimeo', 'soundcloud'],
- html5: ['video', 'audio']
- },
- // URLs
- urls: {
- vimeo: {
- api: 'https://player.vimeo.com/api/player.js',
+ storage: {
+ enabled: true,
+ key: "plyr"
},
- youtube: {
- api: 'https://www.youtube.com/iframe_api'
+ controls: ["play-large", "play", "progress", "current-time", "mute", "volume", "captions", "fullscreen"],
+ i18n: {
+ restart: "Restart",
+ rewind: "Rewind {seektime} secs",
+ play: "Play",
+ pause: "Pause",
+ forward: "Forward {seektime} secs",
+ played: "played",
+ buffered: "buffered",
+ currentTime: "Current time",
+ duration: "Duration",
+ volume: "Volume",
+ toggleMute: "Toggle Mute",
+ toggleCaptions: "Toggle Captions",
+ toggleFullscreen: "Toggle Fullscreen",
+ frameTitle: "Player for {title}"
},
- soundcloud: {
- api: 'https://w.soundcloud.com/player/api.js'
- }
- },
- // Custom control listeners
- listeners: {
- seek: null,
- play: null,
- pause: null,
- restart: null,
- rewind: null,
- forward: null,
- mute: null,
- volume: null,
- captions: null,
- fullscreen: null
- },
- // Events to watch on HTML5 media elements
- events: ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'seeked', 'emptied'],
- // Logging
- logPrefix: '[Plyr]'
- };
+ types: {
+ embed: ["youtube", "vimeo", "soundcloud"],
+ html5: ["video", "audio"]
+ },
+ // URLs
+ urls: {
+ vimeo: {
+ api: "https://player.vimeo.com/api/player.js"
+ },
+ youtube: {
+ api: "https://www.youtube.com/iframe_api"
+ },
+ soundcloud: {
+ api: "https://w.soundcloud.com/player/api.js"
+ }
+ },
+ // Custom control listeners
+ listeners: {
+ seek: null,
+ play: null,
+ pause: null,
+ restart: null,
+ rewind: null,
+ forward: null,
+ mute: null,
+ volume: null,
+ captions: null,
+ fullscreen: null
+ },
+ // Events to watch on HTML5 media elements
+ events: [
+ "ready",
+ "ended",
+ "progress",
+ "stalled",
+ "playing",
+ "waiting",
+ "canplay",
+ "canplaythrough",
+ "loadstart",
+ "loadeddata",
+ "loadedmetadata",
+ "timeupdate",
+ "volumechange",
+ "play",
+ "pause",
+ "error",
+ "seeking",
+ "seeked",
+ "emptied"
+ ],
+ // Logging
+ logPrefix: "[Plyr]"
+ };
// Credits: http://paypal.github.io/accessible-html5-video-player/
// Unfortunately, due to mixed support, UA sniffing is required
function _browserSniff() {
var ua = navigator.userAgent,
name = navigator.appName,
- fullVersion = '' + parseFloat(navigator.appVersion),
+ fullVersion = "" + parseFloat(navigator.appVersion),
majorVersion = parseInt(navigator.appVersion, 10),
nameOffset,
verOffset,
@@ -196,37 +218,37 @@
isChrome = false,
isSafari = false;
- if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) {
+ if (navigator.appVersion.indexOf("Windows NT") !== -1 && navigator.appVersion.indexOf("rv:11") !== -1) {
// MSIE 11
isIE = true;
- name = 'IE';
- fullVersion = '11';
- } else if ((verOffset = ua.indexOf('MSIE')) !== -1) {
+ name = "IE";
+ fullVersion = "11";
+ } else if ((verOffset = ua.indexOf("MSIE")) !== -1) {
// MSIE
isIE = true;
- name = 'IE';
+ name = "IE";
fullVersion = ua.substring(verOffset + 5);
- } else if ((verOffset = ua.indexOf('Chrome')) !== -1) {
+ } else if ((verOffset = ua.indexOf("Chrome")) !== -1) {
// Chrome
isChrome = true;
- name = 'Chrome';
+ name = "Chrome";
fullVersion = ua.substring(verOffset + 7);
- } else if ((verOffset = ua.indexOf('Safari')) !== -1) {
+ } else if ((verOffset = ua.indexOf("Safari")) !== -1) {
// Safari
isSafari = true;
- name = 'Safari';
+ name = "Safari";
fullVersion = ua.substring(verOffset + 7);
- if ((verOffset = ua.indexOf('Version')) !== -1) {
+ if ((verOffset = ua.indexOf("Version")) !== -1) {
fullVersion = ua.substring(verOffset + 8);
}
- } else if ((verOffset = ua.indexOf('Firefox')) !== -1) {
+ } else if ((verOffset = ua.indexOf("Firefox")) !== -1) {
// Firefox
isFirefox = true;
- name = 'Firefox';
+ name = "Firefox";
fullVersion = ua.substring(verOffset + 8);
- } else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) {
+ } else if ((nameOffset = ua.lastIndexOf(" ") + 1) < (verOffset = ua.lastIndexOf("/"))) {
// In most other browsers, 'name/version' is at the end of userAgent
- name = ua.substring(nameOffset,verOffset);
+ name = ua.substring(nameOffset, verOffset);
fullVersion = ua.substring(verOffset + 1);
if (name.toLowerCase() === name.toUpperCase()) {
@@ -235,31 +257,31 @@
}
// Trim the fullVersion string at semicolon/space if present
- if ((ix = fullVersion.indexOf(';')) !== -1) {
+ if ((ix = fullVersion.indexOf(";")) !== -1) {
fullVersion = fullVersion.substring(0, ix);
}
- if ((ix = fullVersion.indexOf(' ')) !== -1) {
+ if ((ix = fullVersion.indexOf(" ")) !== -1) {
fullVersion = fullVersion.substring(0, ix);
}
// Get major version
- majorVersion = parseInt('' + fullVersion, 10);
+ majorVersion = parseInt("" + fullVersion, 10);
if (isNaN(majorVersion)) {
- fullVersion = '' + parseFloat(navigator.appVersion);
+ fullVersion = "" + parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion, 10);
}
// Return data
return {
- name: name,
- version: majorVersion,
- isIE: isIE,
- isFirefox: isFirefox,
- isChrome: isChrome,
- isSafari: isSafari,
- isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform),
- isIphone: /(iPhone|iPod)/g.test(navigator.userAgent),
- isTouch: 'ontouchstart' in document.documentElement
+ name: name,
+ version: majorVersion,
+ isIE: isIE,
+ isFirefox: isFirefox,
+ isChrome: isChrome,
+ isSafari: isSafari,
+ isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform),
+ isIphone: /(iPhone|iPod)/g.test(navigator.userAgent),
+ isTouch: "ontouchstart" in document.documentElement
};
}
@@ -269,19 +291,30 @@
function _supportMime(plyr, mimeType) {
var media = plyr.media;
- if (plyr.type === 'video') {
+ if (plyr.type === "video") {
// Check type
switch (mimeType) {
- case 'video/webm': return !!(media.canPlayType && media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
- case 'video/mp4': return !!(media.canPlayType && media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
- case 'video/ogg': return !!(media.canPlayType && media.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''));
- }
- } else if (plyr.type === 'audio') {
+ case "video/webm":
+ return !!(
+ media.canPlayType && media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, "")
+ );
+ case "video/mp4":
+ return !!(
+ media.canPlayType &&
+ media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, "")
+ );
+ case "video/ogg":
+ return !!(media.canPlayType && media.canPlayType('video/ogg; codecs="theora"').replace(/no/, ""));
+ }
+ } else if (plyr.type === "audio") {
// Check type
switch (mimeType) {
- case 'audio/mpeg': return !!(media.canPlayType && media.canPlayType('audio/mpeg;').replace(/no/, ''));
- case 'audio/ogg': return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
- case 'audio/wav': return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, ''));
+ case "audio/mpeg":
+ return !!(media.canPlayType && media.canPlayType("audio/mpeg;").replace(/no/, ""));
+ case "audio/ogg":
+ return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ""));
+ case "audio/wav":
+ return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, ""));
}
}
@@ -295,20 +328,20 @@
return;
}
- var tag = document.createElement('script');
+ var tag = document.createElement("script");
tag.src = source;
- var firstScriptTag = document.getElementsByTagName('script')[0];
+ var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
// Element exists in an array
function _inArray(haystack, needle) {
- return Array.prototype.indexOf && (haystack.indexOf(needle) !== -1);
+ return Array.prototype.indexOf && haystack.indexOf(needle) !== -1;
}
// Replace all
function _replaceAll(string, find, replace) {
- return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace);
+ return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace);
}
// Wrap an element
@@ -321,11 +354,11 @@
// Loops backwards to prevent having to clone the wrapper on the
// first element (see `child` below).
for (var i = elements.length - 1; i >= 0; i--) {
- var child = (i > 0) ? wrapper.cloneNode(true) : wrapper;
+ var child = i > 0 ? wrapper.cloneNode(true) : wrapper;
var element = elements[i];
// Cache the current parent and sibling.
- var parent = element.parentNode;
+ var parent = element.parentNode;
var sibling = element.nextSibling;
// Wrap the element (is automatically removed from its current
@@ -376,7 +409,7 @@
// Set attributes
function _setAttributes(element, attributes) {
for (var key in attributes) {
- element.setAttribute(key, (_is.boolean(attributes[key]) && attributes[key]) ? '' : attributes[key]);
+ element.setAttribute(key, _is.boolean(attributes[key]) && attributes[key] ? "" : attributes[key]);
}
}
@@ -394,17 +427,17 @@
// Get a classname from selector
function _getClassname(selector) {
- return selector.replace('.', '');
+ return selector.replace(".", "");
}
// Toggle class on an element
function _toggleClass(element, className, state) {
if (element) {
if (element.classList) {
- element.classList[state ? 'add' : 'remove'](className);
+ element.classList[state ? "add" : "remove"](className);
} else {
- var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
- element.className = name + (state ? ' ' + className : '');
+ var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + className + " ", "");
+ element.className = name + (state ? " " + className : "");
}
}
}
@@ -415,7 +448,7 @@
if (element.classList) {
return element.classList.contains(className);
} else {
- return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className);
+ return new RegExp("(\\s|^)" + className + "(\\s|$)").test(element.className);
}
}
return false;
@@ -425,26 +458,44 @@
function _matches(element, selector) {
var p = Element.prototype;
- var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
- return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
- };
+ var f =
+ p.matches ||
+ p.webkitMatchesSelector ||
+ p.mozMatchesSelector ||
+ p.msMatchesSelector ||
+ function(s) {
+ return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
+ };
return f.call(element, selector);
}
// Bind along with custom handler
function _proxyListener(element, eventName, userListener, defaultListener, useCapture) {
- _on(element, eventName, function(event) {
- if (userListener) {
- userListener.apply(element, [event]);
- }
- defaultListener.apply(element, [event]);
- }, useCapture);
+ if(userListener) {
+ // Register this before defaultListener
+ _on(
+ element,
+ eventName,
+ function(event) {
+ userListener.apply(element, [event]);
+ },
+ useCapture
+ );
+ }
+ _on(
+ element,
+ eventName,
+ function(event) {
+ defaultListener.apply(element, [event]);
+ },
+ useCapture
+ );
}
// Toggle event listener
function _toggleListener(element, events, callback, toggle, useCapture) {
- var eventList = events.split(' ');
+ var eventList = events.split(" ");
// Whether the listener is a capturing listener or not
// Default to false
@@ -464,7 +515,7 @@
// If a single node is passed, bind the event listener
for (var i = 0; i < eventList.length; i++) {
- element[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, useCapture);
+ element[toggle ? "addEventListener" : "removeEventListener"](eventList[i], callback, useCapture);
}
}
@@ -476,11 +527,11 @@
}
// Unbind event
- /*function _off(element, events, callback, useCapture) {
+ function _off(element, events, callback, useCapture) {
if (element) {
_toggleListener(element, events, callback, false, useCapture);
}
- }*/
+ }
// Trigger event
function _event(element, type, bubbles, properties) {
@@ -496,8 +547,8 @@
// Create and dispatch the event
var event = new CustomEvent(type, {
- bubbles: bubbles,
- detail: properties
+ bubbles: bubbles,
+ detail: properties
});
// Dispatch the event
@@ -513,10 +564,10 @@
}
// Get state
- state = (_is.boolean(state) ? state : !target.getAttribute('aria-pressed'));
+ state = _is.boolean(state) ? state : !target.getAttribute("aria-pressed");
// Set the attribute on target
- target.setAttribute('aria-pressed', state);
+ target.setAttribute("aria-pressed", state);
return state;
}
@@ -526,7 +577,7 @@
if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
return 0;
}
- return ((current / max) * 100).toFixed(2);
+ return (current / max * 100).toFixed(2);
}
// Deep extend/merge destination object with N more objects
@@ -548,7 +599,7 @@
// First object is the destination
var destination = Array.prototype.shift.call(objects),
- length = objects.length;
+ length = objects.length;
// Loop through all objects to merge
for (var i = 0; i < length; i++) {
@@ -570,19 +621,26 @@
// Check variable types
var _is = {
object: function(input) {
- return input !== null && typeof(input) === 'object';
+ return input !== null && typeof input === "object";
},
array: function(input) {
- return input !== null && (typeof(input) === 'object' && input.constructor === Array);
+ return input !== null && (typeof input === "object" && input.constructor === Array);
},
number: function(input) {
- return input !== null && (typeof(input) === 'number' && !isNaN(input - 0) || (typeof input === 'object' && input.constructor === Number));
+ return (
+ input !== null &&
+ ((typeof input === "number" && !isNaN(input - 0)) ||
+ (typeof input === "object" && input.constructor === Number))
+ );
},
string: function(input) {
- return input !== null && (typeof input === 'string' || (typeof input === 'object' && input.constructor === String));
+ return (
+ input !== null &&
+ (typeof input === "string" || (typeof input === "object" && input.constructor === String))
+ );
},
boolean: function(input) {
- return input !== null && typeof input === 'boolean';
+ return input !== null && typeof input === "boolean";
},
nodeList: function(input) {
return input !== null && input instanceof NodeList;
@@ -591,52 +649,54 @@
return input !== null && input instanceof HTMLElement;
},
function: function(input) {
- return input !== null && typeof input === 'function';
+ return input !== null && typeof input === "function";
},
undefined: function(input) {
- return input !== null && typeof input === 'undefined';
+ return input !== null && typeof input === "undefined";
}
};
// Parse YouTube ID from url
function _parseYouTubeId(url) {
var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
- return (url.match(regex)) ? RegExp.$2 : url;
+ return url.match(regex) ? RegExp.$2 : url;
}
- // Parse Vimeo ID from url
- function _parseVimeoId(url) {
+ // Is this a Vimeo url link?
+ function _isVimeoUrl(url) {
var regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
- return (url.match(regex)) ? RegExp.$2 : url;
+ return url.match(regex);
}
// Fullscreen API
function _fullscreen() {
var fullscreen = {
supportsFullScreen: false,
- isFullScreen: function() { return false; },
+ isFullScreen: function() {
+ return false;
+ },
requestFullScreen: function() {},
cancelFullScreen: function() {},
- fullScreenEventName: '',
+ fullScreenEventName: "",
element: null,
- prefix: ''
+ prefix: ""
},
- browserPrefixes = 'webkit o moz ms khtml'.split(' ');
+ browserPrefixes = "webkit o moz ms khtml".split(" ");
// Check for native support
if (!_is.undefined(document.cancelFullScreen)) {
fullscreen.supportsFullScreen = true;
} else {
// Check for fullscreen support by vendor prefix
- for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
+ for (var i = 0, il = browserPrefixes.length; i < il; i++) {
fullscreen.prefix = browserPrefixes[i];
- if (!_is.undefined(document[fullscreen.prefix + 'CancelFullScreen'])) {
+ if (!_is.undefined(document[fullscreen.prefix + "CancelFullScreen"])) {
fullscreen.supportsFullScreen = true;
break;
} else if (!_is.undefined(document.msExitFullscreen) && document.msFullscreenEnabled) {
// Special case for MS (when isn't it?)
- fullscreen.prefix = 'ms';
+ fullscreen.prefix = "ms";
fullscreen.supportsFullScreen = true;
break;
}
@@ -647,32 +707,37 @@
if (fullscreen.supportsFullScreen) {
// Yet again Microsoft awesomeness,
// Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes
- fullscreen.fullScreenEventName = (fullscreen.prefix === 'ms' ? 'MSFullscreenChange' : fullscreen.prefix + 'fullscreenchange');
+ fullscreen.fullScreenEventName =
+ fullscreen.prefix === "ms" ? "MSFullscreenChange" : fullscreen.prefix + "fullscreenchange";
fullscreen.isFullScreen = function(element) {
if (_is.undefined(element)) {
element = document.body;
}
switch (this.prefix) {
- case '':
+ case "":
return document.fullscreenElement === element;
- case 'moz':
+ case "moz":
return document.mozFullScreenElement === element;
default:
- return document[this.prefix + 'FullscreenElement'] === element;
+ return document[this.prefix + "FullscreenElement"] === element;
}
};
fullscreen.requestFullScreen = function(element) {
if (_is.undefined(element)) {
element = document.body;
}
- return (this.prefix === '') ? element.requestFullScreen() : element[this.prefix + (this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
+ return this.prefix === ""
+ ? element.requestFullScreen()
+ : element[this.prefix + (this.prefix === "ms" ? "RequestFullscreen" : "RequestFullScreen")]();
};
fullscreen.cancelFullScreen = function() {
- return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + (this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();
+ return this.prefix === ""
+ ? document.cancelFullScreen()
+ : document[this.prefix + (this.prefix === "ms" ? "ExitFullscreen" : "CancelFullScreen")]();
};
fullscreen.element = function() {
- return (this.prefix === '') ? document.fullscreenElement : document[this.prefix + 'FullscreenElement'];
+ return this.prefix === "" ? document.fullscreenElement : document[this.prefix + "FullscreenElement"];
};
}
@@ -682,26 +747,21 @@
// Local storage
var _storage = {
supported: (function() {
- if (!('localStorage' in window)) {
- return false;
- }
-
// Try to use it (it might be disabled, e.g. user is in private/porn mode)
// see: https://github.com/sampotts/plyr/issues/131
try {
// Add test item
- window.localStorage.setItem('___test', 'OK');
+ window.localStorage.setItem("___test", "OK");
// Get the test item
- var result = window.localStorage.getItem('___test');
+ var result = window.localStorage.getItem("___test");
// Clean up
- window.localStorage.removeItem('___test');
+ window.localStorage.removeItem("___test");
// Check if value matches
- return (result === 'OK');
- }
- catch (e) {
+ return result === "OK";
+ } catch (e) {
return false;
}
@@ -712,8 +772,8 @@
// Player instance
function Plyr(media, config) {
var plyr = this,
- timers = {},
- api;
+ timers = {},
+ api;
// Set media
plyr.media = media;
@@ -721,9 +781,14 @@
// Trigger events, with plyr instance passed
function _triggerEvent(element, type, bubbles, properties) {
- _event(element, type, bubbles, _extend({}, properties, {
- plyr: api
- }));
+ _event(
+ element,
+ type,
+ bubbles,
+ _extend({}, properties, {
+ plyr: api
+ })
+ );
}
// Debugging
@@ -738,94 +803,100 @@
console[type].apply(console, args);
}
}
- var _log = function() { _console('log', arguments) },
- _warn = function() { _console('warn', arguments) };
+ var _log = function() {
+ _console("log", arguments);
+ },
+ _warn = function() {
+ _console("warn", arguments);
+ };
// Log config options
- _log('Config', config);
+ _log("Config", config);
// Get icon URL
function _getIconUrl() {
return {
- url: config.iconUrl,
- absolute: (config.iconUrl.indexOf("http") === 0) || plyr.browser.isIE
+ url: config.iconUrl,
+ absolute: config.iconUrl.indexOf("http") === 0 || plyr.browser.isIE
};
}
// Build the default HTML
function _buildControls() {
// Create html array
- var html = [],
- iconUrl = _getIconUrl(),
- iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix;
+ var html = [],
+ iconUrl = _getIconUrl(),
+ iconPath = (!iconUrl.absolute ? iconUrl.url : "") + "#" + config.iconPrefix;
// Larger overlaid play button
- if (_inArray(config.controls, 'play-large')) {
+ if (_inArray(config.controls, "play-large")) {
html.push(
'<button type="button" data-plyr="play" class="plyr__play-large">',
- '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
- '</button>'
+ '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.play + "</span>",
+ "</button>"
);
}
html.push('<div class="plyr__controls">');
// Restart button
- if (_inArray(config.controls, 'restart')) {
+ if (_inArray(config.controls, "restart")) {
html.push(
'<button type="button" data-plyr="restart">',
- '<svg><use xlink:href="' + iconPath + '-restart" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.restart + '</span>',
- '</button>'
+ '<svg><use xlink:href="' + iconPath + '-restart" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.restart + "</span>",
+ "</button>"
);
}
// Rewind button
- if (_inArray(config.controls, 'rewind')) {
+ if (_inArray(config.controls, "rewind")) {
html.push(
'<button type="button" data-plyr="rewind">',
- '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>',
- '</button>'
+ '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.rewind + "</span>",
+ "</button>"
);
}
// Play Pause button
// TODO: This should be a toggle button really?
- if (_inArray(config.controls, 'play')) {
+ if (_inArray(config.controls, "play")) {
html.push(
'<button type="button" data-plyr="play">',
- '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
- '</button>',
+ '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.play + "</span>",
+ "</button>",
'<button type="button" data-plyr="pause">',
- '<svg><use xlink:href="' + iconPath + '-pause" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.pause + '</span>',
- '</button>'
+ '<svg><use xlink:href="' + iconPath + '-pause" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.pause + "</span>",
+ "</button>"
);
}
// Fast forward button
- if (_inArray(config.controls, 'fast-forward')) {
+ if (_inArray(config.controls, "fast-forward")) {
html.push(
'<button type="button" data-plyr="fast-forward">',
- '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.forward + '</span>',
- '</button>'
+ '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.forward + "</span>",
+ "</button>"
);
}
// Progress
- if (_inArray(config.controls, 'progress')) {
+ if (_inArray(config.controls, "progress")) {
// Create progress
- html.push('<span class="plyr__progress">',
+ html.push(
+ '<span class="plyr__progress">',
'<label for="seek{id}" class="plyr__sr-only">Seek</label>',
'<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
'<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>',
'<progress class="plyr__progress--buffer" max="100" value="0">',
- '<span>0</span>% ' + config.i18n.buffered,
- '</progress>');
+ "<span>0</span>% " + config.i18n.buffered,
+ "</progress>"
+ );
// Seek tooltip
if (config.tooltips.seek) {
@@ -833,77 +904,87 @@
}
// Close
- html.push('</span>');
+ html.push("</span>");
}
// Media current time display
- if (_inArray(config.controls, 'current-time')) {
+ if (_inArray(config.controls, "current-time")) {
html.push(
'<span class="plyr__time">',
- '<span class="plyr__sr-only">' + config.i18n.currentTime + '</span>',
- '<span class="plyr__time--current">00:00</span>',
- '</span>'
+ '<span class="plyr__sr-only">' + config.i18n.currentTime + "</span>",
+ '<span class="plyr__time--current">00:00</span>',
+ "</span>"
);
}
// Media duration display
- if (_inArray(config.controls, 'duration')) {
+ if (_inArray(config.controls, "duration")) {
html.push(
'<span class="plyr__time">',
- '<span class="plyr__sr-only">' + config.i18n.duration + '</span>',
- '<span class="plyr__time--duration">00:00</span>',
- '</span>'
+ '<span class="plyr__sr-only">' + config.i18n.duration + "</span>",
+ '<span class="plyr__time--duration">00:00</span>',
+ "</span>"
);
}
// Toggle mute button
- if (_inArray(config.controls, 'mute')) {
+ if (_inArray(config.controls, "mute")) {
html.push(
'<button type="button" data-plyr="mute">',
- '<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>',
- '<svg><use xlink:href="' + iconPath + '-volume" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>',
- '</button>'
+ '<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-volume" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.toggleMute + "</span>",
+ "</button>"
);
}
// Volume range control
- if (_inArray(config.controls, 'volume')) {
+ if (_inArray(config.controls, "volume")) {
html.push(
'<span class="plyr__volume">',
- '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
- '<input id="volume{id}" class="plyr__volume--input" type="range" min="' + config.volumeMin + '" max="' + config.volumeMax + '" value="' + config.volume + '" data-plyr="volume">',
- '<progress class="plyr__volume--display" max="' + config.volumeMax + '" value="' + config.volumeMin + '" role="presentation"></progress>',
- '</span>'
+ '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + "</label>",
+ '<input id="volume{id}" class="plyr__volume--input" type="range" min="' +
+ config.volumeMin +
+ '" max="' +
+ config.volumeMax +
+ '" value="' +
+ config.volume +
+ '" data-plyr="volume">',
+ '<progress class="plyr__volume--display" max="' +
+ config.volumeMax +
+ '" value="' +
+ config.volumeMin +
+ '" role="presentation"></progress>',
+ "</span>"
);
}
// Toggle captions button
- if (_inArray(config.controls, 'captions')) {
+ if (_inArray(config.controls, "captions")) {
html.push(
'<button type="button" data-plyr="captions">',
- '<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>',
- '<svg><use xlink:href="' + iconPath+ '-captions-off" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>',
- '</button>'
+ '<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-captions-off" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + "</span>",
+ "</button>"
);
}
// Toggle fullscreen button
- if (_inArray(config.controls, 'fullscreen')) {
+ if (_inArray(config.controls, "fullscreen")) {
html.push(
'<button type="button" data-plyr="fullscreen">',
- '<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>',
- '<svg><use xlink:href="' + iconPath + '-enter-fullscreen" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>',
- '</button>'
+ '<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>',
+ '<svg><use xlink:href="' + iconPath + '-enter-fullscreen" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + "</span>",
+ "</button>"
);
}
// Close everything
- html.push('</div>');
+ html.push("</div>");
- return html.join('');
+ return html.join("");
}
// Setup fullscreen
@@ -912,17 +993,22 @@
return;
}
- if ((plyr.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
+ if ((plyr.type !== "audio" || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
- _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
+ _log((nativeSupport ? "Native" : "Fallback") + " fullscreen enabled");
+
+ // Add styling hook
+ if (!nativeSupport) {
+ _toggleClass(plyr.container, config.classes.fullscreen.fallback, true);
+ }
// Add styling hook
_toggleClass(plyr.container, config.classes.fullscreen.enabled, true);
} else {
- _log('Fullscreen not supported and fallback disabled');
+ _log("Fullscreen not supported and fallback disabled");
}
// Toggle state
@@ -938,13 +1024,16 @@
// Setup captions
function _setupCaptions() {
// Bail if not HTML5 video
- if (plyr.type !== 'video') {
+ if (plyr.type !== "video") {
return;
}
// Inject the container
if (!_getElement(config.selectors.captions)) {
- plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"></div>');
+ plyr.videoContainer.insertAdjacentHTML(
+ "afterbegin",
+ '<div class="' + _getClassname(config.selectors.captions) + '"></div>'
+ );
}
// Determine if HTML5 textTracks is supported
@@ -954,26 +1043,26 @@
}
// Get URL of caption file if exists
- var captionSrc = '',
+ var captionSrc = "",
kind,
children = plyr.media.childNodes;
for (var i = 0; i < children.length; i++) {
- if (children[i].nodeName.toLowerCase() === 'track') {
+ if (children[i].nodeName.toLowerCase() === "track") {
kind = children[i].kind;
- if (kind === 'captions' || kind === 'subtitles') {
- captionSrc = children[i].getAttribute('src');
+ if (kind === "captions" || kind === "subtitles") {
+ captionSrc = children[i].getAttribute("src");
}
}
}
// Record if caption file exists or not
plyr.captionExists = true;
- if (captionSrc === '') {
+ if (captionSrc === "") {
plyr.captionExists = false;
- _log('No caption track found');
+ _log("No caption track found");
} else {
- _log('Caption track found; URI: ' + captionSrc);
+ _log("Caption track found; URI: " + captionSrc);
}
// If no caption file exists, hide container for caption text
@@ -984,7 +1073,7 @@
// This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
var tracks = plyr.media.textTracks;
for (var x = 0; x < tracks.length; x++) {
- tracks[x].mode = 'hidden';
+ tracks[x].mode = "hidden";
}
// Enable UI
@@ -992,11 +1081,12 @@
// Disable unsupported browsers than report false positive
// Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1033144
- if ((plyr.browser.isIE && plyr.browser.version >= 10) ||
- (plyr.browser.isFirefox && plyr.browser.version >= 31)) {
-
+ if (
+ (plyr.browser.isIE && plyr.browser.version >= 10) ||
+ (plyr.browser.isFirefox && plyr.browser.version >= 31)
+ ) {
// Debugging
- _log('Detected browser with known TextTrack issues - using manual fallback');
+ _log("Detected browser with known TextTrack issues - using manual fallback");
// Set to false so skips to 'manual' captioning
plyr.usingTextTracks = false;
@@ -1005,15 +1095,15 @@
// Rendering caption tracks
// Native support required - http://caniuse.com/webvtt
if (plyr.usingTextTracks) {
- _log('TextTracks supported');
+ _log("TextTracks supported");
for (var y = 0; y < tracks.length; y++) {
var track = tracks[y];
- if (track.kind === 'captions' || track.kind === 'subtitles') {
- _on(track, 'cuechange', function() {
+ if (track.kind === "captions" || track.kind === "subtitles") {
+ _on(track, "cuechange", function() {
// Display a cue, if there is one
- if (this.activeCues[0] && 'text' in this.activeCues[0]) {
+ if (this.activeCues[0] && "text" in this.activeCues[0]) {
_setCaption(this.activeCues[0].getCueAsHTML());
} else {
_setCaption();
@@ -1023,13 +1113,13 @@
}
} else {
// Caption tracks not natively supported
- _log('TextTracks not supported so rendering captions manually');
+ _log("TextTracks not supported so rendering captions manually");
// Render captions from array at appropriate time
- plyr.currentCaption = '';
+ plyr.currentCaption = "";
plyr.captions = [];
- if (captionSrc !== '') {
+ if (captionSrc !== "") {
// Create XMLHttpRequest Object
var xhr = new XMLHttpRequest();
@@ -1042,16 +1132,16 @@
//According to webvtt spec, line terminator consists of one of the following
// CRLF (U+000D U+000A), LF (U+000A) or CR (U+000D)
- var lineSeparator = '\r\n';
- if(req.indexOf(lineSeparator+lineSeparator) === -1) {
- if(req.indexOf('\r\r') !== -1){
- lineSeparator = '\r';
+ var lineSeparator = "\r\n";
+ if (req.indexOf(lineSeparator + lineSeparator) === -1) {
+ if (req.indexOf("\r\r") !== -1) {
+ lineSeparator = "\r";
} else {
- lineSeparator = '\n';
+ lineSeparator = "\n";
}
}
- captions = req.split(lineSeparator+lineSeparator);
+ captions = req.split(lineSeparator + lineSeparator);
for (var r = 0; r < captions.length; r++) {
caption = captions[r];
@@ -1072,14 +1162,14 @@
// Remove first element ('VTT')
plyr.captions.shift();
- _log('Successfully loaded the caption file via AJAX');
+ _log("Successfully loaded the caption file via AJAX");
} else {
- _warn(config.logPrefix + 'There was a problem loading the caption file via AJAX');
+ _warn(config.logPrefix + "There was a problem loading the caption file via AJAX");
}
}
};
- xhr.open('get', captionSrc, true);
+ xhr.open("get", captionSrc, true);
xhr.send();
}
@@ -1091,14 +1181,14 @@
function _setCaption(caption) {
/* jshint unused:false */
var container = _getElement(config.selectors.captions),
- content = document.createElement('span');
+ content = document.createElement("span");
// Empty the container
- container.innerHTML = '';
+ container.innerHTML = "";
// Default to empty
if (_is.undefined(caption)) {
- caption = '';
+ caption = "";
}
// Set the span content
@@ -1121,8 +1211,8 @@
// Utilities for caption time codes
function _timecodeCommon(tc, pos) {
var tcpair = [];
- tcpair = tc.split(' --> ');
- for(var i = 0; i < tcpair.length; i++) {
+ tcpair = tc.split(" --> ");
+ for (var i = 0; i < tcpair.length; i++) {
// WebVTT allows for extra meta data after the timestamp line
// So get rid of this if it exists
tcpair[i] = tcpair[i].replace(/(\d+:\d+:\d+\.\d+).*/, "$1");
@@ -1142,15 +1232,15 @@
var tc1 = [],
tc2 = [],
seconds;
- tc1 = tc.split(',');
- tc2 = tc1[0].split(':');
- seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]);
+ tc1 = tc.split(",");
+ tc2 = tc1[0].split(":");
+ seconds = Math.floor(tc2[0] * 60 * 60) + Math.floor(tc2[1] * 60) + Math.floor(tc2[2]);
return seconds;
}
}
// If it's not video, or we're using textTracks, bail.
- if (plyr.usingTextTracks || plyr.type !== 'video' || !plyr.supported.full) {
+ if (plyr.usingTextTracks || plyr.type !== "video" || !plyr.supported.full) {
return;
}
@@ -1176,9 +1266,11 @@
}
// Check if the next caption is in the current time range
- if (plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) &&
- plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])) {
- plyr.currentCaption = plyr.captions[plyr.subcount][1];
+ if (
+ plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) &&
+ plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])
+ ) {
+ plyr.currentCaption = plyr.captions[plyr.subcount][1];
// Render the caption
_setCaption(plyr.currentCaption);
@@ -1224,17 +1316,16 @@
function _inFrame() {
try {
return window.self !== window.top;
- }
- catch (e) {
+ } catch (e) {
return true;
}
}
// Trap focus inside container
function _focusTrap() {
- var tabbables = _getElements('input:not([disabled]), button:not([disabled])'),
- first = tabbables[0],
- last = tabbables[tabbables.length - 1];
+ var tabbables = _getElements("input:not([disabled]), button:not([disabled])"),
+ first = tabbables[0],
+ last = tabbables[tabbables.length - 1];
function _checkFocus(event) {
// If it is TAB
@@ -1252,13 +1343,13 @@
}
// Bind the handler
- _on(plyr.container, 'keydown', _checkFocus);
+ _on(plyr.container, "keydown", _checkFocus);
}
// Add elements to HTML5 media (source, tracks, etc)
function _insertChildElements(type, attributes) {
if (_is.string(attributes)) {
- _insertElement(type, plyr.media, { src: attributes });
+ _insertElement(type, plyr.media, { src: attributes });
} else if (attributes.constructor === Array) {
for (var i = attributes.length - 1; i >= 0; i--) {
_insertElement(type, plyr.media, attributes[i]);
@@ -1274,10 +1365,10 @@
// Only load external sprite using AJAX
if (iconUrl.absolute) {
- _log('AJAX loading absolute SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : ''));
+ _log("AJAX loading absolute SVG sprite" + (plyr.browser.isIE ? " (due to IE)" : ""));
loadSprite(iconUrl.url, "sprite-plyr");
} else {
- _log('Sprite will be used as external resource directly');
+ _log("Sprite will be used as external resource directly");
}
}
@@ -1285,7 +1376,7 @@
var html = config.html;
// Insert custom video controls
- _log('Injecting custom controls');
+ _log("Injecting custom controls");
// If no controls are specified, create default
if (!html) {
@@ -1293,10 +1384,10 @@
}
// Replace seek time instances
- html = _replaceAll(html, '{seektime}', config.seekTime);
+ html = _replaceAll(html, "{seektime}", config.seekTime);
// Replace all id references with random numbers
- html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000)));
+ html = _replaceAll(html, "{id}", Math.floor(Math.random() * 10000));
// Controls container
var target;
@@ -1308,15 +1399,19 @@
// Inject into the container by default
if (!_is.htmlElement(target)) {
- target = plyr.container
+ target = plyr.container;
}
// Inject controls HTML
- target.insertAdjacentHTML('beforeend', html);
+ target.insertAdjacentHTML("beforeend", html);
// Setup tooltips
if (config.tooltips.controls) {
- var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join(''));
+ var labels = _getElements(
+ [config.selectors.controls.wrapper, " ", config.selectors.labels, " .", config.classes.hidden].join(
+ ""
+ )
+ );
for (var i = labels.length - 1; i >= 0; i--) {
var label = labels[i];
@@ -1330,51 +1425,52 @@
// Find the UI controls and store references
function _findElements() {
try {
- plyr.controls = _getElement(config.selectors.controls.wrapper);
+ plyr.controls = _getElement(config.selectors.controls.wrapper);
// Buttons
plyr.buttons = {};
- plyr.buttons.seek = _getElement(config.selectors.buttons.seek);
- plyr.buttons.play = _getElements(config.selectors.buttons.play);
- plyr.buttons.pause = _getElement(config.selectors.buttons.pause);
- plyr.buttons.restart = _getElement(config.selectors.buttons.restart);
- plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind);
- plyr.buttons.forward = _getElement(config.selectors.buttons.forward);
- plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen);
+ plyr.buttons.seek = _getElement(config.selectors.buttons.seek);
+ plyr.buttons.play = _getElements(config.selectors.buttons.play);
+ plyr.buttons.pause = _getElement(config.selectors.buttons.pause);
+ plyr.buttons.restart = _getElement(config.selectors.buttons.restart);
+ plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind);
+ plyr.buttons.forward = _getElement(config.selectors.buttons.forward);
+ plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen);
// Inputs
- plyr.buttons.mute = _getElement(config.selectors.buttons.mute);
- plyr.buttons.captions = _getElement(config.selectors.buttons.captions);
+ plyr.buttons.mute = _getElement(config.selectors.buttons.mute);
+ plyr.buttons.captions = _getElement(config.selectors.buttons.captions);
// Progress
plyr.progress = {};
- plyr.progress.container = _getElement(config.selectors.progress.container);
+ plyr.progress.container = _getElement(config.selectors.progress.container);
// Progress - Buffering
- plyr.progress.buffer = {};
- plyr.progress.buffer.bar = _getElement(config.selectors.progress.buffer);
- plyr.progress.buffer.text = plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName('span')[0];
+ plyr.progress.buffer = {};
+ plyr.progress.buffer.bar = _getElement(config.selectors.progress.buffer);
+ plyr.progress.buffer.text =
+ plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName("span")[0];
// Progress - Played
- plyr.progress.played = _getElement(config.selectors.progress.played);
+ plyr.progress.played = _getElement(config.selectors.progress.played);
// Seek tooltip
- plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip);
+ plyr.progress.tooltip =
+ plyr.progress.container && plyr.progress.container.querySelector("." + config.classes.tooltip);
// Volume
- plyr.volume = {};
- plyr.volume.input = _getElement(config.selectors.volume.input);
- plyr.volume.display = _getElement(config.selectors.volume.display);
+ plyr.volume = {};
+ plyr.volume.input = _getElement(config.selectors.volume.input);
+ plyr.volume.display = _getElement(config.selectors.volume.display);
// Timing
- plyr.duration = _getElement(config.selectors.duration);
- plyr.currentTime = _getElement(config.selectors.currentTime);
- plyr.seekTime = _getElements(config.selectors.seekTime);
+ plyr.duration = _getElement(config.selectors.duration);
+ plyr.currentTime = _getElement(config.selectors.currentTime);
+ plyr.seekTime = _getElements(config.selectors.seekTime);
return true;
- }
- catch(e) {
- _warn('It looks like there is a problem with your controls HTML');
+ } catch (e) {
+ _warn("It looks like there is a problem with your controls HTML");
// Restore native video controls
_toggleNativeControls(true);
@@ -1385,15 +1481,15 @@
// Toggle style hook
function _toggleStyleHook() {
- _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full);
+ _toggleClass(plyr.container, config.selectors.container.replace(".", ""), plyr.supported.full);
}
// Toggle native controls
function _toggleNativeControls(toggle) {
if (toggle && _inArray(config.types.html5, plyr.type)) {
- plyr.media.setAttribute('controls', '');
+ plyr.media.setAttribute("controls", "");
} else {
- plyr.media.removeAttribute('controls');
+ plyr.media.removeAttribute("controls");
}
}
@@ -1404,23 +1500,23 @@
// If there's a media title set, use that for the label
if (_is.string(config.title) && config.title.length) {
- label += ', ' + config.title;
+ label += ", " + config.title;
// Set container label
- plyr.container.setAttribute('aria-label', config.title);
+ plyr.container.setAttribute("aria-label", config.title);
}
// If there's a play button, set label
if (plyr.supported.full && plyr.buttons.play) {
for (var i = plyr.buttons.play.length - 1; i >= 0; i--) {
- plyr.buttons.play[i].setAttribute('aria-label', label);
+ plyr.buttons.play[i].setAttribute("aria-label", label);
}
}
// Set iframe title
// https://github.com/sampotts/plyr/issues/124
if (_is.htmlElement(iframe)) {
- iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title));
+ iframe.setAttribute("title", config.i18n.frameTitle.replace("{title}", config.title));
}
}
@@ -1436,7 +1532,7 @@
// Clean up old volume
// https://github.com/sampotts/plyr/issues/171
- window.localStorage.removeItem('plyr-volume');
+ window.localStorage.removeItem("plyr-volume");
// load value from the current key
value = window.localStorage.getItem(config.storage.key);
@@ -1448,7 +1544,7 @@
// If value is a number, it's probably volume from an older
// version of plyr. See: https://github.com/sampotts/plyr/pull/313
// Update the key to be JSON
- _updateStorage({volume: parseFloat(value)});
+ _updateStorage({ volume: parseFloat(value) });
} else {
// Assume it's JSON from this or a later version of plyr
plyr.storage = JSON.parse(value);
@@ -1473,18 +1569,18 @@
function _setupMedia() {
// If there's no media, bail
if (!plyr.media) {
- _warn('No media element found!');
+ _warn("No media element found!");
return;
}
if (plyr.supported.full) {
// Add type class
- _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
+ _toggleClass(plyr.container, config.classes.type.replace("{0}", plyr.type), true);
// Add video class for embeds
// This will require changes if audio embeds are added
if (_inArray(config.types.embed, plyr.type)) {
- _toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true);
+ _toggleClass(plyr.container, config.classes.type.replace("{0}", "video"), true);
}
// If there's no autoplay attribute, assume the video is stopped and add state class
@@ -1497,10 +1593,10 @@
_toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch);
// Inject the player wrapper
- if (plyr.type === 'video') {
+ if (plyr.type === "video") {
// Create the wrapper div
- var wrapper = document.createElement('div');
- wrapper.setAttribute('class', config.classes.videoWrapper);
+ var wrapper = document.createElement("div");
+ wrapper.setAttribute("class", config.classes.videoWrapper);
// Wrap the video in a container
_wrap(plyr.media, wrapper);
@@ -1518,18 +1614,26 @@
// Setup YouTube/Vimeo
function _setupEmbed() {
- var container = document.createElement('div'),
+ var container = document.createElement("div"),
mediaId,
- id = plyr.type + '-' + Math.floor(Math.random() * (10000));
+ mediaUrl,
+ id = plyr.type + "-" + Math.floor(Math.random() * 10000);
// Parse IDs from URLs if supplied
switch (plyr.type) {
- case 'youtube':
+ case "youtube":
mediaId = _parseYouTubeId(plyr.embedId);
break;
- case 'vimeo':
- mediaId = _parseVimeoId(plyr.embedId);
+ case "vimeo":
+ if (_isVimeoUrl(plyr.embedId)) {
+ mediaId = null;
+ mediaUrl = plyr.embedId;
+ } else {
+ mediaId = parseInt(plyr.embedId);
+ mediaUrl = null;
+ }
+
break;
default:
@@ -1546,12 +1650,12 @@
_toggleClass(plyr.media, config.classes.videoWrapper, true);
_toggleClass(plyr.media, config.classes.embedWrapper, true);
- if (plyr.type === 'youtube') {
+ if (plyr.type === "youtube") {
// Create the YouTube container
plyr.media.appendChild(container);
// Set ID
- container.setAttribute('id', id);
+ container.setAttribute("id", id);
// Setup API
if (_is.object(window.YT)) {
@@ -1564,14 +1668,18 @@
window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
// Add to queue
- window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container); });
+ window.onYouTubeReadyCallbacks.push(function() {
+ _youTubeReady(mediaId, container);
+ });
// Set callback to process queue
- window.onYouTubeIframeAPIReady = function () {
- window.onYouTubeReadyCallbacks.forEach(function(callback) { callback(); });
+ window.onYouTubeIframeAPIReady = function() {
+ window.onYouTubeReadyCallbacks.forEach(function(callback) {
+ callback();
+ });
};
}
- } else if (plyr.type === 'vimeo') {
+ } else if (plyr.type === "vimeo") {
// Vimeo needs an extra div to hide controls on desktop (which has full support)
if (plyr.supported.full) {
plyr.media.appendChild(container);
@@ -1580,7 +1688,7 @@
}
// Set ID
- container.setAttribute('id', id);
+ container.setAttribute("id", id);
// Load the API if not already
if (!_is.object(window.Vimeo)) {
@@ -1590,24 +1698,26 @@
var vimeoTimer = window.setInterval(function() {
if (_is.object(window.Vimeo)) {
window.clearInterval(vimeoTimer);
- _vimeoReady(mediaId, container);
+ _vimeoReady(mediaId, mediaUrl, container);
}
}, 50);
} else {
- _vimeoReady(mediaId, container);
+ _vimeoReady(mediaId, mediaUrl, container);
}
- } else if (plyr.type === 'soundcloud') {
+ } else if (plyr.type === "soundcloud") {
// TODO: Currently unsupported and undocumented
// Inject the iframe
- var soundCloud = document.createElement('iframe');
+ var soundCloud = document.createElement("iframe");
// Watch for iframe load
soundCloud.loaded = false;
- _on(soundCloud, 'load', function() { soundCloud.loaded = true; });
+ _on(soundCloud, "load", function() {
+ soundCloud.loaded = true;
+ });
_setAttributes(soundCloud, {
- 'src': 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId,
- 'id': id
+ src: "https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/" + mediaId,
+ id: id
});
container.appendChild(soundCloud);
@@ -1637,7 +1747,7 @@
}
// Set title
- _setTitle(_getElement('iframe'));
+ _setTitle(_getElement("iframe"));
}
// Handle YouTube API ready
@@ -1647,26 +1757,26 @@
plyr.embed = new window.YT.Player(container.id, {
videoId: videoId,
playerVars: {
- autoplay: (config.autoplay ? 1 : 0),
- controls: (plyr.supported.full ? 0 : 1),
- rel: 0,
- showinfo: 0,
+ autoplay: config.autoplay ? 1 : 0,
+ controls: plyr.supported.full ? 0 : 1,
+ rel: 0,
+ showinfo: 0,
iv_load_policy: 3,
- cc_load_policy: (config.captions.defaultActive ? 1 : 0),
- cc_lang_pref: 'en',
- wmode: 'transparent',
+ cc_load_policy: config.captions.defaultActive ? 1 : 0,
+ cc_lang_pref: "en",
+ wmode: "transparent",
modestbranding: 1,
- disablekb: 1,
- origin: '*' // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45
+ disablekb: 1,
+ origin: "*" // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45
},
events: {
- 'onError': function(event) {
- _triggerEvent(plyr.container, 'error', true, {
- code: event.data,
- embed: event.target
+ onError: function(event) {
+ _triggerEvent(plyr.container, "error", true, {
+ code: event.data,
+ embed: event.target
});
},
- 'onReady': function(event) {
+ onReady: function(event) {
// Get the instance
var instance = event.target;
@@ -1693,17 +1803,17 @@
// Set the tabindex
if (plyr.supported.full) {
- plyr.media.querySelector('iframe').setAttribute('tabindex', '-1');
+ plyr.media.querySelector("iframe").setAttribute("tabindex", "-1");
}
// Update UI
_embedReady();
// Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
+ _triggerEvent(plyr.media, "timeupdate");
// Trigger timeupdate
- _triggerEvent(plyr.media, 'durationchange');
+ _triggerEvent(plyr.media, "durationchange");
// Reset timer
window.clearInterval(timers.buffering);
@@ -1715,7 +1825,7 @@
// Trigger progress only when we actually buffer something
if (plyr.media.lastBuffered === null || plyr.media.lastBuffered < plyr.media.buffered) {
- _triggerEvent(plyr.media, 'progress');
+ _triggerEvent(plyr.media, "progress");
}
// Set last buffer point
@@ -1726,11 +1836,11 @@
window.clearInterval(timers.buffering);
// Trigger event
- _triggerEvent(plyr.media, 'canplaythrough');
+ _triggerEvent(plyr.media, "canplaythrough");
}
}, 200);
},
- 'onStateChange': function(event) {
+ onStateChange: function(event) {
// Get the instance
var instance = event.target;
@@ -1747,7 +1857,7 @@
switch (event.data) {
case 0:
plyr.media.paused = true;
- _triggerEvent(plyr.media, 'ended');
+ _triggerEvent(plyr.media, "ended");
break;
case 1:
@@ -1755,12 +1865,12 @@
// If we were seeking, fire seeked event
if (plyr.media.seeking) {
- _triggerEvent(plyr.media, 'seeked');
+ _triggerEvent(plyr.media, "seeked");
}
plyr.media.seeking = false;
- _triggerEvent(plyr.media, 'play');
- _triggerEvent(plyr.media, 'playing');
+ _triggerEvent(plyr.media, "play");
+ _triggerEvent(plyr.media, "playing");
// Poll to get playback progress
timers.playing = window.setInterval(function() {
@@ -1768,7 +1878,7 @@
plyr.media.currentTime = instance.getCurrentTime();
// Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
+ _triggerEvent(plyr.media, "timeupdate");
}, 100);
// Check duration again due to YouTube bug
@@ -1776,18 +1886,18 @@
// https://code.google.com/p/gdata-issues/issues/detail?id=8690
if (plyr.media.duration !== instance.getDuration()) {
plyr.media.duration = instance.getDuration();
- _triggerEvent(plyr.media, 'durationchange');
+ _triggerEvent(plyr.media, "durationchange");
}
break;
case 2:
plyr.media.paused = true;
- _triggerEvent(plyr.media, 'pause');
+ _triggerEvent(plyr.media, "pause");
break;
}
- _triggerEvent(plyr.container, 'statechange', false, {
+ _triggerEvent(plyr.container, "statechange", false, {
code: event.data
});
}
@@ -1796,17 +1906,27 @@
}
// Vimeo ready
- function _vimeoReady(mediaId, container) {
+ function _vimeoReady(mediaId, mediaUrl, container) {
// Setup instance
// https://github.com/vimeo/player.js
- plyr.embed = new window.Vimeo.Player(container, {
- id: parseInt(mediaId),
+
+ var vimeoOptions = {
loop: config.loop,
autoplay: config.autoplay,
byline: false,
portrait: false,
title: false
- });
+ };
+
+ if (mediaId) {
+ vimeoOptions.id = mediaId;
+ }
+
+ if (mediaUrl) {
+ vimeoOptions.url = mediaUrl;
+ }
+
+ plyr.embed = new window.Vimeo.Player(container, vimeoOptions);
// Create a faux HTML5 API using the Vimeo API
plyr.media.play = function() {
@@ -1832,14 +1952,14 @@
plyr.media.currentTime = value;
// Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
+ _triggerEvent(plyr.media, "timeupdate");
});
plyr.embed.getDuration().then(function(value) {
plyr.media.duration = value;
// Trigger timeupdate
- _triggerEvent(plyr.media, 'durationchange');
+ _triggerEvent(plyr.media, "durationchange");
});
// TODO: Captions
@@ -1847,50 +1967,50 @@
plyr.embed.enableTextTrack('en');
}*/
- plyr.embed.on('loaded', function() {
+ plyr.embed.on("loaded", function() {
// Fix keyboard focus issues
// https://github.com/sampotts/plyr/issues/317
if (_is.htmlElement(plyr.embed.element) && plyr.supported.full) {
- plyr.embed.element.setAttribute('tabindex', '-1');
+ plyr.embed.element.setAttribute("tabindex", "-1");
}
});
- plyr.embed.on('play', function() {
+ plyr.embed.on("play", function() {
plyr.media.paused = false;
- _triggerEvent(plyr.media, 'play');
- _triggerEvent(plyr.media, 'playing');
+ _triggerEvent(plyr.media, "play");
+ _triggerEvent(plyr.media, "playing");
});
- plyr.embed.on('pause', function() {
+ plyr.embed.on("pause", function() {
plyr.media.paused = true;
- _triggerEvent(plyr.media, 'pause');
+ _triggerEvent(plyr.media, "pause");
});
- plyr.embed.on('timeupdate', function(data) {
+ plyr.embed.on("timeupdate", function(data) {
plyr.media.seeking = false;
plyr.media.currentTime = data.seconds;
- _triggerEvent(plyr.media, 'timeupdate');
+ _triggerEvent(plyr.media, "timeupdate");
});
- plyr.embed.on('progress', function(data) {
+ plyr.embed.on("progress", function(data) {
plyr.media.buffered = data.percent;
- _triggerEvent(plyr.media, 'progress');
+ _triggerEvent(plyr.media, "progress");
if (parseInt(data.percent) === 1) {
// Trigger event
- _triggerEvent(plyr.media, 'canplaythrough');
+ _triggerEvent(plyr.media, "canplaythrough");
}
});
- plyr.embed.on('seeked', function() {
+ plyr.embed.on("seeked", function() {
plyr.media.seeking = false;
- _triggerEvent(plyr.media, 'seeked');
- _triggerEvent(plyr.media, 'play');
+ _triggerEvent(plyr.media, "seeked");
+ _triggerEvent(plyr.media, "play");
});
- plyr.embed.on('ended', function() {
+ plyr.embed.on("ended", function() {
plyr.media.paused = true;
- _triggerEvent(plyr.media, 'ended');
+ _triggerEvent(plyr.media, "ended");
});
}
@@ -1920,7 +2040,7 @@
plyr.media.currentTime = 0;
plyr.embed.getDuration(function(value) {
- plyr.media.duration = value/1000;
+ plyr.media.duration = value / 1000;
// Update UI
_embedReady();
@@ -1930,53 +2050,53 @@
plyr.media.currentTime = value;
// Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
+ _triggerEvent(plyr.media, "timeupdate");
});
plyr.embed.bind(window.SC.Widget.Events.PLAY, function() {
plyr.media.paused = false;
- _triggerEvent(plyr.media, 'play');
- _triggerEvent(plyr.media, 'playing');
+ _triggerEvent(plyr.media, "play");
+ _triggerEvent(plyr.media, "playing");
});
plyr.embed.bind(window.SC.Widget.Events.PAUSE, function() {
plyr.media.paused = true;
- _triggerEvent(plyr.media, 'pause');
+ _triggerEvent(plyr.media, "pause");
});
plyr.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) {
plyr.media.seeking = false;
- plyr.media.currentTime = data.currentPosition/1000;
- _triggerEvent(plyr.media, 'timeupdate');
+ plyr.media.currentTime = data.currentPosition / 1000;
+ _triggerEvent(plyr.media, "timeupdate");
});
plyr.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) {
plyr.media.buffered = data.loadProgress;
- _triggerEvent(plyr.media, 'progress');
+ _triggerEvent(plyr.media, "progress");
if (parseInt(data.loadProgress) === 1) {
// Trigger event
- _triggerEvent(plyr.media, 'canplaythrough');
+ _triggerEvent(plyr.media, "canplaythrough");
}
});
plyr.embed.bind(window.SC.Widget.Events.FINISH, function() {
plyr.media.paused = true;
- _triggerEvent(plyr.media, 'ended');
+ _triggerEvent(plyr.media, "ended");
});
});
}
// Play media
function _play() {
- if ('play' in plyr.media) {
+ if ("play" in plyr.media) {
plyr.media.play();
}
}
// Pause media
function _pause() {
- if ('pause' in plyr.media) {
+ if ("pause" in plyr.media) {
plyr.media.pause();
}
}
@@ -2018,16 +2138,16 @@
// Seek to time
// The input parameter can be an event or a number
function _seek(input) {
- var targetTime = 0,
- paused = plyr.media.paused,
- duration = _getDuration();
+ var targetTime = 0,
+ paused = plyr.media.paused,
+ duration = _getDuration();
if (_is.number(input)) {
targetTime = input;
- } else if (_is.object(input) && _inArray(['input', 'change'], input.type)) {
+ } else if (_is.object(input) && _inArray(["input", "change"], input.type)) {
// It's the seek slider
// Seek to the selected time
- targetTime = ((input.target.value / input.target.max) * duration);
+ targetTime = input.target.value / input.target.max * duration;
}
// Normalise targetTime
@@ -2044,22 +2164,21 @@
// Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
try {
plyr.media.currentTime = targetTime.toFixed(4);
- }
- catch(e) {}
+ } catch (e) {}
// Embeds
if (_inArray(config.types.embed, plyr.type)) {
- switch(plyr.type) {
- case 'youtube':
+ switch (plyr.type) {
+ case "youtube":
plyr.embed.seekTo(targetTime);
break;
- case 'vimeo':
+ case "vimeo":
// Round to nearest second for vimeo
plyr.embed.setCurrentTime(targetTime.toFixed(0));
break;
- case 'soundcloud':
+ case "soundcloud":
plyr.embed.seekTo(targetTime * 1000);
break;
}
@@ -2069,17 +2188,17 @@
}
// Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
+ _triggerEvent(plyr.media, "timeupdate");
// Set seeking flag
plyr.media.seeking = true;
// Trigger seeking
- _triggerEvent(plyr.media, 'seeking');
+ _triggerEvent(plyr.media, "seeking");
}
// Logging
- _log('Seeking to ' + plyr.media.currentTime + ' seconds');
+ _log("Seeking to " + plyr.media.currentTime + " seconds");
// Special handling for 'manual' captions
_seekManualCaptions(targetTime);
@@ -2089,9 +2208,8 @@
function _getDuration() {
// It should be a number, but parse it just incase
var duration = parseInt(config.duration),
-
- // True duration
- mediaDuration = 0;
+ // True duration
+ mediaDuration = 0;
// Only if duration available
if (plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
@@ -2099,7 +2217,7 @@
}
// If custom duration is funky, use regular duration
- return (isNaN(duration) ? mediaDuration : duration);
+ return isNaN(duration) ? mediaDuration : duration;
}
// Check playing state
@@ -2156,7 +2274,7 @@
plyr.isFullscreen = !plyr.isFullscreen;
// Bind/unbind escape key
- document.body.style.overflow = plyr.isFullscreen ? 'hidden' : '';
+ document.body.style.overflow = plyr.isFullscreen ? "hidden" : "";
}
// Set class hook
@@ -2171,7 +2289,7 @@
}
// Trigger an event
- _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true);
+ _triggerEvent(plyr.container, plyr.isFullscreen ? "enterfullscreen" : "exitfullscreen", true);
// Restore scroll position
if (!plyr.isFullscreen && nativeSupport) {
@@ -2200,19 +2318,19 @@
// Embeds
if (_inArray(config.types.embed, plyr.type)) {
// YouTube
- switch(plyr.type) {
- case 'youtube':
- plyr.embed[plyr.media.muted ? 'mute' : 'unMute']();
+ switch (plyr.type) {
+ case "youtube":
+ plyr.embed[plyr.media.muted ? "mute" : "unMute"]();
break;
- case 'vimeo':
- case 'soundcloud':
+ case "vimeo":
+ case "soundcloud":
plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax));
break;
}
// Trigger volumechange for embeds
- _triggerEvent(plyr.media, 'volumechange');
+ _triggerEvent(plyr.media, "volumechange");
}
}
@@ -2250,19 +2368,19 @@
// Embeds
if (_inArray(config.types.embed, plyr.type)) {
- switch(plyr.type) {
- case 'youtube':
+ switch (plyr.type) {
+ case "youtube":
plyr.embed.setVolume(plyr.media.volume * 100);
break;
- case 'vimeo':
- case 'soundcloud':
+ case "vimeo":
+ case "soundcloud":
plyr.embed.setVolume(plyr.media.volume);
break;
}
// Trigger volumechange for embeds
- _triggerEvent(plyr.media, 'volumechange');
+ _triggerEvent(plyr.media, "volumechange");
}
// Toggle muted state
@@ -2275,7 +2393,7 @@
// Increase volume
function _increaseVolume(step) {
- var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+ var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax;
if (!_is.number(step)) {
step = config.volumeStep;
@@ -2286,7 +2404,7 @@
// Decrease volume
function _decreaseVolume(step) {
- var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+ var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax;
if (!_is.number(step)) {
step = config.volumeStep;
@@ -2298,7 +2416,7 @@
// Update volume UI and storage
function _updateVolume() {
// Get the current volume
- var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+ var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax;
// Update the <input type="range"> if present
if (plyr.supported.full) {
@@ -2311,14 +2429,14 @@
}
// Update the volume in storage
- _updateStorage({volume: volume});
+ _updateStorage({ volume: volume });
// Toggle class if muted
- _toggleClass(plyr.container, config.classes.muted, (volume === 0));
+ _toggleClass(plyr.container, config.classes.muted, volume === 0);
// Update checkbox for mute state
if (plyr.supported.full && plyr.buttons.mute) {
- _toggleState(plyr.buttons.mute, (volume === 0));
+ _toggleState(plyr.buttons.mute, volume === 0);
}
}
@@ -2331,7 +2449,7 @@
// If the method is called without parameter, toggle based on current value
if (!_is.boolean(show)) {
- show = (plyr.container.className.indexOf(config.classes.captions.active) === -1);
+ show = plyr.container.className.indexOf(config.classes.captions.active) === -1;
}
// Set global
@@ -2344,15 +2462,15 @@
_toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
// Trigger an event
- _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true);
+ _triggerEvent(plyr.container, plyr.captionsEnabled ? "captionsenabled" : "captionsdisabled", true);
// Save captions state to localStorage
- _updateStorage({captionsEnabled: plyr.captionsEnabled});
+ _updateStorage({ captionsEnabled: plyr.captionsEnabled });
}
// Check if media is loading
function _checkLoading(event) {
- var loading = (event.type === 'waiting');
+ var loading = event.type === "waiting";
// Clear timer
clearTimeout(timers.loading);
@@ -2364,7 +2482,7 @@
// Show controls if loading, hide if done
_toggleControls(loading);
- }, (loading ? 250 : 0));
+ }, loading ? 250 : 0);
}
// Update <progress> elements
@@ -2373,15 +2491,15 @@
return;
}
- var progress = plyr.progress.played,
- value = 0,
- duration = _getDuration();
+ var progress = plyr.progress.played,
+ value = 0,
+ duration = _getDuration();
if (event) {
switch (event.type) {
// Video playing
- case 'timeupdate':
- case 'seeking':
+ case "timeupdate":
+ case "seeking":
if (plyr.controls.pressed) {
return;
}
@@ -2389,17 +2507,17 @@
value = _getPercentage(plyr.media.currentTime, duration);
// Set seek range value only if it's a 'natural' time event
- if (event.type === 'timeupdate' && plyr.buttons.seek) {
+ if (event.type === "timeupdate" && plyr.buttons.seek) {
plyr.buttons.seek.value = value;
}
break;
// Check buffer status
- case 'playing':
- case 'progress':
- progress = plyr.progress.buffer;
- value = (function() {
+ case "playing":
+ case "progress":
+ progress = plyr.progress.buffer;
+ value = (function() {
var buffered = plyr.media.buffered;
if (buffered && buffered.length) {
@@ -2407,7 +2525,7 @@
return _getPercentage(buffered.end(0), duration);
} else if (_is.number(buffered)) {
// YouTube returns between 0 and 1
- return (buffered * 100);
+ return buffered * 100;
}
return 0;
@@ -2468,17 +2586,17 @@
plyr.secs = parseInt(time % 60);
plyr.mins = parseInt((time / 60) % 60);
- plyr.hours = parseInt(((time / 60) / 60) % 60);
+ plyr.hours = parseInt((time / 60 / 60) % 60);
// Do we need to display hours?
- var displayHours = (parseInt(((_getDuration() / 60) / 60) % 60) > 0);
+ var displayHours = parseInt((_getDuration() / 60 / 60) % 60) > 0;
// Ensure it's two digits. For example, 03 rather than 3.
- plyr.secs = ('0' + plyr.secs).slice(-2);
- plyr.mins = ('0' + plyr.mins).slice(-2);
+ plyr.secs = ("0" + plyr.secs).slice(-2);
+ plyr.mins = ("0" + plyr.mins).slice(-2);
// Render
- element.innerHTML = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
+ element.innerHTML = (displayHours ? plyr.hours + ":" : "") + plyr.mins + ":" + plyr.secs;
}
// Show the duration on metadataloaded
@@ -2510,7 +2628,7 @@
_updateTimeDisplay(plyr.media.currentTime, plyr.currentTime);
// Ignore updates while seeking
- if (event && event.type === 'timeupdate' && plyr.media.seeking) {
+ if (event && event.type === "timeupdate" && plyr.media.seeking) {
return;
}
@@ -2525,8 +2643,8 @@
time = 0;
}
- var duration = _getDuration(),
- value = _getPercentage(time, duration);
+ var duration = _getDuration(),
+ value = _getPercentage(time, duration);
// Update progress
if (plyr.progress && plyr.progress.played) {
@@ -2549,19 +2667,19 @@
}
// Calculate percentage
- var clientRect = plyr.progress.container.getBoundingClientRect(),
- percent = 0,
- visible = config.classes.tooltip + '--visible';
+ var clientRect = plyr.progress.container.getBoundingClientRect(),
+ percent = 0,
+ visible = config.classes.tooltip + "--visible";
// Determine percentage, if already visible
if (!event) {
if (_hasClass(plyr.progress.tooltip, visible)) {
- percent = plyr.progress.tooltip.style.left.replace('%', '');
+ percent = plyr.progress.tooltip.style.left.replace("%", "");
} else {
return;
}
} else {
- percent = ((100 / clientRect.width) * (event.pageX - clientRect.left));
+ percent = 100 / clientRect.width * (event.pageX - clientRect.left);
}
// Set bounds
@@ -2572,22 +2690,22 @@
}
// Display the time a click would seek to
- _updateTimeDisplay(((duration / 100) * percent), plyr.progress.tooltip);
+ _updateTimeDisplay(duration / 100 * percent, plyr.progress.tooltip);
// Set position
plyr.progress.tooltip.style.left = percent + "%";
// Show/hide the tooltip
// If the event is a moues in/out and percentage is inside bounds
- if (event && _inArray(['mouseenter', 'mouseleave'], event.type)) {
- _toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter'));
+ if (event && _inArray(["mouseenter", "mouseleave"], event.type)) {
+ _toggleClass(plyr.progress.tooltip, visible, event.type === "mouseenter");
}
}
// Show the player controls in fullscreen mode
function _toggleControls(toggle) {
// Don't hide if config says not to, it's audio, or not ready or loading
- if (!config.hideControls || plyr.type === 'audio') {
+ if (!config.hideControls || plyr.type === "audio") {
return;
}
@@ -2600,18 +2718,18 @@
if (!_is.boolean(toggle)) {
if (toggle && toggle.type) {
// Is the enter fullscreen event
- isEnterFullscreen = (toggle.type === 'enterfullscreen');
+ isEnterFullscreen = toggle.type === "enterfullscreen";
// Whether to show controls
- show = _inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type);
+ show = _inArray(["mousemove", "touchstart", "mouseenter", "focus"], toggle.type);
// Delay hiding on move events
- if (_inArray(['mousemove', 'touchmove'], toggle.type)) {
+ if (_inArray(["mousemove", "touchmove"], toggle.type)) {
delay = 2000;
}
// Delay a little more for keyboard users
- if (toggle.type === 'focus') {
+ if (toggle.type === "focus") {
delay = 3000;
}
} else {
@@ -2661,18 +2779,18 @@
// Return the current source
var url;
- switch(plyr.type) {
- case 'youtube':
+ switch (plyr.type) {
+ case "youtube":
url = plyr.embed.getVideoUrl();
break;
- case 'vimeo':
- plyr.embed.getVideoUrl.then(function (value) {
+ case "vimeo":
+ plyr.embed.getVideoUrl.then(function(value) {
url = value;
});
break;
- case 'soundcloud':
+ case "soundcloud":
plyr.embed.getCurrentSound(function(object) {
url = object.permalink_url;
});
@@ -2683,14 +2801,14 @@
break;
}
- return url || '';
+ return url || "";
}
// Update source
// Sources are not checked for support so be careful
function _updateSource(source) {
- if (!_is.object(source) || !('sources' in source) || !source.sources.length) {
- _warn('Invalid source format');
+ if (!_is.object(source) || !("sources" in source) || !source.sources.length) {
+ _warn("Invalid source format");
return;
}
@@ -2718,24 +2836,24 @@
_remove(plyr.media);
// Remove video container
- if (plyr.type === 'video' && plyr.videoContainer) {
+ if (plyr.type === "video" && plyr.videoContainer) {
_remove(plyr.videoContainer);
}
// Reset class name
if (plyr.container) {
- plyr.container.removeAttribute('class');
+ plyr.container.removeAttribute("class");
}
// Set the type
- if ('type' in source) {
+ if ("type" in source) {
plyr.type = source.type;
// Get child type for video (it might be an embed)
- if (plyr.type === 'video') {
+ if (plyr.type === "video") {
var firstSource = source.sources[0];
- if ('type' in firstSource && _inArray(config.types.embed, firstSource.type)) {
+ if ("type" in firstSource && _inArray(config.types.embed, firstSource.type)) {
plyr.type = firstSource.type;
}
}
@@ -2745,19 +2863,19 @@
plyr.supported = supported(plyr.type);
// Create new markup
- switch(plyr.type) {
- case 'video':
- plyr.media = document.createElement('video');
+ switch (plyr.type) {
+ case "video":
+ plyr.media = document.createElement("video");
break;
- case 'audio':
- plyr.media = document.createElement('audio');
+ case "audio":
+ plyr.media = document.createElement("audio");
break;
- case 'youtube':
- case 'vimeo':
- case 'soundcloud':
- plyr.media = document.createElement('div');
+ case "youtube":
+ case "vimeo":
+ case "soundcloud":
+ plyr.media = document.createElement("div");
plyr.embedId = source.sources[0].src;
break;
}
@@ -2773,16 +2891,16 @@
// Set attributes for audio and video
if (_inArray(config.types.html5, plyr.type)) {
if (config.crossorigin) {
- plyr.media.setAttribute('crossorigin', '');
+ plyr.media.setAttribute("crossorigin", "");
}
if (config.autoplay) {
- plyr.media.setAttribute('autoplay', '');
+ plyr.media.setAttribute("autoplay", "");
}
- if ('poster' in source) {
- plyr.media.setAttribute('poster', source.poster);
+ if ("poster" in source) {
+ plyr.media.setAttribute("poster", source.poster);
}
if (config.loop) {
- plyr.media.setAttribute('loop', '');
+ plyr.media.setAttribute("loop", "");
}
}
@@ -2793,7 +2911,7 @@
// Set new sources for html5
if (_inArray(config.types.html5, plyr.type)) {
- _insertChildElements('source', source.sources);
+ _insertChildElements("source", source.sources);
}
// Set up from scratch
@@ -2802,8 +2920,8 @@
// HTML5 stuff
if (_inArray(config.types.html5, plyr.type)) {
// Setup captions
- if ('tracks' in source) {
- _insertChildElements('track', source.tracks);
+ if ("tracks" in source) {
+ _insertChildElements("track", source.tracks);
}
// Load HTML5 sources
@@ -2811,7 +2929,10 @@
}
// If HTML5 or embed but not fully supported, setupInterface and call ready now
- if (_inArray(config.types.html5, plyr.type) || (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)) {
+ if (
+ _inArray(config.types.html5, plyr.type) ||
+ (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)
+ ) {
// Setup interface
_setupInterface();
@@ -2831,23 +2952,27 @@
// Update poster
function _updatePoster(source) {
- if (plyr.type === 'video') {
- plyr.media.setAttribute('poster', source);
+ if (plyr.type === "video") {
+ plyr.media.setAttribute("poster", source);
}
}
+ function onBodyClick() {
+ _toggleClass(_getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false);
+ }
+
// Listen for control events
function _controlListeners() {
// IE doesn't support input event, so we fallback to change
- var inputEvent = (plyr.browser.isIE ? 'change' : 'input');
+ var inputEvent = plyr.browser.isIE ? "change" : "input";
// Click play/pause helper
function togglePlay() {
var play = _togglePlay();
// Determine which buttons
- var trigger = plyr.buttons[play ? 'play' : 'pause'],
- target = plyr.buttons[play ? 'pause' : 'play'];
+ var trigger = plyr.buttons[play ? "play" : "pause"],
+ target = plyr.buttons[play ? "pause" : "play"];
// Get the last play button to account for the large play button
if (target && target.length > 1) {
@@ -2878,7 +3003,7 @@
if (!focused || focused === document.body) {
focused = null;
} else {
- focused = document.querySelector(':focus');
+ focused = document.querySelector(":focus");
}
return focused;
@@ -2896,10 +3021,10 @@
if (_is.nodeList(element)) {
for (var i = 0; i < element.length; i++) {
- _toggleClass(element[i], config.classes.tabFocus, (element[i] === focused));
+ _toggleClass(element[i], config.classes.tabFocus, element[i] === focused);
}
} else {
- _toggleClass(element, config.classes.tabFocus, (element === focused));
+ _toggleClass(element, config.classes.tabFocus, element === focused);
}
}
}
@@ -2910,29 +3035,33 @@
// Handle global presses
if (config.keyboardShorcuts.global) {
- _on(window, 'keydown keyup', function(event) {
+ _on(window, "keydown keyup", function(event) {
var code = getKeyCode(event),
- focused = getFocusElement(),
- allowed = [48,49,50,51,52,53,54,56,57,75,77,70,67],
- count = get().length;
+ focused = getFocusElement(),
+ allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67],
+ count = get().length;
// Only handle global key press if there's only one player
// and the key is in the allowed keys
// and if the focused element is not editable (e.g. text input)
// and any that accept key input http://webaim.org/techniques/keyboard/
- if (count === 1 && _inArray(allowed, code) && (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))) {
+ if (
+ count === 1 &&
+ _inArray(allowed, code) &&
+ (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))
+ ) {
handleKey(event);
}
});
}
// Handle presses on focused
- _on(plyr.container, 'keydown keyup', handleKey);
+ _on(plyr.container, "keydown keyup", handleKey);
}
function handleKey(event) {
var code = getKeyCode(event),
- pressed = event.type === 'keydown',
+ pressed = event.type === "keydown",
held = pressed && code === last;
// If the event is bubbled from the media element
@@ -2952,14 +3081,14 @@
}
// Divide the max duration into 10th's and times by the number value
- _seek((duration / 10) * (code - 48));
+ _seek(duration / 10 * (code - 48));
}
// Handle the key on keydown
// Reset on keyup
if (pressed) {
// Which keycodes should we prevent default
- var preventDefault = [48,49,50,51,52,53,54,56,57,32,75,38,40,77,39,37,70,67];
+ var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67];
// If the code is found prevent default (e.g. prevent scrolling for arrows)
if (_inArray(preventDefault, code)) {
@@ -2967,7 +3096,7 @@
event.stopPropagation();
}
- switch(code) {
+ switch (code) {
// 0-9
case 48:
case 49:
@@ -2978,24 +3107,50 @@
case 54:
case 55:
case 56:
- case 57: if (!held) { seekByKey(); } break;
+ case 57:
+ if (!held) {
+ seekByKey();
+ }
+ break;
// Space and K key
case 32:
- case 75: if (!held) { _togglePlay(); } break;
+ case 75:
+ if (!held) {
+ _togglePlay();
+ }
+ break;
// Arrow up
- case 38: _increaseVolume(); break;
+ case 38:
+ _increaseVolume();
+ break;
// Arrow down
- case 40: _decreaseVolume(); break;
+ case 40:
+ _decreaseVolume();
+ break;
// M key
- case 77: if (!held) { _toggleMute() } break;
+ case 77:
+ if (!held) {
+ _toggleMute();
+ }
+ break;
// Arrow forward
- case 39: _forward(); break;
+ case 39:
+ _forward();
+ break;
// Arrow back
- case 37: _rewind(); break;
+ case 37:
+ _rewind();
+ break;
// F key
- case 70: _toggleFullscreen(); break;
+ case 70:
+ _toggleFullscreen();
+ break;
// C key
- case 67: if (!held) { _toggleCaptions(); } break;
+ case 67:
+ if (!held) {
+ _toggleCaptions();
+ }
+ break;
}
// Escape is handle natively when in full screen
@@ -3012,7 +3167,7 @@
}
// Focus/tab management
- _on(window, 'keyup', function(event) {
+ _on(window, "keyup", function(event) {
var code = getKeyCode(event),
focused = getFocusElement();
@@ -3020,31 +3175,29 @@
checkTabFocus(focused);
}
});
- _on(document.body, 'click', function() {
- _toggleClass(_getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false);
- });
+ _on(document.body, "click", onBodyClick);
for (var button in plyr.buttons) {
var element = plyr.buttons[button];
- _on(element, 'blur', function() {
- _toggleClass(element, 'tab-focus', false);
+ _on(element, "blur", function() {
+ _toggleClass(element, "tab-focus", false);
});
}
// Play
- _proxyListener(plyr.buttons.play, 'click', config.listeners.play, togglePlay);
+ _proxyListener(plyr.buttons.play, "click", config.listeners.play, togglePlay);
// Pause
- _proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, togglePlay);
+ _proxyListener(plyr.buttons.pause, "click", config.listeners.pause, togglePlay);
// Restart
- _proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, _seek);
+ _proxyListener(plyr.buttons.restart, "click", config.listeners.restart, _seek);
// Rewind
- _proxyListener(plyr.buttons.rewind, 'click', config.listeners.rewind, _rewind);
+ _proxyListener(plyr.buttons.rewind, "click", config.listeners.rewind, _rewind);
// Fast forward
- _proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward);
+ _proxyListener(plyr.buttons.forward, "click", config.listeners.forward, _forward);
// Seek
_proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek);
@@ -3055,10 +3208,10 @@
});
// Mute
- _proxyListener(plyr.buttons.mute, 'click', config.listeners.mute, _toggleMute);
+ _proxyListener(plyr.buttons.mute, "click", config.listeners.mute, _toggleMute);
// Fullscreen
- _proxyListener(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, _toggleFullscreen);
+ _proxyListener(plyr.buttons.fullscreen, "click", config.listeners.fullscreen, _toggleFullscreen);
// Handle user exiting fullscreen by escaping etc
if (fullscreen.supportsFullScreen) {
@@ -3066,38 +3219,42 @@
}
// Captions
- _proxyListener(plyr.buttons.captions, 'click', config.listeners.captions, _toggleCaptions);
+ _proxyListener(plyr.buttons.captions, "click", config.listeners.captions, _toggleCaptions);
// Seek tooltip
- _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
+ _on(plyr.progress.container, "mouseenter mouseleave mousemove", _updateSeekTooltip);
// Toggle controls visibility based on mouse movement
if (config.hideControls) {
// Toggle controls on mouse events and entering fullscreen
- _on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', _toggleControls);
+ _on(
+ plyr.container,
+ "mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen",
+ _toggleControls
+ );
// Watch for cursor over controls so they don't hide when trying to interact
- _on(plyr.controls, 'mouseenter mouseleave', function(event) {
- plyr.controls.hover = event.type === 'mouseenter';
+ _on(plyr.controls, "mouseenter mouseleave", function(event) {
+ plyr.controls.hover = event.type === "mouseenter";
});
- // Watch for cursor over controls so they don't hide when trying to interact
- _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) {
- plyr.controls.pressed = _inArray(['mousedown', 'touchstart'], event.type);
+ // Watch for cursor over controls so they don't hide when trying to interact
+ _on(plyr.controls, "mousedown mouseup touchstart touchend touchcancel", function(event) {
+ plyr.controls.pressed = _inArray(["mousedown", "touchstart"], event.type);
});
// Focus in/out on controls
- _on(plyr.controls, 'focus blur', _toggleControls, true);
+ _on(plyr.controls, "focus blur", _toggleControls, true);
}
// Adjust volume on scroll
- _on(plyr.volume.input, 'wheel', function(event) {
+ _on(plyr.volume.input, "wheel", function(event) {
event.preventDefault();
// Detect "natural" scroll - suppored on OS X Safari only
// Other browsers on OS X will be inverted until support improves
var inverted = event.webkitDirectionInvertedFromDevice,
- step = (config.volumeStep / 5);
+ step = config.volumeStep / 5;
// Scroll down (or up on natural) to decrease
if (event.deltaY < 0 || event.deltaX > 0) {
@@ -3122,20 +3279,20 @@
// Listen for media events
function _mediaListeners() {
// Time change on media
- _on(plyr.media, 'timeupdate seeking', _timeUpdate);
+ _on(plyr.media, "timeupdate seeking", _timeUpdate);
// Update manual captions
- _on(plyr.media, 'timeupdate', _seekManualCaptions);
+ _on(plyr.media, "timeupdate", _seekManualCaptions);
// Display duration
- _on(plyr.media, 'durationchange loadedmetadata', _displayDuration);
+ _on(plyr.media, "durationchange loadedmetadata", _displayDuration);
// Handle the media finishing
- _on(plyr.media, 'ended', function() {
+ _on(plyr.media, "ended", function() {
// Show poster on end
- if (plyr.type === 'video' && config.showPosterOnEnd) {
+ if (plyr.type === "video" && config.showPosterOnEnd) {
// Clear
- if (plyr.type === 'video') {
+ if (plyr.type === "video") {
_setCaption();
}
@@ -3148,21 +3305,21 @@
});
// Check for buffer progress
- _on(plyr.media, 'progress playing', _updateProgress);
+ _on(plyr.media, "progress playing", _updateProgress);
// Handle native mute
- _on(plyr.media, 'volumechange', _updateVolume);
+ _on(plyr.media, "volumechange", _updateVolume);
// Handle native play/pause
- _on(plyr.media, 'play pause ended', _checkPlaying);
+ _on(plyr.media, "play pause ended", _checkPlaying);
// Loading
- _on(plyr.media, 'waiting canplay seeked', _checkLoading);
+ _on(plyr.media, "waiting canplay seeked", _checkLoading);
// Click video
- if (config.clickToPlay && plyr.type !== 'audio') {
+ if (config.clickToPlay && plyr.type !== "audio") {
// Re-fetch the wrapper
- var wrapper = _getElement('.' + config.classes.videoWrapper);
+ var wrapper = _getElement("." + config.classes.videoWrapper);
// Bail if there's no wrapper (this should never happen)
if (!wrapper) {
@@ -3173,7 +3330,7 @@
wrapper.style.cursor = "pointer";
// On click play, pause ore restart
- _on(wrapper, 'click', function() {
+ _on(wrapper, "click", function() {
// Touch devices will just show controls (if we're hiding controls)
if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) {
return;
@@ -3192,12 +3349,14 @@
// Disable right click
if (config.disableContextMenu) {
- _on(plyr.media, 'contextmenu', function(event) { event.preventDefault(); });
+ _on(plyr.media, "contextmenu", function(event) {
+ event.preventDefault();
+ });
}
// Proxy events to container
// Bubble up key events for Edge
- _on(plyr.media, config.events.concat(['keyup', 'keydown']).join(' '), function(event) {
+ _on(plyr.media, config.events.concat(["keyup", "keydown"]).join(" "), function(event) {
_triggerEvent(plyr.container, event.type, true);
});
}
@@ -3210,7 +3369,7 @@
}
// Remove child sources
- var sources = plyr.media.querySelectorAll('source');
+ var sources = plyr.media.querySelectorAll("source");
for (var i = 0; i < sources.length; i++) {
_remove(sources[i]);
}
@@ -3218,7 +3377,7 @@
// Set blank video src attribute
// This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
// Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
- plyr.media.setAttribute('src', config.blankUrl);
+ plyr.media.setAttribute("src", config.blankUrl);
// Load the new empty source
// This will cancel existing requests
@@ -3226,7 +3385,7 @@
plyr.media.load();
// Debugging
- _log('Cancelled network requests');
+ _log("Cancelled network requests");
}
// Destroy an instance
@@ -3240,7 +3399,7 @@
// Type specific stuff
switch (plyr.type) {
- case 'youtube':
+ case "youtube":
// Clear timers
window.clearInterval(timers.buffering);
window.clearInterval(timers.playing);
@@ -3253,7 +3412,7 @@
break;
- case 'vimeo':
+ case "vimeo":
// Destroy Vimeo API
// then clean up (wait, to prevent postmessage errors)
plyr.embed.unload().then(cleanUp);
@@ -3263,8 +3422,8 @@
break;
- case 'video':
- case 'audio':
+ case "video":
+ case "audio":
// Restore native video controls
_toggleNativeControls(true);
@@ -3298,11 +3457,17 @@
// Replace the container with the original element provided
plyr.container.parentNode.replaceChild(original, plyr.container);
+ // Free container in order for GC to remove it and prevent memory leaks due to added events
+ plyr.container = null;
+
// Allow overflow (set on fullscreen)
- document.body.style.overflow = '';
+ document.body.style.overflow = "";
+
+ //remove events
+ _off(document.body, 'click', onBodyClick);
// Event
- _triggerEvent(original, 'destroyed', true);
+ _triggerEvent(original, "destroyed", true);
}
}
@@ -3330,18 +3495,18 @@
// Set media type based on tag or data attribute
// Supported: video, audio, vimeo, youtube
var tagName = media.tagName.toLowerCase();
- if (tagName === 'div') {
- plyr.type = media.getAttribute('data-type');
- plyr.embedId = media.getAttribute('data-video-id');
+ if (tagName === "div") {
+ plyr.type = media.getAttribute("data-type");
+ plyr.embedId = media.getAttribute("data-video-id");
// Clean up
- media.removeAttribute('data-type');
- media.removeAttribute('data-video-id');
+ media.removeAttribute("data-type");
+ media.removeAttribute("data-video-id");
} else {
- plyr.type = tagName;
- config.crossorigin = (media.getAttribute('crossorigin') !== null);
- config.autoplay = (config.autoplay || (media.getAttribute('autoplay') !== null));
- config.loop = (config.loop || (media.getAttribute('loop') !== null));
+ plyr.type = tagName;
+ config.crossorigin = media.getAttribute("crossorigin") !== null;
+ config.autoplay = config.autoplay || media.getAttribute("autoplay") !== null;
+ config.loop = config.loop || media.getAttribute("loop") !== null;
}
// Check for support
@@ -3353,23 +3518,26 @@
}
// Wrap media
- plyr.container = _wrap(media, document.createElement('div'));
+ plyr.container = _wrap(media, document.createElement("div"));
// Allow focus to be captured
- plyr.container.setAttribute('tabindex', 0);
+ plyr.container.setAttribute("tabindex", 0);
// Add style hook
_toggleStyleHook();
// Debug info
- _log('' + plyr.browser.name + ' ' + plyr.browser.version);
+ _log("" + plyr.browser.name + " " + plyr.browser.version);
// Setup media
_setupMedia();
// Setup interface
// If embed but not fully supported, setupInterface (to avoid flash of controls) and call ready now
- if (_inArray(config.types.html5, plyr.type) || (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)) {
+ if (
+ _inArray(config.types.html5, plyr.type) ||
+ (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)
+ ) {
// Setup UI
_setupInterface();
@@ -3388,7 +3556,7 @@
function _setupInterface() {
// Don't setup interface if no support
if (!plyr.supported.full) {
- _warn('Basic support only', plyr.type);
+ _warn("Basic support only", plyr.type);
// Remove controls
_remove(_getElement(config.selectors.controls.wrapper));
@@ -3444,44 +3612,76 @@
}
api = {
- getOriginal: function() { return original; },
- getContainer: function() { return plyr.container },
- getEmbed: function() { return plyr.embed; },
- getMedia: function() { return plyr.media; },
- getType: function() { return plyr.type; },
- getDuration: _getDuration,
- getCurrentTime: function() { return plyr.media.currentTime; },
- getVolume: function() { return plyr.media.volume; },
- isMuted: function() { return plyr.media.muted; },
- isReady: function() { return _hasClass(plyr.container, config.classes.ready); },
- isLoading: function() { return _hasClass(plyr.container, config.classes.loading); },
- isPaused: function() { return plyr.media.paused; },
- on: function(event, callback) { _on(plyr.container, event, callback); return this; },
- play: _play,
- pause: _pause,
- stop: function() { _pause(); _seek(); },
- restart: _seek,
- rewind: _rewind,
- forward: _forward,
- seek: _seek,
- source: _source,
- poster: _updatePoster,
- setVolume: _setVolume,
- togglePlay: _togglePlay,
- toggleMute: _toggleMute,
- toggleCaptions: _toggleCaptions,
- toggleFullscreen: _toggleFullscreen,
- toggleControls: _toggleControls,
- isFullscreen: function() { return plyr.isFullscreen || false; },
- support: function(mimeType) { return _supportMime(plyr, mimeType); },
- destroy: _destroy
+ getOriginal: function() {
+ return original;
+ },
+ getContainer: function() {
+ return plyr.container;
+ },
+ getEmbed: function() {
+ return plyr.embed;
+ },
+ getMedia: function() {
+ return plyr.media;
+ },
+ getType: function() {
+ return plyr.type;
+ },
+ getDuration: _getDuration,
+ getCurrentTime: function() {
+ return plyr.media.currentTime;
+ },
+ getVolume: function() {
+ return plyr.media.volume;
+ },
+ isMuted: function() {
+ return plyr.media.muted;
+ },
+ isReady: function() {
+ return _hasClass(plyr.container, config.classes.ready);
+ },
+ isLoading: function() {
+ return _hasClass(plyr.container, config.classes.loading);
+ },
+ isPaused: function() {
+ return plyr.media.paused;
+ },
+ on: function(event, callback) {
+ _on(plyr.container, event, callback);
+ return this;
+ },
+ play: _play,
+ pause: _pause,
+ stop: function() {
+ _pause();
+ _seek();
+ },
+ restart: _seek,
+ rewind: _rewind,
+ forward: _forward,
+ seek: _seek,
+ source: _source,
+ poster: _updatePoster,
+ setVolume: _setVolume,
+ togglePlay: _togglePlay,
+ toggleMute: _toggleMute,
+ toggleCaptions: _toggleCaptions,
+ toggleFullscreen: _toggleFullscreen,
+ toggleControls: _toggleControls,
+ isFullscreen: function() {
+ return plyr.isFullscreen || false;
+ },
+ support: function(mimeType) {
+ return _supportMime(plyr, mimeType);
+ },
+ destroy: _destroy
};
// Everything done
function _ready() {
// Ready event at end of execution stack
window.setTimeout(function() {
- _triggerEvent(plyr.media, 'ready');
+ _triggerEvent(plyr.media, "ready");
}, 0);
// Set class hook on media element
@@ -3515,21 +3715,21 @@
var x = new XMLHttpRequest();
// If the id is set and sprite exists, bail
- if (_is.string(id) && _is.htmlElement(document.querySelector('#' + id))) {
+ if (_is.string(id) && _is.htmlElement(document.querySelector("#" + id))) {
return;
}
// Create placeholder (to prevent loading twice)
- var container = document.createElement('div');
- container.setAttribute('hidden', '');
+ var container = document.createElement("div");
+ container.setAttribute("hidden", "");
if (_is.string(id)) {
- container.setAttribute('id', id);
+ container.setAttribute("id", id);
}
document.body.insertBefore(container, document.body.childNodes[0]);
// Check for CORS support
- if ('withCredentials' in x) {
- x.open('GET', url, true);
+ if ("withCredentials" in x) {
+ x.open("GET", url, true);
} else {
return;
}
@@ -3537,43 +3737,43 @@
// Inject hidden div with sprite on load
x.onload = function() {
container.innerHTML = x.responseText;
- }
+ };
x.send();
}
// Check for support
function supported(type) {
- var browser = _browserSniff(),
- isOldIE = (browser.isIE && browser.version <= 9),
- isIos = browser.isIos,
- isIphone = browser.isIphone,
- audioSupport = !!document.createElement('audio').canPlayType,
- videoSupport = !!document.createElement('video').canPlayType,
- basic = false,
- full = false;
+ var browser = _browserSniff(),
+ isOldIE = browser.isIE && browser.version <= 9,
+ isIos = browser.isIos,
+ isIphone = browser.isIphone,
+ audioSupport = !!document.createElement("audio").canPlayType,
+ videoSupport = !!document.createElement("video").canPlayType,
+ basic = false,
+ full = false;
switch (type) {
- case 'video':
+ case "video":
basic = videoSupport;
- full = (basic && (!isOldIE && !isIphone));
+ full = basic && (!isOldIE && !isIphone);
break;
- case 'audio':
+ case "audio":
basic = audioSupport;
- full = (basic && !isOldIE);
+ full = basic && !isOldIE;
break;
// Vimeo does not seem to be supported on iOS via API
// Issue raised https://github.com/vimeo/player.js/issues/87
- case 'vimeo':
+ case "vimeo":
basic = true;
- full = (!isOldIE && !isIos);
+ full = !isOldIE && !isIos;
break;
- case 'youtube':
+ case "youtube":
basic = true;
- full = (!isOldIE && !isIos);
+ full = !isOldIE && !isIos;
// YouTube seems to work on iOS 10+ on iPad
if (isIos && !isIphone && browser.version >= 10) {
@@ -3582,37 +3782,37 @@
break;
- case 'soundcloud':
+ case "soundcloud":
basic = true;
- full = (!isOldIE && !isIphone);
+ full = !isOldIE && !isIphone;
break;
default:
- basic = (audioSupport && videoSupport);
- full = (basic && !isOldIE);
+ basic = audioSupport && videoSupport;
+ full = basic && !isOldIE;
}
return {
- basic: basic,
- full: full
+ basic: basic,
+ full: full
};
}
// Setup function
function setup(targets, options) {
// Get the players
- var players = [],
- instances = [],
- selector = [defaults.selectors.html5, defaults.selectors.embed].join(',');
+ var players = [],
+ instances = [],
+ selector = [defaults.selectors.html5, defaults.selectors.embed].join(",");
// Select the elements
if (_is.string(targets)) {
// String selector passed
targets = document.querySelectorAll(targets);
- } else if (_is.htmlElement(targets)) {
+ } else if (_is.htmlElement(targets)) {
// Single HTMLElement passed
targets = [targets];
- } else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets)) {
+ } else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets)) {
// No selector passed, possibly options as first argument
// If options are the first argument
if (_is.undefined(options) && _is.object(targets)) {
@@ -3641,9 +3841,9 @@
// Always wrap in a <div> for styling
//container: _wrap(media, document.createElement('div')),
// Could be a container or the media itself
- target: target,
+ target: target,
// This should be the <video>, <audio> or <div> (YouTube/Vimeo)
- media: media
+ media: media
});
}
}
@@ -3668,9 +3868,9 @@
// Create a player instance for each element
players.forEach(function(player) {
- var element = player.target,
- media = player.media,
- match = false;
+ var element = player.target,
+ media = player.media,
+ match = false;
// The target element can also be the media element
if (media === element) {
@@ -3682,8 +3882,9 @@
var data = {};
// Try parsing data attribute config
- try { data = JSON.parse(element.getAttribute('data-plyr')); }
- catch(e) { }
+ try {
+ data = JSON.parse(element.getAttribute("data-plyr"));
+ } catch (e) {}
var config = _extend({}, defaults, options, data);
@@ -3702,15 +3903,22 @@
// Listen for events if debugging
if (config.debug) {
- var events = config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']);
-
- _on(instance.getContainer(), events.join(' '), function(event) {
- console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr);
+ var events = config.events.concat([
+ "setup",
+ "statechange",
+ "enterfullscreen",
+ "exitfullscreen",
+ "captionsenabled",
+ "captionsdisabled"
+ ]);
+
+ _on(instance.getContainer(), events.join(" "), function(event) {
+ console.log([config.logPrefix, "event:", event.type].join(" "), event.detail.plyr);
});
}
// Callback
- _event(instance.getContainer(), 'setup', true, {
+ _event(instance.getContainer(), "setup", true, {
plyr: instance
});
@@ -3733,7 +3941,7 @@
// If we have a HTML element
if (_is.htmlElement(container)) {
- var elements = container.querySelectorAll('.' + defaults.classes.setup),
+ var elements = container.querySelectorAll("." + defaults.classes.setup),
instances = [];
Array.prototype.slice.call(elements).forEach(function(element) {
@@ -3749,23 +3957,23 @@
}
return {
- setup: setup,
- supported: supported,
+ setup: setup,
+ supported: supported,
loadSprite: loadSprite,
- get: get
+ get: get
};
-}));
+});
// Custom event polyfill
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
-(function () {
- if (typeof window.CustomEvent === 'function') {
+(function() {
+ if (typeof window.CustomEvent === "function") {
return;
}
function CustomEvent(event, params) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
- var evt = document.createEvent('CustomEvent');
+ var evt = document.createEvent("CustomEvent");
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 7ece63c2..3b1c21b6 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -9,7 +9,9 @@
// Animation
// ---------------------------------------
@keyframes plyr-progress {
- to { background-position: @plyr-progress-loading-size 0; }
+ to {
+ background-position: @plyr-progress-loading-size 0;
+ }
}
// Styles
@@ -35,7 +37,10 @@
& when (@plyr-touch-action = true) {
// Fix 300ms delay
- a, button, input, label {
+ a,
+ button,
+ input,
+ label {
touch-action: manipulation;
}
}
@@ -56,7 +61,7 @@
// Range inputs
// Specificity is for bootstrap compatibility
- input[type='range'] {
+ input[type="range"] {
display: block;
height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
width: 100%;
@@ -137,12 +142,12 @@
}
// Video range inputs
-.plyr--video input[type='range'].tab-focus:focus {
+.plyr--video input[type="range"].tab-focus:focus {
outline: 1px dotted fade(@plyr-video-control-color, 50%);
}
// Audio range inputs
-.plyr--audio input[type='range'].tab-focus:focus {
+.plyr--audio input[type="range"].tab-focus:focus {
outline: 1px dotted fade(@plyr-audio-control-color, 50%);
}
@@ -221,7 +226,7 @@
width: 100%;
padding: (@plyr-control-spacing * 2);
transform: translateY(-(@plyr-control-spacing * 4));
- transition: transform .3s ease;
+ transition: transform 0.3s ease;
color: @plyr-captions-color;
font-size: @plyr-font-size-captions-base;
text-align: center;
@@ -303,7 +308,7 @@
background: transparent;
border-radius: 3px;
cursor: pointer;
- transition: background .3s ease, color .3s ease, opacity .3s ease;
+ transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
color: inherit;
svg {
@@ -352,7 +357,7 @@
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: @plyr-video-control-color;
- transition: opacity .3s ease;
+ transition: opacity 0.3s ease;
button {
// Hover and tab focus
@@ -396,7 +401,7 @@
border-radius: 100%;
box-shadow: 0 1px 1px fade(#000, 15%);
color: @plyr-video-control-color;
- transition: all .3s ease;
+ transition: all 0.3s ease;
svg {
position: relative;
@@ -423,11 +428,11 @@
}
// States
-.plyr__controls [data-plyr='pause'],
-.plyr--playing .plyr__controls [data-plyr='play'] {
+.plyr__controls [data-plyr="pause"],
+.plyr--playing .plyr__controls [data-plyr="play"] {
display: none;
}
-.plyr--playing .plyr__controls [data-plyr='pause'] {
+.plyr--playing .plyr__controls [data-plyr="pause"] {
display: inline-block;
}
@@ -443,12 +448,12 @@
}
// Some options are hidden by default
-.plyr [data-plyr='captions'],
-.plyr [data-plyr='fullscreen'] {
+.plyr [data-plyr="captions"],
+.plyr [data-plyr="fullscreen"] {
display: none;
}
-.plyr--captions-enabled [data-plyr='captions'],
-.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+.plyr--captions-enabled [data-plyr="captions"],
+.plyr--fullscreen-enabled [data-plyr="fullscreen"] {
display: inline-block;
}
@@ -470,13 +475,13 @@
font-size: @plyr-font-size-small;
line-height: 1.3;
- transform: translate(-50%, 10px) scale(.8);
+ transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
- transition: transform .2s .1s ease, opacity .2s .1s ease;
+ transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
&::before {
// Arrows
- content: '';
+ content: "";
position: absolute;
width: 0;
height: 0;
@@ -504,7 +509,7 @@
// First tooltip
.plyr__controls button:first-child .plyr__tooltip {
left: 0;
- transform: translate(0, 10px) scale(.8);
+ transform: translate(0, 10px) scale(0.8);
transform-origin: 0 100%;
&::before {
@@ -515,7 +520,7 @@
// Last tooltip
.plyr__controls button:last-child .plyr__tooltip {
right: 0;
- transform: translate(0, 10px) scale(.8);
+ transform: translate(0, 10px) scale(0.8);
transform-origin: 100% 100%;
&::before {
@@ -534,7 +539,6 @@
}
}
-
// Playback progress
// --------------------------------------------------------------
// <progress> element
@@ -626,13 +630,13 @@
}
.plyr__progress--buffer {
&::-webkit-progress-value {
- transition: width .2s ease;
+ transition: width 0.2s ease;
}
&::-moz-progress-bar {
- transition: width .2s ease;
+ transition: width 0.2s ease;
}
&::-ms-fill {
- transition: width .2s ease;
+ transition: width 0.2s ease;
}
}
.plyr--video .plyr__progress--buffer,
@@ -663,7 +667,8 @@
@plyr-progress-loading-bg 50%,
@plyr-progress-loading-bg 75%,
transparent 75%,
- transparent);
+ transparent
+ );
color: transparent;
}
.plyr--video.plyr--loading .plyr__progress--buffer {
@@ -690,7 +695,7 @@
// Add a slash in before
&::before {
- content: '\2044';
+ content: "\2044";
margin-right: @plyr-control-spacing;
}
}
@@ -721,21 +726,15 @@
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
.plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr='mute'] {
+.plyr--is-ios [data-plyr="mute"] {
display: none !important;
}
// Fullscreen
// --------------------------------------------------------------
.plyr--fullscreen-active {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
height: 100%;
width: 100%;
- z-index: 10000000;
background: #000;
border-radius: 0 !important;
@@ -750,12 +749,6 @@
// Revert overflow change
overflow: visible;
}
- .plyr__controls {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- }
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
@@ -764,3 +757,13 @@
transform: translateY(-50%);
}
}
+
+// Fallback for unsupported browsers
+.plyr--fullscreen-fallback.plyr--fullscreen-active {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 10000000;
+}
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index b37488f8..11488ae4 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -9,7 +9,9 @@
// Animation
// ---------------------------------------
@keyframes plyr-progress {
- to { background-position: $plyr-progress-loading-size 0; }
+ to {
+ background-position: $plyr-progress-loading-size 0;
+ }
}
// Styles
@@ -34,10 +36,13 @@
}
@if $plyr-touch-action == true {
- // Fix 300ms delay
- a, button, input, label {
- touch-action: manipulation;
- }
+ // Fix 300ms delay
+ a,
+ button,
+ input,
+ label {
+ touch-action: manipulation;
+ }
}
// Focus
@@ -56,7 +61,7 @@
// Range inputs
// Specificity is for bootstrap compatibility
- input[type='range'] {
+ input[type="range"] {
display: block;
height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale);
width: 100%;
@@ -137,13 +142,13 @@
}
// Video range inputs
-.plyr--video input[type='range'].tab-focus:focus {
- outline: 1px dotted transparentize($plyr-video-control-color, .5);
+.plyr--video input[type="range"].tab-focus:focus {
+ outline: 1px dotted transparentize($plyr-video-control-color, 0.5);
}
// Audio range inputs
-.plyr--audio input[type='range'].tab-focus:focus {
- outline: 1px dotted transparentize($plyr-audio-control-color, .5);
+.plyr--audio input[type="range"].tab-focus:focus {
+ outline: 1px dotted transparentize($plyr-audio-control-color, 0.5);
}
// Screen reader only elements
@@ -220,7 +225,7 @@
width: 100%;
padding: ($plyr-control-spacing * 2);
transform: translateY(-($plyr-control-spacing * 6));
- transition: transform .3s ease;
+ transition: transform 0.3s ease;
color: $plyr-captions-color;
font-size: $plyr-font-size-captions-base;
text-align: center;
@@ -297,12 +302,12 @@
flex-shrink: 0;
overflow: visible; // IE11
vertical-align: middle;
- padding: ($plyr-control-spacing * .7);
+ padding: ($plyr-control-spacing * 0.7);
border: 0;
background: transparent;
border-radius: 3px;
cursor: pointer;
- transition: background .3s ease, color .3s ease, opacity .3s ease;
+ transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
color: inherit;
svg {
@@ -346,11 +351,14 @@
right: 0;
bottom: 0;
padding: ($plyr-control-spacing * 5) $plyr-control-spacing $plyr-control-spacing;
- background: linear-gradient(transparentize($plyr-video-controls-bg, 1), transparentize($plyr-video-controls-bg, .5));
+ background: linear-gradient(
+ transparentize($plyr-video-controls-bg, 1),
+ transparentize($plyr-video-controls-bg, 0.5)
+ );
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: $plyr-video-control-color;
- transition: opacity .3s ease;
+ transition: opacity 0.3s ease;
button {
// Hover and tab focus
@@ -392,9 +400,9 @@
background: $plyr-video-control-bg-hover;
border: 4px solid currentColor;
border-radius: 100%;
- box-shadow: 0 1px 1px transparentize(#000, .85);
+ box-shadow: 0 1px 1px transparentize(#000, 0.85);
color: $plyr-video-control-color;
- transition: all .3s ease;
+ transition: all 0.3s ease;
svg {
position: relative;
@@ -406,7 +414,7 @@
}
&:focus {
- outline: 1px dotted transparentize($plyr-video-control-color, .5);
+ outline: 1px dotted transparentize($plyr-video-control-color, 0.5);
}
}
.plyr .plyr__play-large {
@@ -421,11 +429,11 @@
}
// States
-.plyr__controls [data-plyr='pause'],
-.plyr--playing .plyr__controls [data-plyr='play'] {
+.plyr__controls [data-plyr="pause"],
+.plyr--playing .plyr__controls [data-plyr="play"] {
display: none;
}
-.plyr--playing .plyr__controls [data-plyr='pause'] {
+.plyr--playing .plyr__controls [data-plyr="pause"] {
display: inline-block;
}
@@ -441,12 +449,12 @@
}
// Some options are hidden by default
-.plyr [data-plyr='captions'],
-.plyr [data-plyr='fullscreen'] {
+.plyr [data-plyr="captions"],
+.plyr [data-plyr="fullscreen"] {
display: none;
}
-.plyr--captions-enabled [data-plyr='captions'],
-.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+.plyr--captions-enabled [data-plyr="captions"],
+.plyr--fullscreen-enabled [data-plyr="fullscreen"] {
display: inline-block;
}
@@ -468,13 +476,13 @@
font-size: $plyr-font-size-small;
line-height: 1.3;
- transform: translate(-50%, 10px) scale(.8);
+ transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
- transition: transform .2s .1s ease, opacity .2s .1s ease;
+ transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
&::before {
// Arrows
- content: '';
+ content: "";
position: absolute;
width: 0;
height: 0;
@@ -502,7 +510,7 @@
// First tooltip
.plyr__controls button:first-child .plyr__tooltip {
left: 0;
- transform: translate(0, 10px) scale(.8);
+ transform: translate(0, 10px) scale(0.8);
transform-origin: 0 100%;
&::before {
@@ -513,7 +521,7 @@
// Last tooltip
.plyr__controls button:last-child .plyr__tooltip {
right: 0;
- transform: translate(0, 10px) scale(.8);
+ transform: translate(0, 10px) scale(0.8);
transform-origin: 100% 100%;
&::before {
@@ -623,13 +631,13 @@
}
.plyr__progress--buffer {
&::-webkit-progress-value {
- transition: width .2s ease;
+ transition: width 0.2s ease;
}
&::-moz-progress-bar {
- transition: width .2s ease;
+ transition: width 0.2s ease;
}
&::-ms-fill {
- transition: width .2s ease;
+ transition: width 0.2s ease;
}
}
.plyr--video .plyr__progress--buffer,
@@ -660,7 +668,8 @@
$plyr-progress-loading-bg 50%,
$plyr-progress-loading-bg 75%,
transparent 75%,
- transparent);
+ transparent
+ );
color: transparent;
}
.plyr--video.plyr--loading .plyr__progress--buffer {
@@ -687,7 +696,7 @@
// Add a slash in before
&::before {
- content: '\2044';
+ content: "\2044";
margin-right: $plyr-control-spacing;
}
}
@@ -718,21 +727,15 @@
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
.plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr='mute'] {
+.plyr--is-ios [data-plyr="mute"] {
display: none !important;
}
// Fullscreen
// --------------------------------------------------------------
.plyr--fullscreen-active {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
height: 100%;
width: 100%;
- z-index: 10000000;
background: #000;
border-radius: 0 !important;
@@ -747,12 +750,6 @@
// Revert overflow change
overflow: visible;
}
- .plyr__controls {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- }
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
@@ -761,3 +758,13 @@
transform: translateY(-50%);
}
}
+
+// Fallback for unsupported browsers
+.plyr--fullscreen-fallback.plyr--fullscreen-active {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 10000000;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-16 22:39:09 +0000