diff --git a/demo/dist/demo.css b/demo/dist/demo.css index a9b2f5bc..a323a9a4 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:#22b5ff}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}figure,li,ul{margin:0}[hidden],template{display:none}header,section{margin-bottom:20px}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;transition:color .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%;background:#fff}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;max-width:800px;margin:auto;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}a:focus,button: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}header p{font-size:18px;font-size:1.125rem}@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}.btn__bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#f2f5f7}.btn__bar ul{position:relative;z-index:1}.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:#fff;border:1px solid #dbe3e8;color:#55646b;transition:all .2s ease;font-size:14px;font-size:.875rem}.btn:focus,.btn:hover{border-color:#cbd0d3}.btn--large{padding:10px 20px;font-size:16px;font-size:1rem}.btn--primary,.btn__bar li.active .btn{background-image:linear-gradient(#22b5ff,#08acff);background-color:#22b5ff;border-color:#08acff;color:#fff}.btn--primary:focus,.btn--primary:hover{color:#fff;border-color:#009eee}.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 #dbe3e8}.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{margin-top:20px} \ No newline at end of file diff --git a/demo/dist/demo.js b/demo/dist/demo.js index bf26da52..dbb9dd10 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,n=arguments.length;for(i=0;i=0;a--)e(n[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"]});window.player=i,window.loadSprite("dist/demo.svg","demo-sprite");var n=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),s=window.history&&window.history.pushState;if([].forEach.call(n,function(e){e.addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),s&&history.pushState({type:e},"","#"+e)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),s){var a=!r.length;a&&(r=o.video),r in o&&history.replaceState({type:r},"",a?"":"#"+r),r!==o.video&&t(r,!0)}}(),"plyr.io"===window.location.host&&(!function(e,t,i,n,o,r,s){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,r=t.createElement(i),s=t.getElementsByTagName(i)[0],r.async=1,r.src=n,s.parentNode.insertBefore(r,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview")); \ No newline at end of file +"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,n=arguments.length;for(i=0;i=0;a--)e(n[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0),[].forEach.call(document.querySelectorAll(".plyr__cite"),function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+t).removeAttribute("hidden")}}var i=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"]});window.player=i,window.loadSprite("dist/demo.svg","demo-sprite");var n=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),s=window.history&&window.history.pushState;if([].forEach.call(n,function(e){e.addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),s&&history.pushState({type:e},"","#"+e)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),s){var a=!r.length;a&&(r=o.video),r in o&&history.replaceState({type:r},"",a?"":"#"+r),r!==o.video&&t(r,!0)}}(),"plyr.io"===window.location.host&&(!function(e,t,i,n,o,r,s){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,r=t.createElement(i),s=t.getElementsByTagName(i)[0],r.async=1,r.src=n,s.parentNode.insertBefore(r,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview")); \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index c844dcd7..886679a1 100644 --- a/demo/index.html +++ b/demo/index.html @@ -64,10 +64,36 @@ diff --git a/demo/src/js/main.js b/demo/src/js/main.js index ee45d118..3d44b94f 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -185,6 +185,12 @@ // Set active on parent toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true); + + // Show cite + [].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) { + cite.setAttribute('hidden', ''); + }); + document.querySelector('.plyr__cite--' + type).removeAttribute('hidden'); } })(); diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less index 502196cf..7f71dbb4 100644 --- a/demo/src/less/components/base.less +++ b/demo/src/less/components/base.less @@ -2,10 +2,10 @@ // Base layout // ========================================================================== -// BORDER-BOX ALL THE THINGS! +// BORDER-BOX ALL THE THINGS! // http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; +*, *::after, *::before { + box-sizing: border-box; } // Hidden @@ -15,11 +15,11 @@ // Base html { - height: 100%; - background: @body-background fixed; + background: @body-background; } body { - margin: 0; + max-width: @container-width; + margin: auto; padding: (@padding-base / 2); } @@ -31,6 +31,7 @@ header { p { .font-size(18); } + @media (min-width: @screen-sm) { padding-top: (@padding-base * 3); padding-bottom: (@padding-base * 3); @@ -39,8 +40,7 @@ header { // Sections section { - max-width: @example-width-video; - margin: 0 auto @padding-base; + margin-bottom: @padding-base; @media (min-width: @screen-sm) { margin-bottom: (@padding-base * 2); diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less index c99a0836..23cc3e7f 100644 --- a/demo/src/less/components/buttons.less +++ b/demo/src/less/components/buttons.less @@ -3,170 +3,162 @@ // ========================================================================== nav { - ul { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - } - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } + ul { + list-style: none; + margin: 0; + padding: 0; + font-size: 0; + } + li { + display: inline-block; + margin-top: (@padding-base / 2); + .font-size(); + white-space: nowrap; + } + li + li { + margin-left: @padding-base; + } } // Tabs .btn__bar { - position: relative; - margin: 0 auto @padding-base; - max-width: @example-width-video; - white-space: nowrap; + position: relative; + margin: 0 auto @padding-base; + white-space: nowrap; - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: @gray-lighter; - } + &::before { + content: ""; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: @off-white; + } - ul { - position: relative; - z-index: 1; - display: inline-block; - user-select: none; - } - li { - margin: 0; + ul { + position: relative; + z-index: 1; + display: inline-block; + } + li { + margin: 0; - &:first-child .btn { - border-radius: 4px 0 0 4px; - } - &:last-child .btn { - border-radius: 0 4px 4px 0; - } - & + li .btn { - margin-left: -1px; - } + &:first-child .btn { + border-radius: 4px 0 0 4px; + } + &:last-child .btn { + border-radius: 0 4px 4px 0; + } + & + li .btn { + margin-left: -1px; + } - &.active .btn { - &:extend(.btn--primary); - box-shadow: inset 0 1px 1px rgba(0,0,0, .2); - position: relative; - z-index: 1; + &.active .btn { + &:extend(.btn--primary); + position: relative; + z-index: 1; - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; + .icon { + color: inherit; + } + } + &.active + li .btn:hover { + z-index: 0; + } + } + .btn { + position: relative; + display: block; + border-radius: 0; - &:hover, - &:focus { - z-index: 1; - } - } + &:hover, + &:focus { + z-index: 1; + } + } - @media (min-width: 560px) { - margin-bottom: (@padding-base * 2); - } + @media (min-width: 560px) { + margin-bottom: (@padding-base * 2); + } } // Shared .btn, .btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; + display: inline-block; + vertical-align: middle; + border-radius: @border-radius-base; + user-select: none; + font-weight: @font-weight-bold; } // Buttons .btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); - border: 1px solid @gray-light; - box-shadow: 0 1px 1px rgba(0,0,0, .05); - text-shadow: 0 1px 1px #fff; - color: @gray; - transition: background .1s ease, color .1s ease; - .font-size(@font-size-small); + padding: (@padding-base / 2) ((@padding-base / 2) + 2); + background: #fff; + border: 1px solid @gray-lighter; + color: @gray; + transition: all .2s ease; + .font-size(@font-size-small); - &:hover, - &:focus { - border-color: darken(@gray-light, 8%); - color: @gray; - outline: 0; - } + &:hover, + &:focus { + border-color: @gray-light; + } } // Sizes .btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); + padding: (@padding-base / 2) @padding-base; + .font-size(); } // Styles .btn--primary { - background-image: linear-gradient(@link-color, darken(@link-color, 5%)); - background-color: @link-color; - border-color: darken(@link-color, 10%); - box-shadow: 0 1px 1px rgba(0,0,0, .15); - text-shadow: 0 1px 1px rgba(0,0,0, .1); - color: #fff; + @border-color: darken(@link-color, 5%); + background-image: linear-gradient(@link-color, @border-color); + background-color: @link-color; + border-color: @border-color; + color: #fff; - &:hover, - &:focus { - color: #fff; - border-color: darken(@link-color, 20%); - } + &:hover, + &:focus { + color: #fff; + border-color: darken(@border-color, 5%); + } } .btn--youtube .icon { - color: @color-youtube; + color: @color-youtube; } .btn--vimeo .icon { - color: @color-vimeo; + color: @color-vimeo; } .btn--twitter .icon { - color: @color-twitter; + color: @color-twitter; } // Count bubble .btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-light; + position: relative; + margin-left: (@padding-base / 2); + padding: (@padding-base / 2) (@padding-base * .75); + background: #fff; + border: 1px solid @gray-lighter; - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); + &::before { + content: ""; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } } diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/examples.less index a9e72d21..ff22e37b 100644 --- a/demo/src/less/components/examples.less +++ b/demo/src/less/components/examples.less @@ -30,17 +30,5 @@ video { // Style full supported player .plyr__cite { - display: none; margin-top: @padding-base; - - .icon { - margin-right: (@padding-base / 4); - } -} - -.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video, -.plyr--audio ~ ul .plyr__cite--audio, -.plyr--youtube ~ ul .plyr__cite--youtube, -.plyr--vimeo ~ ul .plyr__cite--vimeo { - display: block; } diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less index 951be36d..1f16161a 100644 --- a/demo/src/less/components/type.less +++ b/demo/src/less/components/type.less @@ -51,22 +51,22 @@ li { a { text-decoration: none; color: @link-color; - border-bottom: 1px dotted currentColor; - transition: background .3s ease, color .3s ease, border .3s ease; + transition: color .3s ease; &:hover, &:focus { color: @gray-dark; - border-bottom-color: rgba(0,0,0,0); - } - &:focus { - .tab-focus(); } &.logo { border: 0; } } +a:focus, +button:focus { + .tab-focus(); +} + .color--vimeo { color: @color-vimeo; } diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less index 4768cdd6..7f684ba1 100644 --- a/demo/src/less/variables.less +++ b/demo/src/less/variables.less @@ -9,7 +9,7 @@ @gray-lighter: #dbe3e8; @off-white: #f2f5f7; -@brand-primary: #3498db; +@brand-primary: #22b5ff; @brand-secondary: #02BD9B; // Brands @@ -18,7 +18,7 @@ @color-vimeo: #19b7ed; // Base -@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); +@body-background: #fff; // Type @font-size-base: 16; @@ -45,4 +45,4 @@ // Examples @example-width-audio: 520px; -@example-width-video: 1200px; +@container-width: 800px; diff --git a/dist/plyr.css b/dist/plyr.css index 2c3244a0..251e4201 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.plyr input[type=range]:focus,.plyr:focus{outline:0}@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{from{transform:translateY(10px);opacity:.5}to{transform:translateY(0);opacity:1}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;font-weight:500;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 [aria-hidden=true]{display:none}.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(52,63,74,.2);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(52,63,74,.2);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(52,63,74,.2);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;z-index:0;overflow:hidden}.plyr__video-embed{padding-bottom:56.25%;height: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 .plyr__video-embed iframe{pointer-events:none}.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}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.6);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:150%}.plyr__captions span div{display:inline}.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__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none}.plyr__control{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__control svg{width:18px;height:18px;display:block;fill:currentColor;pointer-events:none}.plyr__control .icon--captions-on,.plyr__control .icon--exit-fullscreen,.plyr__control .icon--muted{display:none}.plyr__control:focus{outline:0}.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,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff;transition:opacity .3s ease}.plyr--video .plyr__controls .plyr__control.tab-focus:focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{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 .plyr__control.tab-focus:focus,.plyr--audio .plyr__controls .plyr__control:hover,.plyr--audio .plyr__controls .plyr__control[aria-expanded=true]{background:#3498db;color:#fff}.plyr__play-large{display:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;background:#3498db;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;transition:all .3s ease}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor;pointer-events:none}.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__control .icon--captions-on,.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen,.plyr--muted .plyr__control .icon--muted{display:block}.plyr [data-plyr=pip],.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr--captions-active .plyr__control .icon--captions-on+svg,.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen+svg,.plyr--muted .plyr__control .icon--muted+svg{display:none}.plyr--airplay-enabled [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-enabled [data-plyr=pip]{display:inline-block}.plyr__menu{position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(45deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{position:absolute;z-index:1;bottom:100%;right:-3px;margin-bottom:10px;animation:plyr-popup .2s ease;background:rgba(52,63,74,.9);border-radius:4px;white-space:nowrap;text-align:left;color:#fff;font-size:14px}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{content:"";position:absolute;top:100%;right:15px;height:0;width:0;border:4px solid transparent;border-top-color:rgba(52,63,74,.9)}.plyr__menu__container ul{margin:0;padding:7px;list-style:none;overflow:hidden}.plyr__menu__container .plyr__control{display:-ms-flexbox;display:flex;width:100%;padding:7px 14px;color:#fff;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__menu__container .plyr__control::after{content:"";position:absolute;top:50%;transform:translateY(-50%);border:4px solid transparent}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{right:5px;border-left-color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__control--back{position:relative;width:calc(100% - 14px);margin:7px 7px 3px;padding-left:28px;font-weight:500}.plyr__menu__container .plyr__control--back::after{left:7px;border-right-color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__control--back::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;overflow:hidden;margin-top:4px;background:rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(255,255,255,.1)}.plyr__menu__container label.plyr__control{padding-left:18px}.plyr__menu__container label.plyr__control input[type=radio]{position:relative;left:-7px}.plyr__menu__container .plyr__menu__value{display:inherit;margin-left:auto;padding-left:25px;pointer-events:none;overflow:hidden;font-weight:500;color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__menu__value .plyr__badge{font-weight:600}.plyr__badge{padding:2px 4px;border-radius:2px;background:#fff;color:rgba(52,63,74,.9);font-size:10px}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;pointer-events:none;opacity:0;background:rgba(52,63,74,.9);border-radius:3px;color:#fff;font-size:14px;font-weight:500;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(52,63,74,.9);border-left:4px solid transparent;z-index:2}.plyr .plyr__control.tab-focus:focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control: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(52,63,74,.2) 25%,transparent 25%,transparent 50%,rgba(52,63,74,.2) 50%,rgba(52,63,74,.2) 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}@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{from{transform:translateY(10px);opacity:.5}to{transform:translateY(0);opacity:1}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;font-weight:500;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 [aria-hidden=true]{display:none}.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(52,63,74,.2);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(52,63,74,.2);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:#22b5ff}.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(52,63,74,.2);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:#22b5ff;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#22b5ff;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#22b5ff;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;z-index:0;overflow:hidden}.plyr__video-embed{padding-bottom:56.25%;height: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 .plyr__video-embed iframe{pointer-events:none}.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}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.6);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:150%}.plyr__captions span div{display:inline}.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__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none}.plyr__control{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__control svg{width:18px;height:18px;display:block;fill:currentColor;pointer-events:none}.plyr__control .icon--captions-on,.plyr__control .icon--exit-fullscreen,.plyr__control .icon--muted{display:none}.plyr__control:focus{outline:0}.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,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff;transition:opacity .3s ease}.plyr--video .plyr__controls .plyr__control.tab-focus:focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#22b5ff;color:#fff}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;border:1px solid #dbe3e8;color:#565D64}.plyr--audio .plyr__controls .plyr__control.tab-focus:focus,.plyr--audio .plyr__controls .plyr__control:hover,.plyr--audio .plyr__controls .plyr__control[aria-expanded=true]{background:#22b5ff;color:#fff}.plyr__play-large{display:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;background:#22b5ff;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;transition:all .3s ease}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor;pointer-events:none}.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__control .icon--captions-on,.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen,.plyr--muted .plyr__control .icon--muted{display:block}.plyr [data-plyr=pip],.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr--captions-active .plyr__control .icon--captions-on+svg,.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen+svg,.plyr--muted .plyr__control .icon--muted+svg{display:none}.plyr--airplay-enabled [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-enabled [data-plyr=pip]{display:inline-block}.plyr__menu{position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(45deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{position:absolute;z-index:1;bottom:100%;right:-3px;margin-bottom:10px;animation:plyr-popup .2s ease;background:rgba(52,63,74,.9);border-radius:4px;white-space:nowrap;text-align:left;color:#fff;font-size:14px}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{content:"";position:absolute;top:100%;right:15px;height:0;width:0;border:4px solid transparent;border-top-color:rgba(52,63,74,.9)}.plyr__menu__container ul{margin:0;padding:7px;list-style:none;overflow:hidden}.plyr__menu__container .plyr__control{display:-ms-flexbox;display:flex;width:100%;padding:7px 14px;color:#fff;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__menu__container .plyr__control::after{content:"";position:absolute;top:50%;transform:translateY(-50%);border:4px solid transparent}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{right:5px;border-left-color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__control--back{position:relative;width:calc(100% - 14px);margin:7px 7px 3px;padding-left:28px;font-weight:500}.plyr__menu__container .plyr__control--back::after{left:7px;border-right-color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__control--back::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;overflow:hidden;margin-top:4px;background:rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(255,255,255,.1)}.plyr__menu__container label.plyr__control{padding-left:18px}.plyr__menu__container label.plyr__control input[type=radio]{position:relative;left:-7px}.plyr__menu__container .plyr__menu__value{display:inherit;margin-left:auto;padding-left:25px;pointer-events:none;overflow:hidden;font-weight:500;color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__menu__value .plyr__badge{font-weight:600}.plyr__badge{padding:2px 4px;border-radius:2px;background:#fff;color:rgba(52,63,74,.9);font-size:10px}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;pointer-events:none;opacity:0;background:rgba(52,63,74,.9);border-radius:3px;color:#fff;font-size:14px;font-weight:500;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(52,63,74,.9);border-left:4px solid transparent;z-index:2}.plyr .plyr__control.tab-focus:focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control: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:#22b5ff;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(52,63,74,.2) 25%,transparent 25%,transparent 50%,rgba(52,63,74,.2) 50%,rgba(52,63,74,.2) 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 diff --git a/dist/plyr.js b/dist/plyr.js index 04fe26e9..c0bfefa0 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1,2 +1,2 @@ -(function(e,t,n){"use strict";"object"==typeof exports?module.exports=n(require):"function"==typeof define&&define.amd?define(n):t[e]=n()}).call(this,"Plyr",this,function(e){"use strict";function t(e,t){function n(e,t,n,i){a.event(e,t,n,a.extend({},i,{plyr:pe}))}function l(e){return pe.elements.container.querySelectorAll(e)}function c(e){return l(e)[0]}function u(e){a.is.string(e)?(a.removeElement(pe.elements[e]),pe.elements[e]=null):a.removeElement(e)}function d(){function e(e){9===e.which&&pe.fullscreen.active&&(e.target!==i||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),i.focus()):(e.preventDefault(),n.focus()))}var t=l("input:not([disabled]), button:not([disabled])"),n=t[0],i=t[t.length-1];a.on(pe.elements.container,"keydown",e,!1)}function p(e,t){a.is.string(t)?a.insertElement(e,pe.media,{src:t}):a.is.array(t)&&t.forEach(function(t){a.insertElement(e,pe.media,t)})}function m(){return{url:pe.config.iconUrl,absolute:0===pe.config.iconUrl.indexOf("http")||pe.browser.isIE}}function f(e,t){var n="http://www.w3.org/2000/svg",i=m(),o=(i.absolute?"":i.url)+"#"+pe.config.iconPrefix,s=document.createElementNS(n,"svg");a.setAttributes(s,a.extend(t,{role:"presentation"}));var r=document.createElementNS(n,"use");return r.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",o+"-"+e),s.appendChild(r),s}function g(e){var t=pe.config.i18n[e];switch(e){case"pip":t="PIP";break;case"airplay":t="AirPlay"}return a.createElement("span",{class:pe.config.classes.hidden},t)}function y(e){var t=a.createElement("span",{class:pe.config.classes.menu.value});return t.appendChild(a.createElement("span",{class:pe.config.classes.menu.badge},e)),t}function b(e,t){var n,i,o,s=a.createElement("button");switch(a.is.object(t)||(t={}),"class"in t?t.class.indexOf(pe.config.classes.control)===-1&&(t.class+=" "+pe.config.classes.control):t.class=pe.config.classes.control,e){case"mute":o="toggleMute",n="volume",i="muted";break;case"captions":o="toggleCaptions",n="captions-off",i="captions-on";break;case"fullscreen":o="toggleFullscreen",n="enter-fullscreen",i="exit-fullscreen";break;case"play-large":t.class="plyr__play-large",e="play",o="play",n="play";break;default:o=e,n=e}return a.extend(t,a.getAttributesFromSelector(pe.config.selectors.buttons[e],t)),a.is.string(i)&&s.appendChild(f(i,{class:"icon--"+i})),s.appendChild(f(n)),s.appendChild(g(o)),a.setAttributes(s,t),pe.elements.buttons[e]=s,s}function v(e,t){var n=a.createElement("label",{for:t.id,class:pe.config.classes.hidden},pe.config.i18n[e]),i=a.createElement("input",a.extend(a.getAttributesFromSelector(pe.config.selectors.inputs[e]),{type:"range",min:0,max:100,step:.1,value:0,autocomplete:"off"},t));return pe.elements.inputs[e]=i,{label:n,input:i}}function h(e,t){var n=a.createElement("progress",a.extend(a.getAttributesFromSelector(pe.config.selectors.display[e]),{min:0,max:100,value:0},t));if("volume"!==e){n.appendChild(a.createElement("span",null,"0"));var i="";switch(e){case"played":i=pe.config.i18n.played;break;case"buffer":i=pe.config.i18n.buffered}n.textContent="% "+i.toLowerCase()}return pe.elements.display[e]=n,n}function w(e){var t=a.createElement("span",{class:"plyr__time"});return t.appendChild(a.createElement("span",{class:pe.config.classes.hidden},pe.config.i18n[e])),t.appendChild(a.createElement("span",a.getAttributesFromSelector(pe.config.selectors.display[e]),"00:00")),pe.elements.display[e]=t,t}function k(e){var t=a.createElement("div",a.getAttributesFromSelector(pe.config.selectors.controls.wrapper));if(a.inArray(pe.config.controls,"restart")&&t.appendChild(b("restart")),a.inArray(pe.config.controls,"rewind")&&t.appendChild(b("rewind")),a.inArray(pe.config.controls,"play")&&(t.appendChild(b("play")),t.appendChild(b("pause"))),a.inArray(pe.config.controls,"fast-forward")&&t.appendChild(b("fast-forward")),a.inArray(pe.config.controls,"progress")){var n=a.createElement("span",a.getAttributesFromSelector(pe.config.selectors.progress)),i=v("seek",{id:"plyr-seek-"+e.id});if(n.appendChild(i.label),n.appendChild(i.input),n.appendChild(h("played")),n.appendChild(h("buffer")),pe.config.tooltips.seek){var o=a.createElement("span",{role:"tooltip",class:pe.config.classes.tooltip},"00:00");n.appendChild(o),pe.elements.display.seekTooltip=o}pe.elements.progress=n,t.appendChild(pe.elements.progress)}if(a.inArray(pe.config.controls,"current-time")&&t.appendChild(w("currentTime")),a.inArray(pe.config.controls,"duration")&&t.appendChild(w("duration")),a.inArray(pe.config.controls,"mute")&&t.appendChild(b("mute")),a.inArray(pe.config.controls,"volume")){var s=a.createElement("span",{class:"plyr__volume"}),l={max:10,value:pe.config.volume},c=v("volume",a.extend(l,{id:"plyr-volume-"+e.id}));s.appendChild(c.label),s.appendChild(c.input);var u=h("volume",l);s.appendChild(u),t.appendChild(s)}if(a.inArray(pe.config.controls,"captions")&&t.appendChild(b("captions")),a.inArray(pe.config.controls,"settings")){var d=a.createElement("div",{class:"plyr__menu"});d.appendChild(b("settings",{id:"plyr-settings-toggle-"+e.id,"aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id,"aria-expanded":!1}));var p=a.createElement("form",{class:"plyr__menu__container",id:"plyr-settings-"+e.id,"aria-hidden":!0,"aria-labelled-by":"plyr-settings-toggle-"+e.id,role:"tablist",tabindex:-1}),m=a.createElement("div"),f=a.createElement("div",{id:"plyr-settings-"+e.id+"-home","aria-hidden":!1,"aria-labelled-by":"plyr-settings-toggle-"+e.id,role:"tabpanel"}),g=a.createElement("ul",{role:"tablist"});pe.config.settings.forEach(function(t){var n=a.createElement("li",{role:"tab",hidden:""}),i=a.createElement("button",a.extend(a.getAttributesFromSelector(pe.config.selectors.buttons.settings),{type:"button",class:pe.config.classes.control+" "+pe.config.classes.control+"--forward",id:"plyr-settings-"+e.id+"-"+t+"-tab","aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id+"-"+t,"aria-expanded":!1}),pe.config.i18n[t]),o=a.createElement("span",{class:pe.config.classes.menu.value});o.innerHTML=e[t],i.appendChild(o),n.appendChild(i),g.appendChild(n),pe.elements.settings.tabs[t]=n}),f.appendChild(g),m.appendChild(f),pe.config.settings.forEach(function(t){var n=a.createElement("div",{id:"plyr-settings-"+e.id+"-"+t,"aria-hidden":!0,"aria-labelled-by":"plyr-settings-"+e.id+"-"+t+"-tab",role:"tabpanel",tabindex:-1,hidden:""}),i=a.createElement("button",{type:"button",class:pe.config.classes.control+" "+pe.config.classes.control+"--back","aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id+"-home","aria-expanded":!1},pe.config.i18n[t]);n.appendChild(i);var o=a.createElement("ul");n.appendChild(o),m.appendChild(n),pe.elements.settings.panes[t]=n}),p.appendChild(m),d.appendChild(p),t.appendChild(d),pe.elements.settings.form=p,pe.elements.settings.menu=d}return a.inArray(pe.config.controls,"pip")&&r.pip&&t.appendChild(b("pip")),a.inArray(pe.config.controls,"airplay")&&r.airplay&&t.appendChild(b("airplay")),a.inArray(pe.config.controls,"fullscreen")&&t.appendChild(b("fullscreen")),a.inArray(pe.config.controls,"play-large")&&(pe.elements.buttons.playLarge=b("play-large"),pe.elements.container.appendChild(pe.elements.buttons.playLarge)),pe.elements.controls=t,E(),S(),t}function C(e,t){function n(e){var t="";switch(e){case"hd2160":t="4K";break;case"hd1440":t="WQHD";break;case"hd1080":t="HD";break;case"hd720":t="HD"}return t.length?y(t):null}function i(e){switch(e){case"hd2160":return"2160P";case"hd1440":return"1440P";case"hd1080":return"1080P";case"hd720":return"720P";case"large":return"480P";case"medium":return"360P";case"small":return"240P";default:return"Auto"}}var o=pe.elements.settings.panes.quality.querySelector("ul");pe.elements.settings.tabs.quality.removeAttribute("hidden"),pe.elements.settings.panes.quality.removeAttribute("hidden"),a.emptyElement(o),a.is.array(e)&&!a.is.empty(e)&&e.filter(function(e){return!a.inArray(["tiny","small"],e)}).forEach(function(e){var t=a.createElement("li"),s=a.createElement("label",{class:pe.config.classes.control}),r=a.createElement("input",a.extend(a.getAttributesFromSelector(pe.config.selectors.inputs.quality),{type:"radio",name:"plyr-quality",value:e}));e===pe.config.quality.selected&&(r.checked=!0),s.appendChild(r),s.appendChild(document.createTextNode(i(e)));var l=n(e);a.is.htmlElement(l)&&s.appendChild(l),t.appendChild(s),o.appendChild(t)})}function E(){var e=["start","end","all","reset"],t=pe.elements.settings.panes.loop.querySelector("ul");pe.elements.settings.tabs.loop.removeAttribute("hidden"),pe.elements.settings.panes.loop.removeAttribute("hidden"),a.emptyElement(t),e.forEach(function(e){var n=a.createElement("li"),i=a.createElement("button",a.extend(a.getAttributesFromSelector(pe.config.selectors.buttons.loop),{type:"button",class:pe.config.classes.control,"data-plyr-loop-action":e}),pe.config.i18n[e]);if(a.inArray(["start","end"],e)){var o=y("00:00");i.appendChild(o)}n.appendChild(i),t.appendChild(n)})}function A(){var e=pe.elements.settings.panes.captions.querySelector("ul");if(pe.elements.settings.tabs.captions.removeAttribute("hidden"),pe.elements.settings.panes.captions.removeAttribute("hidden"),a.emptyElement(e),!a.is.empty(pe.captions.tracks)){var t=[].map.call(pe.captions.tracks,function(e){return{language:e.language,badge:!0,label:a.is.empty(e.label)?e.language.toUpperCase():e.label}});t.unshift({language:"off",label:pe.config.i18n.none}),t.forEach(function(t){var n=a.createElement("li"),i=a.createElement("label",{class:pe.config.classes.control}),o=a.createElement("input",a.extend(a.getAttributesFromSelector(pe.config.selectors.inputs.language),{type:"radio",name:"plyr-language",value:t.language}));t.language.toLowerCase()===pe.config.captions.language.toLowerCase()&&(o.checked=!0),i.appendChild(o),i.appendChild(document.createTextNode(t.label||t.language)),t.badge&&i.appendChild(y(t.language.toUpperCase())),n.appendChild(i),e.appendChild(n)})}}function S(e){var t=pe.elements.settings.panes.speed.querySelector("ul");pe.elements.settings.tabs.speed.removeAttribute("hidden"),pe.elements.settings.panes.speed.removeAttribute("hidden"),a.emptyElement(t),a.is.array(e)||(e=pe.config.speed.options),e.forEach(function(e){var n=a.createElement("li"),i=a.createElement("label",{class:pe.config.classes.control}),o=a.createElement("input",a.extend(a.getAttributesFromSelector(pe.config.selectors.inputs.speed),{type:"radio",name:"plyr-speed",value:e}));e===pe.config.speed.selected&&(o.checked=!0),i.appendChild(o),i.insertAdjacentHTML("beforeend",U(e)),n.appendChild(i),t.appendChild(n)})}function T(){if(pe.supported.full&&("audio"!==pe.type||pe.config.fullscreen.allowAudio)&&pe.config.fullscreen.enabled){var e=r.fullscreen;e||pe.config.fullscreen.fallback&&!a.inFrame()?(fe((e?"Native":"Fallback")+" fullscreen enabled"),a.toggleClass(pe.elements.container,pe.config.classes.fullscreen.enabled,!0)):fe("Fullscreen not supported and fallback disabled"),pe.elements.buttons&&pe.elements.buttons.fullscreen&&a.toggleState(pe.elements.buttons.fullscreen,!1),d()}}function x(e){if(a.inArray(["video","vimeo"],pe.type)&&("video"!==pe.type||r.textTracks)&&(a.is.htmlElement(pe.elements.captions)||(pe.elements.captions=a.createElement("div",a.getAttributesFromSelector(pe.config.selectors.captions)),a.insertAfter(pe.elements.captions,pe.elements.wrapper)),pe.captions.tracks=a.is.array(e)?e:pe.media.textTracks,a.toggleClass(pe.elements.container,pe.config.classes.captions.enabled,!a.is.empty(pe.captions.tracks)),!a.is.empty(pe.captions.tracks))){if(_(),"video"===pe.type){var t=pe.config.captions.language.toLowerCase();[].forEach.call(pe.captions.tracks,function(e){a.off(e,"cuechange",F),e.mode="hidden",e.language===t&&(pe.captions.currentTrack=e)}),a.is.track(pe.captions.currentTrack)||(ge("No language found to match "+t+" in tracks"),pe.captions.currentTrack=pe.captions.tracks[0]);var n=pe.captions.currentTrack;a.is.track(n)&&a.inArray(["captions","subtitles"],n.kind)&&(a.on(n,"cuechange",F),n.activeCues&&n.activeCues.length>0&&F(n))}A()}}function P(){return!r.textTracks||a.is.empty(pe.captions.tracks)?"No Subs":pe.captions.enabled?pe.captions.currentTrack.label:"Disabled"}function F(e){a.is.event(e)&&(e=e.target);var t=e.activeCues[0];a.is.cue(t)?I(t.getCueAsHTML()):I()}function I(e){if(a.is.htmlElement(pe.elements.captions)){var t=a.createElement("span");a.emptyElement(pe.elements.captions),a.is.undefined(e)&&(e=""),a.is.string(e)?t.textContent=e.trim():t.appendChild(e),pe.elements.captions.appendChild(t)}else ge("No captions element to render to")}function _(){if(pe.elements.buttons.captions){var e=pe.storage.captions;a.is.boolean(e)?pe.config.captions.active=e:e=pe.config.captions.active,e&&(a.toggleClass(pe.elements.container,pe.config.classes.captions.active,!0),a.toggleState(pe.elements.buttons.captions,!0))}}function N(){if(pe.config.loadSprite){var e=m();e.absolute?(fe("AJAX loading absolute SVG sprite"+(pe.browser.isIE?" (due to IE)":"")),a.loadSprite(e.url,"sprite-plyr")):fe("Sprite will be used as external resource directly")}pe.id=Math.floor(1e4*Math.random());var t=null;t=a.is.string(pe.config.controls)?pe.config.controls:a.is.function(pe.config.controls)?pe.config.controls({id:pe.id,seektime:pe.config.seekTime}):k({id:pe.id,seektime:pe.config.seekTime,speed:U(),quality:"HD",captions:P(),loop:"None"});var n;if(a.is.string(pe.config.selectors.controls.container)&&(n=document.querySelector(pe.config.selectors.controls.container)),a.is.htmlElement(n)||(n=pe.elements.container),a.is.htmlElement(t)?n.appendChild(t):n.insertAdjacentHTML("beforeend",t),a.is.htmlElement(pe.elements.controls)&&L(),pe.config.tooltips.controls)for(var i=l([pe.config.selectors.controls.wrapper," ",pe.config.selectors.labels," .",pe.config.classes.hidden].join("")),o=i.length-1;o>=0;o--){var s=i[o];a.toggleClass(s,pe.config.classes.hidden,!1),a.toggleClass(s,pe.config.classes.tooltip,!0)}}function L(){try{return pe.elements.controls=c(pe.config.selectors.controls.wrapper),pe.elements.buttons={play:l(pe.config.selectors.buttons.play),pause:c(pe.config.selectors.buttons.pause),restart:c(pe.config.selectors.buttons.restart),rewind:c(pe.config.selectors.buttons.rewind),forward:c(pe.config.selectors.buttons.forward),mute:c(pe.config.selectors.buttons.mute),pip:c(pe.config.selectors.buttons.pip),airplay:c(pe.config.selectors.buttons.airplay),settings:c(pe.config.selectors.buttons.settings),captions:c(pe.config.selectors.buttons.captions),fullscreen:c(pe.config.selectors.buttons.fullscreen)},pe.elements.progress=c(pe.config.selectors.progress),pe.elements.inputs={seek:c(pe.config.selectors.inputs.seek),volume:c(pe.config.selectors.inputs.volume)},pe.elements.display={buffer:c(pe.config.selectors.display.buffer),played:c(pe.config.selectors.display.played),volume:c(pe.config.selectors.display.volume),duration:c(pe.config.selectors.display.duration),currentTime:c(pe.config.selectors.display.currentTime)},a.is.htmlElement(pe.elements.progress)&&(pe.elements.display.seekTooltip=pe.elements.progress.querySelector("."+pe.config.classes.tooltip)),!0}catch(e){return ge("It looks like there is a problem with your custom controls HTML",e),M(!0),!1}}function q(){a.toggleClass(pe.elements.container,pe.config.selectors.container.replace(".",""),pe.supported.full)}function M(e){e&&a.inArray(o.html5,pe.type)?pe.media.setAttribute("controls",""):pe.media.removeAttribute("controls")}function V(e){var t=pe.config.i18n.play;if(a.is.string(pe.config.title)&&!a.is.empty(pe.config.title)&&(t+=", "+pe.config.title,pe.elements.container.setAttribute("aria-label",pe.config.title)),pe.supported.full&&(a.is.htmlElement(pe.elements.buttons.play)&&pe.elements.buttons.play.setAttribute("aria-label",t),a.is.htmlElement(pe.elements.buttons.playLarge)&&pe.elements.buttons.playLarge.setAttribute("aria-label",t)),a.is.htmlElement(e)){var n=a.is.string(pe.config.title)&&!a.is.empty(pe.config.title)?pe.config.title:"video";e.setAttribute("title",pe.config.i18n.frameTitle.replace("{title}",n))}}function O(){var e=null;pe.storage={},r.storage&&pe.config.storage.enabled&&(window.localStorage.removeItem("plyr-volume"),e=window.localStorage.getItem(pe.config.storage.key),e&&(/^\d+(\.\d+)?$/.test(e)?D({volume:parseFloat(e)}):pe.storage=JSON.parse(e)))}function D(e){r.storage&&pe.config.storage.enabled&&(a.extend(pe.storage,e),window.localStorage.setItem(pe.config.storage.key,JSON.stringify(pe.storage)))}function j(){return pe.media?(pe.supported.full&&(a.toggleClass(pe.elements.container,pe.config.classes.type.replace("{0}",pe.type),!0),a.inArray(o.embed,pe.type)&&a.toggleClass(pe.elements.container,pe.config.classes.type.replace("{0}","video"),!0),a.toggleClass(pe.elements.container,pe.config.classes.pip.enabled,r.pip&&"video"===pe.type),a.toggleClass(pe.elements.container,pe.config.classes.airplay.enabled,r.airplay&&a.inArray(o.html5,pe.type)),a.toggleClass(pe.elements.container,pe.config.classes.stopped,pe.config.autoplay),a.toggleClass(pe.elements.container,pe.config.classes.isIos,pe.browser.isIos),a.toggleClass(pe.elements.container,pe.config.classes.isTouch,r.touch)),a.inArray(["video","youtube","vimeo"],pe.type)&&(pe.elements.wrapper=a.createElement("div",{class:pe.config.classes.video}),a.wrap(pe.media,pe.elements.wrapper)),void(a.inArray(o.embed,pe.type)&&R())):void ge("No media element found!")}function R(){var e,t=pe.type+"-"+Math.floor(1e4*Math.random());switch(pe.type){case"youtube":e=a.parseYouTubeId(pe.embedId);break;default:e=pe.embedId}for(var n=l('[id^="'+pe.type+'-"]'),i=n.length-1;i>=0;i--)a.removeElement(n[i]);if(a.toggleClass(pe.elements.wrapper,pe.config.classes.embed,!0),"youtube"===pe.type)pe.media.setAttribute("id",t),a.is.object(window.YT)?B(e):(a.injectScript(pe.config.urls.youtube.api),window.onYouTubeReadyCallbacks=window.onYouTubeReadyCallbacks||[],window.onYouTubeReadyCallbacks.push(function(){B(e)}),window.onYouTubeIframeAPIReady=function(){window.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===pe.type)if(pe.media.setAttribute("id",t),a.is.object(window.Vimeo))Y(e);else{a.injectScript(pe.config.urls.vimeo.api);var o=window.setInterval(function(){a.is.object(window.Vimeo)&&(window.clearInterval(o),Y(e))},50)}else if("soundcloud"===pe.type){var s=a.createElement("iframe");s.loaded=!1,a.on(s,"load",function(){s.loaded=!0}),a.setAttributes(s,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+e,id:t}),pe.media.appendChild(s),window.SC||a.injectScript(pe.config.urls.soundcloud.api);var r=window.setInterval(function(){window.SC&&s.loaded&&(window.clearInterval(r),W.call(s))},50)}}function H(){pe.supported.full&&(ce(),ue()),V(c("iframe"))}function B(e){pe.embed=new window.YT.Player(pe.media.id,{videoId:e,playerVars:{autoplay:pe.config.autoplay?1:0,controls:pe.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:pe.config.captions.active?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,playsinline:1,origin:window.location.href},events:{onError:function(e){n(pe.elements.container,"error",!0,{code:e.data,embed:e.target})},onPlaybackQualityChange:function(e){var t=e.target,n=t.getPlaybackQuality();console.warn(n)},onReady:function(e){var t=e.target;pe.media.play=function(){t.playVideo(),pe.media.paused=!1},pe.media.pause=function(){t.pauseVideo(),pe.media.paused=!0},pe.media.stop=function(){t.stopVideo(),pe.media.paused=!0},pe.media.duration=t.getDuration(),pe.media.paused=!0,pe.media.currentTime=0,pe.media.muted=t.isMuted();var i=t.getPlaybackRate(),o=t.getAvailablePlaybackRates();console.warn(i,o),pe.config.title=t.getVideoData().title,pe.supported.full&&pe.media.setAttribute("tabindex",-1),H(),n(pe.media,"timeupdate"),n(pe.media,"durationchange"),window.clearInterval(me.buffering),me.buffering=window.setInterval(function(){pe.media.buffered=t.getVideoLoadedFraction(),(null===pe.media.lastBuffered||pe.media.lastBuffered=pe.config.loop.end&&pe.seek(pe.config.loop.start),Z(t,n)}}function Z(e,t){if(pe.supported.full){if(a.is.undefined(t)&&(t=0),a.is.undefined(e)){if(!a.is.htmlElement(pe.elements.display.buffer))return;e=pe.elements.display.buffer}if(a.is.htmlElement(e)){e.value=t;var n=e.getElementsByTagName("span")[0];a.is.htmlElement(n)&&(n.childNodes[0].nodeValue=t)}}}function ee(e,t){if(t){isNaN(e)&&(e=0);var n=parseInt(e%60),i=parseInt(e/60%60),o=parseInt(e/60/60%60),a=pe.getDuration(),s=parseInt(a/60/60%60)>0;n=("0"+n).slice(-2),i=("0"+i).slice(-2);var r=(s?o+":":"")+i+":"+n;return t.textContent=r,r}}function te(){if(pe.supported.full){var e=pe.getDuration()||0;!pe.elements.display.duration&&pe.config.displayDuration&&pe.media.paused&&ee(e,pe.elements.display.currentTime),pe.elements.display.duration&&ee(e,pe.elements.display.duration),oe()}}function ne(e){ee(pe.media.currentTime,pe.elements.display.currentTime),e&&"timeupdate"===e.type&&pe.media.seeking||K(e)}function ie(e){a.is.number(e)||(e=0);var t=pe.getDuration(),n=a.getPercentage(e,t);pe.elements.progress&&pe.elements.display.played&&(pe.elements.display.played.value=n),pe.elements.buttons&&pe.elements.inputs.seek&&(pe.elements.inputs.seek.value=n)}function oe(e){var t=pe.getDuration();if(pe.config.tooltips.seek&&a.is.htmlElement(pe.elements.inputs.seek)&&a.is.htmlElement(pe.elements.display.seekTooltip)&&0!==t){var n=pe.elements.inputs.seek.getBoundingClientRect(),i=0,o=pe.config.classes.tooltip+"--visible";if(a.is.event(e))i=100/n.width*(e.pageX-n.left);else{if(!a.hasClass(pe.elements.display.seekTooltip,o))return;i=pe.elements.display.seekTooltip.style.left.replace("%","")}i<0?i=0:i>100&&(i=100),ee(t/100*i,pe.elements.display.seekTooltip),pe.elements.display.seekTooltip.style.left=i+"%",a.is.event(e)&&a.inArray(["mouseenter","mouseleave"],e.type)&&a.toggleClass(pe.elements.display.seekTooltip,o,"mouseenter"===e.type)}}function ae(e){function t(){if(pe.embed=null,u(pe.media),u("captions"),u("wrapper"),pe.elements.container&&pe.elements.container.removeAttribute("class"),"type"in e&&(pe.type=e.type,"video"===pe.type)){var t=e.sources[0];"type"in t&&a.inArray(o.embed,t.type)&&(pe.type=t.type)}switch(pe.supported=a.checkSupport(pe.type,pe.config.inline),pe.type){case"video":pe.media=a.createElement("video");break;case"audio":pe.media=a.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":pe.media=a.createElement("div"),pe.embedId=e.sources[0].src}a.prependChild(pe.elements.container,pe.media),a.is.boolean(e.autoplay)&&(pe.config.autoplay=e.autoplay),a.inArray(o.html5,pe.type)&&(pe.config.crossorigin&&pe.media.setAttribute("crossorigin",""),pe.config.autoplay&&pe.media.setAttribute("autoplay",""),"poster"in e&&pe.media.setAttribute("poster",e.poster),pe.config.loop.active&&pe.media.setAttribute("loop",""),pe.config.inline&&pe.media.setAttribute("playsinline","")),a.toggleClass(pe.elements.container,pe.config.classes.fullscreen.active,pe.fullscreen.active),a.toggleClass(pe.elements.container,pe.config.classes.captions.active,pe.captions.enabled),q(),a.inArray(o.html5,pe.type)&&p("source",e.sources),j(),a.inArray(o.html5,pe.type)&&("tracks"in e&&p("track",e.tracks),pe.media.load()),(a.inArray(o.html5,pe.type)||a.inArray(o.embed,pe.type)&&!pe.supported.full)&&(ce(),ue()),pe.config.title=e.title,V()}return a.is.object(e)&&"sources"in e&&e.sources.length?(pe.stop(),ie(),Z(),le(),void pe.destroy(t,!1)):void ge("Invalid source format")}function se(){function e(){var e=pe.togglePlay(),t=pe.elements.buttons[e?"play":"pause"],n=pe.elements.buttons[e?"pause":"play"];if(n){var i=a.hasClass(t,pe.config.classes.tabFocus);setTimeout(function(){a.is.htmlElement(n)&&n.focus(),i&&(a.toggleClass(t,pe.config.classes.tabFocus,!1),a.toggleClass(n,pe.config.classes.tabFocus,!0))},100)}}function t(e){return e.keyCode?e.keyCode:e.which}function n(e){a.toggleClass(l("."+pe.config.classes.tabFocus),pe.config.classes.tabFocus,!1),pe.elements.container.contains(e)&&a.toggleClass(e,pe.config.classes.tabFocus,!0)}function i(n){function i(){var e=pe.media.duration;a.is.number(e)&&pe.seek(e/10*(o-48))}var o=t(n),s="keydown"===n.type,l=s&&o===u;if(a.is.number(o))if(s){var c=[48,49,50,51,52,53,54,56,57,32,75,38,40,77,39,37,70,67,73,76,79],d=[38,40];if(a.inArray(d,o)){var p=a.getFocusElement();if(a.is.htmlElement(p)&&"radio"===a.getFocusElement().type)return}switch(a.inArray(c,o)&&(n.preventDefault(),n.stopPropagation()),o){case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:l||i();break;case 32:case 75:l||e();break;case 38:pe.increaseVolume();break;case 40:pe.decreaseVolume();break;case 77:l||pe.toggleMute();break;case 39:pe.forward();break;case 37:pe.rewind();break;case 70:pe.toggleFullscreen();break;case 67:l||pe.toggleCaptions();break;case 73:pe.loop("start");break;case 76:pe.loop();break;case 79:pe.loop("end")}!r.fullscreen&&pe.fullscreen.active&&27===o&&pe.toggleFullscreen(),u=o}else u=null}var o=pe.browser.isIE?"change":"input";if(pe.config.keyboardShortcuts.focused){var u=null;pe.config.keyboardShortcuts.global&&a.on(window,"keydown keyup",function(e){var n=t(e),o=a.getFocusElement(),s=[48,49,50,51,52,53,54,56,57,75,77,70,67,73,76,79];!a.inArray(s,n)||a.is.htmlElement(o)&&a.matches(o,pe.config.selectors.editable)||i(e)},!1),a.on(pe.elements.container,"keydown keyup",i,!1)}a.on(window,"keyup",function(e){var i=t(e),o=a.getFocusElement();9===i&&n(o)}), -a.on(document.body,"click",function(){a.toggleClass(c("."+pe.config.classes.tabFocus),pe.config.classes.tabFocus,!1)});for(var d in pe.elements.buttons){var p=pe.elements.buttons[d];a.on(p,"blur",function(){a.toggleClass(p,"tab-focus",!1)})}var m=function(e,t,n){a.is.function(t)&&t.call(this,e),a.is.function(n)&&n.call(this,e)};a.proxy(pe.elements.buttons.play,"click",pe.config.listeners.play,e),a.proxy(pe.elements.buttons.playLarge,"click",pe.config.listeners.play,e),a.proxy(pe.elements.buttons.pause,"click",pe.config.listeners.pause,e),a.proxy(pe.elements.buttons.restart,"click",pe.config.listeners.restart,function(){pe.restart()}),a.proxy(pe.elements.buttons.rewind,"click",pe.config.listeners.rewind,function(){pe.rewind()}),a.proxy(pe.elements.buttons.forward,"click",pe.config.listeners.forward,function(){pe.forward()}),a.proxy(pe.elements.buttons.mute,"click",pe.config.listeners.mute,function(){pe.toggleMute()}),a.proxy(pe.elements.buttons.captions,"click",pe.config.listeners.captions,function(){pe.toggleCaptions()}),a.proxy(pe.elements.buttons.fullscreen,"click",pe.config.listeners.fullscreen,function(e){pe.toggleFullscreen(e)}),a.proxy(pe.elements.buttons.pip,"click",pe.config.listeners.pip,function(){pe.togglePictureInPicture()}),a.proxy(pe.elements.buttons.airplay,"click",pe.config.listeners.airplay,function(){pe.airPlay()}),a.on(pe.elements.buttons.settings,"click",z),a.on(document.documentElement,"click",z),a.on(pe.elements.settings.form,"click",X),a.on(pe.elements.settings.form,"click",function(e){a.matches(e.target,pe.config.selectors.inputs.language)?m.call(this,e,pe.config.listeners.language,function(){pe.language(e.target.value.toLowerCase())}):a.matches(e.target,pe.config.selectors.inputs.quality)?m.call(this,e,pe.config.listeners.quality,function(){ge("Set quality")}):a.matches(e.target,pe.config.selectors.inputs.speed)?m.call(this,e,pe.config.listeners.speed,function(){pe.setSpeed(parseFloat(e.target.value))}):a.matches(e.target,pe.config.selectors.buttons.loop)&&m.call(this,e,pe.config.listeners.loop,function(){var t=e.target.getAttribute("data-loop__value")||e.target.getAttribute("data-loop__type");a.inArray(["start","end","all","none"],t)&&pe.loop(t)})}),a.proxy(pe.elements.inputs.seek,o,pe.config.listeners.seek,function(e){var t=pe.getDuration();pe.seek(e.target.value/e.target.max*t)}),a.proxy(pe.elements.inputs.volume,o,pe.config.listeners.volume,function(){pe.setVolume(event.target.value)}),a.on(pe.elements.progress,"mouseenter mouseleave mousemove",oe),pe.config.hideControls&&(a.on(pe.elements.container,"mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen",function(e){pe.toggleControls(e)}),a.on(pe.elements.controls,"mouseenter mouseleave",function(e){pe.elements.controls.hover="mouseenter"===e.type}),a.on(pe.elements.controls,"mousedown mouseup touchstart touchend touchcancel",function(e){pe.elements.controls.pressed=a.inArray(["mousedown","touchstart"],e.type)}),a.on(pe.elements.controls,"focus blur",function(e){pe.toggleControls(e)},!0,!0)),a.proxy(pe.elements.inputs.volume,"wheel",pe.config.listeners.volume,function(e){var t=e.webkitDirectionInvertedFromDevice,n=.2,i=0;(e.deltaY<0||e.deltaX>0)&&(t?(pe.decreaseVolume(n),i=-1):(pe.increaseVolume(n),i=1)),(e.deltaY>0||e.deltaX<0)&&(t?(pe.increaseVolume(n),i=1):(pe.decreaseVolume(n),i=-1)),(1===i&&pe.media.volume<1||i===-1&&pe.media.volume>0)&&e.preventDefault()},!1),r.fullscreen&&a.on(document,s.eventType,function(e){pe.toggleFullscreen(e)})}function re(){if(a.on(pe.media,"timeupdate seeking",ne),a.on(pe.media,"durationchange loadedmetadata",te),a.on(pe.media,"ended",function(){"video"===pe.type&&pe.config.showPosterOnEnd&&("video"===pe.type&&I(),pe.restart(),pe.media.load())}),a.on(pe.media,"progress playing",K),a.on(pe.media,"volumechange",$),a.on(pe.media,"play pause ended",Q),a.on(pe.media,"waiting canplay seeked",G),pe.config.clickToPlay&&"audio"!==pe.type){var e=c("."+pe.config.classes.video);if(!e)return;e.style.cursor="pointer",a.on(e,"click",function(){pe.config.hideControls&&r.touch&&!pe.media.paused||(pe.media.paused?pe.play():pe.media.ended?(pe.restart(),pe.play()):pe.pause())})}pe.config.disableContextMenu&&a.on(pe.media,"contextmenu",function(e){e.preventDefault()},!1),a.on(pe.media,pe.config.events.concat(["keyup","keydown"]).join(" "),function(e){n(pe.elements.container,e.type,!0)})}function le(){if(a.inArray(o.html5,pe.type)){for(var e=pe.media.querySelectorAll("source"),t=0;t=0;n--){var i=n>0?t.cloneNode(!0):t,o=e[n],a=o.parentNode,s=o.nextSibling;return i.appendChild(o),s?a.insertBefore(i,s):a.appendChild(i),i}},removeElement:function(e){a.is.htmlElement(e)&&a.is.htmlElement(e.parentNode)&&e.parentNode.removeChild(e)},prependChild:function(e,t){e.insertBefore(t,e.firstChild)},insertAfter:function(e,t){t.parentNode.insertBefore(e,t.nextSibling)},createElement:function(e,t,n){var i=document.createElement(e);return a.is.object(t)&&a.setAttributes(i,t),a.is.string(n)&&(i.textContent=n),i},insertElement:function(e,t,n,i){var o=a.createElement(e,n,i);a.prependChild(t,o)},emptyElement:function(e){for(var t=e.childNodes.length;t--;)e.removeChild(e.lastChild)},setAttributes:function(e,t){for(var n in t)e.setAttribute(n,t[n])},getAttributesFromSelector:function(e,t){if(!a.is.string(e)||a.is.empty(e))return{};var n={};return e.split(",").forEach(function(e){e=e.trim();var i=e.charAt(0);switch(i){case".":var o=e.replace(".","");a.is.object(t)&&a.is.string(t.class)&&(t.class+=" "+o),n.class=o;break;case"#":n.id=e.replace("#","");break;case"[":e=e.replace(/[\[\]]/g,"");var s=e.split("="),r=s[0],l=s.length>1?s[1].replace(/[\"\']/g,""):"";n[r]=l}}),n},toggleClass:function(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var i=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=i+(n?" "+t:"")}},hasClass:function(e,t){return!!e&&(e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className))},matches:function(e,t){var n=Element.prototype,i=n.matches||n.webkitMatchesSelector||n.mozMatchesSelector||n.msMatchesSelector||function(e){return[].indexOf.call(document.querySelectorAll(e),this)!==-1};return i.call(e,t)},getFocusElement:function(){var e=document.activeElement;return e=e&&e!==document.body?document.querySelector(":focus"):null},proxy:function(e,t,n,i,o,s){a.on(e,t,function(t){n&&n.apply(e,[t]),i.apply(e,[t])},o,s)},toggleListener:function(e,t,n,i,o,s){if(t=t.split(" "),a.is.boolean(s)||(s=!1),a.is.boolean(o)||(o=!0),e instanceof NodeList){var l=1===arguments.length?[arguments[0]]:Array.apply(null,arguments);return l.shift(),void[].forEach.call(e,function(e){e instanceof Node&&a.toggleListener.apply(null,[e].concat(l))})}var c=s;r.passiveListeners&&(c={passive:o,capture:s}),t.forEach(function(t){e[i?"addEventListener":"removeEventListener"](t,n,c)})},on:function(e,t,n,i,o){a.is.undefined(e)||a.toggleListener(e,t,n,!0,i,o)},off:function(e,t,n,i,o){a.is.undefined(e)||a.toggleListener(e,t,n,!1,i,o)},event:function(e,t,n,i){if(e&&t){a.is.boolean(n)||(n=!1);var o;a.is.function(window.CustomEvent)?o=window.CustomEvent:(o=function(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},o.prototype=window.Event.prototype);var s=new o(t,{bubbles:n,detail:i});e.dispatchEvent(s)}},toggleState:function(e,t){if(e)return t=a.is.boolean(t)?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t},getPercentage:function(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)},extend:function(){var e=arguments;if(e.length){if(1===e.length)return e[0];var t=Array.prototype.shift.call(e);a.is.object(t)||(t={});for(var n=e.length,i=0;is&&(n=s),t.core.updateSeekDisplay(n);try{t.media.currentTime=n.toFixed(4)}catch(e){}if(a.inArray(o.embed,t.type)){switch(t.type){case"youtube":t.embed.seekTo(n);break;case"vimeo":t.embed.setCurrentTime(n.toFixed(0));break;case"soundcloud":t.embed.seekTo(1e3*n)}i&&t.pause(),t.core.trigger(t.media,"timeupdate"),t.media.seeking=!0,t.core.trigger(t.media,"seeking")}return t.core.log("Seeking to "+t.media.currentTime+" seconds"),t},t.prototype.setVolume=function(e){var t=this,n=10,i=0;if(a.is.undefined(e)&&(e=t.storage.volume),(null===e||isNaN(e))&&(e=t.config.volume),e>n&&(e=n),e0&&t.toggleMute(),t},t.prototype.increaseVolume=function(e){var t=this,n=t.media.muted?0:10*t.media.volume;return a.is.number(e)||(e=1),t.setVolume(n+e),t},t.prototype.decreaseVolume=function(e){var t=this,n=t.media.muted?0:10*t.media.volume;return a.is.number(e)||(e=1),t.setVolume(n-e),t},t.prototype.toggleMute=function(e){var t=this;if(a.is.boolean(e)||(e=!t.media.muted),a.toggleState(t.elements.buttons.mute,e),t.media.muted=e,0===t.media.volume&&t.volume(t.config.volume),a.inArray(o.embed,t.type)){switch(t.type){case"youtube":t.embed[t.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":t.embed.setVolume(t.media.muted?0:parseFloat(t.config.volume/10))}t.core.trigger(t.media,"volumechange")}return t},t.prototype.setSpeed=function(e){var t=this;return a.is.number(e)||(e=parseFloat(t.storage.speed||t.config.speed.selected)),e<.1&&(e=.1),e>2&&(e=2),a.is.array(t.config.speed.options)?(t.config.speed.selected=e,t.media.playbackRate=e,t.core.updateStorage({speed:e}),t):void t.core.warn("Invalid speeds format")},t.prototype.loop=function(e){var t=this;a.inArray(["start","end","all","none","toggle"],e)||(e="toggle");var n=Number(t.media.currentTime);switch(e){case"start":t.config.loop.end&&t.config.loop.end<=n&&(t.config.loop.end=null),t.config.loop.start=n,t.config.loop.indicator.start=t.elements.display.played.value;break;case"end":if(t.config.loop.start>=n)return;t.config.loop.end=n,t.config.loop.indicator.end=t.elements.display.played.value;break;case"all":t.config.loop.start=0,t.config.loop.end=t.media.duration-2,t.config.loop.indicator.start=0,t.config.loop.indicator.end=100;break;case"toggle":t.config.loop.active?(t.config.loop.start=0,t.config.loop.end=null):(t.config.loop.start=0,t.config.loop.end=t.media.duration-2);break;default:t.config.loop.start=0,t.config.loop.end=null}t.config.loop.active=a.is.number(t.config.loop.start)&&a.is.number(t.config.loop.end);var i=(t.core.updateTimeDisplay(t.config.loop.start,t.core.getElement('[data-plyr-loop="start"]')),null);return a.is.number(t.config.loop.end)&&(i=t.core.updateTimeDisplay(t.config.loop.end,t.core.getElement('[data-loop__value="loopout"]'))),t.config.loop.active,t},t.prototype.source=function(e){var t=this;if(a.is.object(e))return t.core.updateSource(e),t;var n;switch(t.type){case"youtube":n=t.embed.getVideoUrl();break;case"vimeo":t.embed.getVideoUrl.then(function(e){n=e});break;case"soundcloud":t.embed.getCurrentSound(function(e){n=e.permalink_url});break;default:n=t.media.currentSrc}return n},t.prototype.poster=function(e){var t=this;return a.is.string(e)?("video"===t.type?t.media.setAttribute("poster",e):t.core.warn("Poster can only be set on HTML5 video"),t):t.media.getAttribute("poster")},t.prototype.toggleCaptions=function(e){var t=this;if(t.supported.full&&t.elements.buttons.captions)return a.is.boolean(e)||(e=t.elements.container.className.indexOf(t.config.classes.captions.active)===-1),t.captions.enabled=e,a.toggleState(t.elements.buttons.captions,t.captions.enabled),a.toggleClass(t.elements.container,t.config.classes.captions.active,t.captions.enabled),t.core.trigger(t.elements.container,t.captions.enabled?"captionsenabled":"captionsdisabled",!0),t.core.updateStorage({captions:t.captions.enabled}),t},t.prototype.language=function(e){var t=this;return a.is.string(e)?(t.config.captions.language=e.toLowerCase(),t.core.setCaption(),t.core.setupCaptions(),t):t.config.captions.language},t.prototype.toggleFullscreen=function(e){function t(){n={x:window.pageXOffset||0,y:window.pageYOffset||0}}function i(){window.scrollTo(n.x,n.y)}var o=this,l=r.fullscreen;if(l){if(!a.is.event(e)||e.type!==s.eventType)return s.isFullScreen(o.elements.container)?s.cancelFullScreen():(t(),s.requestFullScreen(o.elements.container)),void(o.fullscreen.active=s.isFullScreen(o.elements.container));o.fullscreen.active=s.isFullScreen(o.elements.container)}else o.fullscreen.active=!o.fullscreen.active,document.body.style.overflow=o.fullscreen.active?"hidden":"";return a.toggleClass(o.elements.container,o.config.classes.fullscreen.active,o.fullscreen.active),o.elements.buttons&&o.elements.buttons.fullscreen&&a.toggleState(o.elements.buttons.fullscreen,o.fullscreen.active),o.core.trigger(o.elements.container,o.fullscreen.active?"enterfullscreen":"exitfullscreen",!0),!o.fullscreen.active&&l&&i(),o},t.prototype.togglePictureInPicture=function(e){var t=this,n={pip:"picture-in-picture",inline:"inline"};if(t.core.support.pip)return a.is.boolean(e)||(e=t.media.webkitPresentationMode===n.inline),t.media.webkitSetPresentationMode(e?n.pip:n.inline),t},t.prototype.airPlay=function(){var e=this;if(e.core.support.airplay)return e.media.webkitShowPlaybackTargetPicker(),e},t.prototype.toggleControls=function(e){var t=this;if(t.config.hideControls&&"audio"!==t.type){var n=0,i=e,o=!1,s=a.hasClass(t.elements.container,t.config.classes.loading);if(a.is.boolean(e)||(a.is.event(e)?(o="enterfullscreen"===e.type,i=a.inArray(["mousemove","touchstart","mouseenter","focus"],e.type),a.inArray(["mousemove","touchmove"],e.type)&&(n=2e3),"focus"===e.type&&(n=3e3)):i=a.hasClass(t.elements.container,t.config.classes.hideControls)),window.clearTimeout(t.core.timers.hover),i||t.media.paused||s){if(a.toggleClass(t.elements.container,t.config.classes.hideControls,!1),t.media.paused||s)return;r.touch&&(n=3e3)}return i&&t.media.paused||(t.core.timers.hover=window.setTimeout(function(){(!t.elements.controls.pressed&&!t.elements.controls.hover||o)&&a.toggleClass(t.elements.container,t.config.classes.hideControls,!0)},n)),t}},t.prototype.on=function(e,t){var n=this;return a.on(n.elements.container,e,t),n},t.prototype.supports=function(e){return r.mime(this,e)},t.prototype.destroy=function(e,t){function n(){if(i.ready){if(a.is.boolean(t)||(t=!0),document.body.style.overflow="",t){var n=i.elements.container.parentNode;a.is.htmlElement(n)&&n.replaceChild(i.elements.original,i.elements.container)}i.ready=!1,i.core.trigger(i.elements.original,"destroyed",!0),a.is.function(e)&&e.call(i.elements.original)}}var i=this;switch(i.type){case"youtube":window.clearInterval(i.core.timers.buffering),window.clearInterval(i.core.timers.playing),i.embed.destroy(),n();break;case"vimeo":i.embed.unload().then(n),window.setTimeout(n,200);break;case"video":case"audio":i.core.toggleNativeControls(!0),n()}return i},t.prototype.getDuration=function(){var e=this,t=parseInt(e.config.duration),n=0;return null===e.media.duration||isNaN(e.media.duration)||(n=e.media.duration),isNaN(t)?n:t},t}); \ No newline at end of file +(function(e,t,n){"use strict";"object"==typeof exports?module.exports=n(require):"function"==typeof define&&define.amd?define(n):t[e]=n()}).call(this,"Plyr",this,function(e){"use strict";function t(e,t){function n(e,t,n,i){a.event(e,t,n,a.extend({},i,{plyr:pe}))}function l(e){return pe.elements.container.querySelectorAll(e)}function c(e){return l(e)[0]}function u(e){a.is.string(e)?(a.removeElement(pe.elements[e]),pe.elements[e]=null):a.removeElement(e)}function d(){function e(e){9===e.which&&pe.fullscreen.active&&(e.target!==i||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),i.focus()):(e.preventDefault(),n.focus()))}var t=l("input:not([disabled]), button:not([disabled])"),n=t[0],i=t[t.length-1];a.on(pe.elements.container,"keydown",e,!1)}function p(e,t){a.is.string(t)?a.insertElement(e,pe.media,{src:t}):a.is.array(t)&&t.forEach(function(t){a.insertElement(e,pe.media,t)})}function m(){return{url:pe.config.iconUrl,absolute:0===pe.config.iconUrl.indexOf("http")||pe.browser.isIE}}function f(e,t){var n="http://www.w3.org/2000/svg",i=m(),o=(i.absolute?"":i.url)+"#"+pe.config.iconPrefix,s=document.createElementNS(n,"svg");a.setAttributes(s,a.extend(t,{role:"presentation"}));var r=document.createElementNS(n,"use");return r.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",o+"-"+e),s.appendChild(r),s}function g(e){var t=pe.config.i18n[e];switch(e){case"pip":t="PIP";break;case"airplay":t="AirPlay"}return a.createElement("span",{class:pe.config.classes.hidden},t)}function y(e){var t=a.createElement("span",{class:pe.config.classes.menu.value});return t.appendChild(a.createElement("span",{class:pe.config.classes.menu.badge},e)),t}function b(e,t){var n,i,o,s=a.createElement("button");switch(a.is.object(t)||(t={}),"class"in t?t.class.indexOf(pe.config.classes.control)===-1&&(t.class+=" "+pe.config.classes.control):t.class=pe.config.classes.control,e){case"mute":o="toggleMute",n="volume",i="muted";break;case"captions":o="toggleCaptions",n="captions-off",i="captions-on";break;case"fullscreen":o="toggleFullscreen",n="enter-fullscreen",i="exit-fullscreen";break;case"play-large":t.class="plyr__play-large",e="play",o="play",n="play";break;default:o=e,n=e}return a.extend(t,a.getAttributesFromSelector(pe.config.selectors.buttons[e],t)),a.is.string(i)&&s.appendChild(f(i,{class:"icon--"+i})),s.appendChild(f(n)),s.appendChild(g(o)),a.setAttributes(s,t),pe.elements.buttons[e]=s,s}function v(e,t){var n=a.createElement("label",{for:t.id,class:pe.config.classes.hidden},pe.config.i18n[e]),i=a.createElement("input",a.extend(a.getAttributesFromSelector(pe.config.selectors.inputs[e]),{type:"range",min:0,max:100,step:.1,value:0,autocomplete:"off"},t));return pe.elements.inputs[e]=i,{label:n,input:i}}function h(e,t){var n=a.createElement("progress",a.extend(a.getAttributesFromSelector(pe.config.selectors.display[e]),{min:0,max:100,value:0},t));if("volume"!==e){n.appendChild(a.createElement("span",null,"0"));var i="";switch(e){case"played":i=pe.config.i18n.played;break;case"buffer":i=pe.config.i18n.buffered}n.textContent="% "+i.toLowerCase()}return pe.elements.display[e]=n,n}function w(e){var t=a.createElement("span",{class:"plyr__time"});return t.appendChild(a.createElement("span",{class:pe.config.classes.hidden},pe.config.i18n[e])),t.appendChild(a.createElement("span",a.getAttributesFromSelector(pe.config.selectors.display[e]),"00:00")),pe.elements.display[e]=t,t}function k(e){var t=a.createElement("div",a.getAttributesFromSelector(pe.config.selectors.controls.wrapper));if(a.inArray(pe.config.controls,"restart")&&t.appendChild(b("restart")),a.inArray(pe.config.controls,"rewind")&&t.appendChild(b("rewind")),a.inArray(pe.config.controls,"play")&&(t.appendChild(b("play")),t.appendChild(b("pause"))),a.inArray(pe.config.controls,"fast-forward")&&t.appendChild(b("fast-forward")),a.inArray(pe.config.controls,"progress")){var n=a.createElement("span",a.getAttributesFromSelector(pe.config.selectors.progress)),i=v("seek",{id:"plyr-seek-"+e.id});if(n.appendChild(i.label),n.appendChild(i.input),n.appendChild(h("played")),n.appendChild(h("buffer")),pe.config.tooltips.seek){var o=a.createElement("span",{role:"tooltip",class:pe.config.classes.tooltip},"00:00");n.appendChild(o),pe.elements.display.seekTooltip=o}pe.elements.progress=n,t.appendChild(pe.elements.progress)}if(a.inArray(pe.config.controls,"current-time")&&t.appendChild(w("currentTime")),a.inArray(pe.config.controls,"duration")&&t.appendChild(w("duration")),a.inArray(pe.config.controls,"mute")&&t.appendChild(b("mute")),a.inArray(pe.config.controls,"volume")){var s=a.createElement("span",{class:"plyr__volume"}),l={max:10,value:pe.config.volume},c=v("volume",a.extend(l,{id:"plyr-volume-"+e.id}));s.appendChild(c.label),s.appendChild(c.input);var u=h("volume",l);s.appendChild(u),t.appendChild(s)}if(a.inArray(pe.config.controls,"captions")&&t.appendChild(b("captions")),a.inArray(pe.config.controls,"settings")){var d=a.createElement("div",{class:"plyr__menu"});d.appendChild(b("settings",{id:"plyr-settings-toggle-"+e.id,"aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id,"aria-expanded":!1}));var p=a.createElement("form",{class:"plyr__menu__container",id:"plyr-settings-"+e.id,"aria-hidden":!0,"aria-labelled-by":"plyr-settings-toggle-"+e.id,role:"tablist",tabindex:-1}),m=a.createElement("div"),f=a.createElement("div",{id:"plyr-settings-"+e.id+"-home","aria-hidden":!1,"aria-labelled-by":"plyr-settings-toggle-"+e.id,role:"tabpanel"}),g=a.createElement("ul",{role:"tablist"});pe.config.settings.forEach(function(t){var n=a.createElement("li",{role:"tab",hidden:""}),i=a.createElement("button",a.extend(a.getAttributesFromSelector(pe.config.selectors.buttons.settings),{type:"button",class:pe.config.classes.control+" "+pe.config.classes.control+"--forward",id:"plyr-settings-"+e.id+"-"+t+"-tab","aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id+"-"+t,"aria-expanded":!1}),pe.config.i18n[t]),o=a.createElement("span",{class:pe.config.classes.menu.value});o.innerHTML=e[t],i.appendChild(o),n.appendChild(i),g.appendChild(n),pe.elements.settings.tabs[t]=n}),f.appendChild(g),m.appendChild(f),pe.config.settings.forEach(function(t){var n=a.createElement("div",{id:"plyr-settings-"+e.id+"-"+t,"aria-hidden":!0,"aria-labelled-by":"plyr-settings-"+e.id+"-"+t+"-tab",role:"tabpanel",tabindex:-1,hidden:""}),i=a.createElement("button",{type:"button",class:pe.config.classes.control+" "+pe.config.classes.control+"--back","aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id+"-home","aria-expanded":!1},pe.config.i18n[t]);n.appendChild(i);var o=a.createElement("ul");n.appendChild(o),m.appendChild(n),pe.elements.settings.panes[t]=n}),p.appendChild(m),d.appendChild(p),t.appendChild(d),pe.elements.settings.form=p,pe.elements.settings.menu=d}return a.inArray(pe.config.controls,"pip")&&r.pip&&t.appendChild(b("pip")),a.inArray(pe.config.controls,"airplay")&&r.airplay&&t.appendChild(b("airplay")),a.inArray(pe.config.controls,"fullscreen")&&t.appendChild(b("fullscreen")),a.inArray(pe.config.controls,"play-large")&&(pe.elements.buttons.playLarge=b("play-large"),pe.elements.container.appendChild(pe.elements.buttons.playLarge)),pe.elements.controls=t,E(),S(),t}function C(e,t){function n(e){var t="";switch(e){case"hd2160":t="4K";break;case"hd1440":t="WQHD";break;case"hd1080":t="HD";break;case"hd720":t="HD"}return t.length?y(t):null}function i(e){switch(e){case"hd2160":return"2160P";case"hd1440":return"1440P";case"hd1080":return"1080P";case"hd720":return"720P";case"large":return"480P";case"medium":return"360P";case"small":return"240P";default:return"Auto"}}var o=pe.elements.settings.panes.quality.querySelector("ul");pe.elements.settings.tabs.quality.removeAttribute("hidden"),pe.elements.settings.panes.quality.removeAttribute("hidden"),a.emptyElement(o),a.is.array(e)&&!a.is.empty(e)&&e.filter(function(e){return!a.inArray(["tiny","small"],e)}).forEach(function(e){var t=a.createElement("li"),s=a.createElement("label",{class:pe.config.classes.control}),r=a.createElement("input",a.extend(a.getAttributesFromSelector(pe.config.selectors.inputs.quality),{type:"radio",name:"plyr-quality",value:e}));e===pe.config.quality.selected&&(r.checked=!0),s.appendChild(r),s.appendChild(document.createTextNode(i(e)));var l=n(e);a.is.htmlElement(l)&&s.appendChild(l),t.appendChild(s),o.appendChild(t)})}function E(){var e=["start","end","all","reset"],t=pe.elements.settings.panes.loop.querySelector("ul");pe.elements.settings.tabs.loop.removeAttribute("hidden"),pe.elements.settings.panes.loop.removeAttribute("hidden"),a.emptyElement(t),e.forEach(function(e){var n=a.createElement("li"),i=a.createElement("button",a.extend(a.getAttributesFromSelector(pe.config.selectors.buttons.loop),{type:"button",class:pe.config.classes.control,"data-plyr-loop-action":e}),pe.config.i18n[e]);if(a.inArray(["start","end"],e)){var o=y("00:00");i.appendChild(o)}n.appendChild(i),t.appendChild(n)})}function A(){var e=pe.elements.settings.panes.captions.querySelector("ul");if(pe.elements.settings.tabs.captions.removeAttribute("hidden"),pe.elements.settings.panes.captions.removeAttribute("hidden"),a.emptyElement(e),!a.is.empty(pe.captions.tracks)){var t=[].map.call(pe.captions.tracks,function(e){return{language:e.language,badge:!0,label:a.is.empty(e.label)?e.language.toUpperCase():e.label}});t.unshift({language:"off",label:pe.config.i18n.none}),t.forEach(function(t){var n=a.createElement("li"),i=a.createElement("label",{class:pe.config.classes.control}),o=a.createElement("input",a.extend(a.getAttributesFromSelector(pe.config.selectors.inputs.language),{type:"radio",name:"plyr-language",value:t.language}));t.language.toLowerCase()===pe.config.captions.language.toLowerCase()&&(o.checked=!0),i.appendChild(o),i.appendChild(document.createTextNode(t.label||t.language)),t.badge&&i.appendChild(y(t.language.toUpperCase())),n.appendChild(i),e.appendChild(n)})}}function S(e){var t=pe.elements.settings.panes.speed.querySelector("ul");pe.elements.settings.tabs.speed.removeAttribute("hidden"),pe.elements.settings.panes.speed.removeAttribute("hidden"),a.emptyElement(t),a.is.array(e)||(e=pe.config.speed.options),e.forEach(function(e){var n=a.createElement("li"),i=a.createElement("label",{class:pe.config.classes.control}),o=a.createElement("input",a.extend(a.getAttributesFromSelector(pe.config.selectors.inputs.speed),{type:"radio",name:"plyr-speed",value:e}));e===pe.config.speed.selected&&(o.checked=!0),i.appendChild(o),i.insertAdjacentHTML("beforeend",U(e)),n.appendChild(i),t.appendChild(n)})}function T(){if(pe.supported.full&&("audio"!==pe.type||pe.config.fullscreen.allowAudio)&&pe.config.fullscreen.enabled){var e=r.fullscreen;e||pe.config.fullscreen.fallback&&!a.inFrame()?(fe((e?"Native":"Fallback")+" fullscreen enabled"),a.toggleClass(pe.elements.container,pe.config.classes.fullscreen.enabled,!0)):fe("Fullscreen not supported and fallback disabled"),pe.elements.buttons&&pe.elements.buttons.fullscreen&&a.toggleState(pe.elements.buttons.fullscreen,!1),d()}}function x(e){if(a.inArray(["video","vimeo"],pe.type)&&("video"!==pe.type||r.textTracks)&&(a.is.htmlElement(pe.elements.captions)||(pe.elements.captions=a.createElement("div",a.getAttributesFromSelector(pe.config.selectors.captions)),a.insertAfter(pe.elements.captions,pe.elements.wrapper)),pe.captions.tracks=a.is.array(e)?e:pe.media.textTracks,a.toggleClass(pe.elements.container,pe.config.classes.captions.enabled,!a.is.empty(pe.captions.tracks)),!a.is.empty(pe.captions.tracks))){if(_(),"video"===pe.type){var t=pe.config.captions.language.toLowerCase();[].forEach.call(pe.captions.tracks,function(e){a.off(e,"cuechange",F),e.mode="hidden",e.language===t&&(pe.captions.currentTrack=e)}),a.is.track(pe.captions.currentTrack)||(ge("No language found to match "+t+" in tracks"),pe.captions.currentTrack=pe.captions.tracks[0]);var n=pe.captions.currentTrack;a.is.track(n)&&a.inArray(["captions","subtitles"],n.kind)&&(a.on(n,"cuechange",F),n.activeCues&&n.activeCues.length>0&&F(n))}A()}}function P(){return!r.textTracks||a.is.empty(pe.captions.tracks)?"No Subs":pe.captions.enabled?pe.captions.currentTrack.label:"Disabled"}function F(e){a.is.event(e)&&(e=e.target);var t=e.activeCues[0];a.is.cue(t)?I(t.getCueAsHTML()):I()}function I(e){if(a.is.htmlElement(pe.elements.captions)){var t=a.createElement("span");a.emptyElement(pe.elements.captions),a.is.undefined(e)&&(e=""),a.is.string(e)?t.textContent=e.trim():t.appendChild(e),pe.elements.captions.appendChild(t)}else ge("No captions element to render to")}function _(){if(pe.elements.buttons.captions){var e=pe.storage.captions;a.is.boolean(e)?pe.config.captions.active=e:e=pe.config.captions.active,e&&(a.toggleClass(pe.elements.container,pe.config.classes.captions.active,!0),a.toggleState(pe.elements.buttons.captions,!0))}}function N(){if(pe.config.loadSprite){var e=m();e.absolute?(fe("AJAX loading absolute SVG sprite"+(pe.browser.isIE?" (due to IE)":"")),a.loadSprite(e.url,"sprite-plyr")):fe("Sprite will be used as external resource directly")}pe.id=Math.floor(1e4*Math.random());var t=null;t=a.is.string(pe.config.controls)?pe.config.controls:a.is.function(pe.config.controls)?pe.config.controls({id:pe.id,seektime:pe.config.seekTime}):k({id:pe.id,seektime:pe.config.seekTime,speed:U(),quality:"HD",captions:P(),loop:"None"});var n;if(a.is.string(pe.config.selectors.controls.container)&&(n=document.querySelector(pe.config.selectors.controls.container)),a.is.htmlElement(n)||(n=pe.elements.container),a.is.htmlElement(t)?n.appendChild(t):n.insertAdjacentHTML("beforeend",t),a.is.htmlElement(pe.elements.controls)&&L(),pe.config.tooltips.controls)for(var i=l([pe.config.selectors.controls.wrapper," ",pe.config.selectors.labels," .",pe.config.classes.hidden].join("")),o=i.length-1;o>=0;o--){var s=i[o];a.toggleClass(s,pe.config.classes.hidden,!1),a.toggleClass(s,pe.config.classes.tooltip,!0)}}function L(){try{return pe.elements.controls=c(pe.config.selectors.controls.wrapper),pe.elements.buttons={play:l(pe.config.selectors.buttons.play),pause:c(pe.config.selectors.buttons.pause),restart:c(pe.config.selectors.buttons.restart),rewind:c(pe.config.selectors.buttons.rewind),forward:c(pe.config.selectors.buttons.forward),mute:c(pe.config.selectors.buttons.mute),pip:c(pe.config.selectors.buttons.pip),airplay:c(pe.config.selectors.buttons.airplay),settings:c(pe.config.selectors.buttons.settings),captions:c(pe.config.selectors.buttons.captions),fullscreen:c(pe.config.selectors.buttons.fullscreen)},pe.elements.progress=c(pe.config.selectors.progress),pe.elements.inputs={seek:c(pe.config.selectors.inputs.seek),volume:c(pe.config.selectors.inputs.volume)},pe.elements.display={buffer:c(pe.config.selectors.display.buffer),played:c(pe.config.selectors.display.played),volume:c(pe.config.selectors.display.volume),duration:c(pe.config.selectors.display.duration),currentTime:c(pe.config.selectors.display.currentTime)},a.is.htmlElement(pe.elements.progress)&&(pe.elements.display.seekTooltip=pe.elements.progress.querySelector("."+pe.config.classes.tooltip)),!0}catch(e){return ge("It looks like there is a problem with your custom controls HTML",e),M(!0),!1}}function q(){a.toggleClass(pe.elements.container,pe.config.selectors.container.replace(".",""),pe.supported.full)}function M(e){e&&a.inArray(o.html5,pe.type)?pe.media.setAttribute("controls",""):pe.media.removeAttribute("controls")}function V(e){var t=pe.config.i18n.play;if(a.is.string(pe.config.title)&&!a.is.empty(pe.config.title)&&(t+=", "+pe.config.title,pe.elements.container.setAttribute("aria-label",pe.config.title)),pe.supported.full&&(a.is.htmlElement(pe.elements.buttons.play)&&pe.elements.buttons.play.setAttribute("aria-label",t),a.is.htmlElement(pe.elements.buttons.playLarge)&&pe.elements.buttons.playLarge.setAttribute("aria-label",t)),a.is.htmlElement(e)){var n=a.is.string(pe.config.title)&&!a.is.empty(pe.config.title)?pe.config.title:"video";e.setAttribute("title",pe.config.i18n.frameTitle.replace("{title}",n))}}function O(){var e=null;pe.storage={},r.storage&&pe.config.storage.enabled&&(window.localStorage.removeItem("plyr-volume"),e=window.localStorage.getItem(pe.config.storage.key),e&&(/^\d+(\.\d+)?$/.test(e)?D({volume:parseFloat(e)}):pe.storage=JSON.parse(e)))}function D(e){r.storage&&pe.config.storage.enabled&&(a.extend(pe.storage,e),window.localStorage.setItem(pe.config.storage.key,JSON.stringify(pe.storage)))}function j(){return pe.media?(pe.supported.full&&(a.toggleClass(pe.elements.container,pe.config.classes.type.replace("{0}",pe.type),!0),a.inArray(o.embed,pe.type)&&a.toggleClass(pe.elements.container,pe.config.classes.type.replace("{0}","video"),!0),a.toggleClass(pe.elements.container,pe.config.classes.pip.enabled,r.pip&&"video"===pe.type),a.toggleClass(pe.elements.container,pe.config.classes.airplay.enabled,r.airplay&&a.inArray(o.html5,pe.type)),a.toggleClass(pe.elements.container,pe.config.classes.stopped,pe.config.autoplay),a.toggleClass(pe.elements.container,pe.config.classes.isIos,pe.browser.isIos),a.toggleClass(pe.elements.container,pe.config.classes.isTouch,r.touch)),a.inArray(["video","youtube","vimeo"],pe.type)&&(pe.elements.wrapper=a.createElement("div",{class:pe.config.classes.video}),a.wrap(pe.media,pe.elements.wrapper)),void(a.inArray(o.embed,pe.type)&&R())):void ge("No media element found!")}function R(){var e,t=pe.type+"-"+Math.floor(1e4*Math.random());switch(pe.type){case"youtube":e=a.parseYouTubeId(pe.embedId);break;default:e=pe.embedId}for(var n=l('[id^="'+pe.type+'-"]'),i=n.length-1;i>=0;i--)a.removeElement(n[i]);if(a.toggleClass(pe.elements.wrapper,pe.config.classes.embed,!0),"youtube"===pe.type)pe.media.setAttribute("id",t),a.is.object(window.YT)?B(e):(a.injectScript(pe.config.urls.youtube.api),window.onYouTubeReadyCallbacks=window.onYouTubeReadyCallbacks||[],window.onYouTubeReadyCallbacks.push(function(){B(e)}),window.onYouTubeIframeAPIReady=function(){window.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===pe.type)if(pe.media.setAttribute("id",t),a.is.object(window.Vimeo))Y(e);else{a.injectScript(pe.config.urls.vimeo.api);var o=window.setInterval(function(){a.is.object(window.Vimeo)&&(window.clearInterval(o),Y(e))},50)}else if("soundcloud"===pe.type){var s=a.createElement("iframe");s.loaded=!1,a.on(s,"load",function(){s.loaded=!0}),a.setAttributes(s,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+e,id:t}),pe.media.appendChild(s),window.SC||a.injectScript(pe.config.urls.soundcloud.api);var r=window.setInterval(function(){window.SC&&s.loaded&&(window.clearInterval(r),W.call(s))},50)}}function H(){pe.supported.full&&(ce(),ue()),V(c("iframe"))}function B(e){pe.embed=new window.YT.Player(pe.media.id,{videoId:e,playerVars:{autoplay:pe.config.autoplay?1:0,controls:pe.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:pe.config.captions.active?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,playsinline:1,origin:window.location.href},events:{onError:function(e){n(pe.elements.container,"error",!0,{code:e.data,embed:e.target})},onPlaybackQualityChange:function(e){var t=e.target,n=t.getPlaybackQuality();console.warn(n)},onReady:function(e){var t=e.target;pe.media.play=function(){t.playVideo(),pe.media.paused=!1},pe.media.pause=function(){t.pauseVideo(),pe.media.paused=!0},pe.media.stop=function(){t.stopVideo(),pe.media.paused=!0},pe.media.duration=t.getDuration(),pe.media.paused=!0,pe.media.currentTime=0,pe.media.muted=t.isMuted();var i=t.getPlaybackRate(),o=t.getAvailablePlaybackRates();console.warn(i,o),pe.config.title=t.getVideoData().title,pe.supported.full&&pe.media.setAttribute("tabindex",-1),H(),n(pe.media,"timeupdate"),n(pe.media,"durationchange"),window.clearInterval(me.buffering),me.buffering=window.setInterval(function(){pe.media.buffered=t.getVideoLoadedFraction(),(null===pe.media.lastBuffered||pe.media.lastBuffered=pe.config.loop.end&&pe.seek(pe.config.loop.start),Z(t,n)}}function Z(e,t){if(pe.supported.full){if(a.is.undefined(t)&&(t=0),a.is.undefined(e)){if(!a.is.htmlElement(pe.elements.display.buffer))return;e=pe.elements.display.buffer}if(a.is.htmlElement(e)){e.value=t;var n=e.getElementsByTagName("span")[0];a.is.htmlElement(n)&&(n.childNodes[0].nodeValue=t)}}}function ee(e,t){if(t){isNaN(e)&&(e=0);var n=parseInt(e%60),i=parseInt(e/60%60),o=parseInt(e/60/60%60),a=pe.getDuration(),s=parseInt(a/60/60%60)>0;n=("0"+n).slice(-2),i=("0"+i).slice(-2);var r=(s?o+":":"")+i+":"+n;return t.textContent=r,r}}function te(){if(pe.supported.full){var e=pe.getDuration()||0;!pe.elements.display.duration&&pe.config.displayDuration&&pe.media.paused&&ee(e,pe.elements.display.currentTime),pe.elements.display.duration&&ee(e,pe.elements.display.duration),oe()}}function ne(e){ee(pe.media.currentTime,pe.elements.display.currentTime),e&&"timeupdate"===e.type&&pe.media.seeking||K(e)}function ie(e){a.is.number(e)||(e=0);var t=pe.getDuration(),n=a.getPercentage(e,t);pe.elements.progress&&pe.elements.display.played&&(pe.elements.display.played.value=n),pe.elements.buttons&&pe.elements.inputs.seek&&(pe.elements.inputs.seek.value=n)}function oe(e){var t=pe.getDuration();if(pe.config.tooltips.seek&&a.is.htmlElement(pe.elements.inputs.seek)&&a.is.htmlElement(pe.elements.display.seekTooltip)&&0!==t){var n=pe.elements.inputs.seek.getBoundingClientRect(),i=0,o=pe.config.classes.tooltip+"--visible";if(a.is.event(e))i=100/n.width*(e.pageX-n.left);else{if(!a.hasClass(pe.elements.display.seekTooltip,o))return;i=pe.elements.display.seekTooltip.style.left.replace("%","")}i<0?i=0:i>100&&(i=100),ee(t/100*i,pe.elements.display.seekTooltip),pe.elements.display.seekTooltip.style.left=i+"%",a.is.event(e)&&a.inArray(["mouseenter","mouseleave"],e.type)&&a.toggleClass(pe.elements.display.seekTooltip,o,"mouseenter"===e.type)}}function ae(e){function t(){if(u(pe.media),u("captions"),u("wrapper"),pe.elements.container&&pe.elements.container.removeAttribute("class"),"type"in e&&(pe.type=e.type,"video"===pe.type)){var t=e.sources[0];"type"in t&&a.inArray(o.embed,t.type)&&(pe.type=t.type)}switch(pe.supported=a.checkSupport(pe.type,pe.config.inline),pe.type){case"video":pe.media=a.createElement("video");break;case"audio":pe.media=a.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":pe.media=a.createElement("div"),pe.embedId=e.sources[0].src}a.prependChild(pe.elements.container,pe.media),a.is.boolean(e.autoplay)&&(pe.config.autoplay=e.autoplay),a.inArray(o.html5,pe.type)&&(pe.config.crossorigin&&pe.media.setAttribute("crossorigin",""),pe.config.autoplay&&pe.media.setAttribute("autoplay",""),"poster"in e&&pe.media.setAttribute("poster",e.poster),pe.config.loop.active&&pe.media.setAttribute("loop",""),pe.config.inline&&pe.media.setAttribute("playsinline","")),a.toggleClass(pe.elements.container,pe.config.classes.fullscreen.active,pe.fullscreen.active),a.toggleClass(pe.elements.container,pe.config.classes.captions.active,pe.captions.enabled),q(),a.inArray(o.html5,pe.type)&&p("source",e.sources),j(),a.inArray(o.html5,pe.type)&&("tracks"in e&&p("track",e.tracks),pe.media.load()),(a.inArray(o.html5,pe.type)||a.inArray(o.embed,pe.type)&&!pe.supported.full)&&(ce(),ue()),pe.config.title=e.title,V()}return a.is.object(e)&&"sources"in e&&e.sources.length?(pe.stop(),ie(),Z(),le(),void pe.destroy(t,!1)):void ge("Invalid source format")}function se(){function e(){var e=pe.togglePlay(),t=pe.elements.buttons[e?"play":"pause"],n=pe.elements.buttons[e?"pause":"play"];if(n){var i=a.hasClass(t,pe.config.classes.tabFocus);setTimeout(function(){a.is.htmlElement(n)&&n.focus(),i&&(a.toggleClass(t,pe.config.classes.tabFocus,!1),a.toggleClass(n,pe.config.classes.tabFocus,!0))},100)}}function t(e){return e.keyCode?e.keyCode:e.which}function n(e){a.toggleClass(l("."+pe.config.classes.tabFocus),pe.config.classes.tabFocus,!1),pe.elements.container.contains(e)&&a.toggleClass(e,pe.config.classes.tabFocus,!0)}function i(n){function i(){var e=pe.media.duration;a.is.number(e)&&pe.seek(e/10*(o-48))}var o=t(n),s="keydown"===n.type,l=s&&o===u;if(a.is.number(o))if(s){var c=[48,49,50,51,52,53,54,56,57,32,75,38,40,77,39,37,70,67,73,76,79],d=[38,40];if(a.inArray(d,o)){var p=a.getFocusElement();if(a.is.htmlElement(p)&&"radio"===a.getFocusElement().type)return}switch(a.inArray(c,o)&&(n.preventDefault(),n.stopPropagation()),o){case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:l||i();break;case 32:case 75:l||e();break;case 38:pe.increaseVolume();break;case 40:pe.decreaseVolume();break;case 77:l||pe.toggleMute();break;case 39:pe.forward();break;case 37:pe.rewind();break;case 70:pe.toggleFullscreen();break;case 67:l||pe.toggleCaptions();break;case 73:pe.loop("start");break;case 76:pe.loop();break;case 79:pe.loop("end")}!r.fullscreen&&pe.fullscreen.active&&27===o&&pe.toggleFullscreen(),u=o}else u=null}var o=pe.browser.isIE?"change":"input";if(pe.config.keyboardShortcuts.focused){var u=null;pe.config.keyboardShortcuts.global&&a.on(window,"keydown keyup",function(e){var n=t(e),o=a.getFocusElement(),s=[48,49,50,51,52,53,54,56,57,75,77,70,67,73,76,79];!a.inArray(s,n)||a.is.htmlElement(o)&&a.matches(o,pe.config.selectors.editable)||i(e)},!1),a.on(pe.elements.container,"keydown keyup",i,!1)}a.on(window,"keyup",function(e){var i=t(e),o=a.getFocusElement();9===i&&n(o)}),a.on(document.body,"click",function(){ +a.toggleClass(c("."+pe.config.classes.tabFocus),pe.config.classes.tabFocus,!1)});for(var d in pe.elements.buttons){var p=pe.elements.buttons[d];a.on(p,"blur",function(){a.toggleClass(p,"tab-focus",!1)})}var m=function(e,t,n){a.is.function(t)&&t.call(this,e),a.is.function(n)&&n.call(this,e)};a.proxy(pe.elements.buttons.play,"click",pe.config.listeners.play,e),a.proxy(pe.elements.buttons.playLarge,"click",pe.config.listeners.play,e),a.proxy(pe.elements.buttons.pause,"click",pe.config.listeners.pause,e),a.proxy(pe.elements.buttons.restart,"click",pe.config.listeners.restart,function(){pe.restart()}),a.proxy(pe.elements.buttons.rewind,"click",pe.config.listeners.rewind,function(){pe.rewind()}),a.proxy(pe.elements.buttons.forward,"click",pe.config.listeners.forward,function(){pe.forward()}),a.proxy(pe.elements.buttons.mute,"click",pe.config.listeners.mute,function(){pe.toggleMute()}),a.proxy(pe.elements.buttons.captions,"click",pe.config.listeners.captions,function(){pe.toggleCaptions()}),a.proxy(pe.elements.buttons.fullscreen,"click",pe.config.listeners.fullscreen,function(e){pe.toggleFullscreen(e)}),a.proxy(pe.elements.buttons.pip,"click",pe.config.listeners.pip,function(){pe.togglePictureInPicture()}),a.proxy(pe.elements.buttons.airplay,"click",pe.config.listeners.airplay,function(){pe.airPlay()}),a.on(pe.elements.buttons.settings,"click",z),a.on(document.documentElement,"click",z),a.on(pe.elements.settings.form,"click",X),a.on(pe.elements.settings.form,"click",function(e){a.matches(e.target,pe.config.selectors.inputs.language)?m.call(this,e,pe.config.listeners.language,function(){pe.language(e.target.value.toLowerCase())}):a.matches(e.target,pe.config.selectors.inputs.quality)?m.call(this,e,pe.config.listeners.quality,function(){ge("Set quality")}):a.matches(e.target,pe.config.selectors.inputs.speed)?m.call(this,e,pe.config.listeners.speed,function(){pe.setSpeed(parseFloat(e.target.value))}):a.matches(e.target,pe.config.selectors.buttons.loop)&&m.call(this,e,pe.config.listeners.loop,function(){var t=e.target.getAttribute("data-loop__value")||e.target.getAttribute("data-loop__type");a.inArray(["start","end","all","none"],t)&&pe.loop(t)})}),a.proxy(pe.elements.inputs.seek,o,pe.config.listeners.seek,function(e){var t=pe.getDuration();pe.seek(e.target.value/e.target.max*t)}),a.proxy(pe.elements.inputs.volume,o,pe.config.listeners.volume,function(){pe.setVolume(event.target.value)}),a.on(pe.elements.progress,"mouseenter mouseleave mousemove",oe),pe.config.hideControls&&(a.on(pe.elements.container,"mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen",function(e){pe.toggleControls(e)}),a.on(pe.elements.controls,"mouseenter mouseleave",function(e){pe.elements.controls.hover="mouseenter"===e.type}),a.on(pe.elements.controls,"mousedown mouseup touchstart touchend touchcancel",function(e){pe.elements.controls.pressed=a.inArray(["mousedown","touchstart"],e.type)}),a.on(pe.elements.controls,"focus blur",function(e){pe.toggleControls(e)},!0,!0)),a.proxy(pe.elements.inputs.volume,"wheel",pe.config.listeners.volume,function(e){var t=e.webkitDirectionInvertedFromDevice,n=.2,i=0;(e.deltaY<0||e.deltaX>0)&&(t?(pe.decreaseVolume(n),i=-1):(pe.increaseVolume(n),i=1)),(e.deltaY>0||e.deltaX<0)&&(t?(pe.increaseVolume(n),i=1):(pe.decreaseVolume(n),i=-1)),(1===i&&pe.media.volume<1||i===-1&&pe.media.volume>0)&&e.preventDefault()},!1),r.fullscreen&&a.on(document,s.eventType,function(e){pe.toggleFullscreen(e)})}function re(){if(a.on(pe.media,"timeupdate seeking",ne),a.on(pe.media,"durationchange loadedmetadata",te),a.on(pe.media,"ended",function(){"video"===pe.type&&pe.config.showPosterOnEnd&&("video"===pe.type&&I(),pe.restart(),pe.media.load())}),a.on(pe.media,"progress playing",K),a.on(pe.media,"volumechange",$),a.on(pe.media,"play pause ended",Q),a.on(pe.media,"waiting canplay seeked",G),pe.config.clickToPlay&&"audio"!==pe.type){var e=c("."+pe.config.classes.video);if(!e)return;e.style.cursor="pointer",a.on(e,"click",function(){pe.config.hideControls&&r.touch&&!pe.media.paused||(pe.media.paused?pe.play():pe.media.ended?(pe.restart(),pe.play()):pe.pause())})}pe.config.disableContextMenu&&a.on(pe.media,"contextmenu",function(e){e.preventDefault()},!1),a.on(pe.media,pe.config.events.concat(["keyup","keydown"]).join(" "),function(e){n(pe.elements.container,e.type,!0)})}function le(){if(a.inArray(o.html5,pe.type)){for(var e=pe.media.querySelectorAll("source"),t=0;t=0;n--){var i=n>0?t.cloneNode(!0):t,o=e[n],a=o.parentNode,s=o.nextSibling;return i.appendChild(o),s?a.insertBefore(i,s):a.appendChild(i),i}},removeElement:function(e){a.is.htmlElement(e)&&a.is.htmlElement(e.parentNode)&&e.parentNode.removeChild(e)},prependChild:function(e,t){e.insertBefore(t,e.firstChild)},insertAfter:function(e,t){t.parentNode.insertBefore(e,t.nextSibling)},createElement:function(e,t,n){var i=document.createElement(e);return a.is.object(t)&&a.setAttributes(i,t),a.is.string(n)&&(i.textContent=n),i},insertElement:function(e,t,n,i){var o=a.createElement(e,n,i);a.prependChild(t,o)},emptyElement:function(e){for(var t=e.childNodes.length;t--;)e.removeChild(e.lastChild)},setAttributes:function(e,t){for(var n in t)e.setAttribute(n,t[n])},getAttributesFromSelector:function(e,t){if(!a.is.string(e)||a.is.empty(e))return{};var n={};return e.split(",").forEach(function(e){e=e.trim();var i=e.charAt(0);switch(i){case".":var o=e.replace(".","");a.is.object(t)&&a.is.string(t.class)&&(t.class+=" "+o),n.class=o;break;case"#":n.id=e.replace("#","");break;case"[":e=e.replace(/[\[\]]/g,"");var s=e.split("="),r=s[0],l=s.length>1?s[1].replace(/[\"\']/g,""):"";n[r]=l}}),n},toggleClass:function(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var i=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=i+(n?" "+t:"")}},hasClass:function(e,t){return!!e&&(e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className))},matches:function(e,t){var n=Element.prototype,i=n.matches||n.webkitMatchesSelector||n.mozMatchesSelector||n.msMatchesSelector||function(e){return[].indexOf.call(document.querySelectorAll(e),this)!==-1};return i.call(e,t)},getFocusElement:function(){var e=document.activeElement;return e=e&&e!==document.body?document.querySelector(":focus"):null},proxy:function(e,t,n,i,o,s){a.on(e,t,function(t){n&&n.apply(e,[t]),i.apply(e,[t])},o,s)},toggleListener:function(e,t,n,i,o,s){if(null!==e&&!a.is.undefined(e)){if(t=t.split(" "),a.is.boolean(s)||(s=!1),a.is.boolean(o)||(o=!0),e instanceof NodeList){var l=1===arguments.length?[arguments[0]]:Array.apply(null,arguments);return l.shift(),void[].forEach.call(e,function(e){e instanceof Node&&a.toggleListener.apply(null,[e].concat(l))})}var c=s;r.passiveListeners&&(c={passive:o,capture:s}),t.forEach(function(t){e[i?"addEventListener":"removeEventListener"](t,n,c)})}},on:function(e,t,n,i,o){a.toggleListener(e,t,n,!0,i,o)},off:function(e,t,n,i,o){a.toggleListener(e,t,n,!1,i,o)},event:function(e,t,n,i){if(e&&t){a.is.boolean(n)||(n=!1);var o;a.is.function(window.CustomEvent)?o=window.CustomEvent:(o=function(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},o.prototype=window.Event.prototype);var s=new o(t,{bubbles:n,detail:i});e.dispatchEvent(s)}},toggleState:function(e,t){if(e)return t=a.is.boolean(t)?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t},getPercentage:function(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)},extend:function(){var e=arguments;if(e.length){if(1===e.length)return e[0];var t=Array.prototype.shift.call(e);a.is.object(t)||(t={});for(var n=e.length,i=0;is&&(n=s),t.core.updateSeekDisplay(n),a.inArray(o.embed,t.type)){switch(t.type){case"youtube":t.embed.seekTo(n);break;case"vimeo":t.embed.setCurrentTime(n.toFixed(0));break;case"soundcloud":t.embed.seekTo(1e3*n)}i&&t.pause(),t.core.trigger(t.media,"timeupdate"),t.media.seeking=!0,t.core.trigger(t.media,"seeking")}else t.media.currentTime=n.toFixed(4);return t.core.log("Seeking to "+t.media.currentTime+" seconds"),t},t.prototype.setVolume=function(e){var t=this,n=10,i=0;if(a.is.undefined(e)&&(e=t.storage.volume),(null===e||isNaN(e))&&(e=t.config.volume),e>n&&(e=n),e0&&t.toggleMute(),t},t.prototype.increaseVolume=function(e){var t=this,n=t.media.muted?0:10*t.media.volume;return a.is.number(e)||(e=1),t.setVolume(n+e),t},t.prototype.decreaseVolume=function(e){var t=this,n=t.media.muted?0:10*t.media.volume;return a.is.number(e)||(e=1),t.setVolume(n-e),t},t.prototype.toggleMute=function(e){var t=this;if(a.is.boolean(e)||(e=!t.media.muted),a.toggleState(t.elements.buttons.mute,e),t.media.muted=e,0===t.media.volume&&t.volume(t.config.volume),a.inArray(o.embed,t.type)){switch(t.type){case"youtube":t.embed[t.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":t.embed.setVolume(t.media.muted?0:parseFloat(t.config.volume/10))}t.core.trigger(t.media,"volumechange")}return t},t.prototype.setSpeed=function(e){var t=this;return a.is.number(e)||(e=parseFloat(t.storage.speed||t.config.speed.selected)),e<.1&&(e=.1),e>2&&(e=2),a.is.array(t.config.speed.options)?(t.config.speed.selected=e,t.media.playbackRate=e,t.core.updateStorage({speed:e}),t):void t.core.warn("Invalid speeds format")},t.prototype.loop=function(e){var t=this;a.inArray(["start","end","all","none","toggle"],e)||(e="toggle");var n=Number(t.media.currentTime);switch(e){case"start":t.config.loop.end&&t.config.loop.end<=n&&(t.config.loop.end=null),t.config.loop.start=n,t.config.loop.indicator.start=t.elements.display.played.value;break;case"end":if(t.config.loop.start>=n)return;t.config.loop.end=n,t.config.loop.indicator.end=t.elements.display.played.value;break;case"all":t.config.loop.start=0,t.config.loop.end=t.media.duration-2,t.config.loop.indicator.start=0,t.config.loop.indicator.end=100;break;case"toggle":t.config.loop.active?(t.config.loop.start=0,t.config.loop.end=null):(t.config.loop.start=0,t.config.loop.end=t.media.duration-2);break;default:t.config.loop.start=0,t.config.loop.end=null}t.config.loop.active=a.is.number(t.config.loop.start)&&a.is.number(t.config.loop.end);var i=(t.core.updateTimeDisplay(t.config.loop.start,t.core.getElement('[data-plyr-loop="start"]')),null);return a.is.number(t.config.loop.end)&&(i=t.core.updateTimeDisplay(t.config.loop.end,t.core.getElement('[data-loop__value="loopout"]'))),t.config.loop.active,t},t.prototype.source=function(e){var t=this;if(a.is.object(e))return t.core.updateSource(e),t;var n;switch(t.type){case"youtube":n=t.embed.getVideoUrl();break;case"vimeo":t.embed.getVideoUrl.then(function(e){n=e});break;case"soundcloud":t.embed.getCurrentSound(function(e){n=e.permalink_url});break;default:n=t.media.currentSrc}return n},t.prototype.poster=function(e){var t=this;return a.is.string(e)?("video"===t.type?t.media.setAttribute("poster",e):t.core.warn("Poster can only be set on HTML5 video"),t):t.media.getAttribute("poster")},t.prototype.toggleCaptions=function(e){var t=this;if(t.supported.full&&t.elements.buttons.captions)return a.is.boolean(e)||(e=t.elements.container.className.indexOf(t.config.classes.captions.active)===-1),t.captions.enabled=e,a.toggleState(t.elements.buttons.captions,t.captions.enabled),a.toggleClass(t.elements.container,t.config.classes.captions.active,t.captions.enabled),t.core.trigger(t.elements.container,t.captions.enabled?"captionsenabled":"captionsdisabled",!0),t.core.updateStorage({captions:t.captions.enabled}),t},t.prototype.language=function(e){var t=this;return a.is.string(e)?(t.config.captions.language=e.toLowerCase(),t.core.setCaption(),t.core.setupCaptions(),t):t.config.captions.language},t.prototype.toggleFullscreen=function(e){function t(){n={x:window.pageXOffset||0,y:window.pageYOffset||0}}function i(){window.scrollTo(n.x,n.y)}var o=this,l=r.fullscreen;if(l){if(!a.is.event(e)||e.type!==s.eventType)return s.isFullScreen(o.elements.container)?s.cancelFullScreen():(t(),s.requestFullScreen(o.elements.container)),void(o.fullscreen.active=s.isFullScreen(o.elements.container));o.fullscreen.active=s.isFullScreen(o.elements.container)}else o.fullscreen.active=!o.fullscreen.active,document.body.style.overflow=o.fullscreen.active?"hidden":"";return a.toggleClass(o.elements.container,o.config.classes.fullscreen.active,o.fullscreen.active),o.elements.buttons&&o.elements.buttons.fullscreen&&a.toggleState(o.elements.buttons.fullscreen,o.fullscreen.active),o.core.trigger(o.elements.container,o.fullscreen.active?"enterfullscreen":"exitfullscreen",!0),!o.fullscreen.active&&l&&i(),o},t.prototype.togglePictureInPicture=function(e){var t=this,n={pip:"picture-in-picture",inline:"inline"};if(t.core.support.pip)return a.is.boolean(e)||(e=t.media.webkitPresentationMode===n.inline),t.media.webkitSetPresentationMode(e?n.pip:n.inline),t},t.prototype.airPlay=function(){var e=this;if(e.core.support.airplay)return e.media.webkitShowPlaybackTargetPicker(),e},t.prototype.toggleControls=function(e){var t=this;if(t.config.hideControls&&"audio"!==t.type){var n=0,i=e,o=!1,s=a.hasClass(t.elements.container,t.config.classes.loading);if(a.is.boolean(e)||(a.is.event(e)?(o="enterfullscreen"===e.type,i=a.inArray(["mousemove","touchstart","mouseenter","focus"],e.type),a.inArray(["mousemove","touchmove"],e.type)&&(n=2e3),"focus"===e.type&&(n=3e3)):i=a.hasClass(t.elements.container,t.config.classes.hideControls)),window.clearTimeout(t.core.timers.hover),i||t.media.paused||s){if(a.toggleClass(t.elements.container,t.config.classes.hideControls,!1),t.media.paused||s)return;r.touch&&(n=3e3)}return i&&t.media.paused||(t.core.timers.hover=window.setTimeout(function(){(!t.elements.controls.pressed&&!t.elements.controls.hover||o)&&a.toggleClass(t.elements.container,t.config.classes.hideControls,!0)},n)),t}},t.prototype.on=function(e,t){var n=this;return a.on(n.elements.container,e,t),n},t.prototype.supports=function(e){return r.mime(this,e)},t.prototype.destroy=function(e,t){function n(){if(null!==i){if(a.is.boolean(t)||(t=!0),document.body.style.overflow="",t){var n=i.elements.container.parentNode;a.is.htmlElement(n)&&n.replaceChild(i.elements.original,i.elements.container)}i.core.trigger(i.elements.original,"destroyed",!0),a.is.function(e)&&e.call(i.elements.original),i=null}}var i=this;switch(i.type){case"youtube":window.clearInterval(i.core.timers.buffering),window.clearInterval(i.core.timers.playing),i.embed.destroy(),n();break;case"vimeo":i.embed.unload().then(n),window.setTimeout(n,200);break;case"video":case"audio":i.core.toggleNativeControls(!0),n()}},t.prototype.getDuration=function(){var e=this,t=parseInt(e.config.duration),n=0;return null===e.media.duration||isNaN(e.media.duration)||(n=e.media.duration),isNaN(t)?n:t},t}); \ No newline at end of file diff --git a/notes.md b/notes.md index 3adf38c9..4bd9d770 100644 --- a/notes.md +++ b/notes.md @@ -24,6 +24,8 @@ [ ] Start / end options for all players? [ ] Get quality options for HTML5 somehow (multi source?) [ ] Download button - grab first or src attribute (or maybe use currentSrc?) for HTML5 and links for embedded players +[ ] Scale captions size based on video size (in lieu of element queries) +[ ] Allow passing YouTube/Vimeo iframe to setup #### Bugs [ ] Fix audio setup bug when calling `.setup()` again diff --git a/src/js/plyr.js b/src/js/plyr.js index 1d3f7e93..392185dd 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -721,6 +721,12 @@ // Toggle event listener toggleListener: function(elements, events, callback, toggle, passive, capture) { + // Bail if no elements + if (elements === null || utils.is.undefined(elements)) { + return; + } + + // Allow multiple events events = events.split(' '); // Whether the listener is a capturing listener or not @@ -774,16 +780,12 @@ // Bind event handler on: function(element, events, callback, passive, capture) { - if (!utils.is.undefined(element)) { - utils.toggleListener(element, events, callback, true, passive, capture); - } + utils.toggleListener(element, events, callback, true, passive, capture); }, // Unbind event handler off: function(element, events, callback, passive, capture) { - if (!utils.is.undefined(element)) { - utils.toggleListener(element, events, callback, false, passive, capture); - } + utils.toggleListener(element, events, callback, false, passive, capture); }, // Trigger event @@ -1189,8 +1191,8 @@ reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches }; - // Player instance - function Player(media, options) { + // Plyr instance + function Plyr(media, options) { var player = this; var timers = {}; var api = {}; @@ -3403,9 +3405,6 @@ // Setup new source function setup() { - // Reset embed object - player.embed = null; - // Remove media removeElement(player.media); @@ -4111,7 +4110,9 @@ player.ready = true; // Ready event at end of execution stack - trigger(player.elements.container, 'ready', true); + window.setTimeout(function() { + trigger(player.elements.container, 'ready', true); + }, 0); // Autoplay if (player.config.autoplay) { @@ -4120,13 +4121,20 @@ } // Setup a player - function setup(target) { + function setup(media) { // We need an element to setup - if (target === null || utils.is.undefined(target) || !utils.is.htmlElement(target)) { + if (media === null || utils.is.undefined(media) || !utils.is.htmlElement(media)) { error('Setup failed: no suitable element passed'); return; } + // Bail if the element is initialized + if (media.plyr) { + warn('Target already setup'); + player = media.plyr; + return; + } + // Bail if not enabled if (!player.config.enabled) { error('Setup failed: disabled by config'); @@ -4140,21 +4148,18 @@ return; } - // Bail if the element is initialized - if (target.plyr) { - log('Target already setup'); - return target.plyr; - } + // Cache original element state for .destroy() + player.elements.original = media.cloneNode(true); // Set media type based on tag or data attribute // Supported: video, audio, vimeo, youtube - var type = target.tagName.toLowerCase(); + var type = media.tagName.toLowerCase(); // Different setup based on type switch (type) { case 'div': - player.type = target.getAttribute('data-type'); - player.embedId = target.getAttribute('data-video-id'); + player.type = media.getAttribute('data-type'); + player.embedId = media.getAttribute('data-video-id'); if (utils.is.empty(player.type)) { error('Setup failed: embed type missing'); @@ -4167,26 +4172,26 @@ } // Clean up - target.removeAttribute('data-type'); - target.removeAttribute('data-video-id'); + media.removeAttribute('data-type'); + media.removeAttribute('data-video-id'); break; case 'iframe': - // Do something with the iframe + // TODO: Handle passing an iframe for true progressive enhancement break; case 'video': case 'audio': player.type = type; - player.config.crossorigin = target.getAttribute('crossorigin') !== null; - player.config.autoplay = player.config.autoplay || (target.getAttribute('autoplay') !== null); - player.config.inline = target.getAttribute('playsinline') !== null; - player.config.loop.active = player.config.loop || (target.getAttribute('loop') !== null); + player.config.crossorigin = media.getAttribute('crossorigin') !== null; + player.config.autoplay = player.config.autoplay || (media.getAttribute('autoplay') !== null); + player.config.inline = media.getAttribute('playsinline') !== null; + player.config.loop.active = player.config.loop || (media.getAttribute('loop') !== null); break; default: error('Setup failed: unsupported type'); - return false; + return; } // Sniff out the browser @@ -4201,14 +4206,14 @@ // If no native support, bail if (!player.supported.basic) { error('Setup failed: no support'); - return false; + return; } - // Wrap media - player.elements.container = utils.wrap(target, utils.createElement('div')); + // Store reference + media.plyr = player; - // Cache original element state for .destroy() - player.elements.original = target.cloneNode(true); + // Wrap media + player.elements.container = utils.wrap(media, utils.createElement('div')); // Allow focus to be captured player.elements.container.setAttribute('tabindex', 0); @@ -4227,7 +4232,7 @@ var events = player.config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']); utils.on(player.elements.container, events.join(' '), function(event) { - log(['event:', event.type].join(' ').trim()); + log('event: ' + event.type); }); } @@ -4273,7 +4278,7 @@ // API // --------------------------------------- // Play - Player.prototype.play = function() { + Plyr.prototype.play = function() { var player = this; if ('play' in player.media) { @@ -4285,7 +4290,7 @@ }; // Pause - Player.prototype.pause = function() { + Plyr.prototype.pause = function() { var player = this; if ('pause' in player.media) { @@ -4297,7 +4302,7 @@ }; // Toggle playback - Player.prototype.togglePlay = function(toggle) { + Plyr.prototype.togglePlay = function(toggle) { var player = this; // True toggle if nothing passed @@ -4315,7 +4320,7 @@ }; // Stop - Player.prototype.stop = function() { + Plyr.prototype.stop = function() { var player = this; player.restart(); @@ -4326,7 +4331,7 @@ }; // Restart - Player.prototype.restart = function() { + Plyr.prototype.restart = function() { var player = this; // Seek to 0 @@ -4337,7 +4342,7 @@ }; // Rewind - Player.prototype.rewind = function(seekTime) { + Plyr.prototype.rewind = function(seekTime) { var player = this; // Use default if needed @@ -4352,7 +4357,7 @@ }; // Fast forward - Player.prototype.forward = function(seekTime) { + Plyr.prototype.forward = function(seekTime) { var player = this; // Use default if needed @@ -4368,7 +4373,7 @@ // Seek to time // The input parameter can be an event or a number - Player.prototype.seek = function(input) { + Plyr.prototype.seek = function(input) { var player = this; var targetTime = 0; var paused = player.media.paused; @@ -4389,11 +4394,6 @@ player.core.updateSeekDisplay(targetTime); // Set the current time - // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans - try { - player.media.currentTime = targetTime.toFixed(4); - } catch (e) {} - // Embeds if (utils.inArray(types.embed, player.type)) { switch (player.type) { @@ -4423,6 +4423,8 @@ // Trigger seeking player.core.trigger(player.media, 'seeking'); + } else { + player.media.currentTime = targetTime.toFixed(4); } // Logging @@ -4433,7 +4435,7 @@ }; // Set volume - Player.prototype.setVolume = function(volume) { + Plyr.prototype.setVolume = function(volume) { var player = this; var max = 10; var min = 0; @@ -4494,7 +4496,7 @@ }; // Increase volume - Player.prototype.increaseVolume = function(step) { + Plyr.prototype.increaseVolume = function(step) { var player = this; var volume = player.media.muted ? 0 : (player.media.volume * 10); @@ -4509,7 +4511,7 @@ }; // Decrease volume - Player.prototype.decreaseVolume = function(step) { + Plyr.prototype.decreaseVolume = function(step) { var player = this; var volume = player.media.muted ? 0 : (player.media.volume * 10); @@ -4524,7 +4526,7 @@ }; // Toggle mute - Player.prototype.toggleMute = function(muted) { + Plyr.prototype.toggleMute = function(muted) { var player = this; // If the method is called without parameter, toggle based on current value @@ -4566,7 +4568,7 @@ }; // Set playback speed - Player.prototype.setSpeed = function(speed) { + Plyr.prototype.setSpeed = function(speed) { var player = this; // Load speed from storage or default value @@ -4606,7 +4608,7 @@ // Toggle loop // TODO: Finish logic // TODO: Set the indicator on load as user may pass loop as config - Player.prototype.loop = function(type) { + Plyr.prototype.loop = function(type) { var player = this; // Set default to be a true toggle @@ -4689,7 +4691,7 @@ }; // Add common function to retrieve media source - Player.prototype.source = function(source) { + Plyr.prototype.source = function(source) { var player = this; // If object or string, parse it @@ -4727,7 +4729,7 @@ }; // Set or get poster - Player.prototype.poster = function(source) { + Plyr.prototype.poster = function(source) { var player = this; if (!utils.is.string(source)) { @@ -4743,7 +4745,7 @@ }; // Toggle captions - Player.prototype.toggleCaptions = function(show) { + Plyr.prototype.toggleCaptions = function(show) { var player = this; // If there's no full support, or there's no caption toggle @@ -4778,7 +4780,7 @@ }; // Select active caption - Player.prototype.language = function(language) { + Plyr.prototype.language = function(language) { var player = this; if (utils.is.string(language)) { @@ -4801,7 +4803,7 @@ // Toggle fullscreen // Requires user input event - Player.prototype.toggleFullscreen = function(event) { + Plyr.prototype.toggleFullscreen = function(event) { var player = this; // Save scroll position @@ -4873,7 +4875,7 @@ // Toggle picture-in-picture // TODO: update player with state, support, enabled // TODO: detect outside changes - Player.prototype.togglePictureInPicture = function(toggle) { + Plyr.prototype.togglePictureInPicture = function(toggle) { var player = this; var states = { pip: 'picture-in-picture', @@ -4899,7 +4901,7 @@ // Trigger airplay // TODO: update player with state, support, enabled - Player.prototype.airPlay = function() { + Plyr.prototype.airPlay = function() { var player = this; // Bail if no support @@ -4915,7 +4917,7 @@ }; // Show the player controls in fullscreen mode - Player.prototype.toggleControls = function(toggle) { + Plyr.prototype.toggleControls = function(toggle) { var player = this; // Don't hide if config says not to, it's audio, or not ready or loading @@ -4987,9 +4989,10 @@ }; // Event listener - Player.prototype.on = function(event, callback) { + Plyr.prototype.on = function(event, callback) { var player = this; + // Listen for events on container utils.on(player.elements.container, event, callback); // Allow chaining @@ -4997,14 +5000,14 @@ }; // Check for support - Player.prototype.supports = function(mimeType) { + Plyr.prototype.supports = function(mimeType) { return support.mime(this, mimeType); }; // Destroy an instance // Event listeners are removed when elements are removed // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory - Player.prototype.destroy = function(callback, restore) { + Plyr.prototype.destroy = function(callback, restore) { var player = this; // Type specific stuff @@ -5045,7 +5048,7 @@ function done() { // Bail if already destroyed - if (!player.ready) { + if (player === null) { return; } @@ -5066,9 +5069,6 @@ } } - // Remove ready state - player.ready = false; - // Event player.core.trigger(player.elements.original, 'destroyed', true); @@ -5076,14 +5076,14 @@ if (utils.is.function(callback)) { callback.call(player.elements.original); } - } - // Allow chaining - return player; + // Allow chaining + player = null; + } }; // Get the duration (or custom if set) - Player.prototype.getDuration = function() { + Plyr.prototype.getDuration = function() { var player = this; // It should be a number, but parse it just incase @@ -5101,5 +5101,5 @@ return (isNaN(duration) ? mediaDuration : duration); }; - return Player; + return Plyr; }); diff --git a/src/less/variables.less b/src/less/variables.less index 621eca27..48d23b6b 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -9,7 +9,7 @@ @plyr-sr-only-important: true; // Colors -@plyr-color-main: #3498db; +@plyr-color-main: #22b5ff; // Font @plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;