From 86c900418322353239a40fe2e061a3f2fbc786dc Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 22 May 2017 08:55:45 +1000 Subject: [PATCH] More work on the menu --- demo/dist/demo.js | 2 +- demo/src/js/main.js | 14 ++-- dist/plyr.css | 2 +- dist/plyr.js | 4 +- notes.md | 17 +++-- src/js/plyr.js | 175 +++++++++++++++++++++++++++----------------- src/less/plyr.less | 14 +--- 7 files changed, 134 insertions(+), 94 deletions(-) diff --git a/demo/dist/demo.js b/demo/dist/demo.js index 52bc77bb..322d73bc 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.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)}}(),document.domain.indexOf("plyr.io")>-1&&(!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)}}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.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/src/js/main.js b/demo/src/js/main.js index 2a94195d..87c71756 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -1,12 +1,11 @@ // ========================================================================== // Plyr.io demo -// This code is purely for the plyr.io website +// This code is purely for the https://plyr.io website // Please see readme.md in the root or github.com/sampotts/plyr // ========================================================================== /*global Plyr*/ -// General functions (function() { /*document.body.addEventListener('ready', function(event) { console.log(event); @@ -186,15 +185,16 @@ })(); // Google analytics -// For demo site (http://[www.]plyr.io) only -if (document.domain.indexOf('plyr.io') > -1) { +// For demo site (https://plyr.io) only +if (window.location.host === 'plyr.io') { (function(i, s, o, g, r, a, m) { i.GoogleAnalyticsObject = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) - }, i[r].l = 1 * new Date(); - a = s.createElement(o), - m = s.getElementsByTagName(o)[0]; + }; + i[r].l = 1 * new Date(); + a = s.createElement(o); + m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) diff --git a/dist/plyr.css b/dist/plyr.css index 6e73e410..2c3244a0 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__container.is-resizing,.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 .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:-5px;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::after{content:"";position:absolute;top:100%;right:15px;height:0;width:0;border:6px 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:5px 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:5px;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:#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 diff --git a/dist/plyr.js b/dist/plyr.js index dc28f5d8..36a8f22c 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1,2 +1,2 @@ -!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define([],function(){return t(e,document)}):e.Plyr=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(n,u){function c(e,t,n,s){i.event(e,t,n,i.extend({},s,{plyr:Ve}))}function d(e){return Me.elements.container.querySelectorAll(e)}function p(e){return d(e)[0]}function m(e){i.is.string(e)?(i.removeElement(Me.elements[e]),Me.elements[e]=null):i.removeElement(e)}function f(){function e(e){9===e.which&&Me.fullscreen.active&&(e.target!==s||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),s.focus()):(e.preventDefault(),n.focus()))}var t=d("input:not([disabled]), button:not([disabled])"),n=t[0],s=t[t.length-1];i.on(Me.elements.container,"keydown",e,!1)}function y(e,t){i.is.string(t)?i.insertElement(e,Me.elements.media,{src:t}):i.is.array(t)&&t.forEach(function(t){i.insertElement(e,Me.elements.media,t)})}function g(){return{url:De.iconUrl,absolute:0===De.iconUrl.indexOf("http")||Me.browser.isIE}}function b(e,n){var s="http://www.w3.org/2000/svg",a=g(),l=(a.absolute?"":a.url)+"#"+De.iconPrefix,r=t.createElementNS(s,"svg");i.setAttributes(r,i.extend(n,{role:"presentation"}));var o=t.createElementNS(s,"use");return o.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",l+"-"+e),r.appendChild(o),r}function v(e){var t=De.i18n[e];switch(e){case"pip":t="PIP";break;case"airplay":t="AirPlay"}return i.createElement("span",{class:De.classes.hidden},t)}function h(e){var t=i.createElement("span",{class:De.classes.menu.value});return t.appendChild(i.createElement("span",{class:De.classes.menu.badge},e)),t}function k(e,t){var n,s,a,l=i.createElement("button");switch(i.is.object(t)||(t={}),"class"in t?t.class.indexOf(De.classes.control)===-1&&(t.class+=" "+De.classes.control):t.class=De.classes.control,e){case"mute":a="toggleMute",n="volume",s="muted";break;case"captions":a="toggleCaptions",n="captions-off",s="captions-on";break;case"fullscreen":a="toggleFullscreen",n="enter-fullscreen",s="exit-fullscreen";break;case"play-large":t.class="plyr__play-large",e="play",a="play",n="play";break;default:a=e,n=e}return i.extend(t,i.getAttributesFromSelector(De.selectors.buttons[e],t)),i.is.string(s)&&l.appendChild(b(s,{class:"icon--"+s})),l.appendChild(b(n)),l.appendChild(v(a)),i.setAttributes(l,t),Me.elements.buttons[e]=l,l}function C(e,t){var n=i.createElement("label",{for:t.id,class:De.classes.hidden},De.i18n[e]),s=i.createElement("input",i.extend(i.getAttributesFromSelector(De.selectors.inputs[e]),{type:"range",min:0,max:100,step:.1,value:0,autocomplete:"off"},t));return Me.elements.inputs[e]=s,{label:n,input:s}}function E(e,t){var n=i.createElement("progress",i.extend(i.getAttributesFromSelector(De.selectors.display[e]),{min:0,max:100,value:0},t));if("volume"!==e){n.appendChild(i.createElement("span",null,"0"));var s="";switch(e){case"played":s=De.i18n.played;break;case"buffer":s=De.i18n.buffered}n.textContent="% "+s.toLowerCase()}return Me.elements.display[e]=n,n}function A(e){var t=i.createElement("span",{class:"plyr__time"});return t.appendChild(i.createElement("span",{class:De.classes.hidden},De.i18n[e])),t.appendChild(i.createElement("span",i.getAttributesFromSelector(De.selectors.display[e]),"00:00")),Me.elements.display[e]=t,t}function w(e){var t=i.createElement("div",i.getAttributesFromSelector(De.selectors.controls.wrapper));if(i.inArray(De.controls,"restart")&&t.appendChild(k("restart")),i.inArray(De.controls,"rewind")&&t.appendChild(k("rewind")),i.inArray(De.controls,"play")&&(t.appendChild(k("play")),t.appendChild(k("pause"))),i.inArray(De.controls,"fast-forward")&&t.appendChild(k("fast-forward")),i.inArray(De.controls,"progress")){var n=i.createElement("span",i.getAttributesFromSelector(De.selectors.progress)),s=C("seek",{id:"plyr-seek-"+e.id});if(n.appendChild(s.label),n.appendChild(s.input),n.appendChild(E("played")),n.appendChild(E("buffer")),De.tooltips.seek){var a=i.createElement("span",{role:"tooltip",class:De.classes.tooltip},"00:00");n.appendChild(a),Me.elements.display.seekTooltip=a}Me.elements.progress=n,t.appendChild(Me.elements.progress)}if(i.inArray(De.controls,"current-time")&&t.appendChild(A("currentTime")),i.inArray(De.controls,"duration")&&t.appendChild(A("duration")),i.inArray(De.controls,"mute")&&t.appendChild(k("mute")),i.inArray(De.controls,"volume")){var l=i.createElement("span",{class:"plyr__volume"}),r={max:10,value:De.volume},u=C("volume",i.extend(r,{id:"plyr-volume-"+e.id}));l.appendChild(u.label),l.appendChild(u.input);var c=E("volume",r);l.appendChild(c),t.appendChild(l)}if(i.inArray(De.controls,"captions")&&t.appendChild(k("captions")),i.inArray(De.controls,"settings")){var d=i.createElement("div",{class:"plyr__menu"});d.appendChild(k("settings",{id:"plyr-settings-toggle-"+e.id,"aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id,"aria-expanded":!1}));var p=i.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=i.createElement("div"),f=i.createElement("div",{id:"plyr-settings-"+e.id+"-home","aria-hidden":!1,"aria-labelled-by":"plyr-settings-toggle-"+e.id,role:"tabpanel"}),y=i.createElement("ul",{role:"tablist"});["captions","quality","speed","loop"].forEach(function(t){var n=i.createElement("li",{role:"tab"}),s=i.createElement("button",i.extend(i.getAttributesFromSelector(De.selectors.buttons.settings),{type:"button",class:De.classes.control+" "+De.classes.control+"--forward",id:"plyr-settings-"+e.id+"-"+t+"-tab","aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id+"-"+t,"aria-expanded":!1}),De.i18n[t]),a=i.createElement("span",{class:De.classes.menu.value});a.innerHTML=e[t],s.appendChild(a),n.appendChild(s),y.appendChild(n),Me.elements.settings.tabs[t]=n}),f.appendChild(y),m.appendChild(f),["captions","quality","speed","loop"].forEach(function(t){var n=i.createElement("div",{id:"plyr-settings-"+e.id+"-"+t,"aria-hidden":!0,"aria-labelled-by":"plyr-settings-"+e.id+"-"+t+"-tab",role:"tabpanel",tabindex:-1}),s=i.createElement("button",{type:"button",class:De.classes.control+" "+De.classes.control+"--back","aria-haspopup":!0,"aria-controls":"plyr-settings-"+e.id+"-home","aria-expanded":!1},De.i18n[t]);n.appendChild(s);var a=i.createElement("ul");n.appendChild(a),m.appendChild(n),Me.elements.settings.panes[t]=n}),p.appendChild(m),d.appendChild(p),t.appendChild(d),Me.elements.settings.form=p,Me.elements.settings.menu=d}return i.inArray(De.controls,"pip")&&o.pip&&t.appendChild(k("pip")),i.inArray(De.controls,"airplay")&&o.airplay&&t.appendChild(k("airplay")),i.inArray(De.controls,"fullscreen")&&t.appendChild(k("fullscreen")),Me.elements.controls=t,T(),F(),t}function S(e,n){function s(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?h(t):null}function a(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 l=Me.elements.settings.panes.quality.querySelector("ul");i.emptyElement(l),i.is.array(e)&&!i.is.empty(e)&&e.filter(function(e){return!i.inArray(["tiny","small"],e)}).forEach(function(e){var n=i.createElement("li"),r=i.createElement("label",{class:De.classes.control,for:"plyr-quality-"+e}),o=i.createElement("input",i.extend(i.getAttributesFromSelector(De.selectors.inputs.quality),{type:"radio",id:"plyr-quality-"+e,name:"plyr-quality",value:e}));e===De.quality.selected&&o.setAttribute("checked",""),r.appendChild(o),r.appendChild(t.createTextNode(a(e)));var u=s(e);i.is.htmlElement(u)&&r.appendChild(u),n.appendChild(r),l.appendChild(n)})}function T(){var e=["start","end","all","reset"],t=Me.elements.settings.panes.loop.querySelector("ul");i.emptyElement(t),e.forEach(function(e){var n=i.createElement("li"),s=i.createElement("button",i.extend(i.getAttributesFromSelector(De.selectors.buttons.loop),{type:"button",class:De.classes.control,"data-plyr-loop-action":e}),De.i18n[e]);if(i.inArray(["start","end"],e)){var a=h("0:00");s.appendChild(a)}n.appendChild(s),t.appendChild(n)})}function x(){var e=Me.elements.settings.panes.captions.querySelector("ul");if(i.emptyElement(e),!i.is.empty(Me.captions.tracks)){var n=[].map.call(Me.captions.tracks,function(e){return{language:e.language,badge:!0,label:i.is.empty(e.label)?e.language.toUpperCase():e.label}});n.unshift({language:"off",label:De.i18n.none}),n.forEach(function(n){var s=i.createElement("li"),a=i.createElement("label",{class:De.classes.control,for:"plyr-language-"+n.language}),l=i.createElement("input",i.extend(i.getAttributesFromSelector(De.selectors.inputs.language),{type:"radio",id:"plyr-language-"+n.language,name:"plyr-language",value:n.language}));n.language===De.captions.language.toLowerCase()&&l.setAttribute("checked",""),a.appendChild(l),a.appendChild(t.createTextNode(n.label||n.language)),n.badge&&a.appendChild(h(n.language.toUpperCase())),s.appendChild(a),e.appendChild(s)})}}function F(e){var t=Me.elements.settings.panes.speed.querySelector("ul");i.emptyElement(t),i.is.array(e)||(e=De.speed.options),e.forEach(function(e){var n=i.createElement("li"),s=i.createElement("label",{class:De.classes.control,for:"plyr-speed-"+e.toString().replace(".","-")}),a=i.createElement("input",i.extend(i.getAttributesFromSelector(De.selectors.inputs.speed),{type:"radio",id:"plyr-speed-"+e.toString().replace(".","-"),name:"plyr-speed",value:e}));e===De.speed.selected&&a.setAttribute("checked",""),s.appendChild(a),s.insertAdjacentHTML("beforeend","×"+e),n.appendChild(s),t.appendChild(n)})}function I(){if(Me.supported.full&&("audio"!==Me.type||De.fullscreen.allowAudio)&&De.fullscreen.enabled){var e=o.fullscreen;e||De.fullscreen.fallback&&!i.inFrame()?(Re((e?"Native":"Fallback")+" fullscreen enabled"),i.toggleClass(Me.elements.container,De.classes.fullscreen.enabled,!0)):Re("Fullscreen not supported and fallback disabled"),Me.elements.buttons&&Me.elements.buttons.fullscreen&&i.toggleState(Me.elements.buttons.fullscreen,!1),f()}}function P(e){if(i.inArray(["video","vimeo"],Me.type)&&("video"!==Me.type||o.textTracks)&&(i.is.htmlElement(Me.elements.captions)||(Me.elements.captions=i.createElement("div",i.getAttributesFromSelector(De.selectors.captions)),i.insertAfter(Me.elements.captions,Me.elements.wrapper)),Me.captions.tracks=i.is.array(e)?e:Me.elements.media.textTracks,i.toggleClass(Me.elements.container,De.classes.captions.enabled,!i.is.empty(Me.captions.tracks)),!i.is.empty(Me.captions.tracks))){if(O(),"video"===Me.type){var t=De.captions.language.toLowerCase();[].forEach.call(Me.captions.tracks,function(e){i.off(e,"cuechange",N),e.mode="hidden",e.language===t&&(Me.captions.currentTrack=e)}),i.is.track(Me.captions.currentTrack)||(Be("No language found to match "+t+" in tracks"),Me.captions.currentTrack=Me.captions.tracks[0]);var n=Me.captions.currentTrack;i.is.track(n)&&i.inArray(["captions","subtitles"],n.kind)&&(i.on(n,"cuechange",N),n.activeCues&&n.activeCues.length>0&&N(n))}x()}}function _(){return!o.textTracks||i.is.empty(Me.captions.tracks)?"No Subs":Me.captions.enabled?Me.captions.currentTrack.label:"Disabled"}function N(e){i.is.event(e)&&(e=e.target);var t=e.activeCues[0];i.is.cue(t)?q(t.getCueAsHTML()):q()}function L(e){i.is.string(e)?De.captions.language=e.toLowerCase():i.is.event(e)&&(De.captions.language=e.target.value.toLowerCase()),q(),P()}function q(e){if(i.is.htmlElement(Me.elements.captions)){var t=i.createElement("span");i.emptyElement(Me.elements.captions),i.is.undefined(e)&&(e=""),i.is.string(e)?t.textContent=e.trim():t.appendChild(e),Me.elements.captions.appendChild(t)}else Be("No captions element to render to")}function O(){if(Me.elements.buttons.captions){var e=Me.storage.captions;i.is.boolean(e)?De.captions.active=e:e=De.captions.active,e&&(i.toggleClass(Me.elements.container,De.classes.captions.active,!0),i.toggleState(Me.elements.buttons.captions,!0))}}function M(e){Me.supported.full&&Me.elements.buttons.captions&&(i.is.boolean(e)||(e=Me.elements.container.className.indexOf(De.classes.captions.active)===-1),Me.captions.enabled=e,i.toggleState(Me.elements.buttons.captions,Me.captions.enabled),i.toggleClass(Me.elements.container,De.classes.captions.active,Me.captions.enabled),c(Me.elements.container,Me.captions.enabled?"captionsenabled":"captionsdisabled",!0),W({captions:Me.captions.enabled}))}function j(){if(De.loadSprite){var e=g();e.absolute?(Re("AJAX loading absolute SVG sprite"+(Me.browser.isIE?" (due to IE)":"")),i.loadSprite(e.url,"sprite-plyr")):Re("Sprite will be used as external resource directly")}i.inArray(De.controls,"play-large")&&(Me.elements.buttons.playLarge=k("play-large"),Me.elements.container.appendChild(Me.elements.buttons.playLarge)),Me.id=Math.floor(1e4*Math.random());var n=null;n=i.is.string(De.controls)?De.controls:i.is.function(De.controls)?De.controls({id:Me.id,seektime:De.seekTime}):w({id:Me.id,seektime:De.seekTime,speed:te(),quality:"HD",captions:_(),loop:"None"});var s;if(i.is.string(De.selectors.controls.container)&&(s=t.querySelector(De.selectors.controls.container)),i.is.htmlElement(s)||(s=Me.elements.container),i.is.htmlElement(n)?s.appendChild(n):s.insertAdjacentHTML("beforeend",n),i.is.htmlElement(Me.elements.controls)&&V(),De.tooltips.controls)for(var a=d([De.selectors.controls.wrapper," ",De.selectors.labels," .",De.classes.hidden].join("")),l=a.length-1;l>=0;l--){var r=a[l];i.toggleClass(r,De.classes.hidden,!1),i.toggleClass(r,De.classes.tooltip,!0)}}function V(){try{return Me.elements.controls=p(De.selectors.controls.wrapper),Me.elements.buttons={play:d(De.selectors.buttons.play),pause:p(De.selectors.buttons.pause),restart:p(De.selectors.buttons.restart),rewind:p(De.selectors.buttons.rewind),forward:p(De.selectors.buttons.forward),mute:p(De.selectors.buttons.mute),pip:p(De.selectors.buttons.pip),airplay:p(De.selectors.buttons.airplay),settings:p(De.selectors.buttons.settings),captions:p(De.selectors.buttons.captions),fullscreen:p(De.selectors.buttons.fullscreen)},Me.elements.progress=p(De.selectors.progress),Me.elements.inputs={seek:p(De.selectors.inputs.seek),volume:p(De.selectors.inputs.volume)},Me.elements.display={buffer:p(De.selectors.display.buffer),played:p(De.selectors.display.played),volume:p(De.selectors.display.volume),duration:p(De.selectors.display.duration),currentTime:p(De.selectors.display.currentTime)},i.is.htmlElement(Me.elements.progress)&&(Me.elements.display.seekTooltip=Me.elements.progress.querySelector("."+De.classes.tooltip)),!0}catch(e){return Be("It looks like there is a problem with your custom controls HTML",e),R(!0),!1}}function D(){i.toggleClass(Me.elements.container,De.selectors.container.replace(".",""),Me.supported.full)}function R(e){e&&i.inArray(l.html5,Me.type)?Me.elements.media.setAttribute("controls",""):Me.elements.media.removeAttribute("controls")}function B(e){var t=De.i18n.play;if(i.is.string(De.title)&&!i.is.empty(De.title)&&(t+=", "+De.title,Me.elements.container.setAttribute("aria-label",De.title)),Me.supported.full&&(i.is.htmlElement(Me.elements.buttons.play)&&Me.elements.buttons.play.setAttribute("aria-label",t),i.is.htmlElement(Me.elements.buttons.playLarge)&&Me.elements.buttons.playLarge.setAttribute("aria-label",t)),i.is.htmlElement(e)){var n=i.is.string(De.title)&&!i.is.empty(De.title)?De.title:"video";e.setAttribute("title",De.i18n.frameTitle.replace("{title}",n))}}function H(){var t=null;Me.storage={},o.storage&&De.storage.enabled&&(e.localStorage.removeItem("plyr-volume"),t=e.localStorage.getItem(De.storage.key),t&&(/^\d+(\.\d+)?$/.test(t)?W({volume:parseFloat(t)}):Me.storage=JSON.parse(t)))}function W(t){o.storage&&De.storage.enabled&&(i.extend(Me.storage,t),e.localStorage.setItem(De.storage.key,JSON.stringify(Me.storage)))}function Y(){return Me.elements.media?(Me.supported.full&&(i.toggleClass(Me.elements.container,De.classes.type.replace("{0}",Me.type),!0),i.inArray(l.embed,Me.type)&&i.toggleClass(Me.elements.container,De.classes.type.replace("{0}","video"),!0),i.toggleClass(Me.elements.container,De.classes.pip.enabled,o.pip&&"video"===Me.type),i.toggleClass(Me.elements.container,De.classes.airplay.enabled,o.airplay&&i.inArray(l.html5,Me.type)),i.toggleClass(Me.elements.container,De.classes.stopped,De.autoplay),i.toggleClass(Me.elements.container,De.classes.isIos,Me.browser.isIos),i.toggleClass(Me.elements.container,De.classes.isTouch,o.touch)),i.inArray(["video","youtube","vimeo"],Me.type)&&(Me.elements.wrapper=i.createElement("div",{class:De.classes.videoWrapper}),i.wrap(Me.elements.media,Me.elements.wrapper)),void(i.inArray(l.embed,Me.type)&&U())):void Be("No media element found!")}function U(){var t,n=Me.type+"-"+Math.floor(1e4*Math.random());switch(Me.type){case"youtube":t=i.parseYouTubeId(Me.embedId);break;default:t=Me.embedId}for(var s=d('[id^="'+Me.type+'-"]'),a=s.length-1;a>=0;a--)i.removeElement(s[a]);if(i.toggleClass(Me.elements.wrapper,De.classes.embedWrapper,!0),"youtube"===Me.type)Me.elements.media.setAttribute("id",n),i.is.object(e.YT)?z(t):(i.injectScript(De.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){z(t)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Me.type)if(Me.elements.media.setAttribute("id",n),i.is.object(e.Vimeo))J(t);else{i.injectScript(De.urls.vimeo.api);var l=e.setInterval(function(){i.is.object(e.Vimeo)&&(e.clearInterval(l),J(t))},50)}else if("soundcloud"===Me.type){var r=i.createElement("iframe");r.loaded=!1,i.on(r,"load",function(){r.loaded=!0}),i.setAttributes(r,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+t,id:n}),Me.elements.media.appendChild(r),e.SC||i.injectScript(De.urls.soundcloud.api);var o=e.setInterval(function(){e.SC&&r.loaded&&(e.clearInterval(o),X.call(r))},50)}}function Q(){Me.supported.full&&(Le(),qe()),B(p("iframe"))}function z(t){Me.embed=new e.YT.Player(Me.elements.media.id,{videoId:t,playerVars:{autoplay:De.autoplay?1:0,controls:Me.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:De.captions.active?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,playsinline:1,origin:e.location.href},events:{onError:function(e){c(Me.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(t){var n=t.target;Me.elements.media.play=function(){n.playVideo(),Me.elements.media.paused=!1},Me.elements.media.pause=function(){n.pauseVideo(),Me.elements.media.paused=!0},Me.elements.media.stop=function(){n.stopVideo(),Me.elements.media.paused=!0},Me.elements.media.duration=n.getDuration(),Me.elements.media.paused=!0,Me.elements.media.currentTime=0,Me.elements.media.muted=n.isMuted();var s=n.getPlaybackRate(),a=n.getAvailablePlaybackRates();console.warn(s,a),De.title=n.getVideoData().title,Me.supported.full&&Me.elements.media.setAttribute("tabindex",-1),Q(),c(Me.elements.media,"timeupdate"),c(Me.elements.media,"durationchange"),e.clearInterval(je.buffering),je.buffering=e.setInterval(function(){Me.elements.media.buffered=n.getVideoLoadedFraction(),(null===Me.elements.media.lastBuffered||Me.elements.media.lastBuffered=n)return;De.loop.end=n,De.loop.indicator.end=Me.elements.display.played.value;break;case"all":De.loop.start=0,De.loop.end=Me.elements.media.duration-2,De.loop.indicator.start=0,De.loop.indicator.end=100;break;case"toggle":De.loop.active?(De.loop.start=0,De.loop.end=null):(De.loop.start=0,De.loop.end=Me.elements.media.duration-2);break;default:De.loop.start=0,De.loop.end=null}De.loop.active=i.is.number(De.loop.start)&&i.is.number(De.loop.end);var s=(ke(De.loop.start,p('[data-plyr-loop="start"]')),null);i.is.number(De.loop.end)&&(s=ke(De.loop.end,t.querySelector('[data-loop__value="loopout"]'))),De.loop.active}function ee(e){return i.is.event(e)?e=parseFloat(e.target.value):i.is.number(e)||(e=parseFloat(Me.storage.speed||De.speed.selected)),e<.1&&(e=.1),e>2&&(e=2),i.is.array(De.speed.options)?(De.speed.selected=e,Me.elements.media.playbackRate=e,void W({speed:e})):void Be("Invalid speeds format")}function te(){return De.speed.selected.toFixed(1).toString().replace(".0","")+"×"}function ne(e){i.is.number(e)||(e=De.seekTime),ae(Me.elements.media.currentTime-e)}function se(e){i.is.number(e)||(e=De.seekTime),ae(Me.elements.media.currentTime+e)}function ae(e){var t=0,n=Me.elements.media.paused,s=le();i.is.number(e)?t=e:i.is.event(e)&&i.inArray(["input","change"],e.type)&&(t=e.target.value/e.target.max*s),t<0?t=0:t>s&&(t=s),Ae(t);try{Me.elements.media.currentTime=t.toFixed(4)}catch(e){}if(i.inArray(l.embed,Me.type)){switch(Me.type){case"youtube":Me.embed.seekTo(t);break;case"vimeo":Me.embed.setCurrentTime(t.toFixed(0));break;case"soundcloud":Me.embed.seekTo(1e3*t)}n&&G(),c(Me.elements.media,"timeupdate"),Me.elements.media.seeking=!0,c(Me.elements.media,"seeking")}Re("Seeking to "+Me.elements.media.currentTime+" seconds")}function le(){var e=parseInt(De.duration),t=0;return null===Me.elements.media.duration||isNaN(Me.elements.media.duration)||(t=Me.elements.media.duration),isNaN(e)?t:e}function ie(){i.toggleClass(Me.elements.container,De.classes.playing,!Me.elements.media.paused),i.toggleClass(Me.elements.container,De.classes.stopped,Me.elements.media.paused),Se(Me.elements.media.paused)}function re(){s={x:e.pageXOffset||0,y:e.pageYOffset||0}}function oe(){e.scrollTo(s.x,s.y)}function ue(e){var n=o.fullscreen;if(n){if(!e||e.type!==r.eventType)return r.isFullScreen(Me.elements.container)?r.cancelFullScreen():(re(),r.requestFullScreen(Me.elements.container)),void(Me.fullscreen.active=r.isFullScreen(Me.elements.container));Me.fullscreen.active=r.isFullScreen(Me.elements.container)}else Me.fullscreen.active=!Me.fullscreen.active,t.body.style.overflow=Me.fullscreen.active?"hidden":"";i.toggleClass(Me.elements.container,De.classes.fullscreen.active,Me.fullscreen.active),f(Me.fullscreen.active),Me.elements.buttons&&Me.elements.buttons.fullscreen&&i.toggleState(Me.elements.buttons.fullscreen,Me.fullscreen.active),c(Me.elements.container,Me.fullscreen.active?"enterfullscreen":"exitfullscreen",!0),!Me.fullscreen.active&&n&&oe()}function ce(e){var t=Me.elements.settings.form,n=Me.elements.buttons.settings;if(!t.contains(e.target)){e.target===Me.elements.buttons.settings&&e.stopPropagation();var s="true"===t.getAttribute("aria-hidden");t.setAttribute("aria-hidden",!s),n.setAttribute("aria-expanded",s),s?t.removeAttribute("tabindex"):t.setAttribute("tabindex",-1)}}function de(e){var n=Me.elements.settings.menu,s=e.target,a="false"===s.getAttribute("aria-expanded"),l=t.getElementById(s.getAttribute("aria-controls"));if(i.is.htmlElement(l)){var r="tabpanel"===l.getAttribute("role");if(r){var u,c,d,p=n.querySelector('[role="tabpanel"][aria-hidden="false"]');if(d=p.parentNode,[].forEach.call(n.querySelectorAll('[aria-controls="'+p.getAttribute("id")+'"]'),function(e){e.setAttribute("aria-expanded",!1)}),o.transitions){d.style.width=p.scrollWidth+"px",d.style.height=p.scrollHeight+"px";var m=l.cloneNode(!0);m.style.position="absolute",m.style.opacity=0,m.setAttribute("aria-hidden",!1),d.appendChild(m),u=m.scrollWidth,c=m.scrollHeight,i.removeElement(m);var f=function(e){e.target===d&&i.inArray(["width","height"],e.propertyName)&&(d.style.width="",d.style.height="",i.off(d,i.transitionEnd,f))};i.on(d,i.transitionEnd,f),d.style.width=u+"px",d.style.height=c+"px"}p.setAttribute("aria-hidden",!0),p.setAttribute("tabindex",-1),l.setAttribute("aria-hidden",!a),s.setAttribute("aria-expanded",a),l.removeAttribute("tabindex")}}}function pe(e){if(i.is.boolean(e)||(e=!Me.elements.media.muted),i.toggleState(Me.elements.buttons.mute,e),Me.elements.media.muted=e,0===Me.elements.media.volume&&me(De.volume),i.inArray(l.embed,Me.type)){switch(Me.type){case"youtube":Me.embed[Me.elements.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":Me.embed.setVolume(Me.elements.media.muted?0:parseFloat(De.volume/10))}c(Me.elements.media,"volumechange")}}function me(e){var t=10,n=0;if(i.is.event(e)&&(e=e.target.value),i.is.undefined(e)&&(e=Me.storage.volume),(null===e||isNaN(e))&&(e=De.volume),e>t&&(e=t),e0&&pe()}function fe(e){var t=Me.elements.media.muted?0:10*Me.elements.media.volume;i.is.number(e)||(e=1),me(t+e)}function ye(e){var t=Me.elements.media.muted?0:10*Me.elements.media.volume;i.is.number(e)||(e=1),me(t-e)}function ge(){var e=Me.elements.media.muted?0:10*Me.elements.media.volume;Me.supported.full&&(Me.elements.inputs.volume&&(Me.elements.inputs.volume.value=e),Me.elements.display.volume&&(Me.elements.display.volume.value=e)),W({volume:e}),i.toggleClass(Me.elements.container,De.classes.muted,0===e),Me.supported.full&&Me.elements.buttons.mute&&i.toggleState(Me.elements.buttons.mute,0===e)}function be(e){var t="waiting"===e.type;clearTimeout(je.loading),je.loading=setTimeout(function(){i.toggleClass(Me.elements.container,De.classes.loading,t),Se(t)},t?250:0)}function ve(e){if(Me.supported.full){var t=Me.elements.display.played,n=0,s=le();if(e)switch(e.type){case"timeupdate":case"seeking":if(Me.elements.controls.pressed)return;n=i.getPercentage(Me.elements.media.currentTime,s),"timeupdate"===e.type&&Me.elements.inputs.seek&&(Me.elements.inputs.seek.value=n);break;case"playing":case"progress":t=Me.elements.display.buffer,n=function(){var e=Me.elements.media.buffered;return e&&e.length?i.getPercentage(e.end(0),s):i.is.number(e)?100*e:0}()}i.is.number(De.loop.start)&&i.is.number(De.loop.end)&&Me.elements.media.currentTime>=De.loop.end&&ae(De.loop.start),he(t,n)}}function he(e,t){if(Me.supported.full){if(i.is.undefined(t)&&(t=0),i.is.undefined(e)){if(!i.is.htmlElement(Me.elements.display.buffer))return;e=Me.elements.display.buffer}if(i.is.htmlElement(e)){e.value=t;var n=e.getElementsByTagName("span")[0];i.is.htmlElement(n)&&(n.childNodes[0].nodeValue=t)}}}function ke(e,t){if(t){isNaN(e)&&(e=0);var n=parseInt(e%60),s=parseInt(e/60%60),a=parseInt(e/60/60%60),l=parseInt(le()/60/60%60)>0;n=("0"+n).slice(-2),s=("0"+s).slice(-2);var i=(l?a+":":"")+s+":"+n;return t.textContent=i,i}}function Ce(){if(Me.supported.full){var e=le()||0;!Me.elements.display.duration&&De.displayDuration&&Me.elements.media.paused&&ke(e,Me.elements.display.currentTime),Me.elements.display.duration&&ke(e,Me.elements.display.duration),we()}}function Ee(e){ke(Me.elements.media.currentTime,Me.elements.display.currentTime),e&&"timeupdate"===e.type&&Me.elements.media.seeking||ve(e)}function Ae(e){i.is.number(e)||(e=0);var t=le(),n=i.getPercentage(e,t);Me.elements.progress&&Me.elements.display.played&&(Me.elements.display.played.value=n),Me.elements.buttons&&Me.elements.inputs.seek&&(Me.elements.inputs.seek.value=n); -}function we(e){var t=le();if(De.tooltips.seek&&i.is.htmlElement(Me.elements.inputs.seek)&&i.is.htmlElement(Me.elements.display.seekTooltip)&&0!==t){var n=Me.elements.inputs.seek.getBoundingClientRect(),s=0,a=De.classes.tooltip+"--visible";if(i.is.event(e))s=100/n.width*(e.pageX-n.left);else{if(!i.hasClass(Me.elements.display.seekTooltip,a))return;s=Me.elements.display.seekTooltip.style.left.replace("%","")}s<0?s=0:s>100&&(s=100),ke(t/100*s,Me.elements.display.seekTooltip),Me.elements.display.seekTooltip.style.left=s+"%",i.is.event(e)&&i.inArray(["mouseenter","mouseleave"],e.type)&&i.toggleClass(Me.elements.display.seekTooltip,a,"mouseenter"===e.type)}}function Se(t){if(De.hideControls&&"audio"!==Me.type){var n=0,s=!1,a=t,l=i.hasClass(Me.elements.container,De.classes.loading);if(i.is.boolean(t)||(t&&t.type?(s="enterfullscreen"===t.type,a=i.inArray(["mousemove","touchstart","mouseenter","focus"],t.type),i.inArray(["mousemove","touchmove"],t.type)&&(n=2e3),"focus"===t.type&&(n=3e3)):a=i.hasClass(Me.elements.container,De.classes.hideControls)),e.clearTimeout(je.hover),a||Me.elements.media.paused||l){if(i.toggleClass(Me.elements.container,De.classes.hideControls,!1),Me.elements.media.paused||l)return;o.touch&&(n=3e3)}a&&Me.elements.media.paused||(je.hover=e.setTimeout(function(){(!Me.elements.controls.pressed&&!Me.elements.controls.hover||s)&&i.toggleClass(Me.elements.container,De.classes.hideControls,!0)},n))}}function Te(e){if(!i.is.undefined(e))return void xe(e);var t;switch(Me.type){case"youtube":t=Me.embed.getVideoUrl();break;case"vimeo":Me.embed.getVideoUrl.then(function(e){t=e});break;case"soundcloud":Me.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=Me.elements.media.currentSrc}return t||""}function xe(e){function t(){if(Me.embed=null,m("media"),m("captions"),m("wrapper"),Me.elements.container&&Me.elements.container.removeAttribute("class"),"type"in e&&(Me.type=e.type,"video"===Me.type)){var t=e.sources[0];"type"in t&&i.inArray(l.embed,t.type)&&(Me.type=t.type)}switch(Me.supported=i.checkSupport(Me.type,De.inline),Me.type){case"video":Me.elements.media=i.createElement("video");break;case"audio":Me.elements.media=i.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":Me.elements.media=i.createElement("div"),Me.embedId=e.sources[0].src}i.prependChild(Me.elements.container,Me.elements.media),i.is.boolean(e.autoplay)&&(De.autoplay=e.autoplay),i.inArray(l.html5,Me.type)&&(De.crossorigin&&Me.elements.media.setAttribute("crossorigin",""),De.autoplay&&Me.elements.media.setAttribute("autoplay",""),"poster"in e&&Me.elements.media.setAttribute("poster",e.poster),De.loop.active&&Me.elements.media.setAttribute("loop",""),De.inline&&Me.elements.media.setAttribute("playsinline","")),i.toggleClass(Me.elements.container,De.classes.fullscreen.active,Me.fullscreen.active),i.toggleClass(Me.elements.container,De.classes.captions.active,Me.captions.enabled),D(),i.inArray(l.html5,Me.type)&&y("source",e.sources),Y(),i.inArray(l.html5,Me.type)&&("tracks"in e&&y("track",e.tracks),Me.elements.media.load()),(i.inArray(l.html5,Me.type)||i.inArray(l.embed,Me.type)&&!Me.supported.full)&&(Le(),qe()),De.title=e.title,B()}return i.is.object(e)&&"sources"in e&&e.sources.length?(i.toggleClass(Me.elements.container,De.classes.ready,!1),G(),Ae(),he(),_e(),void Ne(t,!1)):void Be("Invalid source format")}function Fe(e){"video"===Me.type&&Me.elements.media.setAttribute("poster",e)}function Ie(){function n(){var e=K(),t=Me.elements.buttons[e?"play":"pause"],n=Me.elements.buttons[e?"pause":"play"];if(n){var s=i.hasClass(t,De.classes.tabFocus);setTimeout(function(){i.is.htmlElement(n)&&n.focus(),s&&(i.toggleClass(t,De.classes.tabFocus,!1),i.toggleClass(n,De.classes.tabFocus,!0))},100)}}function s(e){return e.keyCode?e.keyCode:e.which}function a(e){i.toggleClass(d("."+De.classes.tabFocus),De.classes.tabFocus,!1),Me.elements.container.contains(e)&&i.toggleClass(e,De.classes.tabFocus,!0)}function l(e){function t(){var e=Me.elements.media.duration;i.is.number(e)&&ae(e/10*(a-48))}var a=s(e),l="keydown"===e.type,r=l&&a===c;if(i.is.number(a))if(l){var u=[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(i.inArray(d,a)){var p=i.getFocusElement();if(i.is.htmlElement(p)&&"radio"===i.getFocusElement().type)return}switch(i.inArray(u,a)&&(e.preventDefault(),e.stopPropagation()),a){case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:r||t();break;case 32:case 75:r||n();break;case 38:fe();break;case 40:ye();break;case 77:r||pe();break;case 39:se();break;case 37:ne();break;case 70:ue();break;case 67:r||M();break;case 73:Z("start");break;case 76:Z();break;case 79:Z("end")}!o.fullscreen&&Me.fullscreen.active&&27===a&&ue(),c=a}else c=null}var u=Me.browser.isIE?"change":"input";if(De.keyboardShortcuts.focused){var c=null;De.keyboardShortcuts.global&&i.on(e,"keydown keyup",function(e){var t=s(e),n=i.getFocusElement(),a=[48,49,50,51,52,53,54,56,57,75,77,70,67,73,76,79];!i.inArray(a,t)||i.is.htmlElement(n)&&i.matches(n,De.selectors.editable)||l(e)},!1),i.on(Me.elements.container,"keydown keyup",l,!1)}i.on(e,"keyup",function(e){var t=s(e),n=i.getFocusElement();9===t&&a(n)}),i.on(t.body,"click",function(){i.toggleClass(p("."+De.classes.tabFocus),De.classes.tabFocus,!1)});for(var m in Me.elements.buttons){var f=Me.elements.buttons[m];i.on(f,"blur",function(){i.toggleClass(f,"tab-focus",!1)})}var y=function(e,t,n){i.is.function(t)&&t.call(this,e),i.is.function(n)&&n.call(this,e)};i.proxy(Me.elements.buttons.play,"click",De.listeners.play,n),i.proxy(Me.elements.buttons.playLarge,"click",De.listeners.play,n),i.proxy(Me.elements.buttons.pause,"click",De.listeners.pause,n),i.proxy(Me.elements.buttons.restart,"click",De.listeners.restart,ae),i.proxy(Me.elements.buttons.rewind,"click",De.listeners.rewind,ne),i.proxy(Me.elements.buttons.forward,"click",De.listeners.forward,se),i.proxy(Me.elements.buttons.mute,"click",De.listeners.mute,pe),i.proxy(Me.elements.buttons.captions,"click",De.listeners.captions,M),i.proxy(Me.elements.buttons.fullscreen,"click",De.listeners.fullscreen,ue),i.proxy(Me.elements.buttons.pip,"click",De.listeners.pip,function(e){o.pip&&Me.elements.media.webkitSetPresentationMode("picture-in-picture"===Me.elements.media.webkitPresentationMode?"inline":"picture-in-picture")}),i.proxy(Me.elements.buttons.airplay,"click",De.listeners.airplay,function(e){o.airplay&&Me.elements.media.webkitShowPlaybackTargetPicker()}),i.on(Me.elements.buttons.settings,"click",ce),i.on(t.body,"click",ce),i.on(Me.elements.settings.form,"click",de),i.on(Me.elements.settings.form,"click",function(e){i.matches(e.target,De.selectors.inputs.language)?y.call(this,e,De.listeners.language,L):i.matches(e.target,De.selectors.inputs.quality)?y.call(this,e,De.listeners.quality,function(){Be("Set quality")}):i.matches(e.target,De.selectors.inputs.speed)?y.call(this,e,De.listeners.speed,ee):i.matches(e.target,De.selectors.buttons.loop)&&y.call(this,e,De.listeners.loop,function(){var t=e.target.getAttribute("data-loop__value")||e.target.getAttribute("data-loop__type");i.inArray(["start","end","all","none"],t)&&Z(t)})}),i.proxy(Me.elements.inputs.seek,u,De.listeners.seek,ae),i.proxy(Me.elements.inputs.volume,u,De.listeners.volume,me),i.on(Me.elements.progress,"mouseenter mouseleave mousemove",we),De.hideControls&&(i.on(Me.elements.container,"mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen",Se),i.on(Me.elements.controls,"mouseenter mouseleave",function(e){Me.elements.controls.hover="mouseenter"===e.type}),i.on(Me.elements.controls,"mousedown mouseup touchstart touchend touchcancel",function(e){Me.elements.controls.pressed=i.inArray(["mousedown","touchstart"],e.type)}),i.on(Me.elements.controls,"focus blur",Se,!0,!0)),i.proxy(Me.elements.inputs.volume,"wheel",De.listeners.volume,function(e){var t=e.webkitDirectionInvertedFromDevice,n=.2,s=0;(e.deltaY<0||e.deltaX>0)&&(t?(ye(n),s=-1):(fe(n),s=1)),(e.deltaY>0||e.deltaX<0)&&(t?(fe(n),s=1):(ye(n),s=-1)),(1===s&&Me.elements.media.volume<1||s===-1&&Me.elements.media.volume>0)&&e.preventDefault()},!1),o.fullscreen&&i.on(t,r.eventType,ue)}function Pe(){if(i.on(Me.elements.media,"timeupdate seeking",Ee),i.on(Me.elements.media,"durationchange loadedmetadata",Ce),i.on(Me.elements.media,"ended",function(){"video"===Me.type&&De.showPosterOnEnd&&("video"===Me.type&&q(),ae(),Me.elements.media.load())}),i.on(Me.elements.media,"progress playing",ve),i.on(Me.elements.media,"volumechange",ge),i.on(Me.elements.media,"play pause ended",ie),i.on(Me.elements.media,"waiting canplay seeked",be),De.clickToPlay&&"audio"!==Me.type){var e=p("."+De.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",i.on(e,"click",function(){De.hideControls&&o.touch&&!Me.elements.media.paused||(Me.elements.media.paused?$():Me.elements.media.ended?(ae(),$()):G())})}De.disableContextMenu&&i.on(Me.elements.media,"contextmenu",function(e){e.preventDefault()},!1),i.on(Me.elements.media,De.events.concat(["keyup","keydown"]).join(" "),function(e){c(Me.elements.container,e.type,!0)})}function _e(){if(i.inArray(l.html5,Me.type)){for(var e=Me.elements.media.querySelectorAll("source"),t=0;t=0;n--){var s=n>0?t.cloneNode(!0):t,a=e[n],l=a.parentNode,i=a.nextSibling;return s.appendChild(a),i?l.insertBefore(s,i):l.appendChild(s),s}},removeElement:function(e){i.is.htmlElement(e)&&i.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,n,s){var a=t.createElement(e);return i.is.object(n)&&i.setAttributes(a,n),i.is.string(s)&&(a.textContent=s),a},insertElement:function(e,t,n,s){var a=i.createElement(e,n,s);i.prependChild(t,a)},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(!i.is.string(e)||i.is.empty(e))return{};var n={};return e.split(",").forEach(function(e){e=e.trim();var s=e.charAt(0);switch(s){case".":var a=e.replace(".","");i.is.object(t)&&i.is.string(t.class)&&(t.class+=" "+a),n.class=a;break;case"#":n.id=e.replace("#","");break;case"[":e=e.replace(/[\[\]]/g,"");var l=e.split("="),r=l[0],o=l.length>1?l[1].replace(/[\"\']/g,""):"";n[r]=o}}),n},toggleClass:function(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(n?" "+t:"")}},hasClass:function(e,t){return!!e&&(e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className))},matches:function(e,n){var s=Element.prototype,a=s.matches||s.webkitMatchesSelector||s.mozMatchesSelector||s.msMatchesSelector||function(e){return[].indexOf.call(t.querySelectorAll(e),this)!==-1};return a.call(e,n)},getFocusElement:function(){var e=t.activeElement;return e=e&&e!==t.body?t.querySelector(":focus"):null},proxy:function(e,t,n,s,a,l){i.on(e,t,function(t){n&&n.apply(e,[t]),s.apply(e,[t])},a,l)},toggleListener:function(e,t,n,s,a,l){if(t=t.split(" "),i.is.boolean(l)||(l=!1),i.is.boolean(a)||(a=!0),e instanceof NodeList){var r=1===arguments.length?[arguments[0]]:Array.apply(null,arguments);return r.shift(),void[].forEach.call(e,function(e){e instanceof Node&&i.toggleListener.apply(null,[e].concat(r))})}var u=l;o.passiveListeners&&(u={passive:a,capture:l}),t.forEach(function(t){e[s?"addEventListener":"removeEventListener"](t,n,u)})},on:function(e,t,n,s,a){i.is.undefined(e)||i.toggleListener(e,t,n,!0,s,a)},off:function(e,t,n,s,a){i.is.undefined(e)||i.toggleListener(e,t,n,!1,s,a)},event:function(n,s,a,l){if(n&&s){i.is.boolean(a)||(a=!1);var r;i.is.function(e.CustomEvent)?r=e.CustomEvent:(r=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var s=t.createEvent("CustomEvent");return s.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),s},r.prototype=e.Event.prototype);var o=new r(s,{bubbles:a,detail:l});n.dispatchEvent(o)}},toggleState:function(e,t){if(e)return t=i.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);i.is.object(t)||(t={});for(var n=e.length,s=0;s0&&N(n))}x()}}function _(){return!o.textTracks||i.is.empty(je.captions.tracks)?"No Subs":je.captions.enabled?je.captions.currentTrack.label:"Disabled"}function N(e){i.is.event(e)&&(e=e.target);var t=e.activeCues[0];i.is.cue(t)?q(t.getCueAsHTML()):q()}function L(e){i.is.string(e)?Re.captions.language=e.toLowerCase():i.is.event(e)&&(Re.captions.language=e.target.value.toLowerCase()),q(),P()}function q(e){if(i.is.htmlElement(je.elements.captions)){var t=i.createElement("span");i.emptyElement(je.elements.captions),i.is.undefined(e)&&(e=""),i.is.string(e)?t.textContent=e.trim():t.appendChild(e),je.elements.captions.appendChild(t)}else He("No captions element to render to")}function O(){if(je.elements.buttons.captions){var e=je.storage.captions;i.is.boolean(e)?Re.captions.active=e:e=Re.captions.active,e&&(i.toggleClass(je.elements.container,Re.classes.captions.active,!0),i.toggleState(je.elements.buttons.captions,!0))}}function M(e){je.supported.full&&je.elements.buttons.captions&&(i.is.boolean(e)||(e=je.elements.container.className.indexOf(Re.classes.captions.active)===-1),je.captions.enabled=e,i.toggleState(je.elements.buttons.captions,je.captions.enabled),i.toggleClass(je.elements.container,Re.classes.captions.active,je.captions.enabled),c(je.elements.container,je.captions.enabled?"captionsenabled":"captionsdisabled",!0),W({captions:je.captions.enabled}))}function j(){if(Re.loadSprite){var e=g();e.absolute?(Be("AJAX loading absolute SVG sprite"+(je.browser.isIE?" (due to IE)":"")),i.loadSprite(e.url,"sprite-plyr")):Be("Sprite will be used as external resource directly")}i.inArray(Re.controls,"play-large")&&(je.elements.buttons.playLarge=k("play-large"),je.elements.container.appendChild(je.elements.buttons.playLarge)),je.id=Math.floor(1e4*Math.random());var n=null;n=i.is.string(Re.controls)?Re.controls:i.is.function(Re.controls)?Re.controls({id:je.id,seektime:Re.seekTime}):w({id:je.id,seektime:Re.seekTime,speed:te(),quality:"HD",captions:_(),loop:"None"});var s;if(i.is.string(Re.selectors.controls.container)&&(s=t.querySelector(Re.selectors.controls.container)),i.is.htmlElement(s)||(s=je.elements.container),i.is.htmlElement(n)?s.appendChild(n):s.insertAdjacentHTML("beforeend",n),i.is.htmlElement(je.elements.controls)&&V(),Re.tooltips.controls)for(var a=d([Re.selectors.controls.wrapper," ",Re.selectors.labels," .",Re.classes.hidden].join("")),l=a.length-1;l>=0;l--){var r=a[l];i.toggleClass(r,Re.classes.hidden,!1),i.toggleClass(r,Re.classes.tooltip,!0)}}function V(){try{return je.elements.controls=p(Re.selectors.controls.wrapper),je.elements.buttons={play:d(Re.selectors.buttons.play),pause:p(Re.selectors.buttons.pause),restart:p(Re.selectors.buttons.restart),rewind:p(Re.selectors.buttons.rewind),forward:p(Re.selectors.buttons.forward),mute:p(Re.selectors.buttons.mute),pip:p(Re.selectors.buttons.pip),airplay:p(Re.selectors.buttons.airplay),settings:p(Re.selectors.buttons.settings),captions:p(Re.selectors.buttons.captions),fullscreen:p(Re.selectors.buttons.fullscreen)},je.elements.progress=p(Re.selectors.progress),je.elements.inputs={seek:p(Re.selectors.inputs.seek),volume:p(Re.selectors.inputs.volume)},je.elements.display={buffer:p(Re.selectors.display.buffer),played:p(Re.selectors.display.played),volume:p(Re.selectors.display.volume),duration:p(Re.selectors.display.duration),currentTime:p(Re.selectors.display.currentTime)},i.is.htmlElement(je.elements.progress)&&(je.elements.display.seekTooltip=je.elements.progress.querySelector("."+Re.classes.tooltip)),!0}catch(e){return He("It looks like there is a problem with your custom controls HTML",e),R(!0),!1}}function D(){i.toggleClass(je.elements.container,Re.selectors.container.replace(".",""),je.supported.full)}function R(e){e&&i.inArray(l.html5,je.type)?je.elements.media.setAttribute("controls",""):je.elements.media.removeAttribute("controls")}function B(e){var t=Re.i18n.play;if(i.is.string(Re.title)&&!i.is.empty(Re.title)&&(t+=", "+Re.title,je.elements.container.setAttribute("aria-label",Re.title)),je.supported.full&&(i.is.htmlElement(je.elements.buttons.play)&&je.elements.buttons.play.setAttribute("aria-label",t),i.is.htmlElement(je.elements.buttons.playLarge)&&je.elements.buttons.playLarge.setAttribute("aria-label",t)),i.is.htmlElement(e)){var n=i.is.string(Re.title)&&!i.is.empty(Re.title)?Re.title:"video";e.setAttribute("title",Re.i18n.frameTitle.replace("{title}",n))}}function H(){var t=null;je.storage={},o.storage&&Re.storage.enabled&&(e.localStorage.removeItem("plyr-volume"),t=e.localStorage.getItem(Re.storage.key),t&&(/^\d+(\.\d+)?$/.test(t)?W({volume:parseFloat(t)}):je.storage=JSON.parse(t)))}function W(t){o.storage&&Re.storage.enabled&&(i.extend(je.storage,t),e.localStorage.setItem(Re.storage.key,JSON.stringify(je.storage)))}function Y(){return je.elements.media?(je.supported.full&&(i.toggleClass(je.elements.container,Re.classes.type.replace("{0}",je.type),!0),i.inArray(l.embed,je.type)&&i.toggleClass(je.elements.container,Re.classes.type.replace("{0}","video"),!0),i.toggleClass(je.elements.container,Re.classes.pip.enabled,o.pip&&"video"===je.type),i.toggleClass(je.elements.container,Re.classes.airplay.enabled,o.airplay&&i.inArray(l.html5,je.type)),i.toggleClass(je.elements.container,Re.classes.stopped,Re.autoplay),i.toggleClass(je.elements.container,Re.classes.isIos,je.browser.isIos),i.toggleClass(je.elements.container,Re.classes.isTouch,o.touch)),i.inArray(["video","youtube","vimeo"],je.type)&&(je.elements.wrapper=i.createElement("div",{class:Re.classes.videoWrapper}),i.wrap(je.elements.media,je.elements.wrapper)),void(i.inArray(l.embed,je.type)&&U())):void He("No media element found!")}function U(){var t,n=je.type+"-"+Math.floor(1e4*Math.random());switch(je.type){case"youtube":t=i.parseYouTubeId(je.embedId);break;default:t=je.embedId}for(var s=d('[id^="'+je.type+'-"]'),a=s.length-1;a>=0;a--)i.removeElement(s[a]);if(i.toggleClass(je.elements.wrapper,Re.classes.embedWrapper,!0),"youtube"===je.type)je.elements.media.setAttribute("id",n),i.is.object(e.YT)?z(t):(i.injectScript(Re.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){z(t)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===je.type)if(je.elements.media.setAttribute("id",n),i.is.object(e.Vimeo))J(t);else{i.injectScript(Re.urls.vimeo.api);var l=e.setInterval(function(){i.is.object(e.Vimeo)&&(e.clearInterval(l),J(t))},50)}else if("soundcloud"===je.type){var r=i.createElement("iframe");r.loaded=!1,i.on(r,"load",function(){r.loaded=!0}),i.setAttributes(r,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+t,id:n}),je.elements.media.appendChild(r),e.SC||i.injectScript(Re.urls.soundcloud.api);var o=e.setInterval(function(){e.SC&&r.loaded&&(e.clearInterval(o),X.call(r))},50)}}function Q(){je.supported.full&&(qe(),Oe()),B(p("iframe"))}function z(t){je.embed=new e.YT.Player(je.elements.media.id,{videoId:t,playerVars:{autoplay:Re.autoplay?1:0,controls:je.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:Re.captions.active?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,playsinline:1,origin:e.location.href},events:{onError:function(e){c(je.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(t){var n=t.target;je.elements.media.play=function(){n.playVideo(),je.elements.media.paused=!1},je.elements.media.pause=function(){n.pauseVideo(),je.elements.media.paused=!0},je.elements.media.stop=function(){n.stopVideo(),je.elements.media.paused=!0},je.elements.media.duration=n.getDuration(),je.elements.media.paused=!0,je.elements.media.currentTime=0,je.elements.media.muted=n.isMuted();var s=n.getPlaybackRate(),a=n.getAvailablePlaybackRates();console.warn(s,a),Re.title=n.getVideoData().title,je.supported.full&&je.elements.media.setAttribute("tabindex",-1),Q(),c(je.elements.media,"timeupdate"),c(je.elements.media,"durationchange"),e.clearInterval(Ve.buffering),Ve.buffering=e.setInterval(function(){je.elements.media.buffered=n.getVideoLoadedFraction(),(null===je.elements.media.lastBuffered||je.elements.media.lastBuffered=n)return;Re.loop.end=n,Re.loop.indicator.end=je.elements.display.played.value;break;case"all":Re.loop.start=0,Re.loop.end=je.elements.media.duration-2,Re.loop.indicator.start=0,Re.loop.indicator.end=100;break;case"toggle":Re.loop.active?(Re.loop.start=0,Re.loop.end=null):(Re.loop.start=0,Re.loop.end=je.elements.media.duration-2);break;default:Re.loop.start=0,Re.loop.end=null}Re.loop.active=i.is.number(Re.loop.start)&&i.is.number(Re.loop.end);var s=(Ce(Re.loop.start,p('[data-plyr-loop="start"]')),null);i.is.number(Re.loop.end)&&(s=Ce(Re.loop.end,t.querySelector('[data-loop__value="loopout"]'))),Re.loop.active}function ee(e){return i.is.event(e)?e=parseFloat(e.target.value):i.is.number(e)||(e=parseFloat(je.storage.speed||Re.speed.selected)),e<.1&&(e=.1),e>2&&(e=2),i.is.array(Re.speed.options)?(Re.speed.selected=e,je.elements.media.playbackRate=e,void W({speed:e})):void He("Invalid speeds format")}function te(e){return i.is.number(e)||(e=Re.speed.selected),1===e?"Normal":e+"×"}function ne(e){i.is.number(e)||(e=Re.seekTime),ae(je.elements.media.currentTime-e)}function se(e){i.is.number(e)||(e=Re.seekTime),ae(je.elements.media.currentTime+e)}function ae(e){var t=0,n=je.elements.media.paused,s=le();i.is.number(e)?t=e:i.is.event(e)&&i.inArray(["input","change"],e.type)&&(t=e.target.value/e.target.max*s),t<0?t=0:t>s&&(t=s),we(t);try{je.elements.media.currentTime=t.toFixed(4)}catch(e){}if(i.inArray(l.embed,je.type)){switch(je.type){case"youtube":je.embed.seekTo(t);break;case"vimeo":je.embed.setCurrentTime(t.toFixed(0));break;case"soundcloud":je.embed.seekTo(1e3*t)}n&&G(),c(je.elements.media,"timeupdate"),je.elements.media.seeking=!0,c(je.elements.media,"seeking")}Be("Seeking to "+je.elements.media.currentTime+" seconds")}function le(){var e=parseInt(Re.duration),t=0;return null===je.elements.media.duration||isNaN(je.elements.media.duration)||(t=je.elements.media.duration),isNaN(e)?t:e}function ie(){i.toggleClass(je.elements.container,Re.classes.playing,!je.elements.media.paused),i.toggleClass(je.elements.container,Re.classes.stopped,je.elements.media.paused),Se(je.elements.media.paused)}function re(){s={x:e.pageXOffset||0,y:e.pageYOffset||0}}function oe(){e.scrollTo(s.x,s.y)}function ue(e){var n=o.fullscreen;if(n){if(!e||e.type!==r.eventType)return r.isFullScreen(je.elements.container)?r.cancelFullScreen():(re(),r.requestFullScreen(je.elements.container)),void(je.fullscreen.active=r.isFullScreen(je.elements.container));je.fullscreen.active=r.isFullScreen(je.elements.container)}else je.fullscreen.active=!je.fullscreen.active,t.body.style.overflow=je.fullscreen.active?"hidden":"";i.toggleClass(je.elements.container,Re.classes.fullscreen.active,je.fullscreen.active),f(je.fullscreen.active),je.elements.buttons&&je.elements.buttons.fullscreen&&i.toggleState(je.elements.buttons.fullscreen,je.fullscreen.active),c(je.elements.container,je.fullscreen.active?"enterfullscreen":"exitfullscreen",!0),!je.fullscreen.active&&n&&oe()}function ce(e){var t=je.elements.settings.form,n=je.elements.buttons.settings,s=i.is.boolean(e)?e:"true"===t.getAttribute("aria-hidden");if(i.is.event(e)){var a=t.contains(e.target),l=e.target===je.elements.buttons.settings;if(a||!a&&!l&&s)return;l&&e.stopPropagation()}t.setAttribute("aria-hidden",!s),n.setAttribute("aria-expanded",s),s?t.removeAttribute("tabindex"):t.setAttribute("tabindex",-1)}function de(e){var t,n,s=e.cloneNode(!0);return s.style.position="absolute",s.style.opacity=0,s.setAttribute("aria-hidden",!1),[].forEach.call(s.querySelectorAll("input[name]"),function(e){var t=e.getAttribute("name");e.setAttribute("name",t+"-clone")}),e.parentNode.appendChild(s),t=s.scrollWidth,n=s.scrollHeight,i.removeElement(s),{width:t,height:n}}function pe(e){var n=je.elements.settings.menu,s=e.target,a="false"===s.getAttribute("aria-expanded"),l=t.getElementById(s.getAttribute("aria-controls"));if(i.is.htmlElement(l)){var r="tabpanel"===l.getAttribute("role");if(r){var u=n.querySelector('[role="tabpanel"][aria-hidden="false"]'),c=u.parentNode;if([].forEach.call(n.querySelectorAll('[aria-controls="'+u.getAttribute("id")+'"]'),function(e){e.setAttribute("aria-expanded",!1)}),o.transitions){c.style.width=u.scrollWidth+"px",c.style.height=u.scrollHeight+"px";var d=de(l),p=function(e){e.target===c&&i.inArray(["width","height"],e.propertyName)&&(c.style.width="",c.style.height="",i.off(c,i.transitionEnd,p))};i.on(c,i.transitionEnd,p),c.style.width=d.width+"px",c.style.height=d.height+"px"}u.setAttribute("aria-hidden",!0),u.setAttribute("tabindex",-1),l.setAttribute("aria-hidden",!a),s.setAttribute("aria-expanded",a),l.removeAttribute("tabindex")}}}function me(e){if(i.is.boolean(e)||(e=!je.elements.media.muted),i.toggleState(je.elements.buttons.mute,e),je.elements.media.muted=e,0===je.elements.media.volume&&fe(Re.volume),i.inArray(l.embed,je.type)){switch(je.type){case"youtube":je.embed[je.elements.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":je.embed.setVolume(je.elements.media.muted?0:parseFloat(Re.volume/10))}c(je.elements.media,"volumechange")}}function fe(e){var t=10,n=0;if(i.is.event(e)&&(e=e.target.value),i.is.undefined(e)&&(e=je.storage.volume),(null===e||isNaN(e))&&(e=Re.volume),e>t&&(e=t),e0&&me()}function ye(e){var t=je.elements.media.muted?0:10*je.elements.media.volume;i.is.number(e)||(e=1),fe(t+e)}function ge(e){var t=je.elements.media.muted?0:10*je.elements.media.volume;i.is.number(e)||(e=1),fe(t-e)}function be(){var e=je.elements.media.muted?0:10*je.elements.media.volume;je.supported.full&&(je.elements.inputs.volume&&(je.elements.inputs.volume.value=e),je.elements.display.volume&&(je.elements.display.volume.value=e)),W({volume:e}),i.toggleClass(je.elements.container,Re.classes.muted,0===e),je.supported.full&&je.elements.buttons.mute&&i.toggleState(je.elements.buttons.mute,0===e)}function ve(e){var t="waiting"===e.type;clearTimeout(Ve.loading),Ve.loading=setTimeout(function(){i.toggleClass(je.elements.container,Re.classes.loading,t),Se(t)},t?250:0)}function he(e){if(je.supported.full){var t=je.elements.display.played,n=0,s=le();if(e)switch(e.type){case"timeupdate":case"seeking":if(je.elements.controls.pressed)return;n=i.getPercentage(je.elements.media.currentTime,s),"timeupdate"===e.type&&je.elements.inputs.seek&&(je.elements.inputs.seek.value=n);break;case"playing":case"progress":t=je.elements.display.buffer,n=function(){var e=je.elements.media.buffered;return e&&e.length?i.getPercentage(e.end(0),s):i.is.number(e)?100*e:0}()}i.is.number(Re.loop.start)&&i.is.number(Re.loop.end)&&je.elements.media.currentTime>=Re.loop.end&&ae(Re.loop.start),ke(t,n)}}function ke(e,t){if(je.supported.full){if(i.is.undefined(t)&&(t=0),i.is.undefined(e)){if(!i.is.htmlElement(je.elements.display.buffer))return;e=je.elements.display.buffer}if(i.is.htmlElement(e)){e.value=t;var n=e.getElementsByTagName("span")[0];i.is.htmlElement(n)&&(n.childNodes[0].nodeValue=t)}}}function Ce(e,t){if(t){isNaN(e)&&(e=0);var n=parseInt(e%60),s=parseInt(e/60%60),a=parseInt(e/60/60%60),l=parseInt(le()/60/60%60)>0;n=("0"+n).slice(-2),s=("0"+s).slice(-2);var i=(l?a+":":"")+s+":"+n;return t.textContent=i,i}}function Ee(){if(je.supported.full){var e=le()||0; +!je.elements.display.duration&&Re.displayDuration&&je.elements.media.paused&&Ce(e,je.elements.display.currentTime),je.elements.display.duration&&Ce(e,je.elements.display.duration),Te()}}function Ae(e){Ce(je.elements.media.currentTime,je.elements.display.currentTime),e&&"timeupdate"===e.type&&je.elements.media.seeking||he(e)}function we(e){i.is.number(e)||(e=0);var t=le(),n=i.getPercentage(e,t);je.elements.progress&&je.elements.display.played&&(je.elements.display.played.value=n),je.elements.buttons&&je.elements.inputs.seek&&(je.elements.inputs.seek.value=n)}function Te(e){var t=le();if(Re.tooltips.seek&&i.is.htmlElement(je.elements.inputs.seek)&&i.is.htmlElement(je.elements.display.seekTooltip)&&0!==t){var n=je.elements.inputs.seek.getBoundingClientRect(),s=0,a=Re.classes.tooltip+"--visible";if(i.is.event(e))s=100/n.width*(e.pageX-n.left);else{if(!i.hasClass(je.elements.display.seekTooltip,a))return;s=je.elements.display.seekTooltip.style.left.replace("%","")}s<0?s=0:s>100&&(s=100),Ce(t/100*s,je.elements.display.seekTooltip),je.elements.display.seekTooltip.style.left=s+"%",i.is.event(e)&&i.inArray(["mouseenter","mouseleave"],e.type)&&i.toggleClass(je.elements.display.seekTooltip,a,"mouseenter"===e.type)}}function Se(t){if(Re.hideControls&&"audio"!==je.type){var n=0,s=!1,a=t,l=i.hasClass(je.elements.container,Re.classes.loading);if(i.is.boolean(t)||(t&&t.type?(s="enterfullscreen"===t.type,a=i.inArray(["mousemove","touchstart","mouseenter","focus"],t.type),i.inArray(["mousemove","touchmove"],t.type)&&(n=2e3),"focus"===t.type&&(n=3e3)):a=i.hasClass(je.elements.container,Re.classes.hideControls)),e.clearTimeout(Ve.hover),a||je.elements.media.paused||l){if(i.toggleClass(je.elements.container,Re.classes.hideControls,!1),je.elements.media.paused||l)return;o.touch&&(n=3e3)}a&&je.elements.media.paused||(Ve.hover=e.setTimeout(function(){(!je.elements.controls.pressed&&!je.elements.controls.hover||s)&&i.toggleClass(je.elements.container,Re.classes.hideControls,!0)},n))}}function xe(e){if(!i.is.undefined(e))return void Fe(e);var t;switch(je.type){case"youtube":t=je.embed.getVideoUrl();break;case"vimeo":je.embed.getVideoUrl.then(function(e){t=e});break;case"soundcloud":je.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=je.elements.media.currentSrc}return t||""}function Fe(e){function t(){if(je.embed=null,m("media"),m("captions"),m("wrapper"),je.elements.container&&je.elements.container.removeAttribute("class"),"type"in e&&(je.type=e.type,"video"===je.type)){var t=e.sources[0];"type"in t&&i.inArray(l.embed,t.type)&&(je.type=t.type)}switch(je.supported=i.checkSupport(je.type,Re.inline),je.type){case"video":je.elements.media=i.createElement("video");break;case"audio":je.elements.media=i.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":je.elements.media=i.createElement("div"),je.embedId=e.sources[0].src}i.prependChild(je.elements.container,je.elements.media),i.is.boolean(e.autoplay)&&(Re.autoplay=e.autoplay),i.inArray(l.html5,je.type)&&(Re.crossorigin&&je.elements.media.setAttribute("crossorigin",""),Re.autoplay&&je.elements.media.setAttribute("autoplay",""),"poster"in e&&je.elements.media.setAttribute("poster",e.poster),Re.loop.active&&je.elements.media.setAttribute("loop",""),Re.inline&&je.elements.media.setAttribute("playsinline","")),i.toggleClass(je.elements.container,Re.classes.fullscreen.active,je.fullscreen.active),i.toggleClass(je.elements.container,Re.classes.captions.active,je.captions.enabled),D(),i.inArray(l.html5,je.type)&&y("source",e.sources),Y(),i.inArray(l.html5,je.type)&&("tracks"in e&&y("track",e.tracks),je.elements.media.load()),(i.inArray(l.html5,je.type)||i.inArray(l.embed,je.type)&&!je.supported.full)&&(qe(),Oe()),Re.title=e.title,B()}return i.is.object(e)&&"sources"in e&&e.sources.length?(i.toggleClass(je.elements.container,Re.classes.ready,!1),G(),we(),ke(),Ne(),void Le(t,!1)):void He("Invalid source format")}function Ie(e){"video"===je.type&&je.elements.media.setAttribute("poster",e)}function Pe(){function n(){var e=K(),t=je.elements.buttons[e?"play":"pause"],n=je.elements.buttons[e?"pause":"play"];if(n){var s=i.hasClass(t,Re.classes.tabFocus);setTimeout(function(){i.is.htmlElement(n)&&n.focus(),s&&(i.toggleClass(t,Re.classes.tabFocus,!1),i.toggleClass(n,Re.classes.tabFocus,!0))},100)}}function s(e){return e.keyCode?e.keyCode:e.which}function a(e){i.toggleClass(d("."+Re.classes.tabFocus),Re.classes.tabFocus,!1),je.elements.container.contains(e)&&i.toggleClass(e,Re.classes.tabFocus,!0)}function l(e){function t(){var e=je.elements.media.duration;i.is.number(e)&&ae(e/10*(a-48))}var a=s(e),l="keydown"===e.type,r=l&&a===c;if(i.is.number(a))if(l){var u=[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(i.inArray(d,a)){var p=i.getFocusElement();if(i.is.htmlElement(p)&&"radio"===i.getFocusElement().type)return}switch(i.inArray(u,a)&&(e.preventDefault(),e.stopPropagation()),a){case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:r||t();break;case 32:case 75:r||n();break;case 38:ye();break;case 40:ge();break;case 77:r||me();break;case 39:se();break;case 37:ne();break;case 70:ue();break;case 67:r||M();break;case 73:Z("start");break;case 76:Z();break;case 79:Z("end")}!o.fullscreen&&je.fullscreen.active&&27===a&&ue(),c=a}else c=null}var u=je.browser.isIE?"change":"input";if(Re.keyboardShortcuts.focused){var c=null;Re.keyboardShortcuts.global&&i.on(e,"keydown keyup",function(e){var t=s(e),n=i.getFocusElement(),a=[48,49,50,51,52,53,54,56,57,75,77,70,67,73,76,79];!i.inArray(a,t)||i.is.htmlElement(n)&&i.matches(n,Re.selectors.editable)||l(e)},!1),i.on(je.elements.container,"keydown keyup",l,!1)}i.on(e,"keyup",function(e){var t=s(e),n=i.getFocusElement();9===t&&a(n)}),i.on(t.body,"click",function(){i.toggleClass(p("."+Re.classes.tabFocus),Re.classes.tabFocus,!1)});for(var m in je.elements.buttons){var f=je.elements.buttons[m];i.on(f,"blur",function(){i.toggleClass(f,"tab-focus",!1)})}var y=function(e,t,n){i.is.function(t)&&t.call(this,e),i.is.function(n)&&n.call(this,e)};i.proxy(je.elements.buttons.play,"click",Re.listeners.play,n),i.proxy(je.elements.buttons.playLarge,"click",Re.listeners.play,n),i.proxy(je.elements.buttons.pause,"click",Re.listeners.pause,n),i.proxy(je.elements.buttons.restart,"click",Re.listeners.restart,ae),i.proxy(je.elements.buttons.rewind,"click",Re.listeners.rewind,ne),i.proxy(je.elements.buttons.forward,"click",Re.listeners.forward,se),i.proxy(je.elements.buttons.mute,"click",Re.listeners.mute,me),i.proxy(je.elements.buttons.captions,"click",Re.listeners.captions,M),i.proxy(je.elements.buttons.fullscreen,"click",Re.listeners.fullscreen,ue),i.proxy(je.elements.buttons.pip,"click",Re.listeners.pip,function(e){o.pip&&je.elements.media.webkitSetPresentationMode("picture-in-picture"===je.elements.media.webkitPresentationMode?"inline":"picture-in-picture")}),i.proxy(je.elements.buttons.airplay,"click",Re.listeners.airplay,function(e){o.airplay&&je.elements.media.webkitShowPlaybackTargetPicker()}),i.on(je.elements.buttons.settings,"click",ce),i.on(t.documentElement,"click",ce),i.on(je.elements.settings.form,"click",pe),i.on(je.elements.settings.form,"click",function(e){i.matches(e.target,Re.selectors.inputs.language)?y.call(this,e,Re.listeners.language,L):i.matches(e.target,Re.selectors.inputs.quality)?y.call(this,e,Re.listeners.quality,function(){He("Set quality")}):i.matches(e.target,Re.selectors.inputs.speed)?y.call(this,e,Re.listeners.speed,ee):i.matches(e.target,Re.selectors.buttons.loop)&&y.call(this,e,Re.listeners.loop,function(){var t=e.target.getAttribute("data-loop__value")||e.target.getAttribute("data-loop__type");i.inArray(["start","end","all","none"],t)&&Z(t)})}),i.proxy(je.elements.inputs.seek,u,Re.listeners.seek,ae),i.proxy(je.elements.inputs.volume,u,Re.listeners.volume,fe),i.on(je.elements.progress,"mouseenter mouseleave mousemove",Te),Re.hideControls&&(i.on(je.elements.container,"mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen",Se),i.on(je.elements.controls,"mouseenter mouseleave",function(e){je.elements.controls.hover="mouseenter"===e.type}),i.on(je.elements.controls,"mousedown mouseup touchstart touchend touchcancel",function(e){je.elements.controls.pressed=i.inArray(["mousedown","touchstart"],e.type)}),i.on(je.elements.controls,"focus blur",Se,!0,!0)),i.proxy(je.elements.inputs.volume,"wheel",Re.listeners.volume,function(e){var t=e.webkitDirectionInvertedFromDevice,n=.2,s=0;(e.deltaY<0||e.deltaX>0)&&(t?(ge(n),s=-1):(ye(n),s=1)),(e.deltaY>0||e.deltaX<0)&&(t?(ye(n),s=1):(ge(n),s=-1)),(1===s&&je.elements.media.volume<1||s===-1&&je.elements.media.volume>0)&&e.preventDefault()},!1),o.fullscreen&&i.on(t,r.eventType,ue)}function _e(){if(i.on(je.elements.media,"timeupdate seeking",Ae),i.on(je.elements.media,"durationchange loadedmetadata",Ee),i.on(je.elements.media,"ended",function(){"video"===je.type&&Re.showPosterOnEnd&&("video"===je.type&&q(),ae(),je.elements.media.load())}),i.on(je.elements.media,"progress playing",he),i.on(je.elements.media,"volumechange",be),i.on(je.elements.media,"play pause ended",ie),i.on(je.elements.media,"waiting canplay seeked",ve),Re.clickToPlay&&"audio"!==je.type){var e=p("."+Re.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",i.on(e,"click",function(){Re.hideControls&&o.touch&&!je.elements.media.paused||(je.elements.media.paused?$():je.elements.media.ended?(ae(),$()):G())})}Re.disableContextMenu&&i.on(je.elements.media,"contextmenu",function(e){e.preventDefault()},!1),i.on(je.elements.media,Re.events.concat(["keyup","keydown"]).join(" "),function(e){c(je.elements.container,e.type,!0)})}function Ne(){if(i.inArray(l.html5,je.type)){for(var e=je.elements.media.querySelectorAll("source"),t=0;t=0;n--){var s=n>0?t.cloneNode(!0):t,a=e[n],l=a.parentNode,i=a.nextSibling;return s.appendChild(a),i?l.insertBefore(s,i):l.appendChild(s),s}},removeElement:function(e){i.is.htmlElement(e)&&i.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,n,s){var a=t.createElement(e);return i.is.object(n)&&i.setAttributes(a,n),i.is.string(s)&&(a.textContent=s),a},insertElement:function(e,t,n,s){var a=i.createElement(e,n,s);i.prependChild(t,a)},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(!i.is.string(e)||i.is.empty(e))return{};var n={};return e.split(",").forEach(function(e){e=e.trim();var s=e.charAt(0);switch(s){case".":var a=e.replace(".","");i.is.object(t)&&i.is.string(t.class)&&(t.class+=" "+a),n.class=a;break;case"#":n.id=e.replace("#","");break;case"[":e=e.replace(/[\[\]]/g,"");var l=e.split("="),r=l[0],o=l.length>1?l[1].replace(/[\"\']/g,""):"";n[r]=o}}),n},toggleClass:function(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(n?" "+t:"")}},hasClass:function(e,t){return!!e&&(e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className))},matches:function(e,n){var s=Element.prototype,a=s.matches||s.webkitMatchesSelector||s.mozMatchesSelector||s.msMatchesSelector||function(e){return[].indexOf.call(t.querySelectorAll(e),this)!==-1};return a.call(e,n)},getFocusElement:function(){var e=t.activeElement;return e=e&&e!==t.body?t.querySelector(":focus"):null},proxy:function(e,t,n,s,a,l){i.on(e,t,function(t){n&&n.apply(e,[t]),s.apply(e,[t])},a,l)},toggleListener:function(e,t,n,s,a,l){if(t=t.split(" "),i.is.boolean(l)||(l=!1),i.is.boolean(a)||(a=!0),e instanceof NodeList){var r=1===arguments.length?[arguments[0]]:Array.apply(null,arguments);return r.shift(),void[].forEach.call(e,function(e){e instanceof Node&&i.toggleListener.apply(null,[e].concat(r))})}var u=l;o.passiveListeners&&(u={passive:a,capture:l}),t.forEach(function(t){e[s?"addEventListener":"removeEventListener"](t,n,u)})},on:function(e,t,n,s,a){i.is.undefined(e)||i.toggleListener(e,t,n,!0,s,a)},off:function(e,t,n,s,a){i.is.undefined(e)||i.toggleListener(e,t,n,!1,s,a)},event:function(n,s,a,l){if(n&&s){i.is.boolean(a)||(a=!1);var r;i.is.function(e.CustomEvent)?r=e.CustomEvent:(r=function(e,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var s=t.createEvent("CustomEvent");return s.initCustomEvent(e,n.bubbles,n.cancelable,n.detail),s},r.prototype=e.Event.prototype);var o=new r(s,{bubbles:a,detail:l});n.dispatchEvent(o)}},toggleState:function(e,t){if(e)return t=i.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);i.is.object(t)||(t={});for(var n=e.length,s=0;s or src attribute (or maybe use currentSrc?) for HTML5 and links for embedded players @@ -23,7 +30,7 @@ [ ] Fix events on unsupported devices (iOS, old IE) [x] Fix YouTube rights blocking (origin perhaps?) -# Notes +### Release notes - No quality HTML5 support (yet) - No Vimeo quality support - No YouTube caption support @@ -39,6 +46,6 @@ - Custom HTML option now `controls` which accepts a string (HTML), a function (your own template engine) or array (use built in controls) - .setup() is removed in favour of a constructor -## Added +#### Added - Seek i8n label - Loop related i8n labels \ No newline at end of file diff --git a/src/js/plyr.js b/src/js/plyr.js index 0ada1779..df910664 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -68,8 +68,8 @@ // Speed up/down speed: { - selected: 1.0, - options: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 2.0] + selected: 1, + options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2] }, // Keyboard shortcut settings @@ -204,6 +204,12 @@ 'airplay', 'fullscreen' ], + settings: [ + 'captions', + 'quality', + 'speed', + 'loop' + ], // Localisation i18n: { @@ -1442,13 +1448,9 @@ })); } - // Add the icon button.appendChild(createIcon(iconDefault)); - - // Add the label button.appendChild(createLabel(labelKey)); - // Set element attributes utils.setAttributes(button, attributes); player.elements.buttons[type] = button; @@ -1668,13 +1670,16 @@ role: 'tabpanel' }); + // Create the tab list var tabs = utils.createElement('ul', { role: 'tablist' }); - ['captions', 'quality', 'speed', 'loop'].forEach(function(type) { + // Build the tabs + config.settings.forEach(function(type) { var tab = utils.createElement('li', { - role: 'tab' + role: 'tab', + hidden: '' }); var button = utils.createElement('button', utils.extend(utils.getAttributesFromSelector(config.selectors.buttons.settings), { @@ -1694,25 +1699,24 @@ value.innerHTML = data[type]; button.appendChild(value); - tab.appendChild(button); - tabs.appendChild(tab); player.elements.settings.tabs[type] = tab; }); home.appendChild(tabs); - inner.appendChild(home); - ['captions', 'quality', 'speed', 'loop'].forEach(function(type) { + // Build the panes + config.settings.forEach(function(type) { var pane = utils.createElement('div', { id: 'plyr-settings-' + data.id + '-' + type, 'aria-hidden': true, 'aria-labelled-by': 'plyr-settings-' + data.id + '-' + type + '-tab', role: 'tabpanel', - tabindex: -1 + tabindex: -1, + hidden: '' }); var back = utils.createElement('button', { @@ -1728,20 +1732,16 @@ var options = utils.createElement('ul'); pane.appendChild(options); - inner.appendChild(pane); player.elements.settings.panes[type] = pane; }); form.appendChild(inner); - menu.appendChild(form); - controls.appendChild(menu); player.elements.settings.form = form; - player.elements.settings.menu = menu; } @@ -1774,6 +1774,10 @@ function setQualityMenu(options, current) { var list = player.elements.settings.panes.quality.querySelector('ul'); + // Show the pane and tab + player.elements.settings.tabs.quality.removeAttribute('hidden'); + player.elements.settings.panes.quality.removeAttribute('hidden'); + // Empty the menu utils.emptyElement(list); @@ -1833,19 +1837,17 @@ var item = utils.createElement('li'); var label = utils.createElement('label', { - class: config.classes.control, - for: 'plyr-quality-' + quality + class: config.classes.control }); var radio = utils.createElement('input', utils.extend(utils.getAttributesFromSelector(config.selectors.inputs.quality), { type: 'radio', - id: 'plyr-quality-' + quality, name: 'plyr-quality', value: quality, })); if (quality === config.quality.selected) { - radio.setAttribute('checked', ''); + radio.checked = true; } label.appendChild(radio); @@ -1857,7 +1859,6 @@ } item.appendChild(label); - list.appendChild(item); }); } @@ -1868,6 +1869,10 @@ var options = ['start', 'end', 'all', 'reset']; var list = player.elements.settings.panes.loop.querySelector('ul'); + // Show the pane and tab + player.elements.settings.tabs.loop.removeAttribute('hidden'); + player.elements.settings.panes.loop.removeAttribute('hidden'); + // Empty the menu utils.emptyElement(list); @@ -1881,12 +1886,11 @@ }), config.i18n[option]); if (utils.inArray(['start', 'end'], option)) { - var badge = createBadge('0:00'); + var badge = createBadge('00:00'); button.appendChild(badge); } item.appendChild(button); - list.appendChild(item); }); } @@ -1895,6 +1899,10 @@ function setCaptionsMenu() { var list = player.elements.settings.panes.captions.querySelector('ul'); + // Show the pane and tab + player.elements.settings.tabs.captions.removeAttribute('hidden'); + player.elements.settings.panes.captions.removeAttribute('hidden'); + // Empty the menu utils.emptyElement(list); @@ -1923,19 +1931,17 @@ var item = utils.createElement('li'); var label = utils.createElement('label', { - class: config.classes.control, - for: 'plyr-language-' + track.language + class: config.classes.control }); var radio = utils.createElement('input', utils.extend(utils.getAttributesFromSelector(config.selectors.inputs.language), { type: 'radio', - id: 'plyr-language-' + track.language, name: 'plyr-language', value: track.language, })); - if (track.language === config.captions.language.toLowerCase()) { - radio.setAttribute('checked', ''); + if (track.language.toLowerCase() === config.captions.language.toLowerCase()) { + radio.checked = true; } label.appendChild(radio); @@ -1946,7 +1952,6 @@ } item.appendChild(label); - list.appendChild(item); }); } @@ -1955,6 +1960,10 @@ function setSpeedMenu(options) { var list = player.elements.settings.panes.speed.querySelector('ul'); + // Show the pane and tab + player.elements.settings.tabs.speed.removeAttribute('hidden'); + player.elements.settings.panes.speed.removeAttribute('hidden'); + // Empty the menu utils.emptyElement(list); @@ -1967,26 +1976,22 @@ var item = utils.createElement('li'); var label = utils.createElement('label', { - class: config.classes.control, - for: 'plyr-speed-' + speed.toString().replace('.', '-') + class: config.classes.control }); var radio = utils.createElement('input', utils.extend(utils.getAttributesFromSelector(config.selectors.inputs.speed), { type: 'radio', - id: 'plyr-speed-' + speed.toString().replace('.', '-'), name: 'plyr-speed', value: speed, })); if (speed === config.speed.selected) { - radio.setAttribute('checked', ''); + radio.checked = true; } label.appendChild(radio); - label.insertAdjacentHTML('beforeend', '×' + speed); - + label.insertAdjacentHTML('beforeend', getSpeedLabel(speed)); item.appendChild(label); - list.appendChild(item); }); } @@ -2259,7 +2264,7 @@ controls = createControls({ id: player.id, seektime: config.seekTime, - speed: getSpeed(), + speed: getSpeedLabel(), // TODO: Get current quality quality: 'HD', captions: getLanguage(), @@ -3136,8 +3141,16 @@ } // Get the current speed value - function getSpeed() { - return config.speed.selected.toFixed(1).toString().replace('.0', '') + '×' + function getSpeedLabel(speed) { + if (!utils.is.number(speed)) { + speed = config.speed.selected; + } + + if (speed === 1) { + return 'Normal'; + } + + return speed + '×'; } // Rewind @@ -3322,20 +3335,25 @@ function toggleMenu(event) { var form = player.elements.settings.form; var button = player.elements.buttons.settings; + var show = utils.is.boolean(event) ? event : form.getAttribute('aria-hidden') === 'true'; - // If the click was inside the form, do nothing - if (form.contains(event.target)) { - return; + if (utils.is.event(event)) { + var isMenuItem = form.contains(event.target); + var isButton = event.target === player.elements.buttons.settings; + + // If the click was inside the form or if the click + // wasn't the button or menu item and we're trying to + // show the menu (a doc click shouldn't show the menu) + if (isMenuItem || (!isMenuItem && !isButton && show)) { + return; + } + + // Prevent the toggle being caught by the doc listener + if (isButton) { + event.stopPropagation(); + } } - // Prevent the toggleMenu being fired twice - if (event.target === player.elements.buttons.settings) { - event.stopPropagation(); - } - - // Do we need to show it? - var show = form.getAttribute('aria-hidden') === 'true'; - // Set form and button attributes form.setAttribute('aria-hidden', !show); button.setAttribute('aria-expanded', show); @@ -3347,6 +3365,38 @@ } } + // Get the natural size of a tab + function getTabSize(tab) { + var width; + var height; + + var clone = tab.cloneNode(true); + clone.style.position = "absolute"; + clone.style.opacity = 0; + clone.setAttribute('aria-hidden', false); + + // Prevent input's being unchecked due to the name being identical + [].forEach.call(clone.querySelectorAll('input[name]'), function(input) { + var name = input.getAttribute('name'); + input.setAttribute('name', name + '-clone'); + }); + + // Append to parent so we get the "real" size + tab.parentNode.appendChild(clone); + + // Get the sizes before we remove + width = clone.scrollWidth; + height = clone.scrollHeight; + + // Remove from the DOM + utils.removeElement(clone); + + return { + width: width, + height: height + }; + } + // Toggle Menu function showTab(event) { var menu = player.elements.settings.menu; @@ -3365,14 +3415,10 @@ return; } - var targetWidth; - var targetHeight; - var container; - // Hide all other tabs // Get other tabs var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]'); - container = current.parentNode; + var container = current.parentNode; // Set other toggles to be expanded false [].forEach.call(menu.querySelectorAll('[aria-controls="' + current.getAttribute('id') + '"]'), function(toggle) { @@ -3385,15 +3431,8 @@ container.style.width = current.scrollWidth + 'px'; container.style.height = current.scrollHeight + 'px'; - // Get the natural element size of the target pane - var clone = pane.cloneNode(true); - clone.style.position = "absolute"; - clone.style.opacity = 0; - clone.setAttribute('aria-hidden', false); - container.appendChild(clone); - targetWidth = clone.scrollWidth; - targetHeight = clone.scrollHeight; - utils.removeElement(clone); + // Get potential sizes + var size = getTabSize(pane); // Restore auto height/width var restore = function(event) { @@ -3415,8 +3454,8 @@ utils.on(container, utils.transitionEnd, restore); // Set dimensions to target - container.style.width = targetWidth + 'px'; - container.style.height = targetHeight + 'px'; + container.style.width = size.width + 'px'; + container.style.height = size.height + 'px'; } // Set attributes on current tab @@ -4355,7 +4394,7 @@ utils.on(player.elements.buttons.settings, 'click', toggleMenu); // Click anywhere closes menu - utils.on(document.body, 'click', toggleMenu); + utils.on(document.documentElement, 'click', toggleMenu); // Show tab in menu utils.on(player.elements.settings.form, 'click', showTab); diff --git a/src/less/plyr.less b/src/less/plyr.less index cc23b699..fed7348f 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -503,7 +503,7 @@ position: absolute; z-index: 1; bottom: 100%; - right: -5px; + right: -3px; margin-bottom: 10px; animation: plyr-popup .2s ease; @@ -529,7 +529,7 @@ right: 15px; height: 0; width: 0; - border: 6px solid transparent; + border: 4px solid transparent; border-top-color: @plyr-menu-bg; } @@ -554,7 +554,7 @@ position: absolute; top: 50%; transform: translateY(-50%); - border: 5px solid transparent; + border: 4px solid transparent; } &--forward { @@ -576,7 +576,7 @@ font-weight: 500; &::after { - left: 5px; + left: @plyr-control-padding; border-right-color: fade(@plyr-menu-color, 80%); } &::before { @@ -617,12 +617,6 @@ font-weight: 600; } } - - // When animating between menus - &.is-resizing { - overflow: hidden; - transition: height .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1); - } } }