aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSam Potts <me@sampotts.me>2016-02-21 13:17:30 +1100
committerSam Potts <me@sampotts.me>2016-02-21 13:17:30 +1100
commitb18ed0338477059b0c8bace92fc96cf5ef0bbc6f (patch)
tree8cab00060c9a22d73847d088b3e5efcebbc32cc0
parente742527e653e1fd8626dcb28012fee64d58e4b3f (diff)
downloadplyr-b18ed0338477059b0c8bace92fc96cf5ef0bbc6f.tar.lz
plyr-b18ed0338477059b0c8bace92fc96cf5ef0bbc6f.tar.xz
plyr-b18ed0338477059b0c8bace92fc96cf5ef0bbc6f.zip
WIP on captions bug, manual duration option, reset media object
-rw-r--r--controls.md4
-rw-r--r--dist/plyr.css2
-rw-r--r--dist/plyr.js4
-rw-r--r--docs/index.html2
-rw-r--r--src/js/plyr.js792
-rw-r--r--src/less/plyr.less73
-rw-r--r--src/sass/plyr.scss82
7 files changed, 509 insertions, 450 deletions
diff --git a/controls.md b/controls.md
index 09aa0902..119cbe92 100644
--- a/controls.md
+++ b/controls.md
@@ -56,7 +56,7 @@ var controls = ["<div class='plyr__controls'>",
"<progress class='plyr__progress--buffer' max='100' value='0'>",
"<span>0</span>% buffered",
"</progress>",
- "<span class='plyr__tooltip'>--:--</span>",
+ "<span class='plyr__tooltip'>00:00</span>",
"</div>",
"<span class='plyr__controls--left'>",
"<button type='button' data-plyr='restart'>",
@@ -85,7 +85,7 @@ var controls = ["<div class='plyr__controls'>",
"</span>",
"<span class='plyr__time'>",
"<span class='plyr__sr-only'>Duration</span>",
- "<span class='plyr__duration'>--:--</span>",
+ "<span class='plyr__duration'>00:00</span>",
"</span>",
"</span>",
"<span class='plyr__controls--right'>",
diff --git a/dist/plyr.css b/dist/plyr.css
index 7039e5af..b6a33c0c 100644
--- a/dist/plyr.css
+++ b/dist/plyr.css
@@ -1 +1 @@
-.plyr__captions,.plyr__controls{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-align:center}@-webkit-keyframes plyr-progress{to{background-position:40px 0}}@keyframes plyr-progress{to{background-position:40px 0}}.plyr{position:relative;max-width:100%;min-width:290px}.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__sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.plyr__video-wrapper{position:relative}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle}.plyr__video-embed{padding-bottom:56.25%;height:0;overflow:hidden;background:#000}.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%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr__video-embed.plyr iframe{pointer-events:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px 20px 30px;color:#fff;font-size:20px}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.9)}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--fullscreen-active .plyr__captions{font-size:32px}.plyr__controls{position:relative;padding:10px;background:#fff;line-height:1;box-shadow:0 1px 1px rgba(52,63,74,.2)}.plyr__controls::after{content:'';display:table;clear:both}.plyr__controls--right{display:block;margin:10px auto 0}@media (min-width:560px){.plyr__controls--left{float:left}.plyr__controls--right{float:right;margin-top:0}}.plyr__controls button{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;overflow:hidden;border:0;background:0 0;border-radius:3px;cursor:pointer;color:#6B7D86;transition:background .3s ease,color .3s ease,opacity .3s ease}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.plyr__controls button.tab-focus:focus,.plyr__controls button:hover{background:#3498DB;color:#fff}.plyr__controls .plyr__time,.plyr__tooltip{color:#6B7D86;font-size:14px;font-weight:600}.plyr__controls button:focus{outline:0}.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted{display:none}.plyr__controls .plyr__time{display:inline-block;vertical-align:middle;margin-left:10px}.plyr__controls .plyr__time+.plyr__time{display:none}@media (min-width:560px){.plyr__controls .plyr__time+.plyr__time{display:inline-block}}.plyr__controls .plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr__tooltip{visibility:hidden;position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:10px 15px;opacity:0;background:#fff;box-shadow:0 0 5px rgba(242,242,242,.1),0 0 0 1px rgba(242,242,242,.1);border-radius:3px;line-height:1.5;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s .1s ease,visibility .3s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,visibility .3s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,visibility .3s ease,-webkit-transform .2s .1s ease}.plyr__tooltip::after,.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.plyr__tooltip::after{bottom:-8px;border-right:7px solid transparent;border-top:7px solid rgba(242,242,242,.1);border-left:7px solid transparent;z-index:1}.plyr__tooltip::before{bottom:-6px;border-right:6px solid transparent;border-top:6px solid #fff;border-left:6px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip,.plyr__tooltip--visible{visibility:visible;opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range].tab-focus:focus{outline:rgba(52,63,74,.8) dotted 1px;outline-offset:3px}.plyr__progress--seek[type=range]:focus,.plyr__volume[type=range]:focus{outline:0}.plyr__progress{position:absolute;bottom:100%;left:0;right:0;width:100%;height:10px;background:rgba(86,93,100,.2)}.plyr__progress--buffer[value],.plyr__progress--played[value],.plyr__progress--seek[type=range]{position:absolute;left:0;top:0;width:100%;height:10px;margin:0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;background:0 0}.plyr__progress--buffer[value]::-webkit-progress-bar,.plyr__progress--played[value]::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress--buffer[value]::-webkit-progress-value,.plyr__progress--played[value]::-webkit-progress-value{background:currentColor;transition:width .2s ease}.plyr__progress--buffer[value]::-moz-progress-bar,.plyr__progress--played[value]::-moz-progress-bar{background:currentColor;transition:width .2s ease}.plyr__progress--played[value]{z-index:2;color:#3498DB}.plyr__progress--buffer[value]{color:rgba(86,93,100,.25)}.plyr__progress--seek[type=range]{z-index:4;cursor:pointer;outline:0}.plyr__progress--seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.plyr__progress--seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:1px;height:10px}.plyr__progress--seek[type=range]::-moz-range-track{background:0 0;border:0}.plyr__progress--seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:1px;height:10px}.plyr__progress--seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.plyr__progress--seek[type=range]::-ms-fill-lower,.plyr__progress--seek[type=range]::-ms-fill-upper{background:0 0;border:0}.plyr__progress--seek[type=range]::-ms-thumb{background:0 0;border:0;width:1px;height:10px}.plyr__progress--seek[type=range]::-moz-focus-outer{border:0}.plyr__progress .plyr__tooltip{left:0}.plyr--is-touch .plyr--seek[type=range]::-webkit-slider-thumb{width:40px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.plyr--is-touch .plyr--seek[type=range]::-moz-range-thumb{width:40px;transform:translateX(-50%)}.plyr--is-touch .plyr--seek[type=range]::-ms-thumb{width:40px;transform:translateX(-50%)}.plyr--loading .plyr__progress--buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-size:40px 40px;background-repeat:repeat-x;background-color:rgba(86,93,100,.25);background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr__volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0;border:none}.plyr__volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease;cursor:ew-resize}.plyr__volume[type=range]::-moz-range-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease;cursor:ew-resize}.plyr__volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.plyr__volume[type=range]::-ms-fill-lower,.plyr__volume[type=range]::-ms-fill-upper{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-ms-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease;cursor:ew-resize}.plyr__volume[type=range]:focus::-webkit-slider-thumb{background:#3498DB}.plyr__volume[type=range]:focus::-moz-range-thumb{background:#3498DB}.plyr__volume[type=range]:focus::-ms-thumb{background:#3498DB}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute],.plyr--is-ios.plyr--audio .plyr__controls--right{display:none}.plyr--is-ios.plyr--audio .plyr__controls--left{float:none}.plyr--audio .plyr__controls{padding-top:20px}.plyr--audio .plyr__progress{bottom:auto;top:0;background:#D6DADD}.plyr--fullscreen-active,.plyr.plyr--fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.plyr--fullscreen-active video,.plyr.plyr--fullscreen video{height:100%}.plyr--fullscreen-active .plyr__video-wrapper,.plyr.plyr--fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-active .plyr__controls,.plyr.plyr--fullscreen .plyr__controls{position:absolute;bottom:0;left:0;right:0}.plyr--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing .plyr__controls,.plyr.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing .plyr__controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease;transition:transform .3s .2s ease,-webkit-transform .3s .2s ease}.plyr--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing .plyr__captions,.plyr.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing .plyr__captions{bottom:5px;transition:bottom .3s .2s ease}.plyr--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__controls,.plyr.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__controls{-webkit-transform:translateY(0);transform:translateY(0)}.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions,.plyr--fullscreen-active .plyr__captions,.plyr.plyr--fullscreen .plyr__captions{top:auto;bottom:90px}@media (min-width:560px){.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions,.plyr--fullscreen-active .plyr__captions,.plyr.plyr--fullscreen .plyr__captions{bottom:60px}}.plyr--captions-active .plyr__controls .icon--captions-on,.plyr--fullscreen-active .icon--exit-fullscreen,.plyr--muted .plyr__controls .icon--muted{display:block}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr--captions-active .plyr__controls .icon--captions-on+svg,.plyr--fullscreen-active .icon--exit-fullscreen+svg,.plyr--muted .plyr__controls .icon--muted+svg{display:none}.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen]{display:inline-block} \ No newline at end of file
+.plyr__captions,.plyr__controls{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-align:center}@-webkit-keyframes plyr-progress{to{background-position:40px 0}}@keyframes plyr-progress{to{background-position:40px 0}}.plyr{position:relative;max-width:100%;min-width:290px}.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__sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.plyr__video-wrapper{position:relative}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle}.plyr__video-embed{padding-bottom:56.25%;height:0;overflow:hidden;background:#000}.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%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr__video-embed.plyr iframe{pointer-events:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px 20px 30px;color:#fff;font-size:20px}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.9)}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--fullscreen-active .plyr__captions{font-size:32px}.plyr__controls{position:relative;padding:10px;background:#fff;line-height:1;box-shadow:0 1px 1px rgba(52,63,74,.2)}.plyr__controls::after{content:'';display:table;clear:both}.plyr__controls--right{display:block;margin:10px auto 0}@media (min-width:560px){.plyr__controls--left{float:left}.plyr__controls--right{float:right;margin-top:0}}.plyr__controls button{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;overflow:hidden;border:0;background:0 0;border-radius:3px;cursor:pointer;color:#6B7D86;transition:background .3s ease,color .3s ease,opacity .3s ease}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.plyr__controls button.tab-focus:focus,.plyr__controls button:hover{background:#3498DB;color:#fff}.plyr__controls .plyr__time,.plyr__tooltip{color:#6B7D86;font-size:14px;font-weight:600}.plyr__controls button:focus{outline:0}.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted{display:none}.plyr__controls .plyr__time{display:inline-block;vertical-align:middle;margin-left:10px}.plyr__controls .plyr__time+.plyr__time{display:none}@media (min-width:560px){.plyr__controls .plyr__time+.plyr__time{display:inline-block}}.plyr__controls .plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr__tooltip{visibility:hidden;position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:10px 15px;opacity:0;background:#fff;box-shadow:0 0 5px rgba(64,64,64,.1),0 0 0 1px rgba(64,64,64,.1);border-radius:3px;line-height:1.5;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s .1s ease,visibility .3s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,visibility .3s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,visibility .3s ease,-webkit-transform .2s .1s ease}.plyr__tooltip::after,.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.plyr__tooltip::after{bottom:-8px;border-right:7px solid transparent;border-top:7px solid rgba(64,64,64,.2);border-left:7px solid transparent;z-index:1}.plyr__tooltip::before{bottom:-6px;border-right:6px solid transparent;border-top:6px solid #fff;border-left:6px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip,.plyr__tooltip--visible{visibility:visible;opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range].tab-focus:focus{outline:rgba(52,63,74,.8) dotted 1px;outline-offset:3px}.plyr__progress--seek[type=range]:focus,.plyr__volume[type=range]:focus{outline:0}.plyr__progress{position:absolute;bottom:100%;left:0;right:0;width:100%;height:10px;background:rgba(86,93,100,.2)}.plyr__progress--buffer[value],.plyr__progress--played[value],.plyr__progress--seek[type=range]{position:absolute;left:0;top:0;width:100%;height:10px;margin:0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;background:0 0}.plyr__progress--buffer[value]::-webkit-progress-bar,.plyr__progress--played[value]::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress--buffer[value]::-webkit-progress-value,.plyr__progress--played[value]::-webkit-progress-value{background:currentColor;transition:width .2s ease}.plyr__progress--buffer[value]::-moz-progress-bar,.plyr__progress--played[value]::-moz-progress-bar{background:currentColor;transition:width .2s ease}.plyr__progress--played[value]{z-index:2;color:#3498DB}.plyr__progress--buffer[value]{color:rgba(86,93,100,.25)}.plyr__progress--seek[type=range]{z-index:4;cursor:pointer;outline:0}.plyr__progress--seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.plyr__progress--seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:1px;height:10px}.plyr__progress--seek[type=range]::-moz-range-track{background:0 0;border:0}.plyr__progress--seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:1px;height:10px}.plyr__progress--seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.plyr__progress--seek[type=range]::-ms-fill-lower,.plyr__progress--seek[type=range]::-ms-fill-upper{background:0 0;border:0}.plyr__progress--seek[type=range]::-ms-thumb{background:0 0;border:0;width:1px;height:10px}.plyr__progress--seek[type=range]::-moz-focus-outer{border:0}.plyr__progress .plyr__tooltip{left:0}.plyr--is-touch .plyr--seek[type=range]::-webkit-slider-thumb{width:40px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.plyr--is-touch .plyr--seek[type=range]::-moz-range-thumb{width:40px;transform:translateX(-50%)}.plyr--is-touch .plyr--seek[type=range]::-ms-thumb{width:40px;transform:translateX(-50%)}.plyr--loading .plyr__progress--buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-size:40px 40px;background-repeat:repeat-x;background-color:rgba(86,93,100,.25);background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr__volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0;border:none}.plyr__volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease;cursor:ew-resize}.plyr__volume[type=range]::-moz-range-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease;cursor:ew-resize}.plyr__volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.plyr__volume[type=range]::-ms-fill-lower,.plyr__volume[type=range]::-ms-fill-upper{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-ms-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease;cursor:ew-resize}.plyr__volume[type=range]:focus::-webkit-slider-thumb{background:#3498DB}.plyr__volume[type=range]:focus::-moz-range-thumb{background:#3498DB}.plyr__volume[type=range]:focus::-ms-thumb{background:#3498DB}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute],.plyr--is-ios.plyr--audio .plyr__controls--right{display:none}.plyr--is-ios.plyr--audio .plyr__controls--left{float:none}.plyr--audio .plyr__controls{padding-top:20px}.plyr--audio .plyr__progress{bottom:auto;top:0;background:#D6DADD}.plyr--fullscreen-active,.plyr.plyr--fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.plyr--fullscreen-active video,.plyr.plyr--fullscreen video{height:100%}.plyr--fullscreen-active .plyr__video-wrapper,.plyr.plyr--fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-active .plyr__controls,.plyr.plyr--fullscreen .plyr__controls{position:absolute;bottom:0;left:0;right:0}.plyr--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing .plyr__controls,.plyr.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing .plyr__controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease;transition:transform .3s .2s ease,-webkit-transform .3s .2s ease}.plyr--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing .plyr__captions,.plyr.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing .plyr__captions{bottom:5px;transition:bottom .3s .2s ease}.plyr--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__controls,.plyr.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__controls{-webkit-transform:translateY(0);transform:translateY(0)}.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions,.plyr--fullscreen-active .plyr__captions,.plyr.plyr--fullscreen .plyr__captions{top:auto;bottom:90px}@media (min-width:560px){.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions,.plyr--fullscreen-active .plyr__captions,.plyr.plyr--fullscreen .plyr__captions{bottom:60px}}.plyr--captions-active .plyr__controls .icon--captions-on,.plyr--fullscreen-active .icon--exit-fullscreen,.plyr--muted .plyr__controls .icon--muted{display:block}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr--captions-active .plyr__controls .icon--captions-on+svg,.plyr--fullscreen-active .icon--exit-fullscreen+svg,.plyr--muted .plyr__controls .icon--muted+svg{display:none}.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen]{display:inline-block} \ No newline at end of file
diff --git a/dist/plyr.js b/dist/plyr.js
index 7a63f0a5..b3422980 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(null,function(){t(e,document)}):e.plyr=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(){var e=['<div class="plyr__controls">','<div class="plyr__progress">','<label for="seek{id}" class="plyr__sr-only">Seek</label>','<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">','<progress class="plyr__progress--played" max="100" value="0">',"<span>0</span>% "+A.i18n.played,"</progress>",'<progress class="plyr__progress--buffer" max="100" value="0">',"<span>0</span>% "+A.i18n.buffered,"</progress>"];return A.tooltips.seek&&e.push('<span class="plyr__tooltip">--:--</span>'),e.push("</div>",'<span class="plyr__controls--left">'),i(A.controls,"restart")&&e.push('<button type="button" data-plyr="restart">','<svg><use xlink:href="#'+A.iconPrefix+'-restart" /></svg>','<span class="plyr__sr-only">'+A.i18n.restart+"</span>","</button>"),i(A.controls,"rewind")&&e.push('<button type="button" data-plyr="rewind">','<svg><use xlink:href="#'+A.iconPrefix+'-rewind" /></svg>','<span class="plyr__sr-only">'+A.i18n.rewind+"</span>","</button>"),i(A.controls,"play")&&e.push('<button type="button" data-plyr="play">','<svg><use xlink:href="#'+A.iconPrefix+'-play" /></svg>','<span class="plyr__sr-only">'+A.i18n.play+"</span>","</button>",'<button type="button" data-plyr="pause">','<svg><use xlink:href="#'+A.iconPrefix+'-pause" /></svg>','<span class="plyr__sr-only">'+A.i18n.pause+"</span>","</button>"),i(A.controls,"fast-forward")&&e.push('<button type="button" data-plyr="fast-forward">','<svg><use xlink:href="#'+A.iconPrefix+'-fast-forward" /></svg>','<span class="plyr__sr-only">'+A.i18n.forward+"</span>","</button>"),i(A.controls,"current-time")&&e.push('<span class="plyr__time">','<span class="plyr__sr-only">'+A.i18n.currentTime+"</span>",'<span class="plyr__time--current">00:00</span>',"</span>"),i(A.controls,"duration")&&e.push('<span class="plyr__time">','<span class="plyr__sr-only">'+A.i18n.duration+"</span>",'<span class="plyr__time--duration">--:--</span>',"</span>"),e.push("</span>",'<span class="plyr__controls--right">'),i(A.controls,"mute")&&e.push('<button type="button" data-plyr="mute">','<svg class="icon--muted"><use xlink:href="#'+A.iconPrefix+'-muted" /></svg>','<svg><use xlink:href="#'+A.iconPrefix+'-volume" /></svg>','<span class="plyr__sr-only">'+A.i18n.toggleMute+"</span>","</button>"),i(A.controls,"volume")&&e.push('<label for="volume{id}" class="plyr__sr-only">'+A.i18n.volume+"</label>",'<input id="volume{id}" class="plyr__volume" type="range" min="0" max="10" value="5" data-plyr="volume">'),i(A.controls,"captions")&&e.push('<button type="button" data-plyr="captions">','<svg class="icon--captions-on"><use xlink:href="#'+A.iconPrefix+'-captions-on" /></svg>','<svg><use xlink:href="#'+A.iconPrefix+'-captions-off" /></svg>','<span class="plyr__sr-only">'+A.i18n.toggleCaptions+"</span>","</button>"),i(A.controls,"fullscreen")&&e.push('<button type="button" data-plyr="fullscreen">','<svg class="icon--exit-fullscreen"><use xlink:href="#'+A.iconPrefix+'-exit-fullscreen" /></svg>','<svg><use xlink:href="#'+A.iconPrefix+'-enter-fullscreen" /></svg>','<span class="plyr__sr-only">'+A.i18n.toggleFullscreen+"</span>","</button>"),e.push("</span>","</div>"),e.join("")}function r(t,n){A.debug&&e.console&&console[n?"warn":"log"](t)}function s(){var e,n,r,s=navigator.userAgent,a=navigator.appName,o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",o="11;"):-1!==(n=s.indexOf("MSIE"))?(a="IE",o=s.substring(n+5)):-1!==(n=s.indexOf("Chrome"))?(a="Chrome",o=s.substring(n+7)):-1!==(n=s.indexOf("Safari"))?(a="Safari",o=s.substring(n+7),-1!==(n=s.indexOf("Version"))&&(o=s.substring(n+8))):-1!==(n=s.indexOf("Firefox"))?(a="Firefox",o=s.substring(n+8)):(e=s.lastIndexOf(" ")+1)<(n=s.lastIndexOf("/"))&&(a=s.substring(e,n),o=s.substring(n+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(r=o.indexOf(";"))&&(o=o.substring(0,r)),-1!==(r=o.indexOf(" "))&&(o=o.substring(0,r)),i=parseInt(""+o,10),isNaN(i)&&(o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10)),{name:a,version:i,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform),touch:"ontouchstart"in t.documentElement}}function a(e,t){var n=e.media;if("video"==e.type)switch(t){case"video/webm":return!(!n.canPlayType||!n.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/,""));case"video/mp4":return!(!n.canPlayType||!n.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/,""));case"video/ogg":return!(!n.canPlayType||!n.canPlayType('video/ogg; codecs="theora"').replace(/no/,""))}else if("audio"==e.type)switch(t){case"audio/mpeg":return!(!n.canPlayType||!n.canPlayType("audio/mpeg;").replace(/no/,""));case"audio/ogg":return!(!n.canPlayType||!n.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/,""));case"audio/wav":return!(!n.canPlayType||!n.canPlayType('audio/wav; codecs="1"').replace(/no/,""))}return!1}function o(e){if(!t.querySelectorAll('script[src="'+e+'"]').length){var n=t.createElement("script");n.src=e;var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(n,r)}}function i(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function l(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function u(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,s=e[n],a=s.parentNode,o=s.nextSibling;r.appendChild(s),o?a.insertBefore(r,o):a.appendChild(r)}}function c(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function p(e){e&&e.parentNode.removeChild(e)}function d(e,t){e.insertBefore(t,e.firstChild)}function f(e,t){for(var n in t)e.setAttribute(n,"boolean"==typeof t[n]&&t[n]?"":t[n])}function m(e,n,r){var s=t.createElement(e);f(s,r),d(n,s)}function y(e){return e.replace(".","")}function b(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function v(e,t){return e?e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className):!1}function g(e,t,n){e&&w(e,t,n,!0)}function h(e,t,n){e&&w(e,t,n,!1)}function k(e,t,n,r){g(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])})}function w(e,t,n,r){var s=t.split(" ");if(e instanceof NodeList)for(var a=0;a<e.length;a++)e[a]instanceof Node&&w(e[a],arguments[1],arguments[2],arguments[3]);else for(var o=0;o<s.length;o++)e[r?"addEventListener":"removeEventListener"](s[o],n,!1)}function T(e,t,n){if(e&&t){var r=new CustomEvent(t,n);e.dispatchEvent(r)}}function x(e,t){return e?(t="boolean"==typeof t?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t):void 0}function _(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function C(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},C(e[n],t[n])):e[n]=t[n];return e}function F(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit moz o ms khtml".split(" ");if("undefined"!=typeof t.cancelFullScreen)e.supportsFullScreen=!0;else for(var r=0,s=n.length;s>r;r++){if(e.prefix=n[r],"undefined"!=typeof t[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof t.msExitFullscreen&&t.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=t.body),this.prefix){case"":return t.fullscreenElement==e;case"moz":return t.mozFullScreenElement==e;default:return t[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return"undefined"==typeof e&&(e=t.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?t.cancelFullScreen():t[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?t.fullscreenElement:t[this.prefix+"FullscreenElement"]}),e}function E(){var t={supported:function(){if(!("localStorage"in e))return!1;try{e.localStorage.setItem("___test","OK");var t=e.localStorage.getItem("___test");return e.localStorage.removeItem("___test"),"OK"===t}catch(n){return!1}return!1}()};return t}function S(w){function C(e){if(!Ee.usingTextTracks&&"video"===Ee.type&&Ee.supported.full&&(Ee.subcount=0,e="number"==typeof e?e:Ee.media.currentTime,Ee.captions[Ee.subcount])){for(;L(Ee.captions[Ee.subcount][0])<e.toFixed(1);)if(Ee.subcount++,Ee.subcount>Ee.captions.length-1){Ee.subcount=Ee.captions.length-1;break}if(Ee.media.currentTime.toFixed(1)>=M(Ee.captions[Ee.subcount][0])&&Ee.media.currentTime.toFixed(1)<=L(Ee.captions[Ee.subcount][0])){Ee.currentCaption=Ee.captions[Ee.subcount][1];var t=Ee.currentCaption.trim();Ee.captionsContainer.innerHTML!=t&&(Ee.captionsContainer.innerHTML="",Ee.captionsContainer.innerHTML=t)}else Ee.captionsContainer.innerHTML=""}}function S(){Ee.buttons.captions&&(b(Ee.container,A.classes.captions.enabled,!0),A.captions.defaultActive&&(b(Ee.container,A.classes.captions.active,!0),x(Ee.buttons.captions,!0)))}function M(e){var t=[];return t=e.split(" --> "),O(t[0])}function L(e){var t=[];return t=e.split(" --> "),O(t[1])}function O(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function V(e){return Ee.container.querySelectorAll(e)}function q(e){return V(e)[0]}function H(){try{return e.self!==e.top}catch(t){return!0}}function R(){function e(e){9===e.which&&Ee.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=V("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];g(Ee.container,"keydown",e)}function j(e,t){if("string"==typeof t)m(e,Ee.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)m(e,Ee.media,t[n])}function B(){var e=A.html;r("Injecting custom controls"),e||(e=n()),e=l(e,"{seektime}",A.seekTime),e=l(e,"{id}",Math.floor(1e4*Math.random()));var s;if(null!==A.selectors.controls.container&&(s=A.selectors.controls.container,"string"==typeof selector&&(s=t.querySelector(s))),s instanceof HTMLElement||(s=Ee.container),s.insertAdjacentHTML("beforeend",e),A.tooltips.controls)for(var a=V(A.selectors.labels+" ."+A.classes.hidden),o=a.length-1;o>=0;o--){var i=a[o];b(i,A.classes.hidden,!1),b(i,A.classes.tooltip,!0)}}function D(){try{return Ee.controls=q(A.selectors.controls.wrapper),Ee.buttons={},Ee.buttons.seek=q(A.selectors.buttons.seek),Ee.buttons.play=q(A.selectors.buttons.play),Ee.buttons.pause=q(A.selectors.buttons.pause),Ee.buttons.restart=q(A.selectors.buttons.restart),Ee.buttons.rewind=q(A.selectors.buttons.rewind),Ee.buttons.forward=q(A.selectors.buttons.forward),Ee.buttons.fullscreen=q(A.selectors.buttons.fullscreen),Ee.buttons.volume=q(A.selectors.buttons.volume),Ee.buttons.mute=q(A.selectors.buttons.mute),Ee.buttons.captions=q(A.selectors.buttons.captions),Ee.checkboxes=V('[type="checkbox"]'),Ee.progress={},Ee.progress.container=q(A.selectors.progress.container),Ee.progress.buffer={},Ee.progress.buffer.bar=q(A.selectors.progress.buffer),Ee.progress.buffer.text=Ee.progress.buffer.bar&&Ee.progress.buffer.bar.getElementsByTagName("span")[0],Ee.progress.played={},Ee.progress.played.bar=q(A.selectors.progress.played),Ee.progress.played.text=Ee.progress.played.bar&&Ee.progress.played.bar.getElementsByTagName("span")[0],Ee.progress.tooltip=Ee.progress.container&&Ee.progress.container.querySelector("."+A.classes.tooltip),Ee.volume=q(A.selectors.buttons.volume),Ee.duration=q(A.selectors.duration),Ee.currentTime=q(A.selectors.currentTime),Ee.seekTime=V(A.selectors.seekTime),!0}catch(e){return r("It looks like there is a problem with your controls html",!0),W(!0),!1}}function Y(){b(Ee.container,P.selectors.container.replace(".",""),Ee.supported.full)}function W(e){e?Ee.media.setAttribute("controls",""):Ee.media.removeAttribute("controls")}function $(e){var t=A.i18n.play;"undefined"!=typeof A.title&&A.title.length&&(t+=", "+A.title),Ee.supported.full&&Ee.buttons.play&&Ee.buttons.play.setAttribute("aria-label",t),e instanceof HTMLElement&&e.setAttribute("title",A.i18n.frameTitle.replace("{title}",A.title))}function z(){if(!Ee.media)return r("No audio or video element found",!0),!1;if(Ee.supported.full&&(b(Ee.container,A.classes.type.replace("{0}",Ee.type),!0),b(Ee.container,A.classes.stopped,A.autoplay),b(Ee.container,A.classes.isIos,Ee.browser.ios),b(Ee.container,A.classes.isTouch,Ee.browser.touch),"video"===Ee.type)){var e=t.createElement("div");e.setAttribute("class",A.classes.videoWrapper),u(Ee.media,e),Ee.videoContainer=e}i(A.types.embed,Ee.type)?(K(),Ee.embedId=null):A.autoplay&&Z()}function K(){for(var n=t.createElement("div"),r=Ee.embedId,s=Ee.type+"-"+Math.floor(1e4*Math.random()),a=V('[id^="'+Ee.type+'-"]'),i=a.length-1;i>=0;i--)p(a[i]);if(b(Ee.media,A.classes.videoWrapper,!0),b(Ee.media,A.classes.embedWrapper,!0),"youtube"===Ee.type)Ee.media.appendChild(n),n.setAttribute("id",s),"object"==typeof YT?X(r,n):(o(A.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){X(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Ee.type){var l=t.createElement("iframe");l.loaded=!1,g(l,"load",function(){l.loaded=!0}),f(l,{src:"https://player.vimeo.com/video/"+r+"?player_id="+s+"&api=1&badge=0&byline=0&portrait=0&title=0",id:s,webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:"",frameborder:0}),Ee.supported.full?(n.appendChild(l),Ee.media.appendChild(n)):Ee.media.appendChild(l),"$f"in e||o(A.urls.vimeo.api);var u=e.setInterval(function(){"$f"in e&&l.loaded&&(e.clearInterval(u),J.call(l))},50)}}function U(){Fe(),$(q("iframe"))}function X(t,n){"timer"in Ee||(Ee.timer={}),Ee.embed=new YT.Player(n.id,{videoId:t,playerVars:{autoplay:0,controls:Ee.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:A.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onReady:function(t){var n=t.target;Ee.media.play=function(){n.playVideo(),Ee.media.paused=!1},Ee.media.pause=function(){n.pauseVideo(),Ee.media.paused=!0},Ee.media.stop=function(){n.stopVideo(),Ee.media.paused=!0},Ee.media.duration=n.getDuration(),Ee.media.paused=!0,Ee.media.currentTime=n.getCurrentTime(),Ee.media.muted=n.isMuted(),T(Ee.media,"timeupdate"),e.clearInterval(Ee.timer.buffering),Ee.timer.buffering=e.setInterval(function(){Ee.media.buffered=n.getVideoLoadedFraction(),T(Ee.media,"progress"),1===Ee.media.buffered&&(e.clearInterval(Ee.timer.buffering),T(Ee.media,"canplaythrough"))},200),U(),ye()},onStateChange:function(t){var n=t.target;switch(e.clearInterval(Ee.timer.playing),t.data){case 0:Ee.media.paused=!0,T(Ee.media,"ended");break;case 1:Ee.media.paused=!1,Ee.media.seeking=!1,T(Ee.media,"play"),T(Ee.media,"playing"),Ee.timer.playing=e.setInterval(function(){Ee.media.currentTime=n.getCurrentTime(),T(Ee.media,"timeupdate")},100);break;case 2:Ee.media.paused=!0,T(Ee.media,"pause")}}}})}function J(){Ee.embed=$f(this),Ee.embed.addEvent("ready",function(){Ee.media.play=function(){Ee.embed.api("play"),Ee.media.paused=!1},Ee.media.pause=function(){Ee.embed.api("pause"),Ee.media.paused=!0},Ee.media.stop=function(){Ee.embed.api("stop"),Ee.media.paused=!0},Ee.media.paused=!0,Ee.media.currentTime=0,U(),Ee.embed.api("getCurrentTime",function(e){Ee.media.currentTime=e,T(Ee.media,"timeupdate")}),Ee.embed.api("getDuration",function(e){Ee.media.duration=e,ye()}),Ee.embed.addEvent("play",function(){Ee.media.paused=!1,T(Ee.media,"play"),T(Ee.media,"playing")}),Ee.embed.addEvent("pause",function(){Ee.media.paused=!0,T(Ee.media,"pause")}),Ee.embed.addEvent("playProgress",function(e){Ee.media.seeking=!1,Ee.media.currentTime=e.seconds,T(Ee.media,"timeupdate")}),Ee.embed.addEvent("loadProgress",function(e){Ee.media.buffered=e.percent,T(Ee.media,"progress"),1===parseInt(e.percent)&&T(Ee.media,"canplaythrough")}),Ee.embed.addEvent("finish",function(){Ee.media.paused=!0,T(Ee.media,"ended")})})}function G(){if("video"===Ee.type){q(A.selectors.captions)||Ee.videoContainer.insertAdjacentHTML("afterbegin",'<div class="'+y(A.selectors.captions)+'"><span></span></div>'),Ee.captionsContainer=q(A.selectors.captions).querySelector("span"),Ee.usingTextTracks=!1,Ee.media.textTracks&&(Ee.usingTextTracks=!0);for(var e,t="",n=Ee.media.childNodes,s=0;s<n.length;s++)"track"===n[s].nodeName.toLowerCase()&&(e=n[s].kind,("captions"===e||"subtitles"===e)&&(t=n[s].getAttribute("src")));if(Ee.captionExists=!0,""===t?(Ee.captionExists=!1,r("No caption track found")):r("Caption track found; URI: "+t),Ee.captionExists){for(var a=Ee.media.textTracks,o=0;o<a.length;o++)a[o].mode="hidden";if(S(Ee),("IE"===Ee.browser.name&&Ee.browser.version>=10||"Firefox"===Ee.browser.name&&Ee.browser.version>=31||"Chrome"===Ee.browser.name&&Ee.browser.version>=43||"Safari"===Ee.browser.name&&Ee.browser.version>=7)&&(r("Detected unsupported browser for HTML5 captions - using fallback"),Ee.usingTextTracks=!1),Ee.usingTextTracks){r("TextTracks supported");for(var i=0;i<a.length;i++){var l=a[i];("captions"===l.kind||"subtitles"===l.kind)&&g(l,"cuechange",function(){Ee.captionsContainer.innerHTML="",this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&Ee.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim())})}}else if(r("TextTracks not supported so rendering captions manually"),Ee.currentCaption="",Ee.captions=[],""!==t){var u=new XMLHttpRequest;u.onreadystatechange=function(){if(4===u.readyState)if(200===u.status){var e,t=[],n=u.responseText;t=n.split("\n\n");for(var s=0;s<t.length;s++)e=t[s],Ee.captions[s]=[],Ee.captions[s]=e.split("\n");Ee.captions.shift(),r("Successfully loaded the caption file via AJAX")}else r("There was a problem loading the caption file via AJAX",!0)},u.open("get",t,!0),u.send()}if("Safari"===Ee.browser.name&&Ee.browser.version>=7){r("Safari 7+ detected; removing track from DOM"),a=Ee.media.getElementsByTagName("track");for(var c=0;c<a.length;c++)Ee.media.removeChild(a[c])}}else b(Ee.container,A.classes.captions.enabled)}}function Q(){if(Ee.supported.full&&("audio"!=Ee.type||A.fullscreen.allowAudio)&&A.fullscreen.enabled){var e=N.supportsFullScreen;e||A.fullscreen.fallback&&!H()?(r((e?"Native":"Fallback")+" fullscreen enabled"),b(Ee.container,A.classes.fullscreen.enabled,!0)):r("Fullscreen not supported and fallback disabled"),x(Ee.buttons.fullscreen,!1),R(),A.fullscreen.hideControls&&b(Ee.container,A.classes.fullscreen.hideControls,!0)}}function Z(){"play"in Ee.media&&Ee.media.play()}function ee(){"pause"in Ee.media&&Ee.media.pause()}function te(e){e===!0?Z():e===!1?ee():Ee.media[Ee.media.paused?"play":"pause"]()}function ne(e){"number"!=typeof e&&(e=A.seekTime),se(Ee.media.currentTime-e)}function re(e){"number"!=typeof e&&(e=A.seekTime),se(Ee.media.currentTime+e)}function se(e){var t=0,n=Ee.media.paused;"number"==typeof e?t=e:"object"!=typeof e||"input"!==e.type&&"change"!==e.type||(t=e.target.value/e.target.max*Ee.media.duration),0>t?t=0:t>Ee.media.duration&&(t=Ee.media.duration);try{Ee.media.currentTime=t.toFixed(1)}catch(s){}if(i(A.types.embed,Ee.type)){switch(Ee.type){case"youtube":Ee.embed.seekTo(t);break;case"vimeo":Ee.embed.api("seekTo",t.toFixed(0))}n&&ee(),T(Ee.media,"timeupdate"),Ee.media.seeking=!0}r("Seeking to "+Ee.media.currentTime+" seconds"),C(t)}function ae(){b(Ee.container,A.classes.playing,!Ee.media.paused),b(Ee.container,A.classes.stopped,Ee.media.paused)}function oe(e){var n=N.supportsFullScreen;e&&e.type===N.fullScreenEventName?Ee.isFullscreen=N.isFullScreen(Ee.container):n?(N.isFullScreen(Ee.container)?N.cancelFullScreen():N.requestFullScreen(Ee.container),Ee.isFullscreen=N.isFullScreen(Ee.container)):(Ee.isFullscreen=!Ee.isFullscreen,Ee.isFullscreen?(g(t,"keyup",ie),t.body.style.overflow="hidden"):(h(t,"keyup",ie),t.body.style.overflow="")),b(Ee.container,A.classes.fullscreen.active,Ee.isFullscreen),Ee.isFullscreen?Ee.container.setAttribute("tabindex","-1"):Ee.container.removeAttribute("tabindex"),R(Ee.isFullscreen),x(Ee.buttons.fullscreen,Ee.isFullscreen),A.fullscreen.hideControls&&ge(!0),T(Ee.container,Ee.isFullscreen?"enterfullscreen":"exitfullscreen")}function ie(e){27===(e.which||e.charCode||e.keyCode)&&Ee.isFullscreen&&oe()}function le(e){if("boolean"!=typeof e&&(e=!Ee.media.muted),x(Ee.buttons.mute,e),Ee.media.muted=e,i(A.types.embed,Ee.type)){switch(Ee.type){case"youtube":Ee.embed[Ee.media.muted?"mute":"unMute"]();break;case"vimeo":Ee.embed.api("setVolume",Ee.media.muted?0:parseFloat(A.volume/10))}T(Ee.media,"volumechange")}}function ue(t){if("undefined"==typeof t&&(t=A.volume,A.storage.enabled&&E().supported&&(t=e.localStorage.getItem(A.storage.key))),isNaN(t)&&(t=A.volume),t>10&&(t=10),0>t&&(t=0),Ee.media.volume=parseFloat(t/10),A.volume=t,i(A.types.embed,Ee.type)){switch(Ee.type){case"youtube":Ee.embed.setVolume(100*Ee.media.volume);break;case"vimeo":Ee.embed.api("setVolume",Ee.media.volume)}T(Ee.media,"volumechange")}Ee.media.muted&&t>0&&le()}function ce(){var t=Ee.media.muted?0:10*Ee.media.volume;Ee.supported.full&&Ee.volume&&(Ee.volume.value=t),A.storage.enabled&&E().supported&&!isNaN(t)&&e.localStorage.setItem(A.storage.key,t),b(Ee.container,A.classes.muted,0===t),Ee.supported.full&&Ee.buttons.mute&&x(Ee.buttons.mute,0===t)}function pe(e){Ee.supported.full&&Ee.buttons.captions&&("boolean"!=typeof e&&(e=-1===Ee.container.className.indexOf(A.classes.captions.active)),Ee.captionsEnabled=e,x(Ee.buttons.captions,Ee.captionsEnabled),b(Ee.container,A.classes.captions.active,Ee.captionsEnabled),T(Ee.container,Ee.captionsEnabled?"captionsenabled":"captionsdisabled"))}function de(e){var t="waiting"===e.type;clearTimeout(Ee.timers.loading),Ee.timers.loading=setTimeout(function(){b(Ee.container,A.classes.loading,t)},t?250:0)}function fe(e){var t=Ee.progress.played.bar,n=Ee.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=_(Ee.media.currentTime,Ee.media.duration),"timeupdate"==e.type&&Ee.buttons.seek&&(Ee.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=Ee.progress.buffer.bar,n=Ee.progress.buffer.text,r=function(){var e=Ee.media.buffered;return e&&e.length?_(e.end(0),Ee.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function me(e,t){if(t){isNaN(e)&&(e=0),Ee.secs=parseInt(e%60),Ee.mins=parseInt(e/60%60),Ee.hours=parseInt(e/60/60%60);var n=parseInt(Ee.media.duration/60/60%60)>0;Ee.secs=("0"+Ee.secs).slice(-2),Ee.mins=("0"+Ee.mins).slice(-2),t.innerHTML=(n?Ee.hours+":":"")+Ee.mins+":"+Ee.secs}}function ye(){if(Ee.supported.full){var e=Ee.media.duration||0;!Ee.duration&&A.displayDuration&&Ee.media.paused&&me(e,Ee.currentTime),Ee.duration&&me(e,Ee.duration),ve()}}function be(e){me(Ee.media.currentTime,Ee.currentTime),e&&"timeupdate"==e.type&&Ee.media.seeking||fe(e)}function ve(e){if(A.tooltips.seek&&!Ee.browser.touch){var t=Ee.progress.container.getBoundingClientRect(),n=0,r=A.classes.tooltip+"--visible";if(e)n=100/t.width*(e.pageX-t.left);else{if(!v(Ee.progress.tooltip,r))return;n=Ee.progress.tooltip.style.left.replace("%","")}0>n?n=0:n>100&&(n=100),me(Ee.media.duration/100*n,Ee.progress.tooltip),Ee.progress.tooltip.style.left=n+"%",i(["mouseenter","mouseleave"],e.type)&&b(Ee.progress.tooltip,r,"mouseenter"===e.type)}}function ge(t){Ee.isFullscreen&&(b(Ee.container,A.classes.hover,!0),e.clearTimeout(Ee.timers.hover),Ee.timers.hover=e.setTimeout(function(){Ee.controls.mouseover&&t!==!0||b(Ee.container,A.classes.hover,!1)},2e3))}function he(e){if("undefined"!=typeof e)return void ke(e);var t;switch(Ee.type){case"youtube":t=Ee.embed.getVideoUrl();break;case"vimeo":Ee.embed.api("getVideoUrl",function(e){t=e});break;default:t=Ee.media.currentSrc}return t||""}function ke(n){if(!("undefined"!=typeof n&&"sources"in n&&n.sources.length))return void r("Invalid source format",!0);if(ee(),"youtube"===Ee.type?(Ee.embed.destroy(),e.clearInterval(Ee.timer.buffering),e.clearInterval(Ee.timer.playing)):"video"===Ee.type&&Ee.videoContainer&&p(Ee.videoContainer),p(Ee.media),"type"in n&&(Ee.type=n.type,"video"===Ee.type)){var s=n.sources[0];"type"in s&&i(A.types.embed,s.type)&&(Ee.type=s.type)}switch(Ee.supported=I.supported(Ee.type),Ee.type){case"video":Ee.media=t.createElement("video");break;case"audio":Ee.media=t.createElement("audio");break;case"youtube":case"vimeo":Ee.media=t.createElement("div"),Ee.embedId=n.sources[0].src}d(Ee.container,Ee.media),i(A.types.html5,Ee.type)&&(A.crossorigin&&Ee.media.setAttribute("crossorigin",""),A.autoplay&&Ee.media.setAttribute("autoplay",""),"poster"in n&&Ee.media.setAttribute("poster",n.poster),A.loop&&Ee.media.setAttribute("loop","")),Ee.container.className=Ee.originalClassName,b(Ee.container,A.classes.fullscreen.active,Ee.isFullscreen),b(Ee.container,A.classes.captions.active,Ee.captionsEnabled),Y(),A.autoplay=n.autoplay||A.autoplay,i(A.types.html5,Ee.type)&&j("source",n.sources),z(),i(A.types.html5,Ee.type)&&("tracks"in n&&j("track",n.tracks),Ee.media.load(),Fe(),ye()),A.autoplay&&Z(),"title"in n&&(A.title=n.title,$())}function we(e){"video"===Ee.type&&Ee.media.setAttribute("poster",e)}function Te(){function n(){var e=Ee.media.paused;e?Z():ee();var t=Ee.buttons[e?"play":"pause"],n=Ee.buttons[e?"pause":"play"];if(n){var r=v(t,A.classes.tabFocus);setTimeout(function(){n.focus(),r&&(b(t,A.classes.tabFocus,!1),b(n,A.classes.tabFocus,!0))},100)}}function r(){var e=t.activeElement;e&&e!=t.body?t.querySelector&&(e=t.querySelector(":focus")):e=null;for(var n in Ee.buttons){var r=Ee.buttons[n];b(r,A.classes.tabFocus,r===e)}}var s="IE"==Ee.browser.name?"change":"input";g(e,"keyup",function(e){var t=e.keyCode?e.keyCode:e.which;9==t&&r()}),g(t.body,"click",function(){b(q("."+A.classes.tabFocus),A.classes.tabFocus,!1)});for(var a in Ee.buttons){var o=Ee.buttons[a];g(o,"blur",function(){b(o,"tab-focus",!1)})}k(Ee.buttons.play,"click",A.listeners.play,n),k(Ee.buttons.pause,"click",A.listeners.pause,n),k(Ee.buttons.restart,"click",A.listeners.restart,se),k(Ee.buttons.rewind,"click",A.listeners.rewind,ne),k(Ee.buttons.forward,"click",A.listeners.forward,re),k(Ee.buttons.seek,s,A.listeners.seek,se),k(Ee.volume,s,A.listeners.volume,function(){ue(Ee.volume.value)}),k(Ee.buttons.mute,"click",A.listeners.mute,le),k(Ee.buttons.fullscreen,"click",A.listeners.fullscreen,oe),N.supportsFullScreen&&g(t,N.fullScreenEventName,oe),g(Ee.buttons.captions,"click",pe),g(Ee.progress.container,"mouseenter mouseleave mousemove",ve);A.fullscreen.hideControls&&g(Ee.controls,"mouseenter mouseleave",function(){Ee.controls.mouseover="mouseenter"===event.type})}function xe(){g(Ee.media,"timeupdate seeking",be),g(Ee.media,"timeupdate",C),g(Ee.media,"durationchange loadedmetadata",ye),g(Ee.media,"ended",function(){"video"===Ee.type&&(Ee.captionsContainer.innerHTML=""),ae()}),g(Ee.media,"progress playing",fe),g(Ee.media,"volumechange",ce),g(Ee.media,"play pause",ae),g(Ee.media,"waiting canplay seeked",de),A.click&&g(Ee.media,"click",function(){Ee.media.paused?Z():Ee.media.ended?(se(),Z()):ee()}),A.fullscreen.hideControls&&g(Ee.media,"mousemove",ge),g(Ee.media,A.events.join(" "),function(e){T(Ee.container,e.type)})}function _e(){if(!Ee.init)return null;if(Ee.container.setAttribute("class",y(A.selectors.container)),Ee.init=!1,p(q(A.selectors.controls.wrapper)),"youtube"===Ee.type)return void Ee.embed.destroy();"video"===Ee.type&&(p(q(A.selectors.captions)),c(Ee.videoContainer)),W(!0);var e=Ee.media.cloneNode(!0);Ee.media.parentNode.replaceChild(e,Ee.media)}function Ce(){if(Ee.init)return null;N=F(),Ee.browser=s(),Ee.media=Ee.container.querySelectorAll("audio, video, div")[0],Ee.originalClassName=Ee.container.className;var e=Ee.media.tagName.toLowerCase();if("div"===e?(Ee.type=Ee.media.getAttribute("data-type"),Ee.embedId=Ee.media.getAttribute("data-video-id"),Ee.media.removeAttribute("data-type"),Ee.media.removeAttribute("data-video-id")):(Ee.type=e,A.crossorigin=null!==Ee.media.getAttribute("crossorigin"),A.autoplay=A.autoplay||null!==Ee.media.getAttribute("autoplay"),A.loop=A.loop||null!==Ee.media.getAttribute("loop")),Ee.supported=I.supported(Ee.type),Y(),!Ee.supported.basic)return!1;if(r(Ee.browser.name+" "+Ee.browser.version),z(),i(A.types.html5,Ee.type)){if(!Ee.supported.full)return void(Ee.init=!0);Fe(),$()}Ee.init=!0}function Fe(){if(!Ee.supported.full)return r("No full support for this media type ("+Ee.type+")",!0),p(q(A.selectors.controls.wrapper)),void W(!0);var e=!V(A.selectors.controls.wrapper).length;e&&B(),D()&&(e&&Te(),xe(),W(),Q(),G(),ue(),ce(),be(),ae())}var Ee=this;return Ee.container=w,Ee.timers={},Ce(),Ee.init?{media:Ee.media,play:Z,pause:ee,restart:se,rewind:ne,forward:re,seek:se,source:he,poster:we,setVolume:ue,togglePlay:te,toggleMute:le,toggleCaptions:pe,toggleFullscreen:oe,isFullscreen:function(){return Ee.isFullscreen||!1},support:function(e){return a(Ee,e)},destroy:_e,restore:Ce}:{}}var N,A,I={},P={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:5,click:!0,tooltips:{controls:!1,seek:!0},displayDuration:!0,iconPrefix:"icon",selectors:{container:".plyr",controls:{container:null,wrapper:".plyr__controls"},labels:"[data-plyr]",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',volume:'[data-plyr="volume"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},progress:{container:".plyr__progress",buffer:".plyr__progress--buffer",played:".plyr__progress--played"},captions:".plyr__captions",currentTime:".plyr__time--current",duration:".plyr__time--duration"},classes:{videoWrapper:"plyr__video-wrapper",embedWrapper:"plyr__video-embed",type:"plyr--{0}",stopped:"plyr--stopped",playing:"plyr--playing",muted:"plyr--muted",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",hidden:"plyr__sr-only",isIos:"plyr--is-ios",isTouch:"plyr--is-touch",captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",active:"plyr--fullscreen-active",hideControls:"plyr--fullscreen--hide-controls"},tabFocus:"tab-focus"},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,hideControls:!0,allowAudio:!1},storage:{enabled:!0,key:"plyr_volume"},controls:["restart","rewind","play","fast-forward","current-time","duration","mute","volume","captions","fullscreen"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",played:"played",buffered:"buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen",frameTitle:"Player for {title}"},types:{embed:["youtube","vimeo"],html5:["video","audio"]},urls:{vimeo:{api:"https://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js"},youtube:{api:"https://www.youtube.com/iframe_api"}},listeners:{seek:null,play:null,pause:null,restart:null,rewind:null,forward:null,mute:null,volume:null,captions:null,fullscreen:null},events:["ended","progress","stalled","playing","waiting","canplay","canplaythrough","loadstart","loadeddata","loadedmetadata","timeupdate","volumechange","play","pause","error","seeking","emptied"]
-};return I.supported=function(e){var n,r,a=s(),o="IE"===a.name&&a.version<=9,i=/iPhone|iPod/i.test(navigator.userAgent),l=!!t.createElement("audio").canPlayType,u=!!t.createElement("video").canPlayType;switch(e){case"video":n=u,r=n&&!o&&!i;break;case"audio":n=l,r=n&&!o;break;case"vimeo":case"youtube":n=!0,r=!o&&!i;break;default:n=l&&u,r=n&&!o}return{basic:n,full:r}},I.setup=function(e,n){var r=[];if("string"==typeof e?e=t.querySelectorAll(e):e instanceof HTMLElement?e=[e]:e instanceof NodeList||"string"==typeof e||("undefined"==typeof n&&"object"==typeof e&&(n=e),e=t.querySelectorAll(P.selectors.container)),A=C(P,n),!A.enabled||!I.supported().basic||!e.length)return!1;for(var s=e.length-1;s>=0;s--){var a=e[s];if("undefined"==typeof a.plyr){var o=new S(a);a.plyr=Object.keys(o).length?o:!1,T(a,"setup",{plyr:a.plyr})}r.push(a.plyr)}return r},I}),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,"CustomEvent"in window||(window.CustomEvent=e)}(); \ No newline at end of file
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define(null,function(){t(e,document)}):e.plyr=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(){var e,n,r,s=navigator.userAgent,a=navigator.appName,o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",o="11;"):-1!==(n=s.indexOf("MSIE"))?(a="IE",o=s.substring(n+5)):-1!==(n=s.indexOf("Chrome"))?(a="Chrome",o=s.substring(n+7)):-1!==(n=s.indexOf("Safari"))?(a="Safari",o=s.substring(n+7),-1!==(n=s.indexOf("Version"))&&(o=s.substring(n+8))):-1!==(n=s.indexOf("Firefox"))?(a="Firefox",o=s.substring(n+8)):(e=s.lastIndexOf(" ")+1)<(n=s.lastIndexOf("/"))&&(a=s.substring(e,n),o=s.substring(n+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(r=o.indexOf(";"))&&(o=o.substring(0,r)),-1!==(r=o.indexOf(" "))&&(o=o.substring(0,r)),i=parseInt(""+o,10),isNaN(i)&&(o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10)),{name:a,version:i,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform),touch:"ontouchstart"in t.documentElement}}function r(e,t){var n=e.media;if("video"==e.type)switch(t){case"video/webm":return!(!n.canPlayType||!n.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/,""));case"video/mp4":return!(!n.canPlayType||!n.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/,""));case"video/ogg":return!(!n.canPlayType||!n.canPlayType('video/ogg; codecs="theora"').replace(/no/,""))}else if("audio"==e.type)switch(t){case"audio/mpeg":return!(!n.canPlayType||!n.canPlayType("audio/mpeg;").replace(/no/,""));case"audio/ogg":return!(!n.canPlayType||!n.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/,""));case"audio/wav":return!(!n.canPlayType||!n.canPlayType('audio/wav; codecs="1"').replace(/no/,""))}return!1}function s(e){if(!t.querySelectorAll('script[src="'+e+'"]').length){var n=t.createElement("script");n.src=e;var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(n,r)}}function a(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function o(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function i(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,s=e[n],a=s.parentNode,o=s.nextSibling;r.appendChild(s),o?a.insertBefore(r,o):a.appendChild(r)}}function l(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function u(e){e&&e.parentNode.removeChild(e)}function c(e,t){e.insertBefore(t,e.firstChild)}function p(e,t){for(var n in t)e.setAttribute(n,"boolean"==typeof t[n]&&t[n]?"":t[n])}function d(e,n,r){var s=t.createElement(e);p(s,r),c(n,s)}function f(e){return e.replace(".","")}function m(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function y(e,t){return e?e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className):!1}function b(e,t,n){e&&h(e,t,n,!0)}function v(e,t,n){e&&h(e,t,n,!1)}function g(e,t,n,r){b(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])})}function h(e,t,n,r){var s=t.split(" ");if(e instanceof NodeList)for(var a=0;a<e.length;a++)e[a]instanceof Node&&h(e[a],arguments[1],arguments[2],arguments[3]);else for(var o=0;o<s.length;o++)e[r?"addEventListener":"removeEventListener"](s[o],n,!1)}function k(e,t,n){if(e&&t){var r=new CustomEvent(t,n);e.dispatchEvent(r)}}function w(e,t){return e?(t="boolean"==typeof t?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t):void 0}function T(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function x(){var e=arguments;if(e.length){if(1==e.lenth)return e[0];for(var t=Array.prototype.shift.call(e),n=e.length,r=0;n>r;r++){var s=e[r];for(var a in s)s[a]&&s[a].constructor&&s[a].constructor===Object?(t[a]=t[a]||{},x(t[a],s[a])):t[a]=s[a]}return t}}function _(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit moz o ms khtml".split(" ");if("undefined"!=typeof t.cancelFullScreen)e.supportsFullScreen=!0;else for(var r=0,s=n.length;s>r;r++){if(e.prefix=n[r],"undefined"!=typeof t[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof t.msExitFullscreen&&t.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=t.body),this.prefix){case"":return t.fullscreenElement==e;case"moz":return t.mozFullScreenElement==e;default:return t[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return"undefined"==typeof e&&(e=t.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?t.cancelFullScreen():t[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?t.fullscreenElement:t[this.prefix+"FullscreenElement"]}),e}function C(){var t={supported:function(){if(!("localStorage"in e))return!1;try{e.localStorage.setItem("___test","OK");var t=e.localStorage.getItem("___test");return e.localStorage.removeItem("___test"),"OK"===t}catch(n){return!1}return!1}()};return t}function F(h,x){function F(t,n){x.debug&&e.console&&console[n?"warn":"log"](t)}function N(){var e=['<div class="plyr__controls">','<div class="plyr__progress">','<label for="seek{id}" class="plyr__sr-only">Seek</label>','<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">','<progress class="plyr__progress--played" max="100" value="0">',"<span>0</span>% "+x.i18n.played,"</progress>",'<progress class="plyr__progress--buffer" max="100" value="0">',"<span>0</span>% "+x.i18n.buffered,"</progress>"];return x.tooltips.seek&&e.push('<span class="plyr__tooltip">00:00</span>'),e.push("</div>",'<span class="plyr__controls--left">'),a(x.controls,"restart")&&e.push('<button type="button" data-plyr="restart">','<svg><use xlink:href="#'+x.iconPrefix+'-restart" /></svg>','<span class="plyr__sr-only">'+x.i18n.restart+"</span>","</button>"),a(x.controls,"rewind")&&e.push('<button type="button" data-plyr="rewind">','<svg><use xlink:href="#'+x.iconPrefix+'-rewind" /></svg>','<span class="plyr__sr-only">'+x.i18n.rewind+"</span>","</button>"),a(x.controls,"play")&&e.push('<button type="button" data-plyr="play">','<svg><use xlink:href="#'+x.iconPrefix+'-play" /></svg>','<span class="plyr__sr-only">'+x.i18n.play+"</span>","</button>",'<button type="button" data-plyr="pause">','<svg><use xlink:href="#'+x.iconPrefix+'-pause" /></svg>','<span class="plyr__sr-only">'+x.i18n.pause+"</span>","</button>"),a(x.controls,"fast-forward")&&e.push('<button type="button" data-plyr="fast-forward">','<svg><use xlink:href="#'+x.iconPrefix+'-fast-forward" /></svg>','<span class="plyr__sr-only">'+x.i18n.forward+"</span>","</button>"),a(x.controls,"current-time")&&e.push('<span class="plyr__time">','<span class="plyr__sr-only">'+x.i18n.currentTime+"</span>",'<span class="plyr__time--current">00:00</span>',"</span>"),a(x.controls,"duration")&&e.push('<span class="plyr__time">','<span class="plyr__sr-only">'+x.i18n.duration+"</span>",'<span class="plyr__time--duration">00:00</span>',"</span>"),e.push("</span>",'<span class="plyr__controls--right">'),a(x.controls,"mute")&&e.push('<button type="button" data-plyr="mute">','<svg class="icon--muted"><use xlink:href="#'+x.iconPrefix+'-muted" /></svg>','<svg><use xlink:href="#'+x.iconPrefix+'-volume" /></svg>','<span class="plyr__sr-only">'+x.i18n.toggleMute+"</span>","</button>"),a(x.controls,"volume")&&e.push('<label for="volume{id}" class="plyr__sr-only">'+x.i18n.volume+"</label>",'<input id="volume{id}" class="plyr__volume" type="range" min="0" max="10" value="5" data-plyr="volume">'),a(x.controls,"captions")&&e.push('<button type="button" data-plyr="captions">','<svg class="icon--captions-on"><use xlink:href="#'+x.iconPrefix+'-captions-on" /></svg>','<svg><use xlink:href="#'+x.iconPrefix+'-captions-off" /></svg>','<span class="plyr__sr-only">'+x.i18n.toggleCaptions+"</span>","</button>"),a(x.controls,"fullscreen")&&e.push('<button type="button" data-plyr="fullscreen">','<svg class="icon--exit-fullscreen"><use xlink:href="#'+x.iconPrefix+'-exit-fullscreen" /></svg>','<svg><use xlink:href="#'+x.iconPrefix+'-enter-fullscreen" /></svg>','<span class="plyr__sr-only">'+x.i18n.toggleFullscreen+"</span>","</button>"),e.push("</span>","</div>"),e.join("")}function I(){if(Se.supported.full&&("audio"!=Se.type||x.fullscreen.allowAudio)&&x.fullscreen.enabled){var e=E.supportsFullScreen;e||x.fullscreen.fallback&&!j()?(F((e?"Native":"Fallback")+" fullscreen enabled"),m(Se.container,x.classes.fullscreen.enabled,!0)):F("Fullscreen not supported and fallback disabled"),w(Se.buttons.fullscreen,!1),B(),x.fullscreen.hideControls&&m(Se.container,x.classes.fullscreen.hideControls,!0)}}function P(){if("video"===Se.type){R(x.selectors.captions)||Se.videoContainer.insertAdjacentHTML("afterbegin",'<div class="'+f(x.selectors.captions)+'"><span></span></div>'),Se.captionsContainer=R(x.selectors.captions).querySelector("span"),Se.usingTextTracks=!1,Se.media.textTracks&&(Se.usingTextTracks=!0);for(var e,t="",n=Se.media.childNodes,r=0;r<n.length;r++)"track"===n[r].nodeName.toLowerCase()&&(e=n[r].kind,("captions"===e||"subtitles"===e)&&(t=n[r].getAttribute("src")));if(Se.captionExists=!0,""===t?(Se.captionExists=!1,F("No caption track found")):F("Caption track found; URI: "+t),Se.captionExists){for(var s=Se.media.textTracks,a=0;a<s.length;a++)s[a].mode="hidden";if(L(Se),("IE"===Se.browser.name&&Se.browser.version>=10||"Firefox"===Se.browser.name&&Se.browser.version>=31)&&(F("Detected unsupported browser for HTML5 captions - using fallback"),Se.usingTextTracks=!1),Se.usingTextTracks){F("TextTracks supported");for(var o=0;o<s.length;o++){var i=s[o];("captions"===i.kind||"subtitles"===i.kind)&&b(i,"cuechange",function(){if(console.log("cuechange"),console.log(this),Se.captionsContainer.innerHTML="",this.activeCues[0]&&"text"in this.activeCues[0]){console.log(this.activeCues[0].getCueAsHTML()),Se.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML());Se.captionsContainer.offsetHeight}})}}else if(F("TextTracks not supported so rendering captions manually"),Se.currentCaption="",Se.captions=[],""!==t){var l=new XMLHttpRequest;l.onreadystatechange=function(){if(4===l.readyState)if(200===l.status){var e,t=[],n=l.responseText;t=n.split("\n\n");for(var r=0;r<t.length;r++)e=t[r],Se.captions[r]=[],Se.captions[r]=e.split("\n");Se.captions.shift(),F("Successfully loaded the caption file via AJAX")}else F("There was a problem loading the caption file via AJAX",!0)},l.open("get",t,!0),l.send()}}else m(Se.container,x.classes.captions.enabled)}}function M(e){if(!Se.usingTextTracks&&"video"===Se.type&&Se.supported.full&&(Se.subcount=0,e="number"==typeof e?e:Se.media.currentTime,Se.captions[Se.subcount])){for(;V(Se.captions[Se.subcount][0])<e.toFixed(1);)if(Se.subcount++,Se.subcount>Se.captions.length-1){Se.subcount=Se.captions.length-1;break}if(Se.media.currentTime.toFixed(1)>=O(Se.captions[Se.subcount][0])&&Se.media.currentTime.toFixed(1)<=V(Se.captions[Se.subcount][0])){Se.currentCaption=Se.captions[Se.subcount][1];var t=Se.currentCaption.trim();Se.captionsContainer.innerHTML!=t&&(Se.captionsContainer.innerHTML="",Se.captionsContainer.innerHTML=t)}else Se.captionsContainer.innerHTML=""}}function L(){Se.buttons.captions&&(m(Se.container,x.classes.captions.enabled,!0),x.captions.defaultActive&&(m(Se.container,x.classes.captions.active,!0),w(Se.buttons.captions,!0)))}function O(e){var t=[];return t=e.split(" --> "),H(t[0])}function V(e){var t=[];return t=e.split(" --> "),H(t[1])}function H(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function q(e){return Se.container.querySelectorAll(e)}function R(e){return q(e)[0]}function j(){try{return e.self!==e.top}catch(t){return!0}}function B(){function e(e){9===e.which&&Se.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=q("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];b(Se.container,"keydown",e)}function D(e,t){if("string"==typeof t)d(e,Se.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)d(e,Se.media,t[n])}function Y(){var e=x.html;F("Injecting custom controls"),e||(e=N()),e=o(e,"{seektime}",x.seekTime),e=o(e,"{id}",Math.floor(1e4*Math.random()));var n;if(null!==x.selectors.controls.container&&(n=x.selectors.controls.container,"string"==typeof selector&&(n=t.querySelector(n))),n instanceof HTMLElement||(n=Se.container),n.insertAdjacentHTML("beforeend",e),x.tooltips.controls)for(var r=q(x.selectors.labels+" ."+x.classes.hidden),s=r.length-1;s>=0;s--){var a=r[s];m(a,x.classes.hidden,!1),m(a,x.classes.tooltip,!0)}}function W(){try{return Se.controls=R(x.selectors.controls.wrapper),Se.buttons={},Se.buttons.seek=R(x.selectors.buttons.seek),Se.buttons.play=R(x.selectors.buttons.play),Se.buttons.pause=R(x.selectors.buttons.pause),Se.buttons.restart=R(x.selectors.buttons.restart),Se.buttons.rewind=R(x.selectors.buttons.rewind),Se.buttons.forward=R(x.selectors.buttons.forward),Se.buttons.fullscreen=R(x.selectors.buttons.fullscreen),Se.buttons.volume=R(x.selectors.buttons.volume),Se.buttons.mute=R(x.selectors.buttons.mute),Se.buttons.captions=R(x.selectors.buttons.captions),Se.checkboxes=q('[type="checkbox"]'),Se.progress={},Se.progress.container=R(x.selectors.progress.container),Se.progress.buffer={},Se.progress.buffer.bar=R(x.selectors.progress.buffer),Se.progress.buffer.text=Se.progress.buffer.bar&&Se.progress.buffer.bar.getElementsByTagName("span")[0],Se.progress.played={},Se.progress.played.bar=R(x.selectors.progress.played),Se.progress.played.text=Se.progress.played.bar&&Se.progress.played.bar.getElementsByTagName("span")[0],Se.progress.tooltip=Se.progress.container&&Se.progress.container.querySelector("."+x.classes.tooltip),Se.volume=R(x.selectors.buttons.volume),Se.duration=R(x.selectors.duration),Se.currentTime=R(x.selectors.currentTime),Se.seekTime=q(x.selectors.seekTime),!0}catch(e){return F("It looks like there is a problem with your controls html",!0),z(!0),!1}}function $(){m(Se.container,A.selectors.container.replace(".",""),Se.supported.full)}function z(e){e?Se.media.setAttribute("controls",""):Se.media.removeAttribute("controls")}function K(e){var t=x.i18n.play;"undefined"!=typeof x.title&&x.title.length&&(t+=", "+x.title),Se.supported.full&&Se.buttons.play&&Se.buttons.play.setAttribute("aria-label",t),e instanceof HTMLElement&&e.setAttribute("title",x.i18n.frameTitle.replace("{title}",x.title))}function U(){if(!Se.media)return F("No audio or video element found",!0),!1;if(Se.supported.full&&(m(Se.container,x.classes.type.replace("{0}",Se.type),!0),m(Se.container,x.classes.stopped,x.autoplay),m(Se.container,x.classes.isIos,Se.browser.ios),m(Se.container,x.classes.isTouch,Se.browser.touch),"video"===Se.type)){var e=t.createElement("div");e.setAttribute("class",x.classes.videoWrapper),i(Se.media,e),Se.videoContainer=e}a(x.types.embed,Se.type)?(X(),Se.embedId=null):x.autoplay&&Z()}function X(){for(var n=t.createElement("div"),r=Se.embedId,a=Se.type+"-"+Math.floor(1e4*Math.random()),o=q('[id^="'+Se.type+'-"]'),i=o.length-1;i>=0;i--)u(o[i]);if(m(Se.media,x.classes.videoWrapper,!0),m(Se.media,x.classes.embedWrapper,!0),"youtube"===Se.type)Se.media.appendChild(n),n.setAttribute("id",a),"object"==typeof YT?G(r,n):(s(x.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){G(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Se.type){var l=t.createElement("iframe");l.loaded=!1,b(l,"load",function(){l.loaded=!0}),p(l,{src:"https://player.vimeo.com/video/"+r+"?player_id="+a+"&api=1&badge=0&byline=0&portrait=0&title=0",id:a,webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:"",frameborder:0}),Se.supported.full?(n.appendChild(l),Se.media.appendChild(n)):Se.media.appendChild(l),"$f"in e||s(x.urls.vimeo.api);var c=e.setInterval(function(){"$f"in e&&l.loaded&&(e.clearInterval(c),Q.call(l))},50)}}function J(){Ee(),K(R("iframe"))}function G(t,n){"timer"in Se||(Se.timer={}),Se.embed=new YT.Player(n.id,{videoId:t,playerVars:{autoplay:0,controls:Se.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:x.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onReady:function(t){var n=t.target;Se.media.play=function(){n.playVideo(),Se.media.paused=!1},Se.media.pause=function(){n.pauseVideo(),Se.media.paused=!0},Se.media.stop=function(){n.stopVideo(),Se.media.paused=!0},Se.media.duration=n.getDuration(),Se.media.paused=!0,Se.media.currentTime=n.getCurrentTime(),Se.media.muted=n.isMuted(),k(Se.media,"timeupdate"),e.clearInterval(Se.timer.buffering),Se.timer.buffering=e.setInterval(function(){Se.media.buffered=n.getVideoLoadedFraction(),k(Se.media,"progress"),1===Se.media.buffered&&(e.clearInterval(Se.timer.buffering),k(Se.media,"canplaythrough"))},200),J(),be()},onStateChange:function(t){var n=t.target;switch(e.clearInterval(Se.timer.playing),t.data){case 0:Se.media.paused=!0,k(Se.media,"ended");break;case 1:Se.media.paused=!1,Se.media.seeking=!1,k(Se.media,"play"),k(Se.media,"playing"),Se.timer.playing=e.setInterval(function(){Se.media.currentTime=n.getCurrentTime(),k(Se.media,"timeupdate")},100);break;case 2:Se.media.paused=!0,k(Se.media,"pause")}}}})}function Q(){Se.embed=$f(this),Se.embed.addEvent("ready",function(){Se.media.play=function(){Se.embed.api("play"),Se.media.paused=!1},Se.media.pause=function(){Se.embed.api("pause"),Se.media.paused=!0},Se.media.stop=function(){Se.embed.api("stop"),Se.media.paused=!0},Se.media.paused=!0,Se.media.currentTime=0,J(),Se.embed.api("getCurrentTime",function(e){Se.media.currentTime=e,k(Se.media,"timeupdate")}),Se.embed.api("getDuration",function(e){Se.media.duration=e,be()}),Se.embed.addEvent("play",function(){Se.media.paused=!1,k(Se.media,"play"),k(Se.media,"playing")}),Se.embed.addEvent("pause",function(){Se.media.paused=!0,k(Se.media,"pause")}),Se.embed.addEvent("playProgress",function(e){Se.media.seeking=!1,Se.media.currentTime=e.seconds,k(Se.media,"timeupdate")}),Se.embed.addEvent("loadProgress",function(e){Se.media.buffered=e.percent,k(Se.media,"progress"),1===parseInt(e.percent)&&k(Se.media,"canplaythrough")}),Se.embed.addEvent("finish",function(){Se.media.paused=!0,k(Se.media,"ended")})})}function Z(){"play"in Se.media&&Se.media.play()}function ee(){"pause"in Se.media&&Se.media.pause()}function te(e){e===!0?Z():e===!1?ee():Se.media[Se.media.paused?"play":"pause"]()}function ne(e){"number"!=typeof e&&(e=x.seekTime),se(Se.media.currentTime-e)}function re(e){"number"!=typeof e&&(e=x.seekTime),se(Se.media.currentTime+e)}function se(e){var t=0,n=Se.media.paused,r=ae();"number"==typeof e?t=e:"object"!=typeof e||"input"!==e.type&&"change"!==e.type||(t=e.target.value/e.target.max*r),0>t?t=0:t>r&&(t=r);try{Se.media.currentTime=t.toFixed(1)}catch(s){}if(a(x.types.embed,Se.type)){switch(Se.type){case"youtube":Se.embed.seekTo(t);break;case"vimeo":Se.embed.api("seekTo",t.toFixed(0))}n&&ee(),k(Se.media,"timeupdate"),Se.media.seeking=!0}F("Seeking to "+Se.media.currentTime+" seconds"),M(t)}function ae(){var e=parseInt(x.duration);return isNaN(e)?Se.media.duration:e}function oe(){m(Se.container,x.classes.playing,!Se.media.paused),m(Se.container,x.classes.stopped,Se.media.paused)}function ie(e){var n=E.supportsFullScreen;e&&e.type===E.fullScreenEventName?Se.isFullscreen=E.isFullScreen(Se.container):n?(E.isFullScreen(Se.container)?E.cancelFullScreen():E.requestFullScreen(Se.container),Se.isFullscreen=E.isFullScreen(Se.container)):(Se.isFullscreen=!Se.isFullscreen,Se.isFullscreen?(b(t,"keyup",le),t.body.style.overflow="hidden"):(v(t,"keyup",le),t.body.style.overflow="")),m(Se.container,x.classes.fullscreen.active,Se.isFullscreen),Se.isFullscreen?Se.container.setAttribute("tabindex","-1"):Se.container.removeAttribute("tabindex"),B(Se.isFullscreen),w(Se.buttons.fullscreen,Se.isFullscreen),x.fullscreen.hideControls&&he(!0),k(Se.container,Se.isFullscreen?"enterfullscreen":"exitfullscreen")}function le(e){27===(e.which||e.charCode||e.keyCode)&&Se.isFullscreen&&ie()}function ue(e){if("boolean"!=typeof e&&(e=!Se.media.muted),w(Se.buttons.mute,e),Se.media.muted=e,a(x.types.embed,Se.type)){switch(Se.type){case"youtube":Se.embed[Se.media.muted?"mute":"unMute"]();break;case"vimeo":Se.embed.api("setVolume",Se.media.muted?0:parseFloat(x.volume/10))}k(Se.media,"volumechange")}}function ce(t){if("undefined"==typeof t&&(t=x.volume,x.storage.enabled&&C().supported&&(t=e.localStorage.getItem(x.storage.key))),isNaN(t)&&(t=x.volume),t>10&&(t=10),0>t&&(t=0),Se.media.volume=parseFloat(t/10),x.volume=t,a(x.types.embed,Se.type)){switch(Se.type){case"youtube":Se.embed.setVolume(100*Se.media.volume);break;case"vimeo":Se.embed.api("setVolume",Se.media.volume)}k(Se.media,"volumechange")}Se.media.muted&&t>0&&ue()}function pe(){var t=Se.media.muted?0:10*Se.media.volume;Se.supported.full&&Se.volume&&(Se.volume.value=t),x.storage.enabled&&C().supported&&!isNaN(t)&&e.localStorage.setItem(x.storage.key,t),m(Se.container,x.classes.muted,0===t),Se.supported.full&&Se.buttons.mute&&w(Se.buttons.mute,0===t)}function de(e){Se.supported.full&&Se.buttons.captions&&("boolean"!=typeof e&&(e=-1===Se.container.className.indexOf(x.classes.captions.active)),Se.captionsEnabled=e,w(Se.buttons.captions,Se.captionsEnabled),m(Se.container,x.classes.captions.active,Se.captionsEnabled),k(Se.container,Se.captionsEnabled?"captionsenabled":"captionsdisabled"))}function fe(e){var t="waiting"===e.type;clearTimeout(Se.timers.loading),Se.timers.loading=setTimeout(function(){m(Se.container,x.classes.loading,t)},t?250:0)}function me(e){var t=Se.progress.played.bar,n=Se.progress.played.text,r=0,s=ae();if(e)switch(e.type){case"timeupdate":case"seeking":r=T(Se.media.currentTime,s),"timeupdate"==e.type&&Se.buttons.seek&&(Se.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=Se.progress.buffer.bar,n=Se.progress.buffer.text,r=function(){var e=Se.media.buffered;return e&&e.length?T(e.end(0),s):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function ye(e,t){if(t){isNaN(e)&&(e=0),Se.secs=parseInt(e%60),Se.mins=parseInt(e/60%60),Se.hours=parseInt(e/60/60%60);var n=parseInt(ae()/60/60%60)>0;Se.secs=("0"+Se.secs).slice(-2),Se.mins=("0"+Se.mins).slice(-2),t.innerHTML=(n?Se.hours+":":"")+Se.mins+":"+Se.secs}}function be(){if(Se.supported.full){var e=ae()||0;!Se.duration&&x.displayDuration&&Se.media.paused&&ye(e,Se.currentTime),Se.duration&&ye(e,Se.duration),ge()}}function ve(e){ye(Se.media.currentTime,Se.currentTime),e&&"timeupdate"==e.type&&Se.media.seeking||me(e)}function ge(e){if(x.tooltips.seek&&!Se.browser.touch){var t=Se.progress.container.getBoundingClientRect(),n=0,r=x.classes.tooltip+"--visible";if(e)n=100/t.width*(e.pageX-t.left);else{if(!y(Se.progress.tooltip,r))return;n=Se.progress.tooltip.style.left.replace("%","")}0>n?n=0:n>100&&(n=100),ye(ae()/100*n,Se.progress.tooltip),Se.progress.tooltip.style.left=n+"%",e&&a(["mouseenter","mouseleave"],e.type)&&m(Se.progress.tooltip,r,"mouseenter"===e.type)}}function he(t){Se.isFullscreen&&(m(Se.container,x.classes.hover,!0),e.clearTimeout(Se.timers.hover),Se.timers.hover=e.setTimeout(function(){Se.controls.mouseover&&t!==!0||m(Se.container,x.classes.hover,!1)},2e3))}function ke(e){if("undefined"!=typeof e)return void we(e);var t;switch(Se.type){case"youtube":t=Se.embed.getVideoUrl();break;case"vimeo":Se.embed.api("getVideoUrl",function(e){t=e});break;default:t=Se.media.currentSrc}return t||""}function we(n){if(!("undefined"!=typeof n&&"sources"in n&&n.sources.length))return void F("Invalid source format",!0);if(ee(),"youtube"===Se.type?(Se.embed.destroy(),e.clearInterval(Se.timer.buffering),e.clearInterval(Se.timer.playing)):"video"===Se.type&&Se.videoContainer&&u(Se.videoContainer),u(Se.media),"type"in n&&(Se.type=n.type,"video"===Se.type)){var r=n.sources[0];"type"in r&&a(x.types.embed,r.type)&&(Se.type=r.type)}switch(Se.supported=S.supported(Se.type),Se.type){case"video":Se.media=t.createElement("video");break;case"audio":Se.media=t.createElement("audio");break;case"youtube":case"vimeo":Se.media=t.createElement("div"),Se.embedId=n.sources[0].src}c(Se.container,Se.media),a(x.types.html5,Se.type)&&(x.crossorigin&&Se.media.setAttribute("crossorigin",""),x.autoplay&&Se.media.setAttribute("autoplay",""),"poster"in n&&Se.media.setAttribute("poster",n.poster),x.loop&&Se.media.setAttribute("loop","")),Se.container.className=Se.originalClassName,m(Se.container,x.classes.fullscreen.active,Se.isFullscreen),m(Se.container,x.classes.captions.active,Se.captionsEnabled),$(),x.autoplay=n.autoplay||x.autoplay,a(x.types.html5,Se.type)&&D("source",n.sources),U(),a(x.types.html5,Se.type)&&("tracks"in n&&D("track",n.tracks),Se.media.load(),Ee(),be()),x.autoplay&&Z(),"title"in n&&(x.title=n.title,K()),Se.container.plyr.media=Se.media}function Te(e){"video"===Se.type&&Se.media.setAttribute("poster",e)}function xe(){function n(){var e=Se.media.paused;e?Z():ee();var t=Se.buttons[e?"play":"pause"],n=Se.buttons[e?"pause":"play"];if(n){var r=y(t,x.classes.tabFocus);setTimeout(function(){n.focus(),r&&(m(t,x.classes.tabFocus,!1),m(n,x.classes.tabFocus,!0))},100)}}function r(){var e=t.activeElement;e&&e!=t.body?t.querySelector&&(e=t.querySelector(":focus")):e=null;for(var n in Se.buttons){var r=Se.buttons[n];m(r,x.classes.tabFocus,r===e)}}var s="IE"==Se.browser.name?"change":"input";b(e,"keyup",function(e){var t=e.keyCode?e.keyCode:e.which;9==t&&r()}),b(t.body,"click",function(){m(R("."+x.classes.tabFocus),x.classes.tabFocus,!1)});for(var a in Se.buttons){var o=Se.buttons[a];b(o,"blur",function(){m(o,"tab-focus",!1)})}g(Se.buttons.play,"click",x.listeners.play,n),g(Se.buttons.pause,"click",x.listeners.pause,n),g(Se.buttons.restart,"click",x.listeners.restart,se),g(Se.buttons.rewind,"click",x.listeners.rewind,ne),g(Se.buttons.forward,"click",x.listeners.forward,re),g(Se.buttons.seek,s,x.listeners.seek,se),g(Se.volume,s,x.listeners.volume,function(){ce(Se.volume.value)}),g(Se.buttons.mute,"click",x.listeners.mute,ue),g(Se.buttons.fullscreen,"click",x.listeners.fullscreen,ie),E.supportsFullScreen&&b(t,E.fullScreenEventName,ie),b(Se.buttons.captions,"click",de),b(Se.progress.container,"mouseenter mouseleave mousemove",ge);x.fullscreen.hideControls&&b(Se.controls,"mouseenter mouseleave",function(){Se.controls.mouseover="mouseenter"===event.type})}function _e(){b(Se.media,"timeupdate seeking",ve),b(Se.media,"timeupdate",M),b(Se.media,"durationchange loadedmetadata",be),b(Se.media,"ended",function(){"video"===Se.type&&(Se.captionsContainer.innerHTML=""),oe()}),b(Se.media,"progress playing",me),b(Se.media,"volumechange",pe),b(Se.media,"play pause",oe),b(Se.media,"waiting canplay seeked",fe),x.click&&b(Se.media,"click",function(){Se.media.paused?Z():Se.media.ended?(se(),Z()):ee()}),x.fullscreen.hideControls&&b(Se.media,"mousemove",he),b(Se.media,x.events.join(" "),function(e){k(Se.container,e.type)})}function Ce(){if(!Se.init)return null;if(Se.container.setAttribute("class",f(x.selectors.container)),Se.init=!1,u(R(x.selectors.controls.wrapper)),"youtube"===Se.type)return void Se.embed.destroy();"video"===Se.type&&(u(R(x.selectors.captions)),l(Se.videoContainer)),z(!0);var e=Se.media.cloneNode(!0);Se.media.parentNode.replaceChild(e,Se.media)}function Fe(){if(Se.init)return null;E=_(),Se.browser=n(),Se.media=Se.container.querySelectorAll("audio, video, div")[0],Se.originalClassName=Se.container.className;var e=Se.media.tagName.toLowerCase();if("div"===e?(Se.type=Se.media.getAttribute("data-type"),Se.embedId=Se.media.getAttribute("data-video-id"),Se.media.removeAttribute("data-type"),Se.media.removeAttribute("data-video-id")):(Se.type=e,x.crossorigin=null!==Se.media.getAttribute("crossorigin"),x.autoplay=x.autoplay||null!==Se.media.getAttribute("autoplay"),x.loop=x.loop||null!==Se.media.getAttribute("loop")),Se.supported=S.supported(Se.type),$(),!Se.supported.basic)return!1;if(F(Se.browser.name+" "+Se.browser.version),U(),a(x.types.html5,Se.type)){if(!Se.supported.full)return void(Se.init=!0);Ee(),K()}Se.init=!0}function Ee(){if(!Se.supported.full)return F("No full support for this media type ("+Se.type+")",!0),u(R(x.selectors.controls.wrapper)),void z(!0);var e=!q(x.selectors.controls.wrapper).length;e&&Y(),W()&&(e&&xe(),_e(),z(),I(),P(),ce(),pe(),ve(),oe(),be())}var Se=this;return Se.container=h,Se.timers={},F(x),Fe(),Se.init?{media:Se.media,play:Z,pause:ee,restart:se,rewind:ne,forward:re,seek:se,source:ke,poster:Te,setVolume:ce,togglePlay:te,toggleMute:ue,toggleCaptions:de,toggleFullscreen:ie,isFullscreen:function(){return Se.isFullscreen||!1},support:function(e){return r(Se,e)},destroy:Ce,restore:Fe}:{}}var E,S={},A={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:5,duration:null,displayDuration:!0,iconPrefix:"icon",click:!0,tooltips:{controls:!1,seek:!0},selectors:{container:".plyr",controls:{container:null,wrapper:".plyr__controls"},labels:"[data-plyr]",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',volume:'[data-plyr="volume"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},progress:{container:".plyr__progress",buffer:".plyr__progress--buffer",played:".plyr__progress--played"},captions:".plyr__captions",currentTime:".plyr__time--current",duration:".plyr__time--duration"},classes:{videoWrapper:"plyr__video-wrapper",embedWrapper:"plyr__video-embed",type:"plyr--{0}",stopped:"plyr--stopped",playing:"plyr--playing",muted:"plyr--muted",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",hidden:"plyr__sr-only",isIos:"plyr--is-ios",isTouch:"plyr--is-touch",captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",active:"plyr--fullscreen-active",hideControls:"plyr--fullscreen--hide-controls"},tabFocus:"tab-focus"},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,hideControls:!0,allowAudio:!1},storage:{enabled:!0,key:"plyr_volume"},controls:["restart","rewind","play","fast-forward","current-time","duration","mute","volume","captions","fullscreen"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",played:"played",buffered:"buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen",frameTitle:"Player for {title}"},types:{embed:["youtube","vimeo"],html5:["video","audio"]},urls:{vimeo:{api:"https://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js"},youtube:{api:"https://www.youtube.com/iframe_api"}},listeners:{seek:null,play:null,pause:null,restart:null,rewind:null,forward:null,mute:null,volume:null,captions:null,fullscreen:null},events:["ended","progress","stalled","playing","waiting","canplay","canplaythrough","loadstart","loadeddata","loadedmetadata","timeupdate","volumechange","play","pause","error","seeking","emptied"]
+};return S.supported=function(e){var r,s,a=n(),o="IE"===a.name&&a.version<=9,i=/iPhone|iPod/i.test(navigator.userAgent),l=!!t.createElement("audio").canPlayType,u=!!t.createElement("video").canPlayType;switch(e){case"video":r=u,s=r&&!o&&!i;break;case"audio":r=l,s=r&&!o;break;case"vimeo":case"youtube":r=!0,s=!o&&!i;break;default:r=l&&u,s=r&&!o}return{basic:r,full:s}},S.setup=function(e,n){var r=[];if("string"==typeof e?e=t.querySelectorAll(e):e instanceof HTMLElement?e=[e]:e instanceof NodeList||"string"==typeof e||("undefined"==typeof n&&"object"==typeof e&&(n=e),e=t.querySelectorAll(A.selectors.container)),!S.supported().basic||!e.length)return!1;for(var s=e.length-1;s>=0;s--){var a=e[s];if("undefined"==typeof a.plyr){var o=x(A,n,JSON.parse(a.getAttribute("data-plyr")));if(!o.enabled)return;var i=new F(a,o);a.plyr=Object.keys(i).length?i:!1,k(a,"setup",{plyr:a.plyr})}r.push(a.plyr)}return r},S}),function(){function e(e,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}e.prototype=window.Event.prototype,"CustomEvent"in window||(window.CustomEvent=e)}(); \ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 5eb8278e..7135b929 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -58,7 +58,7 @@
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
<!-- Text track file -->
- <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt" default>
+ <track kind="captions" label="English" srclang="en" src="View_From_A_Blue_Moon_Trailer-HD.vtt" default>
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
diff --git a/src/js/plyr.js b/src/js/plyr.js
index fce746db..d04972a8 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -26,7 +26,7 @@
/*global YT,$f*/
// Globals
- var fullscreen, config, api = {};
+ var fullscreen, api = {};
// Default config
var defaults = {
@@ -36,13 +36,14 @@
loop: false,
seekTime: 10,
volume: 5,
+ duration: null,
+ displayDuration: true,
+ iconPrefix: 'icon',
click: true,
tooltips: {
controls: false,
seek: true
},
- displayDuration: true,
- iconPrefix: 'icon',
selectors: {
container: '.plyr',
controls: {
@@ -155,157 +156,6 @@
events: ['ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'emptied']
};
- // Build the default HTML
- function _buildControls() {
- // Open and add the progress and seek elements
- var html = [
- '<div class="plyr__controls">',
- '<div class="plyr__progress">',
- '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
- '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
- '<progress class="plyr__progress--played" max="100" value="0">',
- '<span>0</span>% ' + config.i18n.played,
- '</progress>',
- '<progress class="plyr__progress--buffer" max="100" value="0">',
- '<span>0</span>% ' + config.i18n.buffered,
- '</progress>'];
-
- // Seek tooltip
- if (config.tooltips.seek) {
- html.push('<span class="plyr__tooltip">--:--</span>');
- }
-
- // Close progress
- html.push('</div>',
- '<span class="plyr__controls--left">');
-
- // Restart button
- if (_inArray(config.controls, 'restart')) {
- html.push(
- '<button type="button" data-plyr="restart">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-restart" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.restart + '</span>',
- '</button>'
- );
- }
-
- // Rewind button
- if (_inArray(config.controls, 'rewind')) {
- html.push(
- '<button type="button" data-plyr="rewind">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-rewind" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>',
- '</button>'
- );
- }
-
- // Play/pause button
- if (_inArray(config.controls, 'play')) {
- html.push(
- '<button type="button" data-plyr="play">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
- '</button>',
- '<button type="button" data-plyr="pause">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-pause" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.pause + '</span>',
- '</button>'
- );
- }
-
- // Fast forward button
- if (_inArray(config.controls, 'fast-forward')) {
- html.push(
- '<button type="button" data-plyr="fast-forward">',
- '<svg><use xlink:href="#' + config.iconPrefix + '-fast-forward" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.forward + '</span>',
- '</button>'
- );
- }
-
- // Media current time display
- if (_inArray(config.controls, 'current-time')) {
- html.push(
- '<span class="plyr__time">',
- '<span class="plyr__sr-only">' + config.i18n.currentTime + '</span>',
- '<span class="plyr__time--current">00:00</span>',
- '</span>'
- );
- }
-
- // Media duration display
- if (_inArray(config.controls, 'duration')) {
- html.push(
- '<span class="plyr__time">',
- '<span class="plyr__sr-only">' + config.i18n.duration + '</span>',
- '<span class="plyr__time--duration">--:--</span>',
- '</span>'
- );
- }
-
- // Close left controls
- html.push(
- '</span>',
- '<span class="plyr__controls--right">'
- );
-
- // Toggle mute button
- if (_inArray(config.controls, 'mute')) {
- html.push(
- '<button type="button" data-plyr="mute">',
- '<svg class="icon--muted"><use xlink:href="#' + config.iconPrefix + '-muted" /></svg>',
- '<svg><use xlink:href="#' + config.iconPrefix + '-volume" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>',
- '</button>'
- );
- }
-
- // Volume range control
- if (_inArray(config.controls, 'volume')) {
- html.push(
- '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
- '<input id="volume{id}" class="plyr__volume" type="range" min="0" max="10" value="5" data-plyr="volume">'
- );
- }
-
- // Toggle captions button
- if (_inArray(config.controls, 'captions')) {
- html.push(
- '<button type="button" data-plyr="captions">',
- '<svg class="icon--captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on" /></svg>',
- '<svg><use xlink:href="#' + config.iconPrefix + '-captions-off" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>',
- '</button>'
- );
- }
-
- // Toggle fullscreen button
- if (_inArray(config.controls, 'fullscreen')) {
- html.push(
- '<button type="button" data-plyr="fullscreen">',
- '<svg class="icon--exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen" /></svg>',
- '<svg><use xlink:href="#' + config.iconPrefix + '-enter-fullscreen" /></svg>',
- '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>',
- '</button>'
- );
- }
-
- // Close everything
- html.push(
- '</span>',
- '</div>'
- );
-
- return html.join('');
- }
-
- // Debugging
- function _log(text, warn) {
- if (config.debug && window.console) {
- console[(warn ? 'warn' : 'log')](text);
- }
- }
-
// Credits: http://paypal.github.io/accessible-html5-video-player/
// Unfortunately, due to mixed support, UA sniffing is required
function _browserSniff() {
@@ -623,19 +473,42 @@
return ((current / max) * 100).toFixed(2);
}
- // Deep extend/merge two Objects
+ // Deep extend/merge destination object with N more objects
// http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/
// Removed call to arguments.callee (used explicit function name instead)
- function _extend(destination, source) {
- for (var property in source) {
- if (source[property] && source[property].constructor && source[property].constructor === Object) {
- destination[property] = destination[property] || {};
- _extend(destination[property], source[property]);
- }
- else {
- destination[property] = source[property];
+ function _extend() {
+ // Get arguments
+ var objects = arguments;
+
+ // Bail if nothing to merge
+ if(!objects.length) {
+ return;
+ }
+
+ // Return first if specified but nothing to merge
+ if(objects.lenth == 1) {
+ return objects[0];
+ }
+
+ // First object is the destination
+ var destination = Array.prototype.shift.call(objects),
+ length = objects.length;
+
+ // Loop through all objects to merge
+ for (var i = 0; i < length; i++) {
+ var source = objects[i];
+
+ for (var property in source) {
+ if (source[property] && source[property].constructor && source[property].constructor === Object) {
+ destination[property] = destination[property] || {};
+ _extend(destination[property], source[property]);
+ }
+ else {
+ destination[property] = source[property];
+ }
}
}
+
return destination;
}
@@ -744,11 +617,360 @@
}
// Player instance
- function Plyr(container) {
+ function Plyr(container, config) {
var plyr = this;
plyr.container = container;
plyr.timers = {};
+ // Log config options
+ _log(config);
+
+ // Debugging
+ function _log(text, warn) {
+ if (config.debug && window.console) {
+ console[(warn ? 'warn' : 'log')](text);
+ }
+ }
+
+ // Build the default HTML
+ function _buildControls() {
+ // Open and add the progress and seek elements
+ var html = [
+ '<div class="plyr__controls">',
+ '<div class="plyr__progress">',
+ '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
+ '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
+ '<progress class="plyr__progress--played" max="100" value="0">',
+ '<span>0</span>% ' + config.i18n.played,
+ '</progress>',
+ '<progress class="plyr__progress--buffer" max="100" value="0">',
+ '<span>0</span>% ' + config.i18n.buffered,
+ '</progress>'];
+
+ // Seek tooltip
+ if (config.tooltips.seek) {
+ html.push('<span class="plyr__tooltip">00:00</span>');
+ }
+
+ // Close progress
+ html.push('</div>',
+ '<span class="plyr__controls--left">');
+
+ // Restart button
+ if (_inArray(config.controls, 'restart')) {
+ html.push(
+ '<button type="button" data-plyr="restart">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-restart" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.restart + '</span>',
+ '</button>'
+ );
+ }
+
+ // Rewind button
+ if (_inArray(config.controls, 'rewind')) {
+ html.push(
+ '<button type="button" data-plyr="rewind">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-rewind" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>',
+ '</button>'
+ );
+ }
+
+ // Play/pause button
+ if (_inArray(config.controls, 'play')) {
+ html.push(
+ '<button type="button" data-plyr="play">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
+ '</button>',
+ '<button type="button" data-plyr="pause">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-pause" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.pause + '</span>',
+ '</button>'
+ );
+ }
+
+ // Fast forward button
+ if (_inArray(config.controls, 'fast-forward')) {
+ html.push(
+ '<button type="button" data-plyr="fast-forward">',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-fast-forward" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.forward + '</span>',
+ '</button>'
+ );
+ }
+
+ // Media current time display
+ if (_inArray(config.controls, 'current-time')) {
+ html.push(
+ '<span class="plyr__time">',
+ '<span class="plyr__sr-only">' + config.i18n.currentTime + '</span>',
+ '<span class="plyr__time--current">00:00</span>',
+ '</span>'
+ );
+ }
+
+ // Media duration display
+ if (_inArray(config.controls, 'duration')) {
+ html.push(
+ '<span class="plyr__time">',
+ '<span class="plyr__sr-only">' + config.i18n.duration + '</span>',
+ '<span class="plyr__time--duration">00:00</span>',
+ '</span>'
+ );
+ }
+
+ // Close left controls
+ html.push(
+ '</span>',
+ '<span class="plyr__controls--right">'
+ );
+
+ // Toggle mute button
+ if (_inArray(config.controls, 'mute')) {
+ html.push(
+ '<button type="button" data-plyr="mute">',
+ '<svg class="icon--muted"><use xlink:href="#' + config.iconPrefix + '-muted" /></svg>',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-volume" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>',
+ '</button>'
+ );
+ }
+
+ // Volume range control
+ if (_inArray(config.controls, 'volume')) {
+ html.push(
+ '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
+ '<input id="volume{id}" class="plyr__volume" type="range" min="0" max="10" value="5" data-plyr="volume">'
+ );
+ }
+
+ // Toggle captions button
+ if (_inArray(config.controls, 'captions')) {
+ html.push(
+ '<button type="button" data-plyr="captions">',
+ '<svg class="icon--captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on" /></svg>',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-captions-off" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>',
+ '</button>'
+ );
+ }
+
+ // Toggle fullscreen button
+ if (_inArray(config.controls, 'fullscreen')) {
+ html.push(
+ '<button type="button" data-plyr="fullscreen">',
+ '<svg class="icon--exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen" /></svg>',
+ '<svg><use xlink:href="#' + config.iconPrefix + '-enter-fullscreen" /></svg>',
+ '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>',
+ '</button>'
+ );
+ }
+
+ // Close everything
+ html.push(
+ '</span>',
+ '</div>'
+ );
+
+ return html.join('');
+ }
+
+ // Setup fullscreen
+ function _setupFullscreen() {
+ if (!plyr.supported.full) {
+ return;
+ }
+
+ if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
+ // Check for native support
+ var nativeSupport = fullscreen.supportsFullScreen;
+
+ if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
+ _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
+
+ // Add styling hook
+ _toggleClass(plyr.container, config.classes.fullscreen.enabled, true);
+ }
+ else {
+ _log('Fullscreen not supported and fallback disabled');
+ }
+
+ // Toggle state
+ _toggleState(plyr.buttons.fullscreen, false);
+
+ // Setup focus trap
+ _focusTrap();
+
+ // Set control hide class hook
+ if (config.fullscreen.hideControls) {
+ _toggleClass(plyr.container, config.classes.fullscreen.hideControls, true);
+ }
+ }
+ }
+
+ // Setup captions
+ function _setupCaptions() {
+ if (plyr.type !== 'video') {
+ return;
+ }
+
+ // Inject the container
+ if (!_getElement(config.selectors.captions)) {
+ plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"><span></span></div>');
+ }
+
+ // Cache selector
+ plyr.captionsContainer = _getElement(config.selectors.captions).querySelector('span');
+
+ // Determine if HTML5 textTracks is supported
+ plyr.usingTextTracks = false;
+ if (plyr.media.textTracks) {
+ plyr.usingTextTracks = true;
+ }
+
+ // Get URL of caption file if exists
+ var captionSrc = '',
+ kind,
+ children = plyr.media.childNodes;
+
+ for (var i = 0; i < children.length; i++) {
+ if (children[i].nodeName.toLowerCase() === 'track') {
+ kind = children[i].kind;
+ if (kind === 'captions' || kind === 'subtitles') {
+ captionSrc = children[i].getAttribute('src');
+ }
+ }
+ }
+
+ // Record if caption file exists or not
+ plyr.captionExists = true;
+ if (captionSrc === '') {
+ plyr.captionExists = false;
+ _log('No caption track found');
+ }
+ else {
+ _log('Caption track found; URI: ' + captionSrc);
+ }
+
+ // If no caption file exists, hide container for caption text
+ if (!plyr.captionExists) {
+ _toggleClass(plyr.container, config.classes.captions.enabled);
+ }
+ // If caption file exists, process captions
+ else {
+ // Turn off native caption rendering to avoid double captions
+ // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
+ var tracks = plyr.media.textTracks;
+ for (var x = 0; x < tracks.length; x++) {
+ tracks[x].mode = 'hidden';
+ }
+
+ // Enable UI
+ _showCaptions(plyr);
+
+ // Disable unsupported browsers than report false positive
+ if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) ||
+ (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31)) {
+ // ||
+ //(plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) ||
+ //(plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) {
+
+ // Debugging
+ _log('Detected unsupported browser for HTML5 captions - using fallback');
+
+ // Set to false so skips to 'manual' captioning
+ plyr.usingTextTracks = false;
+ }
+
+ // Rendering caption tracks
+ // Native support required - http://caniuse.com/webvtt
+ if (plyr.usingTextTracks) {
+ _log('TextTracks supported');
+
+ for (var y = 0; y < tracks.length; y++) {
+ var track = tracks[y];
+
+ if (track.kind === 'captions' || track.kind === 'subtitles') {
+ _on(track, 'cuechange', function() {
+ console.log('cuechange');
+ console.log(this);
+
+ // Clear container
+ plyr.captionsContainer.innerHTML = '';
+
+ // Display a cue, if there is one
+ if (this.activeCues[0] && 'text' in this.activeCues[0]) {
+ console.log(this.activeCues[0].getCueAsHTML());
+
+ plyr.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML());
+
+ // Force redraw
+ var redraw = plyr.captionsContainer.offsetHeight;
+ }
+ });
+ }
+ }
+ }
+ // Caption tracks not natively supported
+ else {
+ _log('TextTracks not supported so rendering captions manually');
+
+ // Render captions from array at appropriate time
+ plyr.currentCaption = '';
+ plyr.captions = [];
+
+ if (captionSrc !== '') {
+ // Create XMLHttpRequest Object
+ var xhr = new XMLHttpRequest();
+
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 200) {
+ var records = [],
+ record,
+ req = xhr.responseText;
+
+ records = req.split('\n\n');
+
+ for (var r = 0; r < records.length; r++) {
+ record = records[r];
+ plyr.captions[r] = [];
+ plyr.captions[r] = record.split('\n');
+ }
+
+ // Remove first element ('VTT')
+ plyr.captions.shift();
+
+ _log('Successfully loaded the caption file via AJAX');
+ }
+ else {
+ _log('There was a problem loading the caption file via AJAX', true);
+ }
+ }
+ };
+
+ xhr.open('get', captionSrc, true);
+
+ xhr.send();
+ }
+ }
+
+ // If Safari 7+, removing track from DOM [see 'turn off native caption rendering' above]
+ /*if (plyr.browser.name === 'Safari' && plyr.browser.version >= 7) {
+ _log('Safari 7+ detected; removing track from DOM');
+
+ // Find all <track> elements
+ tracks = plyr.media.getElementsByTagName('track');
+
+ // Loop through and remove one by one
+ for (var t = 0; t < tracks.length; t++) {
+ plyr.media.removeChild(tracks[t]);
+ }
+ }*/
+ }
+ }
+
// Captions functions
// Seek the manual caption time and update UI
function _seekManualCaptions(time) {
@@ -1402,194 +1624,6 @@
});
}
- // Setup captions
- function _setupCaptions() {
- if (plyr.type !== 'video') {
- return;
- }
-
- // Inject the container
- if (!_getElement(config.selectors.captions)) {
- plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"><span></span></div>');
- }
-
- // Cache selector
- plyr.captionsContainer = _getElement(config.selectors.captions).querySelector('span');
-
- // Determine if HTML5 textTracks is supported
- plyr.usingTextTracks = false;
- if (plyr.media.textTracks) {
- plyr.usingTextTracks = true;
- }
-
- // Get URL of caption file if exists
- var captionSrc = '',
- kind,
- children = plyr.media.childNodes;
-
- for (var i = 0; i < children.length; i++) {
- if (children[i].nodeName.toLowerCase() === 'track') {
- kind = children[i].kind;
- if (kind === 'captions' || kind === 'subtitles') {
- captionSrc = children[i].getAttribute('src');
- }
- }
- }
-
- // Record if caption file exists or not
- plyr.captionExists = true;
- if (captionSrc === '') {
- plyr.captionExists = false;
- _log('No caption track found');
- }
- else {
- _log('Caption track found; URI: ' + captionSrc);
- }
-
- // If no caption file exists, hide container for caption text
- if (!plyr.captionExists) {
- _toggleClass(plyr.container, config.classes.captions.enabled);
- }
- // If caption file exists, process captions
- else {
- // Turn off native caption rendering to avoid double captions
- // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
- var tracks = plyr.media.textTracks;
- for (var x = 0; x < tracks.length; x++) {
- tracks[x].mode = 'hidden';
- }
-
- // Enable UI
- _showCaptions(plyr);
-
- // Disable unsupported browsers than report false positive
- if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) ||
- (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) ||
- (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) ||
- (plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) {
- // Debugging
- _log('Detected unsupported browser for HTML5 captions - using fallback');
-
- // Set to false so skips to 'manual' captioning
- plyr.usingTextTracks = false;
- }
-
- // Rendering caption tracks
- // Native support required - http://caniuse.com/webvtt
- if (plyr.usingTextTracks) {
- _log('TextTracks supported');
-
- for (var y = 0; y < tracks.length; y++) {
- var track = tracks[y];
-
- if (track.kind === 'captions' || track.kind === 'subtitles') {
- _on(track, 'cuechange', function() {
- // Clear container
- plyr.captionsContainer.innerHTML = '';
-
- // Display a cue, if there is one
- if (this.activeCues[0] && this.activeCues[0].hasOwnProperty('text')) {
- plyr.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim());
-
- // Force redraw
- // var redraw = plyr.captionsContainer.offsetHeight;
- }
- });
- }
- }
- }
- // Caption tracks not natively supported
- else {
- _log('TextTracks not supported so rendering captions manually');
-
- // Render captions from array at appropriate time
- plyr.currentCaption = '';
- plyr.captions = [];
-
- if (captionSrc !== '') {
- // Create XMLHttpRequest Object
- var xhr = new XMLHttpRequest();
-
- xhr.onreadystatechange = function() {
- if (xhr.readyState === 4) {
- if (xhr.status === 200) {
- var records = [],
- record,
- req = xhr.responseText;
-
- records = req.split('\n\n');
-
- for (var r = 0; r < records.length; r++) {
- record = records[r];
- plyr.captions[r] = [];
- plyr.captions[r] = record.split('\n');
- }
-
- // Remove first element ('VTT')
- plyr.captions.shift();
-
- _log('Successfully loaded the caption file via AJAX');
- }
- else {
- _log('There was a problem loading the caption file via AJAX', true);
- }
- }
- };
-
- xhr.open('get', captionSrc, true);
-
- xhr.send();
- }
- }
-
- // If Safari 7+, removing track from DOM [see 'turn off native caption rendering' above]
- if (plyr.browser.name === 'Safari' && plyr.browser.version >= 7) {
- _log('Safari 7+ detected; removing track from DOM');
-
- // Find all <track> elements
- tracks = plyr.media.getElementsByTagName('track');
-
- // Loop through and remove one by one
- for (var t = 0; t < tracks.length; t++) {
- plyr.media.removeChild(tracks[t]);
- }
- }
- }
- }
-
- // Setup fullscreen
- function _setupFullscreen() {
- if (!plyr.supported.full) {
- return;
- }
-
- if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
- // Check for native support
- var nativeSupport = fullscreen.supportsFullScreen;
-
- if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
- _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
-
- // Add styling hook
- _toggleClass(plyr.container, config.classes.fullscreen.enabled, true);
- }
- else {
- _log('Fullscreen not supported and fallback disabled');
- }
-
- // Toggle state
- _toggleState(plyr.buttons.fullscreen, false);
-
- // Setup focus trap
- _focusTrap();
-
- // Set control hide class hook
- if (config.fullscreen.hideControls) {
- _toggleClass(plyr.container, config.classes.fullscreen.hideControls, true);
- }
- }
- }
-
// Play media
function _play() {
if('play' in plyr.media) {
@@ -1642,7 +1676,8 @@
// The input parameter can be an event or a number
function _seek(input) {
var targetTime = 0,
- paused = plyr.media.paused;
+ paused = plyr.media.paused,
+ duration = _getDuration();
// Explicit position
if (typeof input === 'number') {
@@ -1652,15 +1687,15 @@
else if (typeof input === 'object' && (input.type === 'input' || input.type === 'change')) {
// It's the seek slider
// Seek to the selected time
- targetTime = ((input.target.value / input.target.max) * plyr.media.duration);
+ targetTime = ((input.target.value / input.target.max) * duration);
}
// Normalise targetTime
if (targetTime < 0) {
targetTime = 0;
}
- else if (targetTime > plyr.media.duration) {
- targetTime = plyr.media.duration;
+ else if (targetTime > duration) {
+ targetTime = duration;
}
// Set the current time
@@ -1702,6 +1737,15 @@
_seekManualCaptions(targetTime);
}
+ // Get the duration (or custom if set)
+ function _getDuration() {
+ // It should be a number, but parse it just incase
+ var duration = parseInt(config.duration);
+
+ // If custom duration is funky, use regular duration
+ return (isNaN(duration) ? plyr.media.duration : duration);
+ }
+
// Check playing state
function _checkPlaying() {
_toggleClass(plyr.container, config.classes.playing, !plyr.media.paused);
@@ -1932,14 +1976,15 @@
function _updateProgress(event) {
var progress = plyr.progress.played.bar,
text = plyr.progress.played.text,
- value = 0;
+ value = 0,
+ duration = _getDuration();
if (event) {
switch (event.type) {
// Video playing
case 'timeupdate':
case 'seeking':
- value = _getPercentage(plyr.media.currentTime, plyr.media.duration);
+ value = _getPercentage(plyr.media.currentTime, duration);
// Set seek range value only if it's a 'natural' time event
if (event.type == 'timeupdate' && plyr.buttons.seek) {
@@ -1965,7 +2010,7 @@
// HTML5
if (buffered && buffered.length) {
- return _getPercentage(buffered.end(0), plyr.media.duration);
+ return _getPercentage(buffered.end(0), duration);
}
// YouTube returns between 0 and 1
else if (typeof buffered === 'number') {
@@ -2003,7 +2048,7 @@
plyr.hours = parseInt(((time / 60) / 60) % 60);
// Do we need to display hours?
- var displayHours = (parseInt(((plyr.media.duration / 60) / 60) % 60) > 0);
+ var displayHours = (parseInt(((_getDuration() / 60) / 60) % 60) > 0);
// Ensure it's two digits. For example, 03 rather than 3.
plyr.secs = ('0' + plyr.secs).slice(-2);
@@ -2020,7 +2065,7 @@
}
// Determine duration
- var duration = plyr.media.duration || 0;
+ var duration = _getDuration() || 0;
// If there's only one time display, display duration there
if (!plyr.duration && config.displayDuration && plyr.media.paused) {
@@ -2084,14 +2129,14 @@
}
// Display the time a click would seek to
- _updateTimeDisplay(((plyr.media.duration / 100) * percent), plyr.progress.tooltip);
+ _updateTimeDisplay(((_getDuration() / 100) * percent), plyr.progress.tooltip);
// Set position
plyr.progress.tooltip.style.left = percent + "%";
// Show/hide the tooltip
// If the event is a moues in/out and percentage is inside bounds
- if(_inArray(['mouseenter', 'mouseleave'], event.type)) {
+ if(event && _inArray(['mouseenter', 'mouseleave'], event.type)) {
_toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter'));
}
}
@@ -2273,6 +2318,9 @@
config.title = source.title;
_setTitle();
}
+
+ // Reset media object
+ plyr.container.plyr.media = plyr.media;
}
// Update poster
@@ -2635,6 +2683,9 @@
// Update the UI
_checkPlaying();
+
+ // Display duration
+ _displayDuration();
}
// Initialize instance
@@ -2729,12 +2780,9 @@
elements = document.querySelectorAll(defaults.selectors.container);
}
- // Extend the default options with user specified
- config = _extend(defaults, options);
-
// Bail if disabled or no basic support
// You may want to disable certain UAs etc
- if (!config.enabled || !api.supported().basic || !elements.length) {
+ if (!api.supported().basic || !elements.length) {
return false;
}
@@ -2745,8 +2793,16 @@
// Setup a player instance and add to the element
if (typeof element.plyr === 'undefined') {
+ // Create instance-specific config
+ var config = _extend(defaults, options, JSON.parse(element.getAttribute("data-plyr")));
+
+ // Bail if not enabled
+ if(!config.enabled) {
+ return;
+ }
+
// Create new instance
- var instance = new Plyr(element);
+ var instance = new Plyr(element, config);
// Set plyr to false if setup failed
element.plyr = (Object.keys(instance).length ? instance : false);
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 73e14c56..156ac5f9 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -7,57 +7,58 @@
// -------------------------------
// Colors
-@plyr-blue: #3498DB;
-@plyr-gray-dark: #343F4A;
-@plyr-gray: #565D64;
-@plyr-gray-light: #6B7D86;
-@plyr-gray-lighter: #CBD0D3;
-@plyr-off-white: #D6DADD;
+@plyr-blue: #3498DB;
+@plyr-gray-dark: #343F4A;
+@plyr-gray: #565D64;
+@plyr-gray-light: #6B7D86;
+@plyr-gray-lighter: #CBD0D3;
+@plyr-off-white: #D6DADD;
// Font sizes
-@plyr-font-size-small: 14px;
-@plyr-font-size-base: 16px;
+@plyr-font-size-small: 14px;
+@plyr-font-size-base: 16px;
// Captions
-@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25);
-@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
-@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
+@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25);
+@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
+@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
// Controls
-@plyr-control-spacing: 10px;
-@plyr-controls-bg: #fff;
-@plyr-control-bg-hover: @plyr-blue;
+@plyr-control-spacing: 10px;
+@plyr-controls-bg: #fff;
+@plyr-control-bg-hover: @plyr-blue;
.contrast-control-color(@plyr-controls-bg);
.contrast-control-color-hover(@plyr-control-bg-hover);
// Tooltips
-@plyr-tooltip-bg: @plyr-controls-bg;
-@plyr-tooltip-border-color: fade(darken(@plyr-controls-bg, 5%), 10%);
-@plyr-tooltip-border-width: 1px;
-@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
-@plyr-tooltip-color: @plyr-control-color;
-@plyr-tooltip-padding: @plyr-control-spacing;
-@plyr-tooltip-arrow-size: 6px;
-@plyr-tooltip-radius: 3px;
+@plyr-tooltip-bg: @plyr-controls-bg;
+@plyr-tooltip-border-color: fade(darken(@plyr-controls-bg, 75%), 10%);
+@plyr-tooltip-arrow-border-color: fade(darken(@plyr-controls-bg, 75%), 20%);
+@plyr-tooltip-border-width: 1px;
+@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
+@plyr-tooltip-color: @plyr-control-color;
+@plyr-tooltip-padding: @plyr-control-spacing;
+@plyr-tooltip-arrow-size: 6px;
+@plyr-tooltip-radius: 3px;
// Progress
-@plyr-progress-bg: fade(@plyr-gray, 20%);
-@plyr-progress-playing-bg: @plyr-blue;
-@plyr-progress-buffered-bg: fade(@plyr-gray, 25%);
-@plyr-progress-loading-size: 40px;
-@plyr-progress-loading-bg: fade(#000, 15%);
+@plyr-progress-bg: fade(@plyr-gray, 20%);
+@plyr-progress-playing-bg: @plyr-blue;
+@plyr-progress-buffered-bg: fade(@plyr-gray, 25%);
+@plyr-progress-loading-size: 40px;
+@plyr-progress-loading-bg: fade(#000, 15%);
// Volume
-@plyr-volume-track-height: 6px;
-@plyr-volume-track-bg: darken(@plyr-controls-bg, 10%);
-@plyr-volume-thumb-height: (@plyr-volume-track-height * 2);
-@plyr-volume-thumb-width: (@plyr-volume-track-height * 2);
-@plyr-volume-thumb-bg: @plyr-control-color;
-@plyr-volume-thumb-bg-focus: @plyr-control-bg-hover;
+@plyr-volume-track-height: 6px;
+@plyr-volume-track-bg: darken(@plyr-controls-bg, 10%);
+@plyr-volume-thumb-height: (@plyr-volume-track-height * 2);
+@plyr-volume-thumb-width: (@plyr-volume-track-height * 2);
+@plyr-volume-thumb-bg: @plyr-control-color;
+@plyr-volume-thumb-bg-focus: @plyr-control-bg-hover;
// Breakpoints
-@plyr-bp-control-split: 560px; // When controls split into left/right
-@plyr-bp-captions-large: 768px; // When captions jump to the larger font size
+@plyr-bp-control-split: 560px; // When controls split into left/right
+@plyr-bp-captions-large: 768px; // When captions jump to the larger font size
// Animation
// ---------------------------------------
@@ -366,7 +367,7 @@
@plyr-border-arrow-size: (@plyr-tooltip-arrow-size + (@plyr-tooltip-border-width * 1));
bottom: -(@plyr-border-arrow-size + @plyr-tooltip-border-width);
border-right: @plyr-border-arrow-size solid transparent;
- border-top: @plyr-border-arrow-size solid @plyr-tooltip-border-color;
+ border-top: @plyr-border-arrow-size solid @plyr-tooltip-arrow-border-color;
border-left: @plyr-border-arrow-size solid transparent;
z-index: 1;
}
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index f0d1df6f..966a7966 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -7,69 +7,71 @@
// -------------------------------
// Colors
-$plyr-blue: #3498DB !default;
-$plyr-gray-dark: #343F4A !default;
-$plyr-gray: #565D64 !default;
-$plyr-gray-light: #6B7D86 !default;
-$plyr-gray-lighter: #CBD0D3 !default;
-$plyr-off-white: #D6DADD !default;
+$plyr-blue: #3498DB !default;
+$plyr-gray-dark: #343F4A !default;
+$plyr-gray: #565D64 !default;
+$plyr-gray-light: #6B7D86 !default;
+$plyr-gray-lighter: #CBD0D3 !default;
+$plyr-off-white: #D6DADD !default;
// Font sizes
-$plyr-font-size-small: 14px !default;
-$plyr-font-size-base: 16px !default;
+$plyr-font-size-small: 14px !default;
+$plyr-font-size-base: 16px !default;
// Captions
-$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default;
-$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
-$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
+$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default;
+$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
+$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
// Controls
-$plyr-control-spacing: 10px !default;
-$plyr-controls-bg: #fff !default;
-$plyr-control-bg-hover: $plyr-blue !default;
+$plyr-control-spacing: 10px !default;
+$plyr-controls-bg: #fff !default;
+$plyr-control-bg-hover: $plyr-blue !default;
// Contrast
@if lightness($plyr-controls-bg) >= 65% {
- $plyr-control-color: $plyr-gray-light !default;
+ $plyr-control-color: $plyr-gray-light !default;
}
@else {
- $plyr-control-color: $plyr-gray-lighter !default;
+ $plyr-control-color: $plyr-gray-lighter !default;
}
@if lightness($plyr-control-bg-hover) >= 65% {
- $plyr-control-color-hover: $plyr-gray !default;
+ $plyr-control-color-hover: $plyr-gray !default;
}
@else {
- $plyr-control-color-hover: #fff !default;
+ $plyr-control-color-hover: #fff !default;
}
// Tooltips
-$plyr-tooltip-bg: $plyr-controls-bg !default;
-$plyr-tooltip-border-color: transparentize($plyr-gray-dark, .1) !default;
-$plyr-tooltip-border-width: 1px;
-$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
-$plyr-tooltip-color: $plyr-control-color !default;
-$plyr-tooltip-padding: $plyr-control-spacing !default;
-$plyr-tooltip-arrow-size: 6px !default;
-$plyr-tooltip-radius: 3px !default;
+$plyr-tooltip-bg: $plyr-controls-bg !default;
+$plyr-tooltip-border-color: transparentize(darken($plyr-controls-bg, 75%), .1) !default;
+$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-controls-bg, 75%), .2) !default;
+
+$plyr-tooltip-border-width: 1px;
+$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
+$plyr-tooltip-color: $plyr-control-color !default;
+$plyr-tooltip-padding: $plyr-control-spacing !default;
+$plyr-tooltip-arrow-size: 6px !default;
+$plyr-tooltip-radius: 3px !default;
// Progress
-$plyr-progress-bg: transparentize($plyr-gray, .2) !default;
-$plyr-progress-playing-bg: $plyr-blue !default;
-$plyr-progress-buffered-bg: transparentize($plyr-gray, .25) !default;
-$plyr-progress-loading-size: 40px !default;
-$plyr-progress-loading-bg: transparentize(#000, .15) !default;
+$plyr-progress-bg: transparentize($plyr-gray, .2) !default;
+$plyr-progress-playing-bg: $plyr-blue !default;
+$plyr-progress-buffered-bg: transparentize($plyr-gray, .25) !default;
+$plyr-progress-loading-size: 40px !default;
+$plyr-progress-loading-bg: transparentize(#000, .15) !default;
// Volume
-$plyr-volume-track-height: 6px !default;
-$plyr-volume-track-bg: darken($plyr-controls-bg, 10%) !default;
-$plyr-volume-thumb-height: ($plyr-volume-track-height * 2) !default;
-$plyr-volume-thumb-width: ($plyr-volume-track-height * 2) !default;
-$plyr-volume-thumb-bg: $plyr-control-color !default;
-$plyr-volume-thumb-bg-focus: $plyr-control-bg-hover !default;
+$plyr-volume-track-height: 6px !default;
+$plyr-volume-track-bg: darken($plyr-controls-bg, 10%) !default;
+$plyr-volume-thumb-height: ($plyr-volume-track-height * 2) !default;
+$plyr-volume-thumb-width: ($plyr-volume-track-height * 2) !default;
+$plyr-volume-thumb-bg: $plyr-control-color !default;
+$plyr-volume-thumb-bg-focus: $plyr-control-bg-hover !default;
// Breakpoints
-$plyr-bp-control-split: 560px !default; // When controls split into left/right
-$plyr-bp-captions-large: 768px !default; // When captions jump to the larger font size
+$plyr-bp-control-split: 560px !default; // When controls split into left/right
+$plyr-bp-captions-large: 768px !default; // When captions jump to the larger font size
// Animation
// ---------------------------------------
@@ -365,7 +367,7 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
$plyr-border-arrow-size: ($plyr-tooltip-arrow-size + ($plyr-tooltip-border-width * 1));
bottom: -($plyr-border-arrow-size + $plyr-tooltip-border-width);
border-right: $plyr-border-arrow-size solid transparent;
- border-top: $plyr-border-arrow-size solid $plyr-tooltip-border-color;
+ border-top: $plyr-border-arrow-size solid $plyr-tooltip-arrow-border-color;
border-left: $plyr-border-arrow-size solid transparent;
z-index: 1;
}