diff options
| -rw-r--r-- | changelog.md | 3 | ||||
| -rw-r--r-- | dist/plyr.css | 2 | ||||
| -rw-r--r-- | dist/plyr.js | 2 | ||||
| -rw-r--r-- | docs/dist/docs.css | 2 | ||||
| -rw-r--r-- | docs/dist/docs.js | 2 | ||||
| -rw-r--r-- | docs/index.html | 87 | ||||
| -rw-r--r-- | docs/index.youtube.html | 2 | ||||
| -rw-r--r-- | docs/src/js/docs.js | 223 | ||||
| -rw-r--r-- | docs/src/less/components/base.less | 45 | ||||
| -rw-r--r-- | docs/src/less/components/buttons.less | 144 | ||||
| -rw-r--r-- | docs/src/less/components/error.less | 19 | ||||
| -rw-r--r-- | docs/src/less/components/examples.less | 39 | ||||
| -rw-r--r-- | docs/src/less/components/panels.less | 13 | ||||
| -rw-r--r-- | docs/src/less/components/type.less | 47 | ||||
| -rw-r--r-- | docs/src/less/docs.less | 240 | ||||
| -rw-r--r-- | docs/src/less/lib/animation.less | 9 | ||||
| -rw-r--r-- | docs/src/less/lib/fontface.less | 10 | ||||
| -rw-r--r-- | docs/src/less/variables.less | 30 | ||||
| -rw-r--r-- | gulpfile.js | 4 | ||||
| -rw-r--r-- | readme.md | 62 | ||||
| -rw-r--r-- | src/js/plyr.js | 321 | ||||
| -rw-r--r-- | src/js/plyr.youtube.js | 32 | ||||
| -rw-r--r-- | src/less/plyr.less | 98 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 96 |
24 files changed, 899 insertions, 633 deletions
diff --git a/changelog.md b/changelog.md index f81bf982..112ce2c3 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,8 @@ # Changelog +## v1.2.0 +- Added YouTube support. + ## v1.1.5 - Fix for incorrect `isFullscreen()` return value in Mozilla (Fixes #38) diff --git a/dist/plyr.css b/dist/plyr.css index fc62f369..4fd1d334 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.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}@-webkit-keyframes progress{to{background-position:40px 0}}@keyframes progress{to{background-position:40px 0}}.player{position:relative;max-width:100%;min-width:290px}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video-wrapper{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-video-embed{padding-bottom:56.25%;height:0}.player-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;font-weight:600;text-shadow:-1px -1px 0 #565d64,1px -1px 0 #565d64,-1px 1px 0 #565d64,1px 1px 0 #565d64;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:10px;background:#343f4a;line-height:1;text-align:center}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-right{display:block;margin:10px auto 0}@media (min-width:560px){.player-controls-left{float:left}.player-controls-right{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls .inverted:checked+label,.player-controls input+label{color:#565d64}.player-controls .inverted+label,.player-controls button,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls [type=checkbox]+label:hover,.player-controls [type=checkbox]:focus+label,.player-controls button:focus,.player-controls button:hover{background:#3498db;color:#fff}.player-controls button:focus,.player-controls input:focus+label{outline:0}.player-controls .icon-captions-on,.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#cbd0d3;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-controls .player-time+.player-time{display:none}@media (min-width:560px){.player-controls .player-time+.player-time{display:inline-block}}.player-controls .player-time+.player-time::before{content:"\2044";margin-right:10px;color:#78858d}.player-tooltip{visibility:hidden;position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:10px 15px;opacity:0;background:#343f4a;border-radius:3px;color:#fff;font-size:14px;line-height:1.5;font-weight:600;-webkit-transform:translate(-50%,30px);transform:translate(-50%,30px);transition:-webkit-transform .2s .2s ease,opacity .2s .2s ease;transition:transform .2s .2s ease,opacity .2s .2s ease}.player-tooltip::after{content:"";display:block;position:absolute;left:50%;bottom:-5px;margin-left:-5px;width:0;height:0;transition:inherit;border-style:solid;border-width:5px 5px 0;border-color:#343f4a transparent transparent}.player button:focus .player-tooltip,.player button:hover .player-tooltip,.player input:focus+label .player-tooltip,.player label:hover .player-tooltip{visibility:visible;opacity:1;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.player button:hover .player-tooltip,.player label:hover .player-tooltip{z-index:3}.player-progress{position:absolute;bottom:100%;left:0;right:0;width:100%;height:10px;background:rgba(86,93,100,.2)}.player-progress-buffer[value],.player-progress-played[value],.player-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}.player-progress-buffer[value]::-webkit-progress-bar,.player-progress-played[value]::-webkit-progress-bar{background:0 0}.player-progress-buffer[value]::-webkit-progress-value,.player-progress-played[value]::-webkit-progress-value{background:currentColor}.player-progress-buffer[value]::-moz-progress-bar,.player-progress-played[value]::-moz-progress-bar{background:currentColor}.player-progress-played[value]{z-index:2;color:#3498db}.player-progress-buffer[value]{color:rgba(86,93,100,.25)}.player-progress-seek[type=range]{z-index:4;cursor:pointer;outline:0}.player-progress-seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.player-progress-seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]::-moz-range-track{background:0 0;border:0}.player-progress-seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.player-progress-seek[type=range]::-ms-fill-lower,.player-progress-seek[type=range]::-ms-fill-upper{background:0 0;border:0}.player-progress-seek[type=range]::-ms-thumb{background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]:focus{outline:0}.player-progress-seek[type=range]::-moz-focus-outer{border:0}.player.loading .player-progress-buffer{-webkit-animation:progress 1s linear infinite;animation: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}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player-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}.player-volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-moz-range-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume[type=range]::-ms-fill-lower,.player-volume[type=range]::-ms-fill-upper{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]:focus{outline:0}.player-volume[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player-volume[type=range]:focus::-moz-range-thumb{background:#3498db}.player-volume[type=range]:focus::-ms-thumb{background:#3498db}.player-audio.ios .player-controls-right,.player.ios .player-volume,.player.ios [data-player=mute],.player.ios [data-player=mute]+label{display:none}.player-audio.ios .player-controls-left{float:none}.player-audio .player-controls{padding-top:20px}.player-audio .player-progress{bottom:auto;top:0;background:#d6dadd}.player-fullscreen,.player.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.player-fullscreen video,.player.fullscreen-active video{height:100%}.player-fullscreen .player-video-wrapper,.player.fullscreen-active .player-video-wrapper{height:100%;width:100%}.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{top:auto;bottom:90px}@media (min-width:560px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:60px}}.player-fullscreen .player-controls,.player.fullscreen-active .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen.fullscreen-hide-controls.playing .player-controls,.player.fullscreen-active.fullscreen-hide-controls.playing .player-controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease}.player-fullscreen.fullscreen-hide-controls.playing .player-controls.hover,.player.fullscreen-active.fullscreen-hide-controls.playing .player-controls.hover{-webkit-transform:translateY(0);transform:translateY(0)}.player.captions-active .player-controls .icon-captions-on,.player.fullscreen-active .icon-exit-fullscreen,.player.muted .player-controls .icon-muted{display:block}.player [data-player=captions],.player [data-player=captions]+label,.player [data-player=fullscreen],.player [data-player=fullscreen]+label,.player.captions-active .player-controls .icon-captions-on+svg,.player.fullscreen-active .icon-exit-fullscreen+svg,.player.muted .player-controls .icon-muted+svg{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block}
\ No newline at end of file +@-webkit-keyframes progress{to{background-position:40px 0}}@keyframes progress{to{background-position:40px 0}}.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}.player{position:relative;max-width:100%;min-width:290px}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video-wrapper{position:relative}.player audio,.player video{width:100%;height:auto;vertical-align:middle}.player-video-embed{padding-bottom:56.25%;height:0}.player-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;font-weight:600;text-shadow:-1px -1px 0 #565d64,1px -1px 0 #565d64,-1px 1px 0 #565d64,1px 1px 0 #565d64;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:10px;background:#fff;line-height:1;text-align:center;box-shadow:0 1px 1px rgba(52,63,74,.2)}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-right{display:block;margin:10px auto 0}@media (min-width:560px){.player-controls-left{float:left}.player-controls-right{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease,color .3s ease,opacity .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls .inverted:checked+label,.player-controls input+label{opacity:.5}.player-controls .inverted+label,.player-controls button,.player-controls input:checked+label{color:#6b7d86;opacity:1}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls [type=checkbox]+label:hover,.player-controls [type=checkbox]:focus+label,.player-controls button:focus,.player-controls button:hover{background:#3498db;color:#fff;opacity:1}.player-controls button:focus,.player-controls input:focus+label{outline:0}.player-controls .icon-captions-on,.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#6b7d86;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-controls .player-time+.player-time{display:none}@media (min-width:560px){.player-controls .player-time+.player-time{display:inline-block}}.player-controls .player-time+.player-time::before{content:"\2044";margin-right:10px}.player-tooltip{visibility:hidden;position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:10px 15px;opacity:0;background:#fff;border-radius:3px;color:#fff;font-size:14px;line-height:1.5;font-weight:600;-webkit-transform:translate(-50%,30px);transform:translate(-50%,30px);transition:-webkit-transform .2s .2s ease,opacity .2s .2s ease;transition:transform .2s .2s ease,opacity .2s .2s ease}.player-tooltip::after{content:"";display:block;position:absolute;left:50%;bottom:-5px;margin-left:-5px;width:0;height:0;transition:inherit;border-style:solid;border-width:5px 5px 0;border-color:#fff transparent transparent}.player button:focus .player-tooltip,.player button:hover .player-tooltip,.player input:focus+label .player-tooltip,.player label:hover .player-tooltip{visibility:visible;opacity:1;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.player button:hover .player-tooltip,.player label:hover .player-tooltip{z-index:3}.player-progress{position:absolute;bottom:100%;left:0;right:0;width:100%;height:10px;background:rgba(86,93,100,.2)}.player-progress-buffer[value],.player-progress-played[value],.player-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}.player-progress-buffer[value]::-webkit-progress-bar,.player-progress-played[value]::-webkit-progress-bar{background:0 0}.player-progress-buffer[value]::-webkit-progress-value,.player-progress-played[value]::-webkit-progress-value{background:currentColor}.player-progress-buffer[value]::-moz-progress-bar,.player-progress-played[value]::-moz-progress-bar{background:currentColor}.player-progress-played[value]{z-index:2;color:#3498db}.player-progress-buffer[value]{color:rgba(86,93,100,.25)}.player-progress-seek[type=range]{z-index:4;cursor:pointer;outline:0}.player-progress-seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.player-progress-seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]::-moz-range-track{background:0 0;border:0}.player-progress-seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.player-progress-seek[type=range]::-ms-fill-lower,.player-progress-seek[type=range]::-ms-fill-upper{background:0 0;border:0}.player-progress-seek[type=range]::-ms-thumb{background:0 0;border:0;width:20px;height:10px}.player-progress-seek[type=range]:focus{outline:0}.player-progress-seek[type=range]::-moz-focus-outer{border:0}.player.loading .player-progress-buffer{-webkit-animation:progress 1s linear infinite;animation: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}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player-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}.player-volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.player-volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#6b7d86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-moz-range-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.player-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#6b7d86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume[type=range]::-ms-fill-lower,.player-volume[type=range]::-ms-fill-upper{height:6px;background:#e6e6e6;border:0;border-radius:3px}.player-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#6b7d86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume[type=range]:focus{outline:0}.player-volume[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player-volume[type=range]:focus::-moz-range-thumb{background:#3498db}.player-volume[type=range]:focus::-ms-thumb{background:#3498db}.player-audio.ios .player-controls-right,.player.ios .player-volume,.player.ios [data-player=mute],.player.ios [data-player=mute]+label{display:none}.player-audio.ios .player-controls-left{float:none}.player-audio .player-controls{padding-top:20px}.player-audio .player-progress{bottom:auto;top:0;background:#d6dadd}.player-fullscreen,.player.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.player-fullscreen video,.player.fullscreen-active video{height:100%}.player-fullscreen .player-video-wrapper,.player.fullscreen-active .player-video-wrapper{height:100%;width:100%}.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{top:auto;bottom:90px}@media (min-width:560px){.player-fullscreen .player-video-wrapper .player-captions,.player.fullscreen-active .player-video-wrapper .player-captions{bottom:60px}}.player-fullscreen .player-controls,.player.fullscreen-active .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen.fullscreen-hide-controls.playing .player-controls,.player.fullscreen-active.fullscreen-hide-controls.playing .player-controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease}.player-fullscreen.fullscreen-hide-controls.playing .player-controls.hover,.player.fullscreen-active.fullscreen-hide-controls.playing .player-controls.hover{-webkit-transform:translateY(0);transform:translateY(0)}.player.captions-active .player-controls .icon-captions-on,.player.fullscreen-active .icon-exit-fullscreen,.player.muted .player-controls .icon-muted{display:block}.player [data-player=captions],.player [data-player=captions]+label,.player [data-player=fullscreen],.player [data-player=fullscreen]+label,.player.captions-active .player-controls .icon-captions-on+svg,.player.fullscreen-active .icon-exit-fullscreen+svg,.player.muted .player-controls .icon-muted+svg{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block}
\ No newline at end of file diff --git a/dist/plyr.js b/dist/plyr.js index 883353ef..1067a396 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1 +1 @@ -!function(e){"use strict";function t(){var e=["<div class='player-controls'>","<div class='player-progress'>","<label for='seek{id}' class='sr-only'>Seek</label>","<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>","<progress class='player-progress-played' max='100' value='0'>","<span>0</span>% played","</progress>","<progress class='player-progress-buffer' max='100' value='0'>","<span>0</span>% buffered","</progress>","</div>","<span class='player-controls-left'>"];return o(S.controls,"restart")&&e.push("<button type='button' data-player='restart'>","<svg><use xlink:href='#icon-restart'></use></svg>","<span class='sr-only'>Restart</span>","</button>"),o(S.controls,"rewind")&&e.push("<button type='button' data-player='rewind'>","<svg><use xlink:href='#icon-rewind'></use></svg>","<span class='sr-only'>Rewind {seektime} secs</span>","</button>"),o(S.controls,"play")&&e.push("<button type='button' data-player='play'>","<svg><use xlink:href='#icon-play'></use></svg>","<span class='sr-only'>Play</span>","</button>","<button type='button' data-player='pause'>","<svg><use xlink:href='#icon-pause'></use></svg>","<span class='sr-only'>Pause</span>","</button>"),o(S.controls,"fast-forward")&&e.push("<button type='button' data-player='fast-forward'>","<svg><use xlink:href='#icon-fast-forward'></use></svg>","<span class='sr-only'>Forward {seektime} secs</span>","</button>"),o(S.controls,"current-time")&&e.push("<span class='player-time'>","<span class='sr-only'>Current time</span>","<span class='player-current-time'>00:00</span>","</span>"),o(S.controls,"duration")&&e.push("<span class='player-time'>","<span class='sr-only'>Duration</span>","<span class='player-duration'>00:00</span>","</span>"),e.push("</span>","<span class='player-controls-right'>"),o(S.controls,"mute")&&e.push("<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>","<label id='mute{id}' for='mute{id}'>","<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>","<svg><use xlink:href='#icon-volume'></use></svg>","<span class='sr-only'>Toggle Mute</span>","</label>"),o(S.controls,"volume")&&e.push("<label for='volume{id}' class='sr-only'>Volume</label>","<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>"),o(S.controls,"captions")&&e.push("<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>","<label for='captions{id}'>","<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>","<svg><use xlink:href='#icon-captions-off'></use></svg>","<span class='sr-only'>Toggle Captions</span>","</label>"),o(S.controls,"fullscreen")&&e.push("<button type='button' data-player='fullscreen'>","<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>","<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>","<span class='sr-only'>Toggle Fullscreen</span>","</button>"),e.push("</span>","</div>"),e.join("")}function n(e,t){S.debug&&window.console&&console[t?"error":"log"](e)}function r(){var e,t,n,r=navigator.userAgent,a=navigator.appName,s=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",s="11;"):-1!==(t=r.indexOf("MSIE"))?(a="IE",s=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(a="Chrome",s=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(a="Safari",s=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(s=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(a="Firefox",s=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(a=r.substring(e,t),s=r.substring(t+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(n=s.indexOf(";"))&&(s=s.substring(0,n)),-1!==(n=s.indexOf(" "))&&(s=s.substring(0,n)),o=parseInt(""+s,10),isNaN(o)&&(s=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10)),{name:a,version:o,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform)}}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 s(e){if(!document.querySelectorAll("script[src='"+e+"']").length){var t=document.createElement("script");t.src=e;var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}}function o(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function i(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function l(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],s=a.parentNode,o=a.nextSibling;r.appendChild(a),o?s.insertBefore(r,o):s.appendChild(r)}}function u(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function c(e){e.parentNode.removeChild(e)}function p(e,t){e.insertBefore(t,e.firstChild)}function d(e,t){for(var n in t)e.setAttribute(n,t[n])}function f(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 m(e,t,n,r){var a=t.split(" ");if(e instanceof NodeList)for(var s=0;s<e.length;s++)e[s]instanceof Node&&m(e[s],arguments[1],arguments[2],arguments[3]);else for(var o=0;o<a.length;o++)e[r?"addEventListener":"removeEventListener"](a[o],n,!1)}function y(e,t,n){e&&m(e,t,n,!0)}function b(e,t,n){e&&m(e,t,n,!1)}function v(e,t){var n=document.createEvent("MouseEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function g(e){return e.keyCode&&13!=e.keyCode?!0:(e.target.checked=!e.target.checked,v(e.target,"change"),void 0)}function h(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function k(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},k(e[n],t[n])):e[n]=t[n];return e}function w(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=document),this.prefix){case"":return document.fullscreenElement==e;case"moz":return document.mozFullScreenElement==e;default:return document[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function T(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function x(o){function k(e){if(!pt.usingTextTracks&&"video"===pt.type&&pt.supported.full){for(pt.subcount=0,e="number"==typeof e?e:pt.media.currentTime;A(pt.captions[pt.subcount][0])<e.toFixed(1);)if(pt.subcount++,pt.subcount>pt.captions.length-1){pt.subcount=pt.captions.length-1;break}pt.media.currentTime.toFixed(1)>=C(pt.captions[pt.subcount][0])&&pt.media.currentTime.toFixed(1)<=A(pt.captions[pt.subcount][0])?(pt.currentCaption=pt.captions[pt.subcount][1],pt.captionsContainer.innerHTML=pt.currentCaption):pt.captionsContainer.innerHTML=""}}function x(){pt.buttons.captions&&(f(pt.container,S.classes.captions.enabled,!0),S.captions.defaultActive&&(f(pt.container,S.classes.captions.active,!0),pt.buttons.captions.checked=!0))}function C(e){var t=[];return t=e.split(" --> "),E(t[0])}function A(e){var t=[];return t=e.split(" --> "),E(t[1])}function E(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 N(e){return pt.container.querySelectorAll(e)}function I(e){return N(e)[0]}function P(){try{return window.self!==window.top}catch(e){return!0}}function M(){var e=S.html;if(n("Injecting custom controls."),e||(e=t()),e=i(e,"{seektime}",S.seekTime),e=i(e,"{id}",Math.floor(1e4*Math.random())),pt.container.insertAdjacentHTML("beforeend",e),S.tooltips)for(var r=N(S.selectors.labels),a=r.length-1;a>=0;a--){var s=r[a];f(s,S.classes.hidden,!1),f(s,S.classes.tooltip,!0)}}function L(){try{return pt.controls=I(S.selectors.controls),pt.buttons={},pt.buttons.seek=I(S.selectors.buttons.seek),pt.buttons.play=I(S.selectors.buttons.play),pt.buttons.pause=I(S.selectors.buttons.pause),pt.buttons.restart=I(S.selectors.buttons.restart),pt.buttons.rewind=I(S.selectors.buttons.rewind),pt.buttons.forward=I(S.selectors.buttons.forward),pt.buttons.fullscreen=I(S.selectors.buttons.fullscreen),pt.buttons.mute=I(S.selectors.buttons.mute),pt.buttons.captions=I(S.selectors.buttons.captions),pt.checkboxes=N("[type='checkbox']"),pt.progress={},pt.progress.container=I(S.selectors.progress.container),pt.progress.buffer={},pt.progress.buffer.bar=I(S.selectors.progress.buffer),pt.progress.buffer.text=pt.progress.buffer.bar&&pt.progress.buffer.bar.getElementsByTagName("span")[0],pt.progress.played={},pt.progress.played.bar=I(S.selectors.progress.played),pt.progress.played.text=pt.progress.played.bar&&pt.progress.played.bar.getElementsByTagName("span")[0],pt.volume=I(S.selectors.buttons.volume),pt.duration=I(S.selectors.duration),pt.currentTime=I(S.selectors.currentTime),pt.seekTime=N(S.selectors.seekTime),!0}catch(e){return n("It looks like there's a problem with your controls html. Bailing.",!0),pt.media.setAttribute("controls",""),!1}}function O(){if(pt.buttons.play){var e=pt.buttons.play.innerText||"Play";"undefined"!=typeof S.title&&S.title.length&&(e+=", "+S.title),pt.buttons.play.setAttribute("aria-label",e)}}function V(){if(!pt.media)return n("No audio or video element found!",!0),!1;if(pt.supported.full){if(pt.media.removeAttribute("controls"),f(pt.container,S.classes.type.replace("{0}",pt.type),!0),f(pt.container,S.classes.stopped,null===pt.media.getAttribute("autoplay")),pt.browser.ios&&f(pt.container,"ios",!0),"video"===pt.type){var e=document.createElement("div");e.setAttribute("class",S.classes.videoWrapper),l(pt.media,e),pt.videoContainer=e}"youtube"==pt.type&&q(pt.media.getAttribute("data-video-id"))}null!==pt.media.getAttribute("autoplay")&&R()}function q(e){var t=document.createElement("div");t.setAttribute("id","youtube"+Math.floor(1e4*Math.random())),pt.media.appendChild(t),f(pt.media,S.classes.videoWrapper,!0),f(pt.media,S.classes.embedWrapper,!0),s("https://www.youtube.com/iframe_api"),window.onYouTubeIframeAPIReady=function(){n("YouTube API Ready"),pt.timer={},pt.embed=new YT.Player(t.id,{videoId:e,playerVars:{autoplay:0,controls:0,vq:"hd720",rel:0,showinfo:0,iv_load_policy:3,cc_lang_pref:"en",wmode:"transparent",modestbranding:1},events:{onReady:function(e){var t=e.target;pt.media.play=function(){t.playVideo()},pt.media.pause=function(){t.pauseVideo()},pt.media.stop=function(){t.stopVideo()},pt.media.duration=t.getDuration(),pt.media.paused=2==t.getPlayerState(),pt.media.currentTime=t.getCurrentTime(),pt.media.muted=t.isMuted(),pt.timer.buffering=window.setInterval(function(){pt.media.buffered=t.getVideoLoadedFraction(),v(pt.media,"progress"),1===pt.media.buffered&&window.clearInterval(pt.timer.buffering)},200),ct()},onStateChange:function(e){var t=e.target;switch(window.clearInterval(pt.timer.playing),e.data){case-1:break;case 0:pt.media.paused=!0,v(pt.media,"ended");break;case 1:pt.media.paused=!1,v(pt.media,"play"),pt.timer.playing=window.setInterval(function(){pt.media.currentTime=t.getCurrentTime(),v(pt.media,"timeupdate")},200);break;case 2:pt.media.paused=!0,v(pt.media,"pause");break;case 3:break;case 5:}}}})}}function B(){if("video"===pt.type){pt.videoContainer.insertAdjacentHTML("afterbegin","<div class='"+S.selectors.captions.replace(".","")+"'></div>"),pt.captionsContainer=I(S.selectors.captions),pt.usingTextTracks=!1,pt.media.textTracks&&(pt.usingTextTracks=!0);for(var e,t="",r=pt.media.childNodes,a=0;a<r.length;a++)"track"===r[a].nodeName.toLowerCase()&&(e=r[a].getAttribute("kind"),"captions"===e&&(t=r[a].getAttribute("src")));if(pt.captionExists=!0,""===t?(pt.captionExists=!1,n("No caption track found.")):n("Caption track found; URI: "+t),pt.captionExists){for(var s=pt.media.textTracks,o=0;o<s.length;o++)s[o].mode="hidden";if(x(pt),("IE"===pt.browser.name&&pt.browser.version>=10||"Firefox"===pt.browser.name&&pt.browser.version>=31||"Chrome"===pt.browser.name&&pt.browser.version>=43||"Safari"===pt.browser.name&&pt.browser.version>=7)&&(n("Detected unsupported browser for HTML5 captions. Using fallback."),pt.usingTextTracks=!1),pt.usingTextTracks){n("TextTracks supported.");for(var i=0;i<s.length;i++){var l=s[i];"captions"===l.kind&&y(l,"cuechange",function(){pt.captionsContainer.innerHTML="",this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&pt.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML())})}}else if(n("TextTracks not supported so rendering captions manually."),pt.currentCaption="",pt.captions=[],""!==t){var u=new XMLHttpRequest;u.onreadystatechange=function(){if(4===u.readyState)if(200===u.status){var e,t=[],r=u.responseText;t=r.split("\n\n");for(var a=0;a<t.length;a++)e=t[a],pt.captions[a]=[],pt.captions[a]=e.split("\n");pt.captions.shift(),n("Successfully loaded the caption file via AJAX.")}else n("There was a problem loading the caption file via AJAX.",!0)},u.open("get",t,!0),u.send()}if("Safari"===pt.browser.name&&pt.browser.version>=7){n("Safari 7+ detected; removing track from DOM."),s=pt.media.getElementsByTagName("track");for(var c=0;c<s.length;c++)pt.media.removeChild(s[c])}}else f(pt.container,S.classes.captions.enabled)}}function H(){if("audio"!=pt.type&&S.fullscreen.enabled){var e=F.supportsFullScreen;e||S.fullscreen.fallback&&!P()?(n((e?"Native":"Fallback")+" fullscreen enabled."),f(pt.container,S.classes.fullscreen.enabled,!0)):n("Fullscreen not supported and fallback disabled."),S.fullscreen.hideControls&&f(pt.container,S.classes.fullscreen.hideControls,!0)}}function R(){pt.media.play()}function D(){pt.media.pause()}function _(e){e===!0?R():e===!1?D():pt.media[pt.media.paused?"play":"pause"]()}function j(e){"number"!=typeof e&&(e=S.seekTime),U(pt.media.currentTime-e)}function W(e){"number"!=typeof e&&(e=S.seekTime),U(pt.media.currentTime+e)}function U(e){var t=0;"number"==typeof e?t=e:"object"!=typeof e||"input"!==e.type&&"change"!==e.type||(t=e.target.value/e.target.max*pt.media.duration),0>t?t=0:t>pt.media.duration&&(t=pt.media.duration);try{pt.media.currentTime=t.toFixed(1)}catch(r){}"youtube"==pt.type&&(pt.embed.seekTo(pt.media.currentTime),v(pt.media,"timeupdate")),n("Seeking to "+pt.media.currentTime+" seconds"),k(t)}function Y(){f(pt.container,S.classes.playing,!pt.media.paused),f(pt.container,S.classes.stopped,pt.media.paused)}function z(e){function t(){f(pt.controls,S.classes.hover,!0),window.clearTimeout(a),s||(a=window.setTimeout(function(){f(pt.controls,S.classes.hover,!1)},2e3))}function n(e){s="mouseenter"===e.type}var r=F.supportsFullScreen;e&&e.type===F.fullScreenEventName?pt.isFullscreen=F.isFullScreen(pt.container):r?(F.isFullScreen(pt.container)?F.cancelFullScreen():F.requestFullScreen(pt.container),pt.isFullscreen=F.isFullScreen(pt.container)):(pt.isFullscreen=!pt.isFullscreen,pt.isFullscreen?(y(document,"keyup",X),document.body.style.overflow="hidden"):(b(document,"keyup",X),document.body.style.overflow="")),f(pt.container,S.classes.fullscreen.active,pt.isFullscreen);var a,s=!1;S.fullscreen.hideControls&&(f(pt.controls,S.classes.hover,!1),m(pt.controls,"mouseenter mouseleave",n,pt.isFullscreen),m(pt.container,"mousemove",t,pt.isFullscreen))}function X(e){27===(e.which||e.charCode||e.keyCode)&&pt.isFullscreen&&z()}function J(e){"undefined"==typeof e&&(e=S.storage.enabled&&T().supported?window.localStorage[S.storage.key]||S.volume:S.volume),e>10&&(e=10),0>e&&(e=0),pt.media.volume=parseFloat(e/10),"youtube"==pt.type&&(pt.embed.setVolume(100*pt.media.volume),v(pt.media,"volumechange")),pt.media.muted&&e>0&&$()}function $(e){"undefined"==typeof e&&(e=!pt.media.muted),pt.media.muted=e,"youtube"===pt.type&&(pt.embed[pt.media.muted?"mute":"unMute"](),v(pt.media,"volumechange"))}function K(){var e=pt.media.muted?0:10*pt.media.volume;pt.supported.full&&pt.volume&&(pt.volume.value=e),S.storage.enabled&&T().supported&&window.localStorage.setItem(S.storage.key,e),f(pt.container,S.classes.muted,0===e),pt.supported.full&&pt.buttons.mute&&(pt.buttons.mute.checked=0===e)}function G(e){pt.supported.full&&pt.buttons.captions&&("undefined"==typeof e&&(e=-1===pt.container.className.indexOf(S.classes.captions.active),pt.buttons.captions.checked=e),f(pt.container,S.classes.captions.active,e))}function Q(e){var t="waiting"===e.type;clearTimeout(pt.loadingTimer),pt.loadingTimer=setTimeout(function(){f(pt.container,S.classes.loading,t)},t?250:0)}function Z(e){var t=pt.progress.played.bar,n=pt.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=h(pt.media.currentTime,pt.media.duration),"timeupdate"==e.type&&pt.buttons.seek&&(pt.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=pt.progress.buffer.bar,n=pt.progress.buffer.text,r=function(){var e=pt.media.buffered;return e&&e.length?h(e.end(0),pt.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function et(e,t){if(t){pt.secs=parseInt(e%60),pt.mins=parseInt(e/60%60),pt.hours=parseInt(e/60/60%60);var n=parseInt(pt.media.duration/60/60%60)>0;pt.secs=("0"+pt.secs).slice(-2),pt.mins=("0"+pt.mins).slice(-2),t.innerHTML=(n?pt.hours+":":"")+pt.mins+":"+pt.secs}}function tt(){var e=pt.media.duration||0;!pt.duration&&S.displayDuration&&pt.media.paused&&et(e,pt.currentTime),pt.duration&&et(e,pt.duration)}function nt(e){et(pt.media.currentTime,pt.currentTime),Z(e)}function rt(){for(var e=pt.media.querySelectorAll("source"),t=e.length-1;t>=0;t--)c(e[t]);pt.media.removeAttribute("src")}function at(e){if(e.src){var t=document.createElement("source");d(t,e),p(pt.media,t)}}function st(e){if("youtube"===pt.type&&"string"==typeof e)return 0===e.indexOf("http")?pt.embed.loadVideoByUrl(e):pt.embed.loadVideoById(e),void 0;if(D(),U(),rt(),"string"==typeof e)pt.media.setAttribute("src",e);else if(e.constructor===Array)for(var t in e)at(e[t]);pt.supported.full&&(nt(),Y()),pt.media.load(),null!==pt.media.getAttribute("autoplay")&&R()}function ot(e){"video"===pt.type&&pt.media.setAttribute("poster",e)}function it(){var e="IE"==pt.browser.name?"change":"input";y(pt.buttons.play,"click",function(){R(),setTimeout(function(){pt.buttons.pause.focus()},100)}),y(pt.buttons.pause,"click",function(){D(),setTimeout(function(){pt.buttons.play.focus()},100)}),y(pt.buttons.restart,"click",U),y(pt.buttons.rewind,"click",j),y(pt.buttons.forward,"click",W),y(pt.buttons.seek,e,U),y(pt.volume,e,function(){J(this.value)}),y(pt.buttons.mute,"change",function(){$(this.checked)}),y(pt.buttons.fullscreen,"click",z),F.supportsFullScreen&&y(document,F.fullScreenEventName,z),y(pt.media,"timeupdate seeking",nt),y(pt.media,"timeupdate",k),y(pt.media,"loadedmetadata",tt),y(pt.buttons.captions,"change",function(){G(this.checked)}),y(pt.media,"ended",function(){"video"===pt.type&&(pt.captionsContainer.innerHTML=""),Y()}),y(pt.media,"progress playing",Z),y(pt.media,"volumechange",K),y(pt.media,"play pause",Y),y(pt.media,"waiting canplay seeked",Q),y(pt.checkboxes,"keyup",g),"video"===pt.type&&S.click&&y(pt.videoContainer,"click",function(){pt.media.paused?v(pt.buttons.play,"click"):pt.media.ended?(U(),v(pt.buttons.play,"click")):v(pt.buttons.pause,"click")})}function lt(){if(!pt.init)return null;pt.container.setAttribute("class",S.selectors.container.replace(".","")),c(I(S.selectors.controls)),"video"===pt.type&&(c(I(S.selectors.captions)),u(pt.videoContainer)),pt.media.setAttribute("controls","");var e=pt.media.cloneNode(!0);pt.media.parentNode.replaceChild(e,pt.media),pt.init=!1}function ut(){if(pt.init)return null;F=w(),pt.browser=r(),pt.media=pt.container.querySelectorAll("audio, video, div")[0];var t=pt.media.tagName.toLowerCase();switch(t){case"div":pt.type=pt.media.getAttribute("data-type");break;default:pt.type=t}return pt.supported=e.supported(pt.type),pt.supported.basic?(n(pt.browser.name+" "+pt.browser.version),V(),("video"==pt.type||"audio"==pt.type)&&ct(),pt.init=!0,void 0):!1}function ct(){if(pt.supported.full){if(M(),!L())return!1;S.displayDuration&&tt(),O(),B(),J(),K(),H(),it()}}var pt=this;return pt.container=o,ut(),pt.init?{media:pt.media,play:R,pause:D,restart:U,rewind:j,forward:W,seek:U,source:st,poster:ot,setVolume:J,togglePlay:_,toggleMute:$,toggleCaptions:G,toggleFullscreen:z,isFullscreen:function(){return pt.isFullscreen||!1},support:function(e){return a(pt,e)},destroy:lt,restore:ut}:{}}var F,S,C={enabled:!0,debug:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,selectors:{container:".player",controls:".player-controls",labels:"[data-player] .sr-only, label .sr-only",buttons:{seek:"[data-player='seek']",play:"[data-player='play']",pause:"[data-player='pause']",restart:"[data-player='restart']",rewind:"[data-player='rewind']",forward:"[data-player='fast-forward']",mute:"[data-player='mute']",volume:"[data-player='volume']",captions:"[data-player='captions']",fullscreen:"[data-player='fullscreen']"},progress:{container:".player-progress",buffer:".player-progress-buffer",played:".player-progress-played"},captions:".player-captions",currentTime:".player-current-time",duration:".player-duration"},classes:{videoWrapper:"player-video-wrapper",embedWrapper:"player-video-embed",type:"player-{0}",stopped:"stopped",playing:"playing",muted:"muted",loading:"loading",tooltip:"player-tooltip",hidden:"sr-only",hover:"hover",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active",hideControls:"fullscreen-hide-controls"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,hideControls:!0},storage:{enabled:!0,key:"plyr_volume"},controls:["restart","rewind","play","fast-forward","current-time","duration","mute","volume","captions","fullscreen"],onSetup:function(){}};e.supported=function(e){var t,n,a=r(),s="IE"===a.name&&a.version<=9,o=/iPhone|iPod/i.test(navigator.userAgent),i=!!document.createElement("audio").canPlayType,l=!!document.createElement("video").canPlayType;switch(e){case"video":t=l,n=t&&!s&&!o;break;case"audio":t=i,n=t&&!s;break;default:t=i&&l,n=t&&!s}return{basic:t,full:n}},e.setup=function(t){if(S=k(C,t),!S.enabled||!e.supported().basic)return!1;for(var n=document.querySelectorAll(S.selectors.container),r=[],a=n.length-1;a>=0;a--){var s=n[a];if("undefined"==typeof s.plyr){var o=new x(s);s.plyr=Object.keys(o).length?o:!1,S.onSetup.apply(s.plyr)}r.push(s.plyr)}return r}}(this.plyr=this.plyr||{});
\ No newline at end of file +!function(e){"use strict";function t(){var e=["<div class='player-controls'>","<div class='player-progress'>","<label for='seek{id}' class='sr-only'>Seek</label>","<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>","<progress class='player-progress-played' max='100' value='0'>","<span>0</span>% played","</progress>","<progress class='player-progress-buffer' max='100' value='0'>","<span>0</span>% buffered","</progress>","</div>","<span class='player-controls-left'>"];return o(S.controls,"restart")&&e.push("<button type='button' data-player='restart'>","<svg><use xlink:href='#icon-restart'></use></svg>","<span class='sr-only'>Restart</span>","</button>"),o(S.controls,"rewind")&&e.push("<button type='button' data-player='rewind'>","<svg><use xlink:href='#icon-rewind'></use></svg>","<span class='sr-only'>Rewind {seektime} secs</span>","</button>"),o(S.controls,"play")&&e.push("<button type='button' data-player='play'>","<svg><use xlink:href='#icon-play'></use></svg>","<span class='sr-only'>Play</span>","</button>","<button type='button' data-player='pause'>","<svg><use xlink:href='#icon-pause'></use></svg>","<span class='sr-only'>Pause</span>","</button>"),o(S.controls,"fast-forward")&&e.push("<button type='button' data-player='fast-forward'>","<svg><use xlink:href='#icon-fast-forward'></use></svg>","<span class='sr-only'>Forward {seektime} secs</span>","</button>"),o(S.controls,"current-time")&&e.push("<span class='player-time'>","<span class='sr-only'>Current time</span>","<span class='player-current-time'>00:00</span>","</span>"),o(S.controls,"duration")&&e.push("<span class='player-time'>","<span class='sr-only'>Duration</span>","<span class='player-duration'>00:00</span>","</span>"),e.push("</span>","<span class='player-controls-right'>"),o(S.controls,"mute")&&e.push("<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>","<label id='mute{id}' for='mute{id}'>","<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>","<svg><use xlink:href='#icon-volume'></use></svg>","<span class='sr-only'>Toggle Mute</span>","</label>"),o(S.controls,"volume")&&e.push("<label for='volume{id}' class='sr-only'>Volume</label>","<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>"),o(S.controls,"captions")&&e.push("<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>","<label for='captions{id}'>","<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>","<svg><use xlink:href='#icon-captions-off'></use></svg>","<span class='sr-only'>Toggle Captions</span>","</label>"),o(S.controls,"fullscreen")&&e.push("<button type='button' data-player='fullscreen'>","<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>","<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>","<span class='sr-only'>Toggle Fullscreen</span>","</button>"),e.push("</span>","</div>"),e.join("")}function n(e,t){S.debug&&window.console&&console[t?"error":"log"](e)}function r(){var e,t,n,r=navigator.userAgent,a=navigator.appName,s=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",s="11;"):-1!==(t=r.indexOf("MSIE"))?(a="IE",s=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(a="Chrome",s=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(a="Safari",s=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(s=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(a="Firefox",s=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(a=r.substring(e,t),s=r.substring(t+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(n=s.indexOf(";"))&&(s=s.substring(0,n)),-1!==(n=s.indexOf(" "))&&(s=s.substring(0,n)),o=parseInt(""+s,10),isNaN(o)&&(s=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10)),{name:a,version:o,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform)}}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 s(e){if(!document.querySelectorAll("script[src='"+e+"']").length){var t=document.createElement("script");t.src=e;var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}}function o(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function i(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function l(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],s=a.parentNode,o=a.nextSibling;r.appendChild(a),o?s.insertBefore(r,o):s.appendChild(r)}}function u(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function c(e){e.parentNode.removeChild(e)}function p(e,t){e.insertBefore(t,e.firstChild)}function d(e,t){for(var n in t)e.setAttribute(n,t[n])}function f(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 m(e,t,n,r){var a=t.split(" ");if(e instanceof NodeList)for(var s=0;s<e.length;s++)e[s]instanceof Node&&m(e[s],arguments[1],arguments[2],arguments[3]);else for(var o=0;o<a.length;o++)e[r?"addEventListener":"removeEventListener"](a[o],n,!1)}function y(e,t,n){e&&m(e,t,n,!0)}function b(e,t,n){e&&m(e,t,n,!1)}function v(e,t){var n=document.createEvent("MouseEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function g(e){return e.keyCode&&13!=e.keyCode?!0:(e.target.checked=!e.target.checked,v(e.target,"change"),void 0)}function h(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function k(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},k(e[n],t[n])):e[n]=t[n];return e}function w(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=document),this.prefix){case"":return document.fullscreenElement==e;case"moz":return document.mozFullScreenElement==e;default:return document[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function T(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function x(o){function k(e){if(!dt.usingTextTracks&&"video"===dt.type&&dt.supported.full){for(dt.subcount=0,e="number"==typeof e?e:dt.media.currentTime;A(dt.captions[dt.subcount][0])<e.toFixed(1);)if(dt.subcount++,dt.subcount>dt.captions.length-1){dt.subcount=dt.captions.length-1;break}dt.media.currentTime.toFixed(1)>=C(dt.captions[dt.subcount][0])&&dt.media.currentTime.toFixed(1)<=A(dt.captions[dt.subcount][0])?(dt.currentCaption=dt.captions[dt.subcount][1],dt.captionsContainer.innerHTML=dt.currentCaption):dt.captionsContainer.innerHTML=""}}function x(){dt.buttons.captions&&(f(dt.container,S.classes.captions.enabled,!0),S.captions.defaultActive&&(f(dt.container,S.classes.captions.active,!0),dt.buttons.captions.checked=!0))}function C(e){var t=[];return t=e.split(" --> "),E(t[0])}function A(e){var t=[];return t=e.split(" --> "),E(t[1])}function E(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 N(e){return dt.container.querySelectorAll(e)}function I(e){return N(e)[0]}function P(){try{return window.self!==window.top}catch(e){return!0}}function M(){var e=S.html;if(n("Injecting custom controls."),e||(e=t()),e=i(e,"{seektime}",S.seekTime),e=i(e,"{id}",Math.floor(1e4*Math.random())),dt.container.insertAdjacentHTML("beforeend",e),S.tooltips)for(var r=N(S.selectors.labels),a=r.length-1;a>=0;a--){var s=r[a];f(s,S.classes.hidden,!1),f(s,S.classes.tooltip,!0)}}function L(){try{return dt.controls=I(S.selectors.controls),dt.buttons={},dt.buttons.seek=I(S.selectors.buttons.seek),dt.buttons.play=I(S.selectors.buttons.play),dt.buttons.pause=I(S.selectors.buttons.pause),dt.buttons.restart=I(S.selectors.buttons.restart),dt.buttons.rewind=I(S.selectors.buttons.rewind),dt.buttons.forward=I(S.selectors.buttons.forward),dt.buttons.fullscreen=I(S.selectors.buttons.fullscreen),dt.buttons.mute=I(S.selectors.buttons.mute),dt.buttons.captions=I(S.selectors.buttons.captions),dt.checkboxes=N("[type='checkbox']"),dt.progress={},dt.progress.container=I(S.selectors.progress.container),dt.progress.buffer={},dt.progress.buffer.bar=I(S.selectors.progress.buffer),dt.progress.buffer.text=dt.progress.buffer.bar&&dt.progress.buffer.bar.getElementsByTagName("span")[0],dt.progress.played={},dt.progress.played.bar=I(S.selectors.progress.played),dt.progress.played.text=dt.progress.played.bar&&dt.progress.played.bar.getElementsByTagName("span")[0],dt.volume=I(S.selectors.buttons.volume),dt.duration=I(S.selectors.duration),dt.currentTime=I(S.selectors.currentTime),dt.seekTime=N(S.selectors.seekTime),!0}catch(e){return n("It looks like there's a problem with your controls html. Bailing.",!0),dt.media.setAttribute("controls",""),!1}}function O(){if(dt.buttons.play){var e=dt.buttons.play.innerText||"Play";"undefined"!=typeof S.title&&S.title.length&&(e+=", "+S.title),dt.buttons.play.setAttribute("aria-label",e)}}function V(){if(!dt.media)return n("No audio or video element found!",!0),!1;if(dt.supported.full){if(dt.media.removeAttribute("controls"),f(dt.container,S.classes.type.replace("{0}",dt.type),!0),f(dt.container,S.classes.stopped,null===dt.media.getAttribute("autoplay")),dt.browser.ios&&f(dt.container,"ios",!0),"video"===dt.type){var e=document.createElement("div");e.setAttribute("class",S.classes.videoWrapper),l(dt.media,e),dt.videoContainer=e}"youtube"==dt.type&&q(dt.media.getAttribute("data-video-id"))}null!==dt.media.getAttribute("autoplay")&&D()}function q(e){for(var t=N("[id^='youtube']"),n=t.length-1;n>=0;n--)c(t[n]);var r=document.createElement("div");r.setAttribute("id","youtube-"+Math.floor(1e4*Math.random())),dt.media.appendChild(r),f(dt.media,S.classes.videoWrapper,!0),f(dt.media,S.classes.embedWrapper,!0),"object"==typeof YT?H(e,r):(s("https://www.youtube.com/iframe_api"),window.onYouTubeIframeAPIReady=function(){H(e,r)})}function H(e,t){n("YouTube API Ready"),"timer"in dt||(dt.timer={}),dt.embed=new YT.Player(t.id,{videoId:e,playerVars:{autoplay:0,controls:0,vq:"hd720",rel:0,showinfo:0,iv_load_policy:3,cc_lang_pref:"en",wmode:"transparent",modestbranding:1},events:{onReady:function(e){var t=e.target;dt.media.play=function(){t.playVideo()},dt.media.pause=function(){t.pauseVideo()},dt.media.stop=function(){t.stopVideo()},dt.media.duration=t.getDuration(),dt.media.paused=2==t.getPlayerState(),dt.media.currentTime=t.getCurrentTime(),dt.media.muted=t.isMuted(),v(dt.media,"timeupdate"),window.clearInterval(dt.timer.buffering),dt.timer.buffering=window.setInterval(function(){dt.media.buffered=t.getVideoLoadedFraction(),v(dt.media,"progress"),1===dt.media.buffered&&window.clearInterval(dt.timer.buffering)},200),dt.container.querySelectorAll(S.selectors.controls).length||pt(),S.displayDuration&&nt()},onStateChange:function(e){var t=e.target;switch(window.clearInterval(dt.timer.playing),e.data){case 0:dt.media.paused=!0,v(dt.media,"ended");break;case 1:dt.media.paused=!1,v(dt.media,"play"),dt.timer.playing=window.setInterval(function(){dt.media.currentTime=t.getCurrentTime(),v(dt.media,"timeupdate")},200);break;case 2:dt.media.paused=!0,v(dt.media,"pause")}}}})}function R(){if("video"===dt.type){dt.videoContainer.insertAdjacentHTML("afterbegin","<div class='"+S.selectors.captions.replace(".","")+"'></div>"),dt.captionsContainer=I(S.selectors.captions),dt.usingTextTracks=!1,dt.media.textTracks&&(dt.usingTextTracks=!0);for(var e,t="",r=dt.media.childNodes,a=0;a<r.length;a++)"track"===r[a].nodeName.toLowerCase()&&(e=r[a].getAttribute("kind"),"captions"===e&&(t=r[a].getAttribute("src")));if(dt.captionExists=!0,""===t?(dt.captionExists=!1,n("No caption track found.")):n("Caption track found; URI: "+t),dt.captionExists){for(var s=dt.media.textTracks,o=0;o<s.length;o++)s[o].mode="hidden";if(x(dt),("IE"===dt.browser.name&&dt.browser.version>=10||"Firefox"===dt.browser.name&&dt.browser.version>=31||"Chrome"===dt.browser.name&&dt.browser.version>=43||"Safari"===dt.browser.name&&dt.browser.version>=7)&&(n("Detected unsupported browser for HTML5 captions. Using fallback."),dt.usingTextTracks=!1),dt.usingTextTracks){n("TextTracks supported.");for(var i=0;i<s.length;i++){var l=s[i];"captions"===l.kind&&y(l,"cuechange",function(){dt.captionsContainer.innerHTML="",this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&dt.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML())})}}else if(n("TextTracks not supported so rendering captions manually."),dt.currentCaption="",dt.captions=[],""!==t){var u=new XMLHttpRequest;u.onreadystatechange=function(){if(4===u.readyState)if(200===u.status){var e,t=[],r=u.responseText;t=r.split("\n\n");for(var a=0;a<t.length;a++)e=t[a],dt.captions[a]=[],dt.captions[a]=e.split("\n");dt.captions.shift(),n("Successfully loaded the caption file via AJAX.")}else n("There was a problem loading the caption file via AJAX.",!0)},u.open("get",t,!0),u.send()}if("Safari"===dt.browser.name&&dt.browser.version>=7){n("Safari 7+ detected; removing track from DOM."),s=dt.media.getElementsByTagName("track");for(var c=0;c<s.length;c++)dt.media.removeChild(s[c])}}else f(dt.container,S.classes.captions.enabled)}}function B(){if("audio"!=dt.type&&S.fullscreen.enabled){var e=F.supportsFullScreen;e||S.fullscreen.fallback&&!P()?(n((e?"Native":"Fallback")+" fullscreen enabled."),f(dt.container,S.classes.fullscreen.enabled,!0)):n("Fullscreen not supported and fallback disabled."),S.fullscreen.hideControls&&f(dt.container,S.classes.fullscreen.hideControls,!0)}}function D(){dt.media.play()}function j(){dt.media.pause()}function _(e){e===!0?D():e===!1?j():dt.media[dt.media.paused?"play":"pause"]()}function W(e){"number"!=typeof e&&(e=S.seekTime),U(dt.media.currentTime-e)}function Y(e){"number"!=typeof e&&(e=S.seekTime),U(dt.media.currentTime+e)}function U(e){var t=0;"number"==typeof e?t=e:"object"!=typeof e||"input"!==e.type&&"change"!==e.type||(t=e.target.value/e.target.max*dt.media.duration),0>t?t=0:t>dt.media.duration&&(t=dt.media.duration);try{dt.media.currentTime=t.toFixed(1)}catch(r){}"youtube"==dt.type&&(dt.embed.seekTo(dt.media.currentTime),v(dt.media,"timeupdate")),n("Seeking to "+dt.media.currentTime+" seconds"),k(t)}function z(){f(dt.container,S.classes.playing,!dt.media.paused),f(dt.container,S.classes.stopped,dt.media.paused)}function X(e){function t(){f(dt.controls,S.classes.hover,!0),window.clearTimeout(a),s||(a=window.setTimeout(function(){f(dt.controls,S.classes.hover,!1)},2e3))}function n(e){s="mouseenter"===e.type}var r=F.supportsFullScreen;e&&e.type===F.fullScreenEventName?dt.isFullscreen=F.isFullScreen(dt.container):r?(F.isFullScreen(dt.container)?F.cancelFullScreen():F.requestFullScreen(dt.container),dt.isFullscreen=F.isFullScreen(dt.container)):(dt.isFullscreen=!dt.isFullscreen,dt.isFullscreen?(y(document,"keyup",J),document.body.style.overflow="hidden"):(b(document,"keyup",J),document.body.style.overflow="")),f(dt.container,S.classes.fullscreen.active,dt.isFullscreen);var a,s=!1;S.fullscreen.hideControls&&(f(dt.controls,S.classes.hover,!1),m(dt.controls,"mouseenter mouseleave",n,dt.isFullscreen),m(dt.container,"mousemove",t,dt.isFullscreen))}function J(e){27===(e.which||e.charCode||e.keyCode)&&dt.isFullscreen&&X()}function $(e){"undefined"==typeof e&&(e=S.storage.enabled&&T().supported?window.localStorage[S.storage.key]||S.volume:S.volume),e>10&&(e=10),0>e&&(e=0),dt.media.volume=parseFloat(e/10),"youtube"==dt.type&&(dt.embed.setVolume(100*dt.media.volume),v(dt.media,"volumechange")),dt.media.muted&&e>0&&K()}function K(e){"undefined"==typeof e&&(e=!dt.media.muted),dt.media.muted=e,"youtube"===dt.type&&(dt.embed[dt.media.muted?"mute":"unMute"](),v(dt.media,"volumechange"))}function G(){var e=dt.media.muted?0:10*dt.media.volume;dt.supported.full&&dt.volume&&(dt.volume.value=e),S.storage.enabled&&T().supported&&window.localStorage.setItem(S.storage.key,e),f(dt.container,S.classes.muted,0===e),dt.supported.full&&dt.buttons.mute&&(dt.buttons.mute.checked=0===e)}function Q(e){dt.supported.full&&dt.buttons.captions&&("undefined"==typeof e&&(e=-1===dt.container.className.indexOf(S.classes.captions.active),dt.buttons.captions.checked=e),f(dt.container,S.classes.captions.active,e))}function Z(e){var t="waiting"===e.type;clearTimeout(dt.loadingTimer),dt.loadingTimer=setTimeout(function(){f(dt.container,S.classes.loading,t)},t?250:0)}function et(e){var t=dt.progress.played.bar,n=dt.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=h(dt.media.currentTime,dt.media.duration),"timeupdate"==e.type&&dt.buttons.seek&&(dt.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=dt.progress.buffer.bar,n=dt.progress.buffer.text,r=function(){var e=dt.media.buffered;return e&&e.length?h(e.end(0),dt.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function tt(e,t){if(t){dt.secs=parseInt(e%60),dt.mins=parseInt(e/60%60),dt.hours=parseInt(e/60/60%60);var n=parseInt(dt.media.duration/60/60%60)>0;dt.secs=("0"+dt.secs).slice(-2),dt.mins=("0"+dt.mins).slice(-2),t.innerHTML=(n?dt.hours+":":"")+dt.mins+":"+dt.secs}}function nt(){var e=dt.media.duration||0;!dt.duration&&S.displayDuration&&dt.media.paused&&tt(e,dt.currentTime),dt.duration&&tt(e,dt.duration)}function rt(e){tt(dt.media.currentTime,dt.currentTime),et(e)}function at(){for(var e=dt.media.querySelectorAll("source"),t=e.length-1;t>=0;t--)c(e[t]);dt.media.removeAttribute("src")}function st(e){if(e.src){var t=document.createElement("source");d(t,e),p(dt.media,t)}}function ot(e){if("youtube"===dt.type&&"string"==typeof e)return dt.embed.destroy(),q(e),rt(),void 0;if(j(),U(),at(),"string"==typeof e)dt.media.setAttribute("src",e);else if(e.constructor===Array)for(var t in e)st(e[t]);dt.supported.full&&(rt(),z()),dt.media.load(),null!==dt.media.getAttribute("autoplay")&&D()}function it(e){"video"===dt.type&&dt.media.setAttribute("poster",e)}function lt(){var e="IE"==dt.browser.name?"change":"input";y(dt.buttons.play,"click",function(){D(),setTimeout(function(){dt.buttons.pause.focus()},100)}),y(dt.buttons.pause,"click",function(){j(),setTimeout(function(){dt.buttons.play.focus()},100)}),y(dt.buttons.restart,"click",U),y(dt.buttons.rewind,"click",W),y(dt.buttons.forward,"click",Y),y(dt.buttons.seek,e,U),y(dt.volume,e,function(){$(this.value)}),y(dt.buttons.mute,"change",function(){K(this.checked)}),y(dt.buttons.fullscreen,"click",X),F.supportsFullScreen&&y(document,F.fullScreenEventName,X),y(dt.media,"timeupdate seeking",rt),y(dt.media,"timeupdate",k),y(dt.media,"loadedmetadata",nt),y(dt.buttons.captions,"change",function(){Q(this.checked)}),y(dt.media,"ended",function(){"video"===dt.type&&(dt.captionsContainer.innerHTML=""),z()}),y(dt.media,"progress playing",et),y(dt.media,"volumechange",G),y(dt.media,"play pause",z),y(dt.media,"waiting canplay seeked",Z),y(dt.checkboxes,"keyup",g),"video"===dt.type&&S.click&&y(dt.videoContainer,"click",function(){dt.media.paused?v(dt.buttons.play,"click"):dt.media.ended?(U(),v(dt.buttons.play,"click")):v(dt.buttons.pause,"click")})}function ut(){if(!dt.init)return null;if(dt.container.setAttribute("class",S.selectors.container.replace(".","")),dt.init=!1,c(I(S.selectors.controls)),"youtube"===dt.type)return dt.embed.destroy(),void 0;"video"===dt.type&&(c(I(S.selectors.captions)),u(dt.videoContainer)),dt.media.setAttribute("controls","");var e=dt.media.cloneNode(!0);dt.media.parentNode.replaceChild(e,dt.media)}function ct(){if(dt.init)return null;F=w(),dt.browser=r(),dt.media=dt.container.querySelectorAll("audio, video, div")[0];var t=dt.media.tagName.toLowerCase();switch(t){case"div":dt.type=dt.media.getAttribute("data-type");break;default:dt.type=t}if(dt.supported=e.supported(dt.type),!dt.supported.basic)return!1;if(n(dt.browser.name+" "+dt.browser.version),V(),"video"==dt.type||"audio"==dt.type){if(!dt.supported.full)return;pt(),S.displayDuration&&nt(),O()}dt.init=!0}function pt(){return M(),L()?(R(),$(),G(),B(),lt(),void 0):!1}var dt=this;return dt.container=o,ct(),dt.init?{media:dt.media,play:D,pause:j,restart:U,rewind:W,forward:Y,seek:U,source:ot,poster:it,setVolume:$,togglePlay:_,toggleMute:K,toggleCaptions:Q,toggleFullscreen:X,isFullscreen:function(){return dt.isFullscreen||!1},support:function(e){return a(dt,e)},destroy:ut,restore:ct}:{}}var F,S,C={enabled:!0,debug:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,selectors:{container:".player",controls:".player-controls",labels:"[data-player] .sr-only, label .sr-only",buttons:{seek:"[data-player='seek']",play:"[data-player='play']",pause:"[data-player='pause']",restart:"[data-player='restart']",rewind:"[data-player='rewind']",forward:"[data-player='fast-forward']",mute:"[data-player='mute']",volume:"[data-player='volume']",captions:"[data-player='captions']",fullscreen:"[data-player='fullscreen']"},progress:{container:".player-progress",buffer:".player-progress-buffer",played:".player-progress-played"},captions:".player-captions",currentTime:".player-current-time",duration:".player-duration"},classes:{videoWrapper:"player-video-wrapper",embedWrapper:"player-video-embed",type:"player-{0}",stopped:"stopped",playing:"playing",muted:"muted",loading:"loading",tooltip:"player-tooltip",hidden:"sr-only",hover:"hover",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active",hideControls:"fullscreen-hide-controls"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,hideControls:!0},storage:{enabled:!0,key:"plyr_volume"},controls:["restart","rewind","play","fast-forward","current-time","duration","mute","volume","captions","fullscreen"],onSetup:function(){}};e.supported=function(e){var t,n,a=r(),s="IE"===a.name&&a.version<=9,o=/iPhone|iPod/i.test(navigator.userAgent),i=!!document.createElement("audio").canPlayType,l=!!document.createElement("video").canPlayType;switch(e){case"video":t=l,n=t&&!s&&!o;break;case"audio":t=i,n=t&&!s;break;case"youtube":t=!0,n=!s;break;default:t=i&&l,n=t&&!s}return{basic:t,full:n}},e.setup=function(t){if(S=k(C,t),!S.enabled||!e.supported().basic)return!1;for(var n=document.querySelectorAll(S.selectors.container),r=[],a=n.length-1;a>=0;a--){var s=n[a];if("undefined"==typeof s.plyr){var o=new x(s);s.plyr=Object.keys(o).length?o:!1,S.onSetup.apply(s.plyr)}r.push(s.plyr)}return r}}(this.plyr=this.plyr||{});
\ No newline at end of file diff --git a/docs/dist/docs.css b/docs/dist/docs.css index 90a12e3d..dcc49989 100644 --- a/docs/dist/docs.css +++ b/docs/dist/docs.css @@ -1 +1 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff"),url(//cdn.plyr.io/fonts/avenir-medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff"),url(//cdn.plyr.io/fonts/avenir-bold.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}html{font-size:100%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#f2f5f7;line-height:1.5;text-align:center;color:#565d64;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.875rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}.actions{list-style:none;margin:0;padding:0;font-size:0}.actions li{display:inline-block;margin-top:10px;font-size:16px;font-size:1rem;white-space:nowrap}.actions li+li{margin-left:20px}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn,.btn-count{display:inline-block;vertical-align:middle;border-radius:3px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 20px;background:#3498db;border:0;color:#fff}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.btn-twitter{background:#8799A2}.btn-twitter:focus,.btn-twitter:hover{background:#798d97}.btn-count{position:relative;margin-left:6px;padding:9px;background:#fff;border:1px solid #cbd0d3}.btn-count::before{content:"";position:absolute;display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-controls,.example-video .player-controls{border-radius:0 0 4px 4px}.example-audio .player{max-width:520px}.example-audio .player-controls{border-radius:4px}.example-audio .player-progress{border-radius:4px 4px 0 0;overflow:hidden}.example-video .player{max-width:1200px}.example-video .player iframe,.example-video .player video{border-radius:4px 4px 0 0}.example-video .player iframe{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px}
\ No newline at end of file +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}*,::after,::before{box-sizing:border-box}html{font-size:100%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#f2f5f7;line-height:1.5;text-align:center;color:#55646b;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:480px){section{padding-bottom:40px}}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:600}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.875rem}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:background .3s ease,color .3s ease}a:focus,a:hover{color:#343f4a}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}nav ul{list-style:none;margin:0;padding:0;font-size:0}nav li{display:inline-block;margin-top:10px;font-size:16px;font-size:1rem;white-space:nowrap}nav li+li{margin-left:20px}.btn-bar{position:relative;margin:0 auto 20px;max-width:1200px}.btn-bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#dbe3e8}.btn-bar ul{position:relative;z-index:1;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-bar li{margin:0}.btn-bar li:first-child .btn{border-radius:4px 0 0 4px}.btn-bar li:last-child .btn{border-radius:0 4px 4px 0}.btn-bar li+li .btn{margin-left:-1px}.btn-bar .btn{display:block;border-radius:0}.btn-bar .btn.active{box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;z-index:1}@media (min-width:560px){.btn-bar{margin-bottom:40px}}.btn,.btn-count{display:inline-block;vertical-align:middle;border-radius:4px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 20px;background:#f2f5f7;border:1px solid #cbd0d3;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b}.btn:focus,.btn:hover{background-color:#fff;border-color:#bdc4c7;color:#3498db;outline:0}.btn-bar .active,.btn-primary{background:linear-gradient(#3498db,#2791d9);border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn-primary:focus,.btn-primary:hover{color:#fff;border-color:#196090}.btn-small{padding-top:7px;padding-bottom:7px}.btn-count{position:relative;margin-left:6px;padding:9px;background:#f2f5f7;border:1px solid #cbd0d3}.btn-count::before{content:"";position:absolute;display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.panel{display:none}.panel.active{display:block;-webkit-animation:fade-in .3s ease;animation:fade-in .3s ease}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-controls,.example-video .player-controls{border-radius:0 0 4px 4px}.example-audio .player{max-width:520px}.example-audio .player-controls{border-radius:4px}.example-audio .player-progress{border-radius:4px 4px 0 0;overflow:hidden}.example-video .player{max-width:1200px}.example-video .player iframe,.example-video .player video{border-radius:4px 4px 0 0}.example-video .player iframe{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}
\ No newline at end of file diff --git a/docs/dist/docs.js b/docs/dist/docs.js index eef800b4..c5a044c7 100644 --- a/docs/dist/docs.js +++ b/docs/dist/docs.js @@ -1 +1 @@ -function popup(t){"a"==t.target.nodeName.toLowerCase()&&(t.preventDefault?t.preventDefault():t.returnValue=!1);var n=t.target,e=n.href,s=n.getAttribute("data-window-width")||600,r=n.getAttribute("data-window-height")||600,a=n.getAttribute("data-window-name")||"popup";if(window["window-"+a]&&!window["window-"+a].closed)window["window-"+a].focus();else{var i=void 0!==window.screenLeft?window.screenLeft:screen.left,o=void 0!==window.screenTop?window.screenTop:screen.top,u=screen.width/2-s/2+i,c=screen.height/2-r/2+o;window["window-"+a]=window.open(e,a,"top="+c+",left="+u+",width="+s+",height="+r),window["window-"+a].focus()}}function getJSONP(t,n){var e="jsonp_callback_"+Math.round(1e5*Math.random());window[e]=function(t){delete window[e],document.body.removeChild(s),n(t)};var s=document.createElement("script");s.setAttribute("src",t+(t.indexOf("?")>=0?"&":"?")+"callback="+e),document.body.appendChild(s)}function displayCount(t,n){document.querySelector(t).innerHTML=n}function formatGitHubCount(t){return"★ "+t}var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,r,a){function i(){}function o(){}i.prototype=t,o.prototype=t.subs;var u,c=new i;c.subs=new o,c.subsText={},c.buf="",s=s||{},c.stackSubs=s,c.subsText=a;for(u in n)s[u]||(s[u]=n[u]);for(u in s)c.subs[u]=s[u];r=r||{},c.stackPartials=r;for(u in e)r[u]||(r[u]=e[u]);for(u in r)c.partials[u]=r[u];return c}function s(t){return String(null===t||void 0===t?"":t)}function r(t){return t=s(t),l.test(t)?t.replace(a,"&").replace(i,"<").replace(o,">").replace(u,"'").replace(c,"""):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:r,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],r=n[s.name];if(s.instance&&s.base==r)return s.instance;if("string"==typeof r){if(!this.c)throw new Error("No compiler available.");r=this.c.compile(r,this.options)}if(!r)return null;if(this.partials[t].base=r,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);r=e(r,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=r,r},rp:function(t,n,e,s){var r=this.ep(t,e);return r?r.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var r=0;r<s.length;r++)t.push(s[r]),e(t,n,this),t.pop()},s:function(t,n,e,s,r,a,i){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,r,a,i)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,r){var a,i=t.split("."),o=this.f(i[0],e,s,r),u=this.options.modelGet,c=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var l=1;l<i.length;l++)a=n(i[l],o,u),void 0!==a?(c=o,o=a):o="";return r&&!o?!1:(r||"function"!=typeof o||(e.push(c),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,r){for(var a=!1,i=null,o=!1,u=this.options.modelGet,c=e.length-1;c>=0;c--)if(i=e[c],a=n(t,i,u),void 0!==a){o=!0;break}return o?(r||"function"!=typeof a||(a=this.mv(a,e,s)),a):r?!1:""},ls:function(t,n,e,r,a){var i=this.options.delimiters;return this.options.delimiters=a,this.b(this.ct(s(t.call(n,r)),n,e)),this.options.delimiters=i,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,r,a,i){var o,u=n[n.length-1],c=t.call(u);return"function"==typeof c?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(c,u,e,o.substring(r,a),i)):c},mv:function(t,n,e){var r=n[n.length-1],a=t.call(r);return"function"==typeof a?this.ct(s(a.call(r)),r,e):a},sub:function(t,n,e,s){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,s),this.activeSub=!1)}};var a=/&/g,i=/</g,o=/>/g,u=/\'/g,c=/\"/g,l=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,r=t.length;r>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function r(n,e,s,o){var u=[],c=null,l=null,p=null;for(l=s[s.length-1];n.length>0;){if(p=n.shift(),l&&"<"==l.tag&&!(p.tag in k))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||a(p,o))s.push(p),p.nodes=r(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(c=s.pop(),p.n!=c.n&&!i(p.n,c.n,o))throw new Error("Nesting error: "+c.n+" vs. "+p.n);return c.end=p.i,u}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}u.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return u}function a(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function i(t,n,e){for(var s=0,r=e.length;r>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+c(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function u(t){var n=[];for(var e in t.partials)n.push('"'+c(e)+'":{name:"'+c(t.partials[e].name)+'", '+u(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function c(t){return t.replace(w,"\\\\").replace(g,'\\"').replace(h,"\\n").replace(v,"\\r").replace(m,"\\u2028").replace(y,"\\u2029")}function l(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+x++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+c(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+l(t.n)+'("'+c(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var d=/\S/,g=/\"/g,h=/\n/g,v=/\r/g,w=/\\/g,m=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,a){function i(){w.length>0&&(m.push({tag:"_t",text:new String(w)}),w="")}function o(){for(var n=!0,e=x;e<m.length;e++)if(n=t.tags[m[e].tag]<t.tags._v||"_t"==m[e].tag&&null===m[e].text.match(d),!n)return!1;return n}function u(t,n){if(i(),t&&o())for(var e,s=x;s<m.length;s++)m[s].text&&((e=m[s+1])&&">"==e.tag&&(e.indent=m[s].text.toString()),m.splice(s,1));else n||m.push({tag:"\n"});y=!1,x=m.length}function c(t,n){var s="="+T,r=t.indexOf(s,n),a=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return S=a[0],T=a[a.length-1],r+s.length-1}var l=r.length,p=0,b=1,f=2,g=p,h=null,v=null,w="",m=[],y=!1,k=0,x=0,S="{{",T="}}";for(a&&(a=a.split(" "),S=a[0],T=a[1]),k=0;l>k;k++)g==p?s(S,r,k)?(--k,i(),g=b):"\n"==r.charAt(k)?u(y):w+=r.charAt(k):g==b?(k+=S.length-1,v=t.tags[r.charAt(k+1)],h=v?r.charAt(k+1):"_v","="==h?(k=c(r,k),g=p):(v&&k++,g=f),y=k):s(T,r,k)?(m.push({tag:h,n:e(w),otag:S,ctag:T,i:"/"==h?y-S.length:k+T.length}),w="",k+=T.length-1,g=p,"{"==h&&("}}"==T?k++:n(m[m.length-1]))):w+=r.charAt(k);return u(y,!0),m};var k={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+u(n)+"}"};var x=0;t.generate=function(n,e,s){x=0;var r={code:"",subs:{},partials:{}};return t.walk(n,r),s.asString?this.stringify(r,e,s):this.makeTemplate(r,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+l(n.n)+'("'+c(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+l(n.n)+'("'+c(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var r=e.partials[p(n,e)];r.subs=s.subs,r.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+c(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+l(t.n)+'("'+c(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+c(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,r=0,a=n.length;a>r;r++)s=t.codegen[n[r].tag],s&&s(n[r],e);return e},t.parse=function(t,n,e){return e=e||{},r(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),r=this.cache[s];if(r){var a=r.partials;for(var i in a)delete a[i].instance;return r}return r=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=r}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,r){var a=this.f(n,e,s,0),i=e;return a&&(i=i.concat(a)),t.Template.prototype.rp.call(this,n,i,s,r)}var e=function(e,s,r){this.rp=n,t.Template.call(this,e,s,r)};e.prototype=t.Template.prototype;var s,r=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return r.prototype=t,s=new r,{to_html:function(t,n,e,r){var a=s.compile(t),i=a.render(n,e);return r?(r(i),void 0):i}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="player-controls">'),s.b("\n"+e),s.b(' <div class="player-progress">'),s.b("\n"+e),s.b(' <label for="seek{id}" class="sr-only">Seek</label>'),s.b("\n"+e),s.b(' <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">'),s.b("\n"+e),s.b(' <progress class="player-progress-played" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% played"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(' <progress class="player-progress-buffer" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% buffered"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(' <span class="player-controls-left">'),s.b("\n"+e),s.b(' <button type="button" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-restart"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Restart</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="rewind">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-rewind"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Rewind {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="play">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-play"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Play</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="pause">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-pause"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Pause</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="fast-forward">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-fast-forward"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Forward {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Current time</span>'),s.b("\n"+e),s.b(' <span class="player-current-time">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Duration</span>'),s.b("\n"+e),s.b(' <span class="player-duration">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-controls-right">'),s.b("\n"+e),s.b(' <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">'),s.b("\n"+e),s.b(' <label id="mute{id}" for="mute{id}">'),s.b("\n"+e),s.b(' <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-volume"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <label for="volume{id}" class="sr-only">Volume</label>'),s.b("\n"+e),s.b(' <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">'),s.b("\n"),s.b("\n"+e),s.b(' <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">'),s.b("\n"+e),s.b(' <label for="captions{id}">'),s.b("\n"+e),s.b(' <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-captions-off"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <button type="button" data-player="fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Fullscreen</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b("</div>"),s.fl()},partials:{},subs:{}}),plyr.setup({debug:!0,volume:9,title:"Video demo",html:templates.controls.render({}),captions:{defaultActive:!0},onSetup:function(){var t=this,n=t.media.tagName.toLowerCase(),e=document.querySelector("[data-toggle='fullscreen']");console.log("✓ Setup done for <"+n+">"),"video"===n&&e&&e.addEventListener("click",t.toggleFullscreen,!1)}}),document.querySelector(".js-popup").addEventListener("click",popup);var storageSupported="sessionStorage"in window,selectors={github:".js-stargazers-count",twitter:".js-tweet-count"};storageSupported&&"github_stargazers"in window.sessionStorage?displayCount(selectors.github,formatGitHubCount(window.sessionStorage.github_stargazers)):getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5",function(t){t&&"undefined"!=typeof t.data.stargazers_count&&(displayCount(selectors.github,formatGitHubCount(t.data.stargazers_count)),window.sessionStorage.github_stargazers=t.data.stargazers_count)}),storageSupported&&"tweets"in window.sessionStorage?displayCount(selectors.twitter,window.sessionStorage.tweets):getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io",function(t){t&&"undefined"!=typeof t.count&&(displayCount(selectors.twitter,t.count),window.sessionStorage.tweets=t.count)}),document.domain.indexOf("plyr.io")>-1&&(!function(t,n,e,s,r,a,i){t.GoogleAnalyticsObject=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},t[r].l=1*new Date,a=n.createElement(e),i=n.getElementsByTagName(e)[0],a.async=1,a.src=s,i.parentNode.insertBefore(a,i)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
\ No newline at end of file +var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,r,a){function i(){}function o(){}i.prototype=t,o.prototype=t.subs;var c,l=new i;l.subs=new o,l.subsText={},l.buf="",s=s||{},l.stackSubs=s,l.subsText=a;for(c in n)s[c]||(s[c]=n[c]);for(c in s)l.subs[c]=s[c];r=r||{},l.stackPartials=r;for(c in e)r[c]||(r[c]=e[c]);for(c in r)l.partials[c]=r[c];return l}function s(t){return String(null===t||void 0===t?"":t)}function r(t){return t=s(t),u.test(t)?t.replace(a,"&").replace(i,"<").replace(o,">").replace(c,"'").replace(l,"""):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:r,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],r=n[s.name];if(s.instance&&s.base==r)return s.instance;if("string"==typeof r){if(!this.c)throw new Error("No compiler available.");r=this.c.compile(r,this.options)}if(!r)return null;if(this.partials[t].base=r,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);r=e(r,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=r,r},rp:function(t,n,e,s){var r=this.ep(t,e);return r?r.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var r=0;r<s.length;r++)t.push(s[r]),e(t,n,this),t.pop()},s:function(t,n,e,s,r,a,i){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,r,a,i)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,r){var a,i=t.split("."),o=this.f(i[0],e,s,r),c=this.options.modelGet,l=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var u=1;u<i.length;u++)a=n(i[u],o,c),void 0!==a?(l=o,o=a):o="";return r&&!o?!1:(r||"function"!=typeof o||(e.push(l),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,r){for(var a=!1,i=null,o=!1,c=this.options.modelGet,l=e.length-1;l>=0;l--)if(i=e[l],a=n(t,i,c),void 0!==a){o=!0;break}return o?(r||"function"!=typeof a||(a=this.mv(a,e,s)),a):r?!1:""},ls:function(t,n,e,r,a){var i=this.options.delimiters;return this.options.delimiters=a,this.b(this.ct(s(t.call(n,r)),n,e)),this.options.delimiters=i,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,r,a,i){var o,c=n[n.length-1],l=t.call(c);return"function"==typeof l?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(l,c,e,o.substring(r,a),i)):l},mv:function(t,n,e){var r=n[n.length-1],a=t.call(r);return"function"==typeof a?this.ct(s(a.call(r)),r,e):a},sub:function(t,n,e,s){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,s),this.activeSub=!1)}};var a=/&/g,i=/</g,o=/>/g,c=/\'/g,l=/\"/g,u=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,r=t.length;r>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function r(n,e,s,o){var c=[],l=null,u=null,p=null;for(u=s[s.length-1];n.length>0;){if(p=n.shift(),u&&"<"==u.tag&&!(p.tag in k))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||a(p,o))s.push(p),p.nodes=r(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(l=s.pop(),p.n!=l.n&&!i(p.n,l.n,o))throw new Error("Nesting error: "+l.n+" vs. "+p.n);return l.end=p.i,c}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}c.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return c}function a(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function i(t,n,e){for(var s=0,r=e.length;r>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+l(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function c(t){var n=[];for(var e in t.partials)n.push('"'+l(e)+'":{name:"'+l(t.partials[e].name)+'", '+c(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function l(t){return t.replace(w,"\\\\").replace(g,'\\"').replace(h,"\\n").replace(v,"\\r").replace(m,"\\u2028").replace(y,"\\u2029")}function u(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+x++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+l(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+u(t.n)+'("'+l(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var d=/\S/,g=/\"/g,h=/\n/g,v=/\r/g,w=/\\/g,m=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,a){function i(){w.length>0&&(m.push({tag:"_t",text:new String(w)}),w="")}function o(){for(var n=!0,e=x;e<m.length;e++)if(n=t.tags[m[e].tag]<t.tags._v||"_t"==m[e].tag&&null===m[e].text.match(d),!n)return!1;return n}function c(t,n){if(i(),t&&o())for(var e,s=x;s<m.length;s++)m[s].text&&((e=m[s+1])&&">"==e.tag&&(e.indent=m[s].text.toString()),m.splice(s,1));else n||m.push({tag:"\n"});y=!1,x=m.length}function l(t,n){var s="="+T,r=t.indexOf(s,n),a=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return S=a[0],T=a[a.length-1],r+s.length-1}var u=r.length,p=0,b=1,f=2,g=p,h=null,v=null,w="",m=[],y=!1,k=0,x=0,S="{{",T="}}";for(a&&(a=a.split(" "),S=a[0],T=a[1]),k=0;u>k;k++)g==p?s(S,r,k)?(--k,i(),g=b):"\n"==r.charAt(k)?c(y):w+=r.charAt(k):g==b?(k+=S.length-1,v=t.tags[r.charAt(k+1)],h=v?r.charAt(k+1):"_v","="==h?(k=l(r,k),g=p):(v&&k++,g=f),y=k):s(T,r,k)?(m.push({tag:h,n:e(w),otag:S,ctag:T,i:"/"==h?y-S.length:k+T.length}),w="",k+=T.length-1,g=p,"{"==h&&("}}"==T?k++:n(m[m.length-1]))):w+=r.charAt(k);return c(y,!0),m};var k={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+c(n)+"}"};var x=0;t.generate=function(n,e,s){x=0;var r={code:"",subs:{},partials:{}};return t.walk(n,r),s.asString?this.stringify(r,e,s):this.makeTemplate(r,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+u(n.n)+'("'+l(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+u(n.n)+'("'+l(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var r=e.partials[p(n,e)];r.subs=s.subs,r.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+l(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+u(t.n)+'("'+l(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+l(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,r=0,a=n.length;a>r;r++)s=t.codegen[n[r].tag],s&&s(n[r],e);return e},t.parse=function(t,n,e){return e=e||{},r(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),r=this.cache[s];if(r){var a=r.partials;for(var i in a)delete a[i].instance;return r}return r=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=r}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,r){var a=this.f(n,e,s,0),i=e;return a&&(i=i.concat(a)),t.Template.prototype.rp.call(this,n,i,s,r)}var e=function(e,s,r){this.rp=n,t.Template.call(this,e,s,r)};e.prototype=t.Template.prototype;var s,r=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return r.prototype=t,s=new r,{to_html:function(t,n,e,r){var a=s.compile(t),i=a.render(n,e);return r?(r(i),void 0):i}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="player-controls">'),s.b("\n"+e),s.b(' <div class="player-progress">'),s.b("\n"+e),s.b(' <label for="seek{id}" class="sr-only">Seek</label>'),s.b("\n"+e),s.b(' <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">'),s.b("\n"+e),s.b(' <progress class="player-progress-played" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% played"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(' <progress class="player-progress-buffer" max="100" value="0">'),s.b("\n"+e),s.b(" <span>0</span>% buffered"),s.b("\n"+e),s.b(" </progress>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(' <span class="player-controls-left">'),s.b("\n"+e),s.b(' <button type="button" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-restart"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Restart</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="rewind">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-rewind"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Rewind {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="play">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-play"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Play</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="pause">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-pause"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Pause</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button type="button" data-player="fast-forward">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-fast-forward"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Forward {seektime} secs</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Current time</span>'),s.b("\n"+e),s.b(' <span class="player-current-time">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Duration</span>'),s.b("\n"+e),s.b(' <span class="player-duration">00:00</span>'),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b(' <span class="player-controls-right">'),s.b("\n"+e),s.b(' <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">'),s.b("\n"+e),s.b(' <label id="mute{id}" for="mute{id}">'),s.b("\n"+e),s.b(' <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-volume"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <label for="volume{id}" class="sr-only">Volume</label>'),s.b("\n"+e),s.b(' <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">'),s.b("\n"),s.b("\n"+e),s.b(' <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">'),s.b("\n"+e),s.b(' <label for="captions{id}">'),s.b("\n"+e),s.b(' <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-captions-off"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"),s.b("\n"+e),s.b(' <button type="button" data-player="fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle Fullscreen</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(" </span>"),s.b("\n"+e),s.b("</div>"),s.fl()},partials:{},subs:{}}),plyr.setup({debug:!0,volume:9,title:"Video demo",html:templates.controls.render({}),captions:{defaultActive:!0},onSetup:function(){if("media"in this){var t=this,n=t.media.tagName.toLowerCase(),e=document.querySelector("[data-toggle='fullscreen']");console.log("✓ Setup done for <"+n+">"),"video"===n&&e&&e.addEventListener("click",t.toggleFullscreen,!1)}}}),function(){function t(t){"a"==t.target.nodeName.toLowerCase()&&(t.preventDefault?t.preventDefault():t.returnValue=!1);var n=t.target,e=n.href,s=n.getAttribute("data-window-width")||600,r=n.getAttribute("data-window-height")||600,a=n.getAttribute("data-window-name")||"popup";if(window["window-"+a]&&!window["window-"+a].closed)window["window-"+a].focus();else{var i=void 0!==window.screenLeft?window.screenLeft:screen.left,o=void 0!==window.screenTop?window.screenTop:screen.top,c=screen.width/2-s/2+i,l=screen.height/2-r/2+o;window["window-"+a]=window.open(e,a,"top="+l+",left="+c+",width="+s+",height="+r),window["window-"+a].focus()}}function n(t,n){var e="jsonp_callback_"+Math.round(1e5*Math.random());window[e]=function(t){delete window[e],document.body.removeChild(s),n(t)};var s=document.createElement("script");s.setAttribute("src",t+(t.indexOf("?")>=0?"&":"?")+"callback="+e),document.body.appendChild(s)}function e(t,n){document.querySelector(t).innerHTML=n}function s(t){return"★ "+t}function r(t){t.preventDefault();for(var n=t.target,e=document.querySelector(n.getAttribute("href")),s=c.length-1;s>=0;s--)c[s].classList.remove(l);for(var r=o.length-1;r>=0;r--)o[r].classList.remove(l);e.classList.add(l),t.target.classList.add(l)}document.querySelector(".js-popup").addEventListener("click",t);var a="sessionStorage"in window,i={github:".js-stargazers-count",twitter:".js-tweet-count"};a&&"github_stargazers"in window.sessionStorage?e(i.github,s(window.sessionStorage.github_stargazers)):n("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5",function(t){t&&"undefined"!=typeof t.data.stargazers_count&&(e(i.github,s(t.data.stargazers_count)),window.sessionStorage.github_stargazers=t.data.stargazers_count)}),a&&"tweets"in window.sessionStorage?e(i.twitter,window.sessionStorage.tweets):n("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io",function(t){t&&"undefined"!=typeof t.count&&(e(i.twitter,t.count),window.sessionStorage.tweets=t.count)});for(var o=document.querySelectorAll(".nav-panel a"),c=document.querySelectorAll(".panels > .panel"),l="active",u=o.length-1;u>=0;u--)o[u].addEventListener("click",r)}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,n,e,s,r,a,i){t.GoogleAnalyticsObject=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},t[r].l=1*new Date,a=n.createElement(e),i=n.getElementsByTagName(e)[0],a.async=1,a.src=s,i.parentNode.insertBefore(a,i)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index b693d593..8535a778 100644 --- a/docs/index.html +++ b/docs/index.html @@ -19,56 +19,63 @@ <p>A simple HTML5 media player with custom controls and WebVTT captions by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p> <ul class="actions"> <li> - <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-download">Download on GitHub</a> + <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary">Download on GitHub</a> <span class="btn-count js-stargazers-count">…</span> </li> <li> - <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn-twitter js-popup" data-window-height="250" data-window-width="500">Tweet</a> + <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn js-popup" data-window-height="250" data-window-width="500">Tweet</a> <span class="btn-count js-tweet-count">…</span> </li> </ul> </header> - <main> - <section class="example-video"> - <div class="player"> - <video poster="https://cdn.plyr.io/static/poster.jpg" controls crossorigin> - <!-- Video files --> - <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4"> - <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> - - <!-- Text track file --> - <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/en.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> - </video> - </div> - <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small> - </section> - - <section class="example-audio"> - <div class="player"> - <audio controls> - <!-- Audio files --> - <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3"> - <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg"> - - <!-- Fallback for browsers that don't support the <audio> element --> - <a href="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a> - </audio> - </div> - <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small> - </section> + <main role="main" id="main"> + <nav class="btn-bar nav-panel"> + <ul> + <li><a href="#video" class="btn active btn-small">Video</a></li> + <li><a href="#youtube" class="btn btn-small">YouTube</a></li> + <li><a href="#audio" class="btn btn-small">Audio</a></li> + </ul> + </nav> + <div class="panels"> + <section class="panel example-video active" id="video"> + <div class="player"> + <video poster="https://cdn.plyr.io/static/poster.jpg" controls crossorigin> + <!-- Video files --> + <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4"> + <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> + + <!-- Text track file --> + <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/en.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> + </video> + </div> + <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small> + </section> + <section class="panel example-video" id="youtube"> + <div class="player"> + <div data-video-id="Au87oAJ2jeE" data-type="youtube"></div> + </div> + <small>Envato's "Made By" interview of <a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Dan Cederholm</a> from <a href="https://dribbble.com" target="_blank">Dribbble</a>.</small> + </section> + <section class="panel example-audio" id="audio"> + <div class="player"> + <audio controls> + <!-- Audio files --> + <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3"> + <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg"> + + <!-- Fallback for browsers that don't support the <audio> element --> + <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a> + </audio> + </div> + <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small> + </section> + </div> </main> - <footer> - <p>Used by …</p> - <a href="https://selz.com" target="_blank" class="logo"> - <img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz"> - </a> - </footer> - <!-- Load SVG defs --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <script> diff --git a/docs/index.youtube.html b/docs/index.youtube.html index 42ba1393..c234bae8 100644 --- a/docs/index.youtube.html +++ b/docs/index.youtube.html @@ -32,7 +32,7 @@ <main> <section class="example-video"> <div class="player"> - <div data-video-id="L1h9xxCU20g" data-type="youtube"></div> + <div data-video-id="Au87oAJ2jeE" data-type="youtube"></div> </div> </section> </main> diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js index 072a9236..df205260 100644 --- a/docs/src/js/docs.js +++ b/docs/src/js/docs.js @@ -14,6 +14,10 @@ plyr.setup({ defaultActive: true }, onSetup: function() { + if(!("media" in this)) { + return; + } + var player = this, type = player.media.tagName.toLowerCase(), toggle = document.querySelector("[data-toggle='fullscreen']"); @@ -26,116 +30,145 @@ plyr.setup({ } }); -// Popup -function popup(event) { - // Prevent the link opening - if(event.target.nodeName.toLowerCase() == "a") { - if(event.preventDefault) { - event.preventDefault(); +// General functions +(function() { + // Popup + function popup(event) { + // Prevent the link opening + if(event.target.nodeName.toLowerCase() == "a") { + if(event.preventDefault) { + event.preventDefault(); + } + else { + event.returnValue = false; + } + } + + var link = event.target, + url = link.href, + width = link.getAttribute("data-window-width") || 600, + height = link.getAttribute("data-window-height") || 600, + name = link.getAttribute("data-window-name") || "popup"; + + // If window exists, just focus it + if(window["window-"+name] && !window["window-"+name].closed) { + window["window-"+name].focus(); } else { - event.returnValue = false; + // Get position + var left = window.screenLeft !== undefined ? window.screenLeft : screen.left; + var top = window.screenTop !== undefined ? window.screenTop : screen.top; + + // Open in the centre of the screen + var x = (screen.width / 2) - (width / 2) + left, + y = (screen.height / 2) - (height / 2) + top; + + // Open that window + window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height); + + // Focus new window + window["window-"+name].focus(); } } - var link = event.target, - url = link.href, - width = link.getAttribute("data-window-width") || 600, - height = link.getAttribute("data-window-height") || 600, - name = link.getAttribute("data-window-name") || "popup"; + // Trigger popups + document.querySelector(".js-popup").addEventListener("click", popup); + + // Get JSONP + function getJSONP(url, callback) { + var name = "jsonp_callback_" + Math.round(100000 * Math.random()); + + // Cleanup to prevent memory leaks and hit original callback + window[name] = function(data) { + delete window[name]; + document.body.removeChild(script); + callback(data); + }; + + // Create a faux script + var script = document.createElement("script"); + script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name); + + // Inject to the body + document.body.appendChild(script); + } + + // Get star count + var storageSupported = ("sessionStorage" in window), + selectors = { + github: ".js-stargazers-count", + twitter: ".js-tweet-count" + }; - // If window exists, just focus it - if(window["window-"+name] && !window["window-"+name].closed) { - window["window-"+name].focus(); + // Display the count next to the button + function displayCount(selector, count) { + document.querySelector(selector).innerHTML = count; + } + + // Add star + function formatGitHubCount(count) { + return "★ " + count; + } + + // Check if it's in session storage first + if(storageSupported && "github_stargazers" in window.sessionStorage) { + displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers)); } else { - // Get position - var left = window.screenLeft !== undefined ? window.screenLeft : screen.left; - var top = window.screenTop !== undefined ? window.screenTop : screen.top; + getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) { + if (json && typeof json.data.stargazers_count !== "undefined") { + // Update UI + displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count)); + + // Store in session storage + window.sessionStorage.github_stargazers = json.data.stargazers_count; + } + }); + } - // Open in the centre of the screen - var x = (screen.width / 2) - (width / 2) + left, - y = (screen.height / 2) - (height / 2) + top; + // Get tweet count + if(storageSupported && "tweets" in window.sessionStorage) { + displayCount(selectors.twitter, window.sessionStorage.tweets); + } + else { + getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) { + if (json && typeof json.count !== "undefined") { + // Update UI + displayCount(selectors.twitter, json.count); + + // Store in session storage + window.sessionStorage.tweets = json.count; + } + }); + } - // Open that window - window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height); + // Tabs + var tabs = document.querySelectorAll(".nav-panel a"), + panels = document.querySelectorAll(".panels > .panel"), + activeClass = "active"; - // Focus new window - window["window-"+name].focus(); + for (var i = tabs.length - 1; i >= 0; i--) { + tabs[i].addEventListener("click", togglePanel); } -} - -// Trigger popups -document.querySelector(".js-popup").addEventListener("click", popup); - -// Get JSONP -function getJSONP(url, callback) { - var name = "jsonp_callback_" + Math.round(100000 * Math.random()); - - // Cleanup to prevent memory leaks and hit original callback - window[name] = function(data) { - delete window[name]; - document.body.removeChild(script); - callback(data); - }; - - // Create a faux script - var script = document.createElement("script"); - script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name); - - // Inject to the body - document.body.appendChild(script); -} - -// Get star count -var storageSupported = ("sessionStorage" in window), - selectors = { - github: ".js-stargazers-count", - twitter: ".js-tweet-count" - }; - -// Display the count next to the button -function displayCount(selector, count) { - document.querySelector(selector).innerHTML = count; -} - -// Add star -function formatGitHubCount(count) { - return "★ " + count; -} - -// Check if it's in session storage first -if(storageSupported && "github_stargazers" in window.sessionStorage) { - displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers)); -} -else { - getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) { - if (json && typeof json.data.stargazers_count !== "undefined") { - // Update UI - displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count)); - - // Store in session storage - window.sessionStorage.github_stargazers = json.data.stargazers_count; + + function togglePanel(event) { + event.preventDefault(); + + var tab = event.target, + panel = document.querySelector(tab.getAttribute("href")); + + for (var i = panels.length - 1; i >= 0; i--) { + panels[i].classList.remove(activeClass); } - }); -} - -// Get tweet count -if(storageSupported && "tweets" in window.sessionStorage) { - displayCount(selectors.twitter, window.sessionStorage.tweets); -} -else { - getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) { - if (json && typeof json.count !== "undefined") { - // Update UI - displayCount(selectors.twitter, json.count); - - // Store in session storage - window.sessionStorage.tweets = json.count; + + for (var x = tabs.length - 1; x >= 0; x--) { + tabs[x].classList.remove(activeClass); } - }); -} + panel.classList.add(activeClass); + event.target.classList.add(activeClass); + } +})(); // Google analytics // For demo site (http://[www.]plyr.io) only diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less new file mode 100644 index 00000000..81a68058 --- /dev/null +++ b/docs/src/less/components/base.less @@ -0,0 +1,45 @@ +// ========================================================================== +// Base layout +// ========================================================================== + +// BORDER-BOX ALL THE THINGS! +// http://paulirish.com/2012/box-sizing-border-box-ftw/ +*, *::after, *::before { + box-sizing: border-box; +} + +// Base +html { + font-size: 100%; +} +body { + font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; + background: @body-background; + line-height: 1.5; + text-align: center; + color: @gray; + .font-smoothing(on); +} + +// Header +header { + padding: @padding-base; + margin-bottom: @padding-base; + + p { + .font-size(18); + } + @media (min-width: @screen-sm) { + padding-top: (@padding-base * 3); + padding-bottom: (@padding-base * 3); + } +} + +// Sections +section { + padding-bottom: @padding-base; + + @media (min-width: @screen-sm) { + padding-bottom: (@padding-base * 2); + } +}
\ No newline at end of file diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less new file mode 100644 index 00000000..749cd11f --- /dev/null +++ b/docs/src/less/components/buttons.less @@ -0,0 +1,144 @@ +// ========================================================================== +// Buttons +// ========================================================================== + +nav { + ul { + list-style: none; + margin: 0; + padding: 0; + font-size: 0; + } + li { + display: inline-block; + margin-top: (@padding-base / 2); + .font-size(); + white-space: nowrap; + } + li + li { + margin-left: @padding-base; + } +} + +// Tabs +.btn-bar { + position: relative; + margin: 0 auto @padding-base; + max-width: @example-width-video; + + &::before { + content: ""; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background: @gray-lighter; + } + + ul { + position: relative; + z-index: 1; + display: inline-block; + user-select: none; + } + li { + margin: 0; + + &:first-child .btn { + border-radius: 4px 0 0 4px; + } + &:last-child .btn { + border-radius: 0 4px 4px 0; + } + & + li .btn { + margin-left: -1px; + } + } + .btn { + display: block; + border-radius: 0; + } + .active { + &:extend(.btn-primary); + } + .btn.active { + box-shadow: inset 0 1px 1px rgba(0,0,0, .2); + position: relative; + z-index: 1; + } + + @media (min-width: 560px) { + margin-bottom: (@padding-base * 2); + } +} + +// Shared +.btn, +.btn-count { + display: inline-block; + vertical-align: middle; + border-radius: @border-radius-base; + font-weight: 600; + user-select: none; +} + +// Buttons +.btn { + padding: (@padding-base / 2) @padding-base; + background: @body-background; + border: 1px solid @gray-light; + box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05); + text-shadow: 0 1px 1px #fff; + color: @gray; + + &:hover, + &:focus { + background-color: #fff; + border-color: darken(@gray-light, 5%); + color: @link-color; + outline: 0; + } +} +.btn-primary { + background: linear-gradient(@link-color, darken(@link-color, 3%)); + border-color: darken(@link-color, 10%); + box-shadow: 0 1px 1px rgba(0,0,0, .15); + text-shadow: 0 1px 1px rgba(0,0,0, .1); + color: #fff; + + &:hover, + &:focus { + color: #fff; + border-color: darken(@link-color, 20%); + } +} +.btn-small { + padding-top: ceil(@padding-base / 3); + padding-bottom: ceil(@padding-base / 3); +} + +// Count bubble +.btn-count { + position: relative; + margin-left: 6px; + padding: ((@padding-base / 2) - 1px); + background: @body-background; + border: 1px solid @gray-light; + + &::before { + content: ""; + position: absolute; + display: block; + width: @arrow-size; + height: @arrow-size; + left: 1px; + top: 50%; + margin-top: -(@arrow-size / 2); + + background: inherit; + border: inherit; + border-width: 1px 0 0 1px; + transform: rotate(-45deg) translate(-50%, -50%); + } +}
\ No newline at end of file diff --git a/docs/src/less/components/error.less b/docs/src/less/components/error.less new file mode 100644 index 00000000..b1427173 --- /dev/null +++ b/docs/src/less/components/error.less @@ -0,0 +1,19 @@ +// ========================================================================== +// Errors (AWS pages) +// ========================================================================== + +// Error page +html.error, +.error body { + height: 100%; +} +.error body { + width: 100%; + display: table; + table-layout: fixed; +} +.error main { + display: table-cell; + width: 100%; + vertical-align: middle; +}
\ No newline at end of file diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less new file mode 100644 index 00000000..9c145847 --- /dev/null +++ b/docs/src/less/components/examples.less @@ -0,0 +1,39 @@ +// ========================================================================== +// Examples +// ========================================================================== + +// Example players +.example-audio .player, +.example-video .player { + margin: 0 auto @padding-base; + + &-controls { + border-radius: 0 0 @border-radius-base @border-radius-base; + } +} +.example-audio .player { + max-width: @example-width-audio; + + &-controls { + border-radius: @border-radius-base; + } + &-progress { + border-radius: @border-radius-base @border-radius-base 0 0; + overflow: hidden; + } +} +.example-video .player { + max-width: @example-width-video; + + video, + iframe { + border-radius: @border-radius-base @border-radius-base 0 0; + } + iframe { + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); + } + &-fullscreen, + &.fullscreen-active { + max-width: none; + } +}
\ No newline at end of file diff --git a/docs/src/less/components/panels.less b/docs/src/less/components/panels.less new file mode 100644 index 00000000..290e5dfc --- /dev/null +++ b/docs/src/less/components/panels.less @@ -0,0 +1,13 @@ +// ========================================================================== +// Panels +// ========================================================================== + +// Panels +.panel { + display: none; + + &.active { + display: block; + animation: fade-in .3s ease; + } +}
\ No newline at end of file diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less new file mode 100644 index 00000000..97652342 --- /dev/null +++ b/docs/src/less/components/type.less @@ -0,0 +1,47 @@ +// ========================================================================== +// Typography +// ========================================================================== + +// Headings +h1, +h2 { + letter-spacing: -.025em; + color: #2E3C44; + margin: 0 0 (@padding-base / 2); + line-height: 1.2; + .font-smoothing(); +} +h1 { + .font-size(64); + color: #3498DB; +} + +// Paragraph and small +p, +small { + margin: 0 0 @padding-base; +} +small { + display: block; + padding: 0 (@padding-base / 2); + .font-size(14); +} + +// Links +a { + text-decoration: none; + color: @link-color; + border-bottom: 1px solid currentColor; + transition: background .3s ease, color .3s ease; + + &:hover, + &:focus { + color: @gray-dark; + } + &:focus { + .tab-focus(); + } + &.logo { + border: 0; + } +}
\ No newline at end of file diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less index 12b0674a..cea3a2af 100644 --- a/docs/src/less/docs.less +++ b/docs/src/less/docs.less @@ -2,239 +2,33 @@ // HTML5 Video Player Demo Page // ========================================================================== -// Reset +// CSS Reset @import "lib/normalize.less"; + // Mixins @import "lib/mixins.less"; -// Fonts - docs only! -@import "lib/fontface.less"; // Variables -// --------------------------------------- -// Colors -@blue: #3498db; -@gray-dark: #343f4a; -@gray: #565d64; -@gray-light: #cbd0d3; -@off-white: #f2f5f7; - -// Elements -@link-color: @blue; -@padding-base: 20px; -@arrow-size: 8px; - -// Breakpoints -@screen-md: 768px; - -// BORDER-BOX ALL THE THINGS! -// http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; -} +@import "variables.less"; -// Base -html { - font-size: 100%; -} -body { - font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; - background: @off-white; - line-height: 1.5; - text-align: center; - color: @gray; - .font-smoothing(on); -} +// Animation +@import "lib/animation.less"; -// Error page -html.error, -.error body { - height: 100%; -} -.error body { - width: 100%; - display: table; - table-layout: fixed; -} -.error main { - display: table-cell; - width: 100%; - vertical-align: middle; -} +// Base layout +@import "components/base.less"; // Type -h1, -h2 { - letter-spacing: -.025em; - color: #2E3C44; - margin: 0 0 (@padding-base / 2); - line-height: 1.2; - .font-smoothing(); -} -h1 { - .font-size(64); - color: #3498DB; -} -p, -small { - margin: 0 0 @padding-base; -} -small { - display: block; - padding: 0 (@padding-base / 2); - .font-size(14); -} - -// Header -header { - padding: @padding-base; - margin-bottom: @padding-base; - - p { - .font-size(18); - } - @media (min-width: 560px) { - padding-top: (@padding-base * 3); - padding-bottom: (@padding-base * 3); - } -} - -// Sections -section { - padding-bottom: @padding-base; - - @media (min-width: 560px) { - padding-bottom: (@padding-base * 2); - } -} - -// Links & Buttons -.actions { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } -} -a { - text-decoration: none; - color: @link-color; - border-bottom: 1px solid currentColor; - transition: all .3s ease; - - &:hover, - &:focus { - color: #000; - } - &:focus { - .tab-focus(); - } - &.logo { - border: 0; - } -} -.btn, -.btn-count { - display: inline-block; - vertical-align: middle; - border-radius: 3px; - font-weight: 600; - user-select: none; -} -.btn { - padding: (@padding-base / 2) @padding-base; - background: @link-color; - border: 0; - color: #fff; - - &:hover, - &:focus { - color: #fff; - background: darken(@link-color, 5%); - } - - &-twitter { - background: #8799A2; - - &:hover, - &:focus { - background: darken(#8799A2, 5%); - } - } -} -.btn-count { - position: relative; - margin-left: 6px; - padding: ((@padding-base / 2) - 1px); - background: #fff; - border: 1px solid @gray-light; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } -} - -// Example players -.example-audio .player, -.example-video .player { - margin: 0 auto @padding-base; - - &-controls { - border-radius: 0 0 4px 4px; - } -} -.example-audio .player { - max-width: 520px; +@import "lib/fontface.less"; +@import "components/type.less"; - &-controls { - border-radius: 4px; - } - &-progress { - border-radius: 4px 4px 0 0; - overflow: hidden; - } -} -.example-video .player { - max-width: 1200px; +// Buttons +@import "components/buttons.less"; - video, - iframe { - border-radius: 4px 4px 0 0; - } - iframe { - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); - } - &-fullscreen, - &.fullscreen-active { - max-width: none; - } -} +// Panels +@import "components/panels.less"; -// Footer -footer { - margin-bottom: @padding-base; +// Error +@import "components/error.less"; - p { - margin-bottom: (@padding-base / 2); - } -}
\ No newline at end of file +// Examples +@import "components/examples.less";
\ No newline at end of file diff --git a/docs/src/less/lib/animation.less b/docs/src/less/lib/animation.less new file mode 100644 index 00000000..386c6613 --- /dev/null +++ b/docs/src/less/lib/animation.less @@ -0,0 +1,9 @@ +// ========================================================================== +// Animations +// ========================================================================== + +// Fade +@keyframes fade-in { + 0% { opacity: 0 } + 100% { opacity: 1 } +}
\ No newline at end of file diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less index 479f7fa4..9442f17d 100644 --- a/docs/src/less/lib/fontface.less +++ b/docs/src/less/lib/fontface.less @@ -1,16 +1,18 @@ +// ========================================================================== +// Fonts +// ========================================================================== + @font-face { font-family: "Avenir"; src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"), - url("//cdn.plyr.io/fonts/avenir-medium.ttf") format("truetype"); + url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); font-style: normal; font-weight: 400; } @font-face { font-family: "Avenir"; src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"), - url("//cdn.plyr.io/fonts/avenir-bold.ttf") format("truetype"); + url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); font-style: normal; font-weight: 600; }
\ No newline at end of file diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less new file mode 100644 index 00000000..4ea34d84 --- /dev/null +++ b/docs/src/less/variables.less @@ -0,0 +1,30 @@ +// ========================================================================== +// Variables +// ========================================================================== + +// Colors +@blue: #3498db; +@gray-dark: #343f4a; +@gray: #55646b; +@gray-light: #cbd0d3; +@gray-lighter: #dbe3e8; +@off-white: #f2f5f7; + +// Base +@body-background: @off-white; + +// Elements +@link-color: @blue; +@padding-base: 20px; +@arrow-size: 8px; + +// Breakpoints +@screen-sm: 480px; +@screen-md: 768px; + +// Radii +@border-radius-base: 4px; + +// Examples +@example-width-audio: 520px; +@example-width-video: 1200px;
\ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 96e13368..6c84bf69 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -185,12 +185,12 @@ gulp.task("watch", function () { // Plyr core gulp.watch(paths.plyr.src.js, tasks.js); gulp.watch(paths.plyr.src.less, tasks.less); - gulp.watch(paths.plyr.src.sprite, "sprite"); + gulp.watch(paths.plyr.src.sprite, ["sprite"]); // Docs gulp.watch(paths.docs.src.js, tasks.js); gulp.watch(paths.docs.src.less, tasks.less); - gulp.watch(paths.docs.src.templates, "js"); + gulp.watch(paths.docs.src.templates, ["js"]); }); // Publish a version to CDN and docs @@ -11,12 +11,13 @@ We wanted a lightweight, accessible and customisable media player that just supp ## Features - **Accessible** - full support for captions and screen readers. - **Lightweight** - just 6.4KB minified and gzipped. -- **Customisable** - make the player look how you want with the markup you want. +- **[Customisable](#html)** - make the player look how you want with the markup you want. - **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks. - **Responsive** - as you'd expect these days. - **Audio & Video** - support for both formats. -- **API** - toggle playback, volume, seeking, and more. -- **Fullscreen** - supports native fullscreen with fallback to "full window" modes. +- **[Embed](#embed)** - support for YouTube (Vimeo soon). +- **[API](#api)** - toggle playback, volume, seeking, and more. +- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes. - **No dependencies** - written in vanilla JavaScript, no jQuery required. Oh and yes, it works with Bootstrap. @@ -25,10 +26,11 @@ Oh and yes, it works with Bootstrap. Check out [the changelog](changelog.md) ## Planned development -- Playlists (audio and video) -- YouTube and Vimeo support +- Playlists +- ~~YouTube~~ and Vimeo support - Playback speed - Multiple language captions (with selection) +- Audio captions ... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues) If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or of course, forking and sending a pull request. @@ -75,18 +77,18 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa ```html <script> -(function(d,p){ - var a=new XMLHttpRequest(), - b=d.body; - a.open("GET",p,!0); +(function(d, p){ + var a = new XMLHttpRequest(), + b = d.body; + a.open("GET", p, true); a.send(); - a.onload=function(){ - var c=d.createElement("div"); - c.style.display="none"; - c.innerHTML=a.responseText; - b.insertBefore(c,b.childNodes[0]) + a.onload = function(){ + var c = d.createElement("div"); + c.style.display = "none"; + c.innerHTML = a.responseText; + b.insertBefore(c, b.childNodes[0]); } -})(document,"dist/sprite.svg"); +})(document, "dist/sprite.svg"); </script> ``` More info on SVG sprites here: @@ -126,6 +128,14 @@ And the same for `<audio>` </div> ``` +For YouTube, Plyr uses the standard YouTube API markup (an empty `<div>`): + +```html +<div class="player"> + <div data-video-id="L1h9xxCU20g" data-type="youtube"></div> +</div> +``` + #### Cross Origin (CORS) You'll notice the `crossorigin` attribute on the example `<video>` and `<audio>` elements. This is because the media is loaded from another domain. If your media is hosted on another domain, you may need to add this attribute. @@ -329,7 +339,7 @@ Here's a list of the methods supported: <tr> <td><code>support(...)</code></td> <td>String</td> - <td>Determine if a player supports a certain MIME type.</td> + <td>Determine if a player supports a certain MIME type. This is not supported for embedded content (YouTube).</td> </tr> <tr> <td><code>source(...)</code></td> @@ -378,6 +388,26 @@ media.addEventListener("playing", function() { A complete list of events can be found here: [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html) +## Embeds + +Currently only YouTube is supported. Vimeo will be coming soon. Some HTML5 media events are triggered on the `media` property of the `plyr` object: +- `play` +- `pause` +- `timeupdate` +- `progress` + +Due to the way the YouTube API works, the `timeupdate` and `progress` events are triggered by polling every 200ms so the event may trigger without an actual value change. Buffering progress is `media.buffered` in the `plyr` object. It is a a number between 0 and 1 that specifies the percentage of the video that the player shows as buffered. + +```javascript +document.querySelector(".player").plyr.media.addEventListener("play", function() { + console.log("play"); +}); +``` + +The `.source()` API method can also be used but the video id must be passed as the argument. + +Currently caption control is not supported but I will work on this. + ## Fullscreen Fullscreen in Plyr is supported for all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). If you're using the default CSS, you can also use a "full browser" mode which will use the full browser window by adding the `player-fullscreen` class to your container. diff --git a/src/js/plyr.js b/src/js/plyr.js index 41abe085..752f44de 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -866,124 +866,145 @@ // Setup YouTube function _setupYouTube(id) { + // Remove old containers + var containers = _getElements("[id^='youtube']"); + for (var i = containers.length - 1; i >= 0; i--) { + _remove(containers[i]); + } + // Create the YouTube container - var div = document.createElement("div"); - div.setAttribute("id", "youtube" + Math.floor(Math.random() * (10000))); - player.media.appendChild(div); + var container = document.createElement("div"); + container.setAttribute("id", "youtube-" + Math.floor(Math.random() * (10000))); + player.media.appendChild(container); // Add embed class for responsive _toggleClass(player.media, config.classes.videoWrapper, true); _toggleClass(player.media, config.classes.embedWrapper, true); - // Load the API - _injectScript("https://www.youtube.com/iframe_api"); + if(typeof YT === "object") { + _YTReady(id, container); + } + else { + // Load the API + _injectScript("https://www.youtube.com/iframe_api"); - // Setup callback for the API - window.onYouTubeIframeAPIReady = function() { - _log("YouTube API Ready"); + // Setup callback for the API + window.onYouTubeIframeAPIReady = function () { _YTReady(id, container); } + } + } + + // Handle API ready + function _YTReady(id, container) { + _log("YouTube API Ready"); - // Setup timers object - // We have to poll YouTube for updates + // Setup timers object + // We have to poll YouTube for updates + if(!("timer" in player)) { player.timer = {}; + } - // Setup instance - // https://developers.google.com/youtube/iframe_api_reference - player.embed = new YT.Player(div.id, { - videoId: id, - playerVars: { - autoplay: 0, - controls: 0, - vq: "hd720", - rel: 0, - showinfo: 0, - iv_load_policy: 3, - cc_lang_pref: "en", - wmode: "transparent", - modestbranding: 1 - }, - events: { - onReady: function(event) { - // Get the instance - var instance = event.target; - - // Create a faux HTML5 API using the YouTube API - player.media.play = function() { instance.playVideo(); }; - player.media.pause = function() { instance.pauseVideo(); }; - player.media.stop = function() { instance.stopVideo(); }; - player.media.duration = instance.getDuration(); - player.media.paused = (instance.getPlayerState() == 2); - player.media.currentTime = instance.getCurrentTime(); - player.media.muted = instance.isMuted(); - - // Setup buffering - player.timer.buffering = window.setInterval(function() { - // Get loaded % from YouTube - player.media.buffered = instance.getVideoLoadedFraction(); - - // Trigger timeupdate - _triggerEvent(player.media, "progress"); - - // Bail if we're at 100% - if(player.media.buffered === 1) { - window.clearInterval(player.timer.buffering); - } - }, 200); + // Setup instance + // https://developers.google.com/youtube/iframe_api_reference + player.embed = new YT.Player(container.id, { + videoId: id, + playerVars: { + autoplay: 0, + controls: 0, + vq: "hd720", + rel: 0, + showinfo: 0, + iv_load_policy: 3, + cc_lang_pref: "en", + wmode: "transparent", + modestbranding: 1 + }, + events: { + onReady: function(event) { + // Get the instance + var instance = event.target; + + // Create a faux HTML5 API using the YouTube API + player.media.play = function() { instance.playVideo(); }; + player.media.pause = function() { instance.pauseVideo(); }; + player.media.stop = function() { instance.stopVideo(); }; + player.media.duration = instance.getDuration(); + player.media.paused = (instance.getPlayerState() == 2); + player.media.currentTime = instance.getCurrentTime(); + player.media.muted = instance.isMuted(); + + // Trigger timeupdate + _triggerEvent(player.media, "timeupdate"); + + // Reset timer + window.clearInterval(player.timer.buffering); + + // Setup buffering + player.timer.buffering = window.setInterval(function() { + // Get loaded % from YouTube + player.media.buffered = instance.getVideoLoadedFraction(); + + // Trigger progress + _triggerEvent(player.media, "progress"); - _setupInterface(); - }, - onStateChange: function(event) { - // Get the instance - var instance = event.target; - - // Reset timer - window.clearInterval(player.timer.playing); - - // Handle event - switch(event.data) { - // Unstarted - case -1: - break; - - // Ended - case 0: - player.media.paused = true; - _triggerEvent(player.media, "ended"); - break; - - // Playing - case 1: - player.media.paused = false; - _triggerEvent(player.media, "play"); - - // Poll to get playback progress - player.timer.playing = window.setInterval(function() { - // Set the current time - player.media.currentTime = instance.getCurrentTime(); - - // Trigger timeupdate - _triggerEvent(player.media, "timeupdate"); - }, 200); - - break; - - // Paused - case 2: - player.media.paused = true; - _triggerEvent(player.media, "pause"); - break; - - // Buffering - case 3: - break; - - // Video cued - case 5: - break; + // Bail if we're at 100% + if(player.media.buffered === 1) { + window.clearInterval(player.timer.buffering); } + }, 200); + + // Only setup controls once + if(!player.container.querySelectorAll(config.selectors.controls).length) { + _setupInterface(); + } + + // Display duration if available + if(config.displayDuration) { + _displayDuration(); + } + }, + onStateChange: function(event) { + // Get the instance + var instance = event.target; + + // Reset timer + window.clearInterval(player.timer.playing); + + // Handle events + // -1 Unstarted + // 0 Ended + // 1 Playing + // 2 Paused + // 3 Buffering + // 5 Video cued + switch(event.data) { + case 0: + player.media.paused = true; + _triggerEvent(player.media, "ended"); + break; + + case 1: + player.media.paused = false; + _triggerEvent(player.media, "play"); + + // Poll to get playback progress + player.timer.playing = window.setInterval(function() { + // Set the current time + player.media.currentTime = instance.getCurrentTime(); + + // Trigger timeupdate + _triggerEvent(player.media, "timeupdate"); + }, 200); + + break; + + case 2: + player.media.paused = true; + _triggerEvent(player.media, "pause"); + break; } } - }); - } + } + }); } // Setup captions @@ -1586,12 +1607,17 @@ function _parseSource(sources) { // YouTube if(player.type === "youtube" && typeof sources === "string") { - if(sources.indexOf("http") === 0) { - player.embed.loadVideoByUrl(sources); - } - else { - player.embed.loadVideoById(sources); - } + // Destroy YouTube instance + player.embed.destroy(); + + // Re-setup YouTube + // We don't use loadVideoBy[x] here since it has issues + _setupYouTube(sources); + + // Update times + _timeUpdate(); + + // Bail return; } @@ -1748,6 +1774,8 @@ } // Destroy an instance + // Event listeners are removed when elements are removed + // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory function _destroy() { // Bail if the element is not initialized if(!player.init) { @@ -1757,12 +1785,18 @@ // Reset container classname player.container.setAttribute("class", config.selectors.container.replace(".", "")); - // Event listeners are removed when elements are removed - // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory + // Remove init flag + player.init = false; // Remove controls _remove(_getElement(config.selectors.controls)); + // YouTube + if(player.type === "youtube") { + player.embed.destroy(); + return; + } + // If video, we need to remove some more if(player.type === "video") { // Remove captions @@ -1779,9 +1813,6 @@ // http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type var clone = player.media.cloneNode(true); player.media.parentNode.replaceChild(clone, player.media); - - // Remove init flag - player.init = false; } // Setup a player @@ -1828,24 +1859,14 @@ // Setup interface if(player.type == "video" || player.type == "audio") { - _setupInterface(); - } - - // Successful setup - player.init = true; - } - - function _setupInterface() { - // If there's full support - if(player.supported.full) { - // Inject custom controls - _injectControls(); - - // Find the elements - if(!_findElements()) { - return false; + // Bail if no support + if(!player.supported.full) { + return; } + // Setup UI + _setupInterface(); + // Display duration if available if(config.displayDuration) { _displayDuration(); @@ -1853,20 +1874,33 @@ // Set up aria-label for Play button with the title option _setupAria(); + } - // Captions - _setupCaptions(); - - // Set volume - _setVolume(); - _updateVolume(); + // Successful setup + player.init = true; + } - // Setup fullscreen - _setupFullscreen(); + function _setupInterface() { + // Inject custom controls + _injectControls(); - // Listeners - _listeners(); + // Find the elements + if(!_findElements()) { + return false; } + + // Captions + _setupCaptions(); + + // Set volume + _setVolume(); + _updateVolume(); + + // Setup fullscreen + _setupFullscreen(); + + // Listeners + _listeners(); } // Initialize instance @@ -1919,6 +1953,11 @@ full = (basic && !oldIE); break; + case "youtube": + basic = true; + full = !oldIE; + break; + default: basic = (audio && video); full = (basic && !oldIE); diff --git a/src/js/plyr.youtube.js b/src/js/plyr.youtube.js deleted file mode 100644 index 0b28460a..00000000 --- a/src/js/plyr.youtube.js +++ /dev/null @@ -1,32 +0,0 @@ -// ========================================================================== -// Plyr -// plyr.youtube.js v1.1.4 -// https://github.com/selz/plyr -// License: The MIT License (MIT) -// ========================================================================== - -(function (api) { - "use strict"; - - api.youtube = { - setup: function() { - console.log("Setup youtube"); - console.log(this); - - var player = this; - - // Find child <source> elements - var sources = player.media.querySelectorAll("source"); - - // Remove each - for (var i = sources.length - 1; i >= 0; i--) { - var source = sources[i]; - - if(source.type == "video/youtube") { - console.log(source.src); - } - } - } - }; - -}(this.plyr.plugins = this.plyr.plugins || {}));
\ No newline at end of file diff --git a/src/less/plyr.less b/src/less/plyr.less index b9bc8a30..75d94b0f 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -4,12 +4,14 @@ // Variables // ------------------------------- + // Colors @blue: #3498DB; -@gray-dark: #343f4a; -@gray: #565d64; -@gray-light: #cbd0d3; -@off-white: #d6dadd; +@gray-dark: #343F4A; +@gray: #565D64; +@gray-light: #6B7D86; +@gray-lighter: #CBD0D3; +@off-white: #D6DADD; // Font sizes @font-size-small: 14px; @@ -18,11 +20,10 @@ // Controls @control-spacing: 10px; -@controls-bg: @gray-dark; +@controls-bg: #fff; @control-bg-hover: @blue; -@control-color: @gray-light; -@control-color-inactive: @gray; -@control-color-hover: #fff; +.contrast-control-color(@controls-bg); +.contrast-control-color-hover(@control-bg-hover); // Tooltips @tooltip-bg: @controls-bg; @@ -40,7 +41,7 @@ // Volume @volume-track-height: 6px; -@volume-track-bg: @gray; +@volume-track-bg: darken(@controls-bg, 10%); @volume-thumb-height: (@volume-track-height * 2); @volume-thumb-width: (@volume-track-height * 2); @volume-thumb-bg: @control-color; @@ -50,18 +51,40 @@ @bp-control-split: 560px; // When controls split into left/right @bp-captions-large: 768px; // When captions jump to the larger font size -// Utility classes & mixins +// Animation +// --------------------------------------- + +@keyframes progress { + to { background-position: @progress-loading-size 0; } +} + +// Mixins // ------------------------------- -// Screen reader only -.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; + +// Contrast +.contrast-control-color(@color: "") when (lightness(@color) >= 65%) { + @control-color: @gray-light; +} +.contrast-control-color(@color: "") when (lightness(@color) < 65%) { + @control-color: @gray-lighter; +} +.contrast-control-color-hover(@color: "") when (lightness(@color) >= 65%) { + @control-color-hover: @gray; +} +.contrast-control-color-hover(@color: "") when (lightness(@color) < 65%) { + @control-color-hover: #fff; +} + +// Font smoothing +.font-smoothing(@mode: on) when (@mode = on) { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +.font-smoothing(@mode: on) when (@mode = off) { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; } + // Contain floats: nicolasgallagher.com/micro-clearfix-hack/ .clearfix() { zoom: 1; @@ -75,14 +98,7 @@ outline-offset: 0; } -// Animation -// --------------------------------------- -@keyframes progress { - to { background-position: @progress-loading-size 0; } -} - // <input type="range"> styling -// --------------------------------------- .volume-thumb() { height: @volume-thumb-height; width: @volume-thumb-width; @@ -109,15 +125,16 @@ border: 0; } -// Font smoothing -// --------------------------------------- -.font-smoothing(@mode: on) when (@mode = on) { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; -} -.font-smoothing(@mode: on) when (@mode = off) { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; +// Screen reader only +// ------------------------------- +.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; } // Styles @@ -141,7 +158,8 @@ &-video-wrapper { position: relative; } - video { + video, + audio { width: 100%; height: auto; vertical-align: middle; @@ -199,6 +217,7 @@ background: @controls-bg; line-height: 1; text-align: center; + box-shadow: 0 1px 1px rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .2); // Layout &-right { @@ -222,7 +241,7 @@ margin: 0 2px; padding: (@control-spacing / 2) @control-spacing; - transition: background .3s ease; + transition: background .3s ease, color .3s ease, opacity .3s ease; border-radius: 3px; cursor: pointer; @@ -236,12 +255,13 @@ } input + label, .inverted:checked + label { - color: @control-color-inactive; + opacity: .5; } button, .inverted + label, input:checked + label { color: @control-color; + opacity: 1; } button { border: 0; @@ -256,6 +276,7 @@ [type="checkbox"] + label:hover { background: @control-bg-hover; color: @control-color-hover; + opacity: 1; } button:focus, input:focus + label { @@ -288,7 +309,6 @@ &::before { content: "\2044"; margin-right: @control-spacing; - color: darken(@control-color, 30%); } } } diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index bf027db0..011a5368 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -4,12 +4,14 @@ // Variables // ------------------------------- + // Colors $blue: #3498DB !default; -$gray-dark: #343f4a !default; -$gray: #565d64 !default; -$gray-light: #cbd0d3 !default; -$off-white: #d6dadd !default; +$gray-dark: #343F4A !default; +$gray: #565D64 !default; +$gray-light: #6B7D86 !default; +$gray-lighter: #CBD0D3 !default; +$off-white: #D6DADD !default; // Font sizes $font-size-small: 14px !default; @@ -18,11 +20,10 @@ $font-size-large: ceil(($font-size-base * 1.5)) !default; // Controls $control-spacing: 10px !default; -$controls-bg: $gray-dark !default; -$control-bg-hover: $blue !default; -$control-color: $gray-light !default; -$control-color-inactive: $gray !default; -$control-color-hover: #fff !default; +$controls-bg: #fff !default; +$control-bg-hover: @blue !default; +.contrast-control-color($controls-bg); +.contrast-control-color-hover($control-bg-hover); // Tooltips $tooltip-bg: $controls-bg !default; @@ -40,7 +41,7 @@ $progress-loading-bg: rgba(0,0,0, .15) !default; // Volume $volume-track-height: 6px !default; -$volume-track-bg: $gray !default; +$volume-track-bg: darken($controls-bg, 10%) !default; $volume-thumb-height: ($volume-track-height * 2) !default; $volume-thumb-width: ($volume-track-height * 2) !default; $volume-thumb-bg: $control-color !default; @@ -50,18 +51,40 @@ $volume-thumb-bg-focus: $control-bg-hover !default; $bp-control-split: 560px !default; // When controls split into left/right $bp-captions-large: 768px !default; // When captions jump to the larger font size -// Utility classes & mixins +// Mixins // ------------------------------- -// Screen reader only -.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; + +// Contrast +@mixin contrast-control-color($color: "") { + @if (lightness($color) >= 65%) { + $control-color: $gray-light; + } + @else if(lightness(@color) < 65%) { + $control-color: $gray-lighter; + } +} +@mixin contrast-control-color-hover($color: "") { + @if (lightness($color) >= 65%) { + $control-color-hover: $gray; + } + @else if (lightness($color) < 65%) { + $control-color-hover: #fff; + } } + +// Font smoothing +@mixin font-smoothing($mode: on) +{ + @if ($mode == 'on') { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + } + @else if ($mode == 'off') { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; + } +} + // Contain floats: nicolasgallagher.com/micro-clearfix-hack/ @mixin clearfix() { @@ -84,7 +107,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo } // <input type="range"> styling -// --------------------------------------- @mixin volume-thumb() { height: $volume-thumb-height; @@ -115,17 +137,16 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo border: 0; } -// Font smoothing -// --------------------------------------- -@mixin font-smoothing($mode: on) -{ - @if $mode == 'on' { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - } @else if $mode == 'off' { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; - } +// Screen reader only +// ------------------------------- +.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; } // Styles @@ -149,7 +170,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo &-video-wrapper { position: relative; } - video { + video, + audio { width: 100%; height: auto; vertical-align: middle; @@ -192,6 +214,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo background: $controls-bg; line-height: 1; text-align: center; + box-shadow: 0 1px 1px rgba(red($gray-dark), green($gray-dark), blue($gray-dark), .2); // Layout &-right { @@ -215,7 +238,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo margin: 0 2px; padding: ($control-spacing / 2) $control-spacing; - transition: background .3s ease; + background .3s ease, color .3s ease, opacity .3s ease; border-radius: 3px; cursor: pointer; @@ -229,12 +252,13 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo } input + label, .inverted:checked + label { - color: $control-color-inactive; + opacity: .5; } button, .inverted + label, input:checked + label { color: $control-color; + opacity: 1; } button { border: 0; @@ -249,6 +273,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo [type="checkbox"] + label:hover { background: $control-bg-hover; color: $control-color-hover; + opacity: 1; } button:focus, input:focus + label { @@ -281,7 +306,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo &::before { content: "\2044"; margin-right: $control-spacing; - color: darken($control-color, 30%); } } } |