diff options
| -rw-r--r-- | changelog.md | 8 | ||||
| -rw-r--r-- | controls.md | 44 | ||||
| -rw-r--r-- | dist/plyr.css | 2 | ||||
| -rw-r--r-- | dist/plyr.js | 2 | ||||
| -rw-r--r-- | docs/dist/docs.js | 2 | ||||
| -rw-r--r-- | docs/dist/templates.js | 2 | ||||
| -rw-r--r-- | docs/error.html | 2 | ||||
| -rw-r--r-- | docs/index.html | 10 | ||||
| -rw-r--r-- | docs/src/templates/controls.html | 13 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | readme.md | 14 | ||||
| -rw-r--r-- | src/js/plyr.js | 145 | ||||
| -rw-r--r-- | src/less/plyr.less | 106 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 110 |
14 files changed, 247 insertions, 215 deletions
diff --git a/changelog.md b/changelog.md index e1bbcdee..ac947731 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,11 @@ # Changelog +# v1.3.0 +- Internationalization support (i18n) using default controls (required markup changes to controls) +- ARIA enhancements for controls (required markup changes to controls) +- Captions legibility improvements +- YouTube bug fixes + ## v1.2.6 - SASS updates and fixes (cheers @ChristianPV) @@ -21,7 +27,7 @@ ## v1.2.1 - Tooltip bug fix -## v1.2.0 +# v1.2.0 - Added YouTube support ## v1.1.13 diff --git a/controls.md b/controls.md index 510da2de..81c1e72a 100644 --- a/controls.md +++ b/controls.md @@ -1,10 +1,36 @@ -# Controls HTML +# Controls This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. -The demo Plyr setup uses a Hogan template. This purely to allow for localization at a later date. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. +## Internationalization using default controls -## Requirements +You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls. + +### Example + +```javascript +i18n: { + restart: "Restart", + rewind: "Rewind {seektime} secs", + play: "Play", + pause: "Pause", + forward: "Forward {seektime} secs", + played: "played", + buffered: "buffered", + currentTime: "Current time", + duration: "Duration", + volume: "Volume", + toggleMute: "Toggle Mute", + toggleCaptions: "Toggle Captions", + toggleFullscreen: "Toggle Fullscreen" +} +``` + +Note: `{seektime}` will be replaced with your configured seek time or the default. For example "Forward {seektime} secs" would render as "Forward 10 secs". + +## Using custom HTML + +The example on [plyr.io](http://plyr.io) setup uses a Hogan template. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. The classes and data attributes used in your template should match the `selectors` option. @@ -15,7 +41,7 @@ You need to add several placeholders to your html template that are replaced whe You can include only the controls you need when specifying custom html. -## Example +### Example This is an example `html` option with all controls. @@ -62,20 +88,18 @@ This is an example `html` option with all controls. "</span>", "</span>", "<span class='player-controls-right'>", - "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>", - "<label id='mute{id}' for='mute{id}'>", + "<button type="button" data-player="mute">", "<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>", + "</button>", "<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'>", - "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>", - "<label for='captions{id}'>", + "<button type="button" data-player="captions">", "<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>", + "</button>", "<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>", diff --git a/dist/plyr.css b/dist/plyr.css index 9df52dce..de17fac3 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -@-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{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:10px 15px;opacity:0;background:#fff;border:1px solid #d6dadd;border-radius:3px;color:#6b7d86;font-size:14px;line-height:1.5;font-weight:600;-webkit-transform:translate(-50%,30px) scale(0);transform:translate(-50%,30px) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:-webkit-transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease}.player-tooltip::after{content:"";position:absolute;z-index:1;top:100%;left:50%;display:block;width:10px;height:10px;background:#fff;-webkit-transform:translate(-50%,-50%) rotate(45deg) translateY(1px);transform:translate(-50%,-50%) rotate(45deg) translateY(1px);border:1px solid #d6dadd;border-width:0 1px 1px 0}.player button.tab-focus:focus .player-tooltip,.player button:hover .player-tooltip,.player input.tab-focus:focus+label .player-tooltip,.player label:hover .player-tooltip{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.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-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-hover .player-controls,.player.fullscreen-active.fullscreen-hide-controls.playing.player-hover .player-controls{-webkit-transform:translateY(0);transform:translateY(0)}.player-fullscreen.fullscreen-hide-controls.playing .player-captions,.player.fullscreen-active.fullscreen-hide-controls.playing .player-captions{bottom:5px;transition:bottom .3s .2s ease}.player-fullscreen .player-captions,.player-fullscreen.fullscreen-hide-controls.playing.player-hover .player-captions,.player.fullscreen-active .player-captions,.player.fullscreen-active.fullscreen-hide-controls.playing.player-hover .player-captions{top:auto;bottom:90px}@media (min-width:560px){.player-fullscreen .player-captions,.player-fullscreen.fullscreen-hide-controls.playing.player-hover .player-captions,.player.fullscreen-active .player-captions,.player.fullscreen-active.fullscreen-hide-controls.playing.player-hover .player-captions{bottom:60px}}.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 20px 30px;color:#fff;font-size:20px;text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.9)}.player-captions span:empty{display:none}@media (min-width:768px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player.fullscreen-active .player-captions{font-size:32px}.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{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;overflow:hidden;border:0;background:0 0;border-radius:3px;cursor:pointer;color:#6b7d86;transition:background .3s ease,color .3s ease,opacity .3s ease}.player-controls button svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls button.tab-focus,.player-controls button:hover{background:#3498db;color:#fff}.player-controls button:focus{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{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:10px 15px;opacity:0;background:#fff;border:1px solid #d6dadd;border-radius:3px;color:#6b7d86;font-size:14px;line-height:1.5;font-weight:600;-webkit-transform:translate(-50%,30px) scale(0);transform:translate(-50%,30px) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:-webkit-transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease}.player-tooltip::after{content:'';position:absolute;z-index:1;top:100%;left:50%;display:block;width:10px;height:10px;background:#fff;-webkit-transform:translate(-50%,-50%) rotate(45deg) translateY(1px);transform:translate(-50%,-50%) rotate(45deg) translateY(1px);border:1px solid #d6dadd;border-width:0 1px 1px 0}.player button.tab-focus:focus .player-tooltip,.player button:hover .player-tooltip{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.player button: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]{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-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-hover .player-controls,.player.fullscreen-active.fullscreen-hide-controls.playing.player-hover .player-controls{-webkit-transform:translateY(0);transform:translateY(0)}.player-fullscreen.fullscreen-hide-controls.playing .player-captions,.player.fullscreen-active.fullscreen-hide-controls.playing .player-captions{bottom:5px;transition:bottom .3s .2s ease}.player-fullscreen .player-captions,.player-fullscreen.fullscreen-hide-controls.playing.player-hover .player-captions,.player.fullscreen-active .player-captions,.player.fullscreen-active.fullscreen-hide-controls.playing.player-hover .player-captions{top:auto;bottom:90px}@media (min-width:560px){.player-fullscreen .player-captions,.player-fullscreen.fullscreen-hide-controls.playing.player-hover .player-captions,.player.fullscreen-active .player-captions,.player.fullscreen-active.fullscreen-hide-controls.playing.player-hover .player-captions{bottom:60px}}.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=fullscreen],.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.fullscreen-enabled [data-player=fullscreen]{display:inline-block}
\ No newline at end of file diff --git a/dist/plyr.js b/dist/plyr.js index bd998f42..5a6e1bbd 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='#"+S.iconPrefix+"-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='#"+S.iconPrefix+"-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='#"+S.iconPrefix+"-play'></use></svg>","<span class='sr-only'>Play</span>","</button>","<button type='button' data-player='pause'>","<svg><use xlink:href='#"+S.iconPrefix+"-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='#"+S.iconPrefix+"-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='#"+S.iconPrefix+"-muted'></use></svg>","<svg><use xlink:href='#"+S.iconPrefix+"-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='#"+S.iconPrefix+"-captions-on'></use></svg>","<svg><use xlink:href='#"+S.iconPrefix+"-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='#"+S.iconPrefix+"-exit-fullscreen'></use></svg>","<svg><use xlink:href='#"+S.iconPrefix+"-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 u(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 l(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 e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=document.body),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"undefined"==typeof e&&(e=document.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},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 x(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function T(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;E(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)<=E(dt.captions[dt.subcount][0])?(dt.currentCaption=dt.captions[dt.subcount][1],dt.captionsContainer.innerHTML=dt.currentCaption):dt.captionsContainer.innerHTML=""}}function T(){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(" --> "),P(t[0])}function E(e){var t=[];return t=e.split(" --> "),P(t[1])}function P(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 A(e){return dt.container.querySelectorAll(e)}function N(e){return A(e)[0]}function I(){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=A(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=N(S.selectors.controls),dt.buttons={},dt.buttons.seek=N(S.selectors.buttons.seek),dt.buttons.play=N(S.selectors.buttons.play),dt.buttons.pause=N(S.selectors.buttons.pause),dt.buttons.restart=N(S.selectors.buttons.restart),dt.buttons.rewind=N(S.selectors.buttons.rewind),dt.buttons.forward=N(S.selectors.buttons.forward),dt.buttons.fullscreen=N(S.selectors.buttons.fullscreen),dt.buttons.mute=N(S.selectors.buttons.mute),dt.buttons.captions=N(S.selectors.buttons.captions),dt.checkboxes=A("[type='checkbox']"),dt.progress={},dt.progress.container=N(S.selectors.progress.container),dt.progress.buffer={},dt.progress.buffer.bar=N(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=N(S.selectors.progress.played),dt.progress.played.text=dt.progress.played.bar&&dt.progress.played.bar.getElementsByTagName("span")[0],dt.volume=N(S.selectors.buttons.volume),dt.duration=N(S.selectors.duration),dt.currentTime=N(S.selectors.currentTime),dt.seekTime=A(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 q(){if(!dt.media)return n("No audio or video element found!",!0),!1;if(dt.supported.full&&(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),u(dt.media,e),dt.videoContainer=e}"youtube"==dt.type&&V(dt.media.getAttribute("data-video-id")),null!==dt.media.getAttribute("autoplay")&&j()}function V(e){for(var t=A("[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:dt.supported.full?0:1,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.supported.full&&(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=N(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].kind,("captions"===e||"subtitles"===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(T(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 u=s[i];("captions"===u.kind||"subtitles"===u.kind)&&y(u,"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 l=new XMLHttpRequest;l.onreadystatechange=function(){if(4===l.readyState)if(200===l.status){var e,t=[],r=l.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)},l.open("get",t,!0),l.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&&!I()?(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 j(){dt.media.play()}function D(){dt.media.pause()}function W(e){e===!0?j():e===!1?D():dt.media[dt.media.paused?"play":"pause"]()}function _(e){"number"!=typeof e&&(e=S.seekTime),z(dt.media.currentTime-e)}function Y(e){"number"!=typeof e&&(e=S.seekTime),z(dt.media.currentTime+e)}function z(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 U(){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.container,S.classes.hover,!0),window.clearTimeout(a),s||(a=window.setTimeout(function(){f(dt.container,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&&x().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&&G()}function G(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 K(){var e=dt.media.muted?0:10*dt.media.volume;dt.supported.full&&dt.volume&&(dt.volume.value=e),S.storage.enabled&&x().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(),V(e),rt(),void 0;if(D(),z(),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(),U()),dt.media.load(),null!==dt.media.getAttribute("autoplay")&&j()}function it(e){"video"===dt.type&&dt.media.setAttribute("poster",e)}function ut(){function e(){var e=document.activeElement;e&&e!=document.body?document.querySelector&&(e=document.querySelector(":focus")):e=null;for(var t in dt.buttons){var n=dt.buttons[t];f(n,"tab-focus",n===e)}}var t="IE"==dt.browser.name?"change":"input";y(window,"keyup",function(t){var n=t.keyCode?t.keyCode:t.which;9==n&&e()});for(var n in dt.buttons){var r=dt.buttons[n];y(r,"blur",function(){f(r,"tab-focus",!1)})}y(dt.buttons.play,"click",function(){j(),setTimeout(function(){dt.buttons.pause.focus()},100)}),y(dt.buttons.pause,"click",function(){D(),setTimeout(function(){dt.buttons.play.focus()},100)}),y(dt.buttons.restart,"click",z),y(dt.buttons.rewind,"click",_),y(dt.buttons.forward,"click",Y),y(dt.buttons.seek,t,z),y(dt.volume,t,function(){$(this.value)}),y(dt.buttons.mute,"change",function(){G(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=""),U()}),y(dt.media,"progress playing",et),y(dt.media,"volumechange",K),y(dt.media,"play pause",U),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?(z(),v(dt.buttons.play,"click")):v(dt.buttons.pause,"click")})}function lt(){if(!dt.init)return null;if(dt.container.setAttribute("class",S.selectors.container.replace(".","")),dt.init=!1,c(N(S.selectors.controls)),"youtube"===dt.type)return dt.embed.destroy(),void 0;"video"===dt.type&&(c(N(S.selectors.captions)),l(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),q(),"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(),$(),K(),B(),ut(),void 0):!1}var dt=this;return dt.container=o,ct(),dt.init?{media:dt.media,play:j,pause:D,restart:z,rewind:_,forward:Y,seek:z,source:ot,poster:it,setVolume:$,togglePlay:W,toggleMute:G,toggleCaptions:Q,toggleFullscreen:X,isFullscreen:function(){return dt.isFullscreen||!1},support:function(e){return a(dt,e)},destroy:lt,restore:ct}:{}}var F,S,C={enabled:!0,debug:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,iconPrefix:"icon",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:"player-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,u=!!document.createElement("video").canPlayType;switch(e){case"video":t=u,n=t&&!s&&!o;break;case"audio":t=i,n=t&&!s;break;case"youtube":t=!0,n=!s&&!o;break;default:t=i&&u,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 T(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>% "+S.i18n.played,"</progress>","<progress class='player-progress-buffer' max='100' value='0'>","<span>0</span>% "+S.i18n.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='#"+S.iconPrefix+"-restart'></use></svg>","<span class='sr-only'>"+S.i18n.restart+"</span>","</button>"),o(S.controls,"rewind")&&e.push("<button type='button' data-player='rewind'>","<svg><use xlink:href='#"+S.iconPrefix+"-rewind'></use></svg>","<span class='sr-only'>"+S.i18n.rewind+"</span>","</button>"),o(S.controls,"play")&&e.push("<button type='button' data-player='play'>","<svg><use xlink:href='#"+S.iconPrefix+"-play'></use></svg>","<span class='sr-only'>"+S.i18n.play+"</span>","</button>","<button type='button' data-player='pause'>","<svg><use xlink:href='#"+S.iconPrefix+"-pause'></use></svg>","<span class='sr-only'>"+S.i18n.pause+"</span>","</button>"),o(S.controls,"fast-forward")&&e.push("<button type='button' data-player='fast-forward'>","<svg><use xlink:href='#"+S.iconPrefix+"-fast-forward'></use></svg>","<span class='sr-only'>"+S.i18n.forward+"</span>","</button>"),o(S.controls,"current-time")&&e.push("<span class='player-time'>","<span class='sr-only'>"+S.i18n.currentTime+"</span>","<span class='player-current-time'>00:00</span>","</span>"),o(S.controls,"duration")&&e.push("<span class='player-time'>","<span class='sr-only'>"+S.i18n.duration+"</span>","<span class='player-duration'>00:00</span>","</span>"),e.push("</span>","<span class='player-controls-right'>"),o(S.controls,"mute")&&e.push("<button type='button' data-player='mute'>","<svg class='icon-muted'><use xlink:href='#"+S.iconPrefix+"-muted'></use></svg>","<svg><use xlink:href='#"+S.iconPrefix+"-volume'></use></svg>","<span class='sr-only'>"+S.i18n.toggleMute+"</span>","</button>"),o(S.controls,"volume")&&e.push("<label for='volume{id}' class='sr-only'>"+S.i18n.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("<button type='button' data-player='captions'>","<svg class='icon-captions-on'><use xlink:href='#"+S.iconPrefix+"-captions-on'></use></svg>","<svg><use xlink:href='#"+S.iconPrefix+"-captions-off'></use></svg>","<span class='sr-only'>"+S.i18n.toggleCaptions+"</span>","</button>"),o(S.controls,"fullscreen")&&e.push("<button type='button' data-player='fullscreen'>","<svg class='icon-exit-fullscreen'><use xlink:href='#"+S.iconPrefix+"-exit-fullscreen'></use></svg>","<svg><use xlink:href='#"+S.iconPrefix+"-enter-fullscreen'></use></svg>","<span class='sr-only'>"+S.i18n.toggleFullscreen+"</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 u(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 l(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,t){return t="boolean"==typeof t?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t}function h(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function w(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},w(e[n],t[n])):e[n]=t[n];return e}function k(){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 e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=document.body),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"undefined"==typeof e&&(e=document.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},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 x(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function T(o){function w(e){if(!dt.usingTextTracks&&"video"===dt.type&&dt.supported.full){for(dt.subcount=0,e="number"==typeof e?e:dt.media.currentTime;E(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)<=E(dt.captions[dt.subcount][0])?(dt.currentCaption=dt.captions[dt.subcount][1],dt.captionsContainer.innerHTML=dt.currentCaption.trim()):dt.captionsContainer.innerHTML=""}}function T(){dt.buttons.captions&&(f(dt.container,S.classes.captions.enabled,!0),S.captions.defaultActive&&(f(dt.container,S.classes.captions.active,!0),g(dt.buttons.captions,!0)))}function C(e){var t=[];return t=e.split(" --> "),A(t[0])}function E(e){var t=[];return t=e.split(" --> "),A(t[1])}function A(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function P(e){return dt.container.querySelectorAll(e)}function N(e){return P(e)[0]}function I(){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=P(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=N(S.selectors.controls),dt.buttons={},dt.buttons.seek=N(S.selectors.buttons.seek),dt.buttons.play=N(S.selectors.buttons.play),dt.buttons.pause=N(S.selectors.buttons.pause),dt.buttons.restart=N(S.selectors.buttons.restart),dt.buttons.rewind=N(S.selectors.buttons.rewind),dt.buttons.forward=N(S.selectors.buttons.forward),dt.buttons.fullscreen=N(S.selectors.buttons.fullscreen),dt.buttons.mute=N(S.selectors.buttons.mute),dt.buttons.captions=N(S.selectors.buttons.captions),dt.checkboxes=P("[type='checkbox']"),dt.progress={},dt.progress.container=N(S.selectors.progress.container),dt.progress.buffer={},dt.progress.buffer.bar=N(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=N(S.selectors.progress.played),dt.progress.played.text=dt.progress.played.bar&&dt.progress.played.bar.getElementsByTagName("span")[0],dt.volume=N(S.selectors.buttons.volume),dt.duration=N(S.selectors.duration),dt.currentTime=N(S.selectors.currentTime),dt.seekTime=P(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||S.i18n.play;"undefined"!=typeof S.title&&S.title.length&&(e+=", "+S.title),dt.buttons.play.setAttribute("aria-label",e)}}function q(){if(!dt.media)return n("No audio or video element found!",!0),!1;if(dt.supported.full&&(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),u(dt.media,e),dt.videoContainer=e}"youtube"==dt.type&&V(dt.media.getAttribute("data-video-id")),null!==dt.media.getAttribute("autoplay")&&j()}function V(e){for(var t=P("[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:dt.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb: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=!0,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.supported.full&&(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(".","")+"' aria-live='assertive'><span></span></div>"),dt.captionsContainer=N(S.selectors.captions).querySelector("span"),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].kind,("captions"===e||"subtitles"===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(T(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 u=s[i];("captions"===u.kind||"subtitles"===u.kind)&&y(u,"cuechange",function(){dt.captionsContainer.innerHTML="",this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&dt.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim())})}}else if(n("TextTracks not supported so rendering captions manually."),dt.currentCaption="",dt.captions=[],""!==t){var l=new XMLHttpRequest;l.onreadystatechange=function(){if(4===l.readyState)if(200===l.status){var e,t=[],r=l.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)},l.open("get",t,!0),l.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&&!I()?(n((e?"Native":"Fallback")+" fullscreen enabled."),f(dt.container,S.classes.fullscreen.enabled,!0)):n("Fullscreen not supported and fallback disabled."),g(dt.buttons.fullscreen,!1),S.fullscreen.hideControls&&f(dt.container,S.classes.fullscreen.hideControls,!0)}}function j(){dt.media.play()}function D(){dt.media.pause()}function W(e){e===!0?j():e===!1?D():dt.media[dt.media.paused?"play":"pause"]()}function _(e){"number"!=typeof e&&(e=S.seekTime),z(dt.media.currentTime-e)}function Y(e){"number"!=typeof e&&(e=S.seekTime),z(dt.media.currentTime+e)}function z(e){var t=0,r=dt.media.paused;"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(a){}"youtube"==dt.type&&(dt.embed.seekTo(t),r&&D(),v(dt.media,"timeupdate")),n("Seeking to "+dt.media.currentTime+" seconds"),w(t)}function U(){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.container,S.classes.hover,!0),window.clearTimeout(a),s||(a=window.setTimeout(function(){f(dt.container,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),g(dt.buttons.fullscreen,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&&x().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&&G()}function G(e){"boolean"!=typeof e&&(e=!dt.media.muted),g(dt.buttons.mute,e),dt.media.muted=e,"youtube"===dt.type&&(dt.embed[dt.media.muted?"mute":"unMute"](),v(dt.media,"volumechange"))}function K(){var e=dt.media.muted?0:10*dt.media.volume;dt.supported.full&&dt.volume&&(dt.volume.value=e),S.storage.enabled&&x().supported&&window.localStorage.setItem(S.storage.key,e),f(dt.container,S.classes.muted,0===e),dt.supported.full&&dt.buttons.mute&&g(dt.buttons.mute,0===e)}function Q(e){dt.supported.full&&dt.buttons.captions&&("boolean"!=typeof e&&(e=-1===dt.container.className.indexOf(S.classes.captions.active)),g(dt.buttons.captions,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(),V(e),rt(),void 0;if(D(),z(),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(),U()),dt.media.load(),null!==dt.media.getAttribute("autoplay")&&j()}function it(e){"video"===dt.type&&dt.media.setAttribute("poster",e)}function ut(){function e(){var e=document.activeElement;e&&e!=document.body?document.querySelector&&(e=document.querySelector(":focus")):e=null;for(var t in dt.buttons){var n=dt.buttons[t];f(n,"tab-focus",n===e)}}var t="IE"==dt.browser.name?"change":"input";y(window,"keyup",function(t){var n=t.keyCode?t.keyCode:t.which;9==n&&e()});for(var n in dt.buttons){var r=dt.buttons[n];y(r,"blur",function(){f(r,"tab-focus",!1)})}y(dt.buttons.play,"click",function(){j(),setTimeout(function(){dt.buttons.pause.focus()},100)}),y(dt.buttons.pause,"click",function(){D(),setTimeout(function(){dt.buttons.play.focus()},100)}),y(dt.buttons.restart,"click",z),y(dt.buttons.rewind,"click",_),y(dt.buttons.forward,"click",Y),y(dt.buttons.seek,t,z),y(dt.volume,t,function(){$(this.value)}),y(dt.buttons.mute,"click",G),y(dt.buttons.fullscreen,"click",X),F.supportsFullScreen&&y(document,F.fullScreenEventName,X),y(dt.media,"timeupdate seeking",rt),y(dt.media,"timeupdate",w),y(dt.media,"loadedmetadata",nt),y(dt.buttons.captions,"click",Q),y(dt.media,"ended",function(){"video"===dt.type&&(dt.captionsContainer.innerHTML=""),U()}),y(dt.media,"progress playing",et),y(dt.media,"volumechange",K),y(dt.media,"play pause",U),y(dt.media,"waiting canplay seeked",Z),"video"===dt.type&&S.click&&y(dt.videoContainer,"click",function(){dt.media.paused?v(dt.buttons.play,"click"):dt.media.ended?(z(),v(dt.buttons.play,"click")):v(dt.buttons.pause,"click")})}function lt(){if(!dt.init)return null;if(dt.container.setAttribute("class",S.selectors.container.replace(".","")),dt.init=!1,c(N(S.selectors.controls)),"youtube"===dt.type)return dt.embed.destroy(),void 0;"video"===dt.type&&(c(N(S.selectors.captions)),l(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=k(),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),q(),"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(),$(),K(),B(),ut(),void 0):!1}var dt=this;return dt.container=o,ct(),dt.init?{media:dt.media,play:j,pause:D,restart:z,rewind:_,forward:Y,seek:z,source:ot,poster:it,setVolume:$,togglePlay:W,toggleMute:G,toggleCaptions:Q,toggleFullscreen:X,isFullscreen:function(){return dt.isFullscreen||!1},support:function(e){return a(dt,e)},destroy:lt,restore:ct}:{}}var F,S,C={enabled:!0,debug:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,iconPrefix:"icon",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:"player-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"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",played:"played",buffered:"buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen"}};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,u=!!document.createElement("video").canPlayType;switch(e){case"video":t=u,n=t&&!s&&!o;break;case"audio":t=i,n=t&&!s;break;case"youtube":t=!0,n=!s&&!o;break;default:t=i&&u,n=t&&!s}return{basic:t,full:n}},e.setup=function(t){if(S=w(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 T(s);s.plyr=Object.keys(o).length?o:!1,"function"==typeof S.onSetup&&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.js b/docs/dist/docs.js index e93234d5..6a5addd8 100644 --- a/docs/dist/docs.js +++ b/docs/dist/docs.js @@ -1 +1 @@ -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,i){function a(){}function o(){}a.prototype=t,o.prototype=t.subs;var c,l=new a;l.subs=new o,l.subsText={},l.buf="",s=s||{},l.stackSubs=s,l.subsText=i;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(i,"&").replace(a,"<").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,i,a){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,r,i,a)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,r){var i,a=t.split("."),o=this.f(a[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<a.length;u++)i=n(a[u],o,c),void 0!==i?(l=o,o=i):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 i=!1,a=null,o=!1,c=this.options.modelGet,l=e.length-1;l>=0;l--)if(a=e[l],i=n(t,a,c),void 0!==i){o=!0;break}return o?(r||"function"!=typeof i||(i=this.mv(i,e,s)),i):r?!1:""},ls:function(t,n,e,r,i){var a=this.options.delimiters;return this.options.delimiters=i,this.b(this.ct(s(t.call(n,r)),n,e)),this.options.delimiters=a,!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,i,a){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,i),a)):l},mv:function(t,n,e){var r=n[n.length-1],i=t.call(r);return"function"==typeof i?this.ct(s(i.call(r)),r,e):i},sub:function(t,n,e,s){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,s),this.activeSub=!1)}};var i=/&/g,a=/</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.$||i(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&&!a(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 i(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function a(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(m,"\\\\").replace(d,'\\"').replace(g,"\\n").replace(v,"\\r").replace(w,"\\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 f(t,n){n.code+="t.b(t.t(t."+u(t.n)+'("'+l(t.n)+'",c,p,0)));'}function b(t){return"t.b("+t+");"}var h=/\S/,d=/\"/g,g=/\n/g,v=/\r/g,m=/\\/g,w=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,i){function a(){m.length>0&&(w.push({tag:"_t",text:new String(m)}),m="")}function o(){for(var n=!0,e=x;e<w.length;e++)if(n=t.tags[w[e].tag]<t.tags._v||"_t"==w[e].tag&&null===w[e].text.match(h),!n)return!1;return n}function c(t,n){if(a(),t&&o())for(var e,s=x;s<w.length;s++)w[s].text&&((e=w[s+1])&&">"==e.tag&&(e.indent=w[s].text.toString()),w.splice(s,1));else n||w.push({tag:"\n"});y=!1,x=w.length}function l(t,n){var s="="+T,r=t.indexOf(s,n),i=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return S=i[0],T=i[i.length-1],r+s.length-1}var u=r.length,p=0,f=1,b=2,d=p,g=null,v=null,m="",w=[],y=!1,k=0,x=0,S="{{",T="}}";for(i&&(i=i.split(" "),S=i[0],T=i[1]),k=0;u>k;k++)d==p?s(S,r,k)?(--k,a(),d=f):"\n"==r.charAt(k)?c(y):m+=r.charAt(k):d==f?(k+=S.length-1,v=t.tags[r.charAt(k+1)],g=v?r.charAt(k+1):"_v","="==g?(k=l(r,k),d=p):(v&&k++,d=b),y=k):s(T,r,k)?(w.push({tag:g,n:e(m),otag:S,ctag:T,i:"/"==g?y-S.length:k+T.length}),m="",k+=T.length-1,d=p,"{"==g&&("}}"==T?k++:n(w[w.length-1]))):m+=r.charAt(k);return c(y,!0),w};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+=b('"\\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+=b('"'+l(t.text)+'"')},"{":f,"&":f},t.walk=function(n,e){for(var s,r=0,i=n.length;i>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 i=r.partials;for(var a in i)delete i[a].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 i=this.f(n,e,s,0),a=e;return i&&(a=a.concat(i)),t.Template.prototype.rp.call(this,n,a,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 i=s.compile(t),a=i.render(n,e);return r?(r(a),void 0):a}}}(Hogan);"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var n=function(t){var n=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var e,s=arguments.length;for(e=0;s>e;e++)t=arguments[e],n.call(this,t)}};n("add"),n("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var e=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,n){return 1 in arguments&&!this.contains(t)==!n?n:e.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var n="classList",e="prototype",s=t.Element[e],r=Object,i=String[e].trim||function(){return this.replace(/^\s+|\s+$/g,"")},a=Array[e].indexOf||function(t){for(var n=0,e=this.length;e>n;n++)if(n in this&&this[n]===t)return n;return-1},o=function(t,n){this.name=t,this.code=DOMException[t],this.message=n},c=function(t,n){if(""===n)throw new o("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(n))throw new o("INVALID_CHARACTER_ERR","String contains an invalid character");return a.call(t,n)},l=function(t){for(var n=i.call(t.getAttribute("class")||""),e=n?n.split(/\s+/):[],s=0,r=e.length;r>s;s++)this.push(e[s]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[e]=[],p=function(){return new l(this)};if(o[e]=Error[e],u.item=function(t){return this[t]||null},u.contains=function(t){return t+="",-1!==c(this,t)},u.add=function(){var t,n=arguments,e=0,s=n.length,r=!1;do t=n[e]+"",-1===c(this,t)&&(this.push(t),r=!0);while(++e<s);r&&this._updateClassName()},u.remove=function(){var t,n,e=arguments,s=0,r=e.length,i=!1;do for(t=e[s]+"",n=c(this,t);-1!==n;)this.splice(n,1),i=!0,n=c(this,t);while(++s<r);i&&this._updateClassName()},u.toggle=function(t,n){t+="";var e=this.contains(t),s=e?n!==!0&&"remove":n!==!1&&"add";return s&&this[s](t),n===!0||n===!1?n:!e},u.toString=function(){return this.join(" ")},r.defineProperty){var f={get:p,enumerable:!0,configurable:!0};try{r.defineProperty(s,n,f)}catch(b){-2146823252===b.number&&(f.enumerable=!1,r.defineProperty(s,n,f))}}else r[e].__defineGetter__&&s.__defineGetter__(n,p)}}(self));var 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({}),tooltips:!0,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,i=n.getAttribute("data-window-name")||"popup";if(window["window-"+i]&&!window["window-"+i].closed)window["window-"+i].focus();else{var a=void 0!==window.screenLeft?window.screenLeft:screen.left,o=void 0!==window.screenTop?window.screenTop:screen.top,c=screen.width/2-s/2+a,l=screen.height/2-r/2+o;window["window-"+i]=window.open(e,i,"top="+l+",left="+c+",width="+s+",height="+r),window["window-"+i].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 i="sessionStorage"in window,a={github:".js-stargazers-count",twitter:".js-tweet-count"};i&&"github_stargazers"in window.sessionStorage?e(a.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(a.github,s(t.data.stargazers_count)),window.sessionStorage.github_stargazers=t.data.stargazers_count)}),i&&"tweets"in window.sessionStorage?e(a.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(a.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,i,a){t.GoogleAnalyticsObject=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},t[r].l=1*new Date,i=n.createElement(e),a=n.getElementsByTagName(e)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(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,i){function a(){}function o(){}a.prototype=t,o.prototype=t.subs;var c,u=new a;u.subs=new o,u.subsText={},u.buf="",s=s||{},u.stackSubs=s,u.subsText=i;for(c in n)s[c]||(s[c]=n[c]);for(c in s)u.subs[c]=s[c];r=r||{},u.stackPartials=r;for(c in e)r[c]||(r[c]=e[c]);for(c in r)u.partials[c]=r[c];return u}function s(t){return String(null===t||void 0===t?"":t)}function r(t){return t=s(t),l.test(t)?t.replace(i,"&").replace(a,"<").replace(o,">").replace(c,"'").replace(u,"""):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,i,a){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,r,i,a)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,r){var i,a=t.split("."),o=this.f(a[0],e,s,r),c=this.options.modelGet,u=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var l=1;l<a.length;l++)i=n(a[l],o,c),void 0!==i?(u=o,o=i):o="";return r&&!o?!1:(r||"function"!=typeof o||(e.push(u),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,r){for(var i=!1,a=null,o=!1,c=this.options.modelGet,u=e.length-1;u>=0;u--)if(a=e[u],i=n(t,a,c),void 0!==i){o=!0;break}return o?(r||"function"!=typeof i||(i=this.mv(i,e,s)),i):r?!1:""},ls:function(t,n,e,r,i){var a=this.options.delimiters;return this.options.delimiters=i,this.b(this.ct(s(t.call(n,r)),n,e)),this.options.delimiters=a,!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,i,a){var o,c=n[n.length-1],u=t.call(c);return"function"==typeof u?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(u,c,e,o.substring(r,i),a)):u},mv:function(t,n,e){var r=n[n.length-1],i=t.call(r);return"function"==typeof i?this.ct(s(i.call(r)),r,e):i},sub:function(t,n,e,s){var r=this.subs[t];r&&(this.activeSub=t,r(n,e,this,s),this.activeSub=!1)}};var i=/&/g,a=/</g,o=/>/g,c=/\'/g,u=/\"/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 c=[],u=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.$||i(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(u=s.pop(),p.n!=u.n&&!a(p.n,u.n,o))throw new Error("Nesting error: "+u.n+" vs. "+p.n);return u.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 i(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function a(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('"'+u(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function c(t){var n=[];for(var e in t.partials)n.push('"'+u(e)+'":{name:"'+u(t.partials[e].name)+'", '+c(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function u(t){return t.replace(m,"\\\\").replace(g,'\\"').replace(d,"\\n").replace(v,"\\r").replace(w,"\\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("'+u(s)+'",c,p,"'+(t.indent||"")+'"));',s}function f(t,n){n.code+="t.b(t.t(t."+l(t.n)+'("'+u(t.n)+'",c,p,0)));'}function b(t){return"t.b("+t+");"}var h=/\S/,g=/\"/g,d=/\n/g,v=/\r/g,m=/\\/g,w=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(r,i){function a(){m.length>0&&(w.push({tag:"_t",text:new String(m)}),m="")}function o(){for(var n=!0,e=x;e<w.length;e++)if(n=t.tags[w[e].tag]<t.tags._v||"_t"==w[e].tag&&null===w[e].text.match(h),!n)return!1;return n}function c(t,n){if(a(),t&&o())for(var e,s=x;s<w.length;s++)w[s].text&&((e=w[s+1])&&">"==e.tag&&(e.indent=w[s].text.toString()),w.splice(s,1));else n||w.push({tag:"\n"});y=!1,x=w.length}function u(t,n){var s="="+T,r=t.indexOf(s,n),i=e(t.substring(t.indexOf("=",n)+1,r)).split(" ");return S=i[0],T=i[i.length-1],r+s.length-1}var l=r.length,p=0,f=1,b=2,g=p,d=null,v=null,m="",w=[],y=!1,k=0,x=0,S="{{",T="}}";for(i&&(i=i.split(" "),S=i[0],T=i[1]),k=0;l>k;k++)g==p?s(S,r,k)?(--k,a(),g=f):"\n"==r.charAt(k)?c(y):m+=r.charAt(k):g==f?(k+=S.length-1,v=t.tags[r.charAt(k+1)],d=v?r.charAt(k+1):"_v","="==d?(k=u(r,k),g=p):(v&&k++,g=b),y=k):s(T,r,k)?(w.push({tag:d,n:e(m),otag:S,ctag:T,i:"/"==d?y-S.length:k+T.length}),m="",k+=T.length-1,g=p,"{"==d&&("}}"==T?k++:n(w[w.length-1]))):m+=r.charAt(k);return c(y,!0),w};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."+l(n.n)+'("'+u(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)+'("'+u(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("'+u(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=b('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+l(t.n)+'("'+u(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=b('"'+u(t.text)+'"')},"{":f,"&":f},t.walk=function(n,e){for(var s,r=0,i=n.length;i>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 i=r.partials;for(var a in i)delete i[a].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 i=this.f(n,e,s,0),a=e;return i&&(a=a.concat(i)),t.Template.prototype.rp.call(this,n,a,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 i=s.compile(t),a=i.render(n,e);return r?(r(a),void 0):a}}}(Hogan);"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var n=function(t){var n=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var e,s=arguments.length;for(e=0;s>e;e++)t=arguments[e],n.call(this,t)}};n("add"),n("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var e=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,n){return 1 in arguments&&!this.contains(t)==!n?n:e.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var n="classList",e="prototype",s=t.Element[e],r=Object,i=String[e].trim||function(){return this.replace(/^\s+|\s+$/g,"")},a=Array[e].indexOf||function(t){for(var n=0,e=this.length;e>n;n++)if(n in this&&this[n]===t)return n;return-1},o=function(t,n){this.name=t,this.code=DOMException[t],this.message=n},c=function(t,n){if(""===n)throw new o("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(n))throw new o("INVALID_CHARACTER_ERR","String contains an invalid character");return a.call(t,n)},u=function(t){for(var n=i.call(t.getAttribute("class")||""),e=n?n.split(/\s+/):[],s=0,r=e.length;r>s;s++)this.push(e[s]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},l=u[e]=[],p=function(){return new u(this)};if(o[e]=Error[e],l.item=function(t){return this[t]||null},l.contains=function(t){return t+="",-1!==c(this,t)},l.add=function(){var t,n=arguments,e=0,s=n.length,r=!1;do t=n[e]+"",-1===c(this,t)&&(this.push(t),r=!0);while(++e<s);r&&this._updateClassName()},l.remove=function(){var t,n,e=arguments,s=0,r=e.length,i=!1;do for(t=e[s]+"",n=c(this,t);-1!==n;)this.splice(n,1),i=!0,n=c(this,t);while(++s<r);i&&this._updateClassName()},l.toggle=function(t,n){t+="";var e=this.contains(t),s=e?n!==!0&&"remove":n!==!1&&"add";return s&&this[s](t),n===!0||n===!1?n:!e},l.toString=function(){return this.join(" ")},r.defineProperty){var f={get:p,enumerable:!0,configurable:!0};try{r.defineProperty(s,n,f)}catch(b){-2146823252===b.number&&(f.enumerable=!1,r.defineProperty(s,n,f))}}else r[e].__defineGetter__&&s.__defineGetter__(n,p)}}(self));var 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(' <button type="button" data-player="mute">'),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(" </button>"),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"+e),s.b(' <button type="button" data-player="captions">'),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(" </button>"),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({}),tooltips:!0,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,i=n.getAttribute("data-window-name")||"popup";if(window["window-"+i]&&!window["window-"+i].closed)window["window-"+i].focus();else{var a=void 0!==window.screenLeft?window.screenLeft:screen.left,o=void 0!==window.screenTop?window.screenTop:screen.top,c=screen.width/2-s/2+a,u=screen.height/2-r/2+o;window["window-"+i]=window.open(e,i,"top="+u+",left="+c+",width="+s+",height="+r),window["window-"+i].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(u);for(var r=o.length-1;r>=0;r--)o[r].classList.remove(u);e.classList.add(u),t.target.classList.add(u)}document.querySelector(".js-popup").addEventListener("click",t);var i="sessionStorage"in window,a={github:".js-stargazers-count",twitter:".js-tweet-count"};i&&"github_stargazers"in window.sessionStorage?e(a.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(a.github,s(t.data.stargazers_count)),window.sessionStorage.github_stargazers=t.data.stargazers_count)}),i&&"tweets"in window.sessionStorage?e(a.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(a.twitter,t.count),window.sessionStorage.tweets=t.count)});for(var o=document.querySelectorAll(".nav-panel a"),c=document.querySelectorAll(".panels > .panel"),u="active",l=o.length-1;l>=0;l--)o[l].addEventListener("click",r)}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,n,e,s,r,i,a){t.GoogleAnalyticsObject=r,t[r]=t[r]||function(){(t[r].q=t[r].q||[]).push(arguments)},t[r].l=1*new Date,i=n.createElement(e),a=n.getElementsByTagName(e)[0],i.async=1,i.src=s,a.parentNode.insertBefore(i,a)}(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/dist/templates.js b/docs/dist/templates.js index 0cb6d126..7b523c86 100644 --- a/docs/dist/templates.js +++ b/docs/dist/templates.js @@ -1,2 +1,2 @@ var templates = {}; - templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-left\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Current time</span>");t.b("\n" + i);t.b(" <span class=\"player-current-time\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Duration</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-right\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
\ No newline at end of file + templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-left\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Current time</span>");t.b("\n" + i);t.b(" <span class=\"player-current-time\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Duration</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-right\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"mute\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"captions\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});
\ No newline at end of file diff --git a/docs/error.html b/docs/error.html index 81297a15..e35c94b7 100644 --- a/docs/error.html +++ b/docs/error.html @@ -6,7 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Docs styles --> - <link rel="stylesheet" href="//cdn.plyr.io/1.2.6/docs.css"> + <link rel="stylesheet" href="//cdn.plyr.io/1.3.0/docs.css"> </head> <body> <main> diff --git a/docs/index.html b/docs/index.html index 85de929d..26ee75d1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,10 +8,10 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Styles --> - <link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/plyr.css?3"> + <link rel="stylesheet" href="https://cdn.plyr.io/1.3.0/plyr.css?3"> <!-- Docs styles --> - <link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/docs.css?1"> + <link rel="stylesheet" href="https://cdn.plyr.io/1.3.0/docs.css?1"> </head> <body> <header> @@ -97,13 +97,13 @@ b.insertBefore(c, b.childNodes[0]); } } - })(document, "https://cdn.plyr.io/1.2.6/sprite.svg"); + })(document, "https://cdn.plyr.io/1.3.0/sprite.svg"); </script> <!-- Plyr core script --> - <script src="https://cdn.plyr.io/1.2.6/plyr.js?1"></script> + <script src="https://cdn.plyr.io/1.3.0/plyr.js?1"></script> <!-- Docs script --> - <script src="https://cdn.plyr.io/1.2.6/docs.js?1"></script> + <script src="https://cdn.plyr.io/1.3.0/docs.js?1"></script> </body> </html> diff --git a/docs/src/templates/controls.html b/docs/src/templates/controls.html index 47ccbd55..fb82cf0d 100644 --- a/docs/src/templates/controls.html +++ b/docs/src/templates/controls.html @@ -40,23 +40,18 @@ </span> </span> <span class="player-controls-right"> - <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute"> - <label id="mute{id}" for="mute{id}"> + <button type="button" data-player="mute"> <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> - + </button> <label for="volume{id}" class="sr-only">Volume</label> <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume"> - - <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions"> - <label for="captions{id}"> + <button type="button" data-player="captions"> <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> - + </button> <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> diff --git a/package.json b/package.json index b0eccf5f..c53b50f8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plyr", - "version": "1.2.6", + "version": "1.3.0", "description": "A simple HTML5 media player using custom controls", "homepage": "http://plyr.io", "main": "gulpfile.js", @@ -39,7 +39,7 @@ If you have any cool ideas or features, please let me know by [creating an issue Check `docs/index.html` and `docs/dist/docs.js` for an example setup. -**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.2.6/plyr.js` to `https://cdn.plyr.io/1.2.6/plyr.js` +**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.3.0/plyr.js` to `https://cdn.plyr.io/1.3.0/plyr.js` ### Bower If bower is your thang, you can grab Plyr using: @@ -59,11 +59,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub] If you want to use our CDN, you can use the following: ```html -<link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/plyr.css"> -<script src="https://cdn.plyr.io/1.2.6/plyr.js"></script> +<link rel="stylesheet" href="https://cdn.plyr.io/1.3.0/plyr.css"> +<script src="https://cdn.plyr.io/1.3.0/plyr.js"></script> ``` -You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.6/sprite.svg`. +You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.0/sprite.svg`. ### CSS If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. @@ -183,6 +183,12 @@ You can pass the following options to the setup method using `plyr.setup({...})` <td>Toggle which control elements you would like to display when using the default controls html. If you specify a <code>html</code> option, this is redundant. The default value is to display everything.</td> </tr> <tr> + <td><code>i18n</code></td> + <td>Object</td> + <td><code><a href="controls.md">See controls.md</a></code></td> + <td>Used for internationalisation (i18n) of the tooltips/labels within the buttons.</td> + </tr> + <tr> <td><code>iconPrefix</code></td> <td>String</td> <td><code>icon</code></td> diff --git a/src/js/plyr.js b/src/js/plyr.js index 782e6397..a94d67ed 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.2.6 +// plyr.js v1.3.0 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -83,7 +83,21 @@ key: "plyr_volume" }, controls: ["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"], - onSetup: function() {} + i18n: { + restart: "Restart", + rewind: "Rewind {seektime} secs", + play: "Play", + pause: "Pause", + forward: "Forward {seektime} secs", + played: "played", + buffered: "buffered", + currentTime: "Current time", + duration: "Duration", + volume: "Volume", + toggleMute: "Toggle Mute", + toggleCaptions: "Toggle Captions", + toggleFullscreen: "Toggle Fullscreen" + } }; // Build the default HTML @@ -95,10 +109,10 @@ "<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", + "<span>0</span>% " + config.i18n.played, "</progress>", "<progress class='player-progress-buffer' max='100' value='0'>", - "<span>0</span>% buffered", + "<span>0</span>% " + config.i18n.buffered, "</progress>", "</div>", "<span class='player-controls-left'>"]; @@ -108,7 +122,7 @@ html.push( "<button type='button' data-player='restart'>", "<svg><use xlink:href='#" + config.iconPrefix + "-restart'></use></svg>", - "<span class='sr-only'>Restart</span>", + "<span class='sr-only'>" + config.i18n.restart + "</span>", "</button>" ); } @@ -118,7 +132,7 @@ html.push( "<button type='button' data-player='rewind'>", "<svg><use xlink:href='#" + config.iconPrefix + "-rewind'></use></svg>", - "<span class='sr-only'>Rewind {seektime} secs</span>", + "<span class='sr-only'>" + config.i18n.rewind + "</span>", "</button>" ); } @@ -128,11 +142,11 @@ html.push( "<button type='button' data-player='play'>", "<svg><use xlink:href='#" + config.iconPrefix + "-play'></use></svg>", - "<span class='sr-only'>Play</span>", + "<span class='sr-only'>" + config.i18n.play + "</span>", "</button>", "<button type='button' data-player='pause'>", "<svg><use xlink:href='#" + config.iconPrefix + "-pause'></use></svg>", - "<span class='sr-only'>Pause</span>", + "<span class='sr-only'>" + config.i18n.pause + "</span>", "</button>" ); } @@ -142,7 +156,7 @@ html.push( "<button type='button' data-player='fast-forward'>", "<svg><use xlink:href='#" + config.iconPrefix + "-fast-forward'></use></svg>", - "<span class='sr-only'>Forward {seektime} secs</span>", + "<span class='sr-only'>" + config.i18n.forward + "</span>", "</button>" ); } @@ -151,7 +165,7 @@ if(_inArray(config.controls, "current-time")) { html.push( "<span class='player-time'>", - "<span class='sr-only'>Current time</span>", + "<span class='sr-only'>" + config.i18n.currentTime + "</span>", "<span class='player-current-time'>00:00</span>", "</span>" ); @@ -161,7 +175,7 @@ if(_inArray(config.controls, "duration")) { html.push( "<span class='player-time'>", - "<span class='sr-only'>Duration</span>", + "<span class='sr-only'>" + config.i18n.duration + "</span>", "<span class='player-duration'>00:00</span>", "</span>" ); @@ -176,19 +190,18 @@ // Toggle mute button if(_inArray(config.controls, "mute")) { html.push( - "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>", - "<label id='mute{id}' for='mute{id}'>", + "<button type='button' data-player='mute'>", "<svg class='icon-muted'><use xlink:href='#" + config.iconPrefix + "-muted'></use></svg>", "<svg><use xlink:href='#" + config.iconPrefix + "-volume'></use></svg>", - "<span class='sr-only'>Toggle Mute</span>", - "</label>" + "<span class='sr-only'>" + config.i18n.toggleMute + "</span>", + "</button>" ); } // Volume range control if(_inArray(config.controls, "volume")) { html.push( - "<label for='volume{id}' class='sr-only'>Volume</label>", + "<label for='volume{id}' class='sr-only'>" + config.i18n.volume + "</label>", "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>" ); } @@ -196,12 +209,11 @@ // Toggle captions button if(_inArray(config.controls, "captions")) { html.push( - "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>", - "<label for='captions{id}'>", + "<button type='button' data-player='captions'>", "<svg class='icon-captions-on'><use xlink:href='#" + config.iconPrefix + "-captions-on'></use></svg>", "<svg><use xlink:href='#" + config.iconPrefix + "-captions-off'></use></svg>", - "<span class='sr-only'>Toggle Captions</span>", - "</label>" + "<span class='sr-only'>" + config.i18n.toggleCaptions + "</span>", + "</button>" ); } @@ -211,7 +223,7 @@ "<button type='button' data-player='fullscreen'>", "<svg class='icon-exit-fullscreen'><use xlink:href='#" + config.iconPrefix + "-exit-fullscreen'></use></svg>", "<svg><use xlink:href='#" + config.iconPrefix + "-enter-fullscreen'></use></svg>", - "<span class='sr-only'>Toggle Fullscreen</span>", + "<span class='sr-only'>" + config.i18n.toggleFullscreen + "</span>", "</button>" ); } @@ -478,18 +490,15 @@ element.dispatchEvent(fauxEvent); } - // Toggle checkbox - function _toggleCheckbox(event) { - // Only listen for return key - if(event.keyCode && event.keyCode != 13) { - return true; - } - - // Toggle the checkbox - event.target.checked = !event.target.checked; - - // Trigger change event - _triggerEvent(event.target, "change"); + // Toggle aria-pressed state on a toggle button + function _toggleState(target, state) { + // Get state + state = (typeof state === "boolean" ? state : !target.getAttribute("aria-pressed")); + + // Set the attribute on target + target.setAttribute("aria-pressed", state); + + return state; } // Get percentage @@ -637,7 +646,7 @@ player.currentCaption = player.captions[player.subcount][1]; // Render the caption - player.captionsContainer.innerHTML = player.currentCaption; + player.captionsContainer.innerHTML = player.currentCaption.trim(); } else { // Clear the caption @@ -656,7 +665,7 @@ if (config.captions.defaultActive) { _toggleClass(player.container, config.classes.captions.active, true); - player.buttons.captions.checked = true; + _toggleState(player.buttons.captions, true); } } @@ -795,15 +804,15 @@ } } - // Setup aria attributes - function _setupAria() { + // Setup aria attribute for play + function _setupPlayAria() { // If there's no play button, bail if(!player.buttons.play) { return; } // Find the current text - var label = player.buttons.play.innerText || "Play"; + var label = player.buttons.play.innerText || config.i18n.play; // If there's a media title set, use that for the label if (typeof(config.title) !== "undefined" && config.title.length) { @@ -913,10 +922,10 @@ cc_lang_pref: "en", wmode: "transparent", modestbranding: 1, - disablekb: 1 + disablekb: 1 }, events: { - 'onReady': function(event) { + "onReady": function(event) { // Get the instance var instance = event.target; @@ -925,7 +934,7 @@ 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.paused = true; player.media.currentTime = instance.getCurrentTime(); player.media.muted = instance.isMuted(); @@ -961,7 +970,7 @@ } } }, - 'onStateChange': function(event) { + "onStateChange": function(event) { // Get the instance var instance = event.target; @@ -1010,10 +1019,10 @@ function _setupCaptions() { if(player.type === "video") { // Inject the container - player.videoContainer.insertAdjacentHTML("afterbegin", "<div class='" + config.selectors.captions.replace(".", "") + "'></div>"); + player.videoContainer.insertAdjacentHTML("afterbegin", "<div class='" + config.selectors.captions.replace(".", "") + "' aria-live='assertive'><span></span></div>"); // Cache selector - player.captionsContainer = _getElement(config.selectors.captions); + player.captionsContainer = _getElement(config.selectors.captions).querySelector("span"); // Determine if HTML5 textTracks is supported player.usingTextTracks = false; @@ -1088,7 +1097,7 @@ // Display a cue, if there is one if (this.activeCues[0] && this.activeCues[0].hasOwnProperty("text")) { - player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML()); + player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim()); } }); } @@ -1170,6 +1179,9 @@ _log("Fullscreen not supported and fallback disabled."); } + // Toggle state + _toggleState(player.buttons.fullscreen, false); + // Set control hide class hook if(config.fullscreen.hideControls) { _toggleClass(player.container, config.classes.fullscreen.hideControls, true); @@ -1224,7 +1236,8 @@ // Seek to time // The input parameter can be an event or a number function _seek(input) { - var targetTime = 0; + var targetTime = 0, + paused = player.media.paused; // Explicit position if (typeof input === "number") { @@ -1256,6 +1269,10 @@ if(player.type == "youtube") { player.embed.seekTo(targetTime); + if(paused) { + _pause(); + } + // Trigger timeupdate _triggerEvent(player.media, "timeupdate"); } @@ -1313,6 +1330,9 @@ // Set class hook _toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen); + + // Set button state + _toggleState(player.buttons.fullscreen, player.isFullscreen); // Toggle controls visibility based on mouse movement and location var hoverTimer, isMouseOver = false; @@ -1399,10 +1419,13 @@ // Mute function _toggleMute(muted) { // If the method is called without parameter, toggle based on current value - if(typeof muted === "undefined") { + if(typeof muted !== "boolean") { muted = !player.media.muted; } + // Set button state + _toggleState(player.buttons.mute, muted); + // Set mute on the player player.media.muted = muted; @@ -1435,7 +1458,7 @@ // Update checkbox for mute state if(player.supported.full && player.buttons.mute) { - player.buttons.mute.checked = (volume === 0); + _toggleState(player.buttons.mute, (volume === 0)); } } @@ -1447,11 +1470,14 @@ } // If the method is called without parameter, toggle based on current value - if(typeof show === "undefined") { + if(typeof show !== "boolean") { show = (player.container.className.indexOf(config.classes.captions.active) === -1); - player.buttons.captions.checked = show; } + // Toggle state + _toggleState(player.buttons.captions, show); + + // Add class hook _toggleClass(player.container, config.classes.captions.active, show); } @@ -1731,9 +1757,7 @@ }); // Mute - _on(player.buttons.mute, "change", function() { - _toggleMute(this.checked); - }); + _on(player.buttons.mute, "click", _toggleMute); // Fullscreen _on(player.buttons.fullscreen, "click", _toggleFullscreen); @@ -1753,9 +1777,7 @@ _on(player.media, "loadedmetadata", _displayDuration); // Captions - _on(player.buttons.captions, "change", function() { - _toggleCaptions(this.checked); - }); + _on(player.buttons.captions, "click", _toggleCaptions); // Handle the media finishing _on(player.media, "ended", function() { @@ -1780,9 +1802,6 @@ // Loading _on(player.media, "waiting canplay seeked", _checkLoading); - // Toggle checkboxes on return key (as they look like buttons) - _on(player.checkboxes, "keyup", _toggleCheckbox); - // Click video if(player.type === "video" && config.click) { _on(player.videoContainer, "click", function() { @@ -1900,7 +1919,7 @@ } // Set up aria-label for Play button with the title option - _setupAria(); + _setupPlayAria(); } // Successful setup @@ -2026,7 +2045,9 @@ element.plyr = (Object.keys(instance).length ? instance : false); // Callback - config.onSetup.apply(element.plyr); + if(typeof config.onSetup === "function") { + config.onSetup.apply(element.plyr); + } } // Add to return array even if it's already setup @@ -2036,4 +2057,4 @@ return players; } -}(this.plyr = this.plyr || {})); +}(this.plyr = this.plyr || {}));
\ No newline at end of file diff --git a/src/less/plyr.less b/src/less/plyr.less index 740a7ae7..a008fd21 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -17,7 +17,11 @@ // Font sizes @font-size-small: 14px; @font-size-base: 16px; -@font-size-large: ceil((@font-size-base * 1.5)); + +// Captions +@font-size-captions-base: ceil(@font-size-base * 1.25); +@font-size-captions-medium: ceil(@font-size-base * 1.5); +@font-size-captions-large: (@font-size-base * 2); // Controls @control-spacing: 10px; @@ -189,26 +193,31 @@ bottom: 0; left: 0; width: 100%; - padding: 20px; - min-height: 2.5em; + padding: (@control-spacing * 2) (@control-spacing * 2) (@control-spacing * 3); color: #fff; - font-size: @font-size-base; - font-weight: 600; - text-shadow: - -1px -1px 0 @gray, - 1px -1px 0 @gray, - -1px 1px 0 @gray, - 1px 1px 0 @gray; + font-size: @font-size-captions-base; text-align: center; .font-smoothing(); + span { + border-radius: 2px; + padding: 3px 10px; + background: rgba(0,0,0, .9); + } + span:empty { + display: none; + } + @media (min-width: @bp-captions-large) { - font-size: @font-size-large; + font-size: @font-size-captions-medium; } } &.captions-active &-captions { display: block; } + &.fullscreen-active &-captions { + font-size: @font-size-captions-large; + } // Player controls &-controls { @@ -236,17 +245,20 @@ } } - input + label, + // Buttons button { display: inline-block; vertical-align: middle; margin: 0 2px; padding: (@control-spacing / 2) @control-spacing; - - transition: background .3s ease, color .3s ease, opacity .3s ease; + overflow: hidden; + border: 0; + background: transparent; border-radius: 3px; cursor: pointer; - + color: @control-color; + transition: background .3s ease, color .3s ease, opacity .3s ease; + svg { width: 18px; height: 18px; @@ -254,41 +266,27 @@ fill: currentColor; transition: fill .3s ease; } - } - input + label, - .inverted:checked + label { - opacity: .5; - } - button, - .inverted + label, - input:checked + label { - color: @control-color; - opacity: 1; - } - button { - border: 0; - background: transparent; - overflow: hidden; - } - // Specificity for overriding .inverted - button:focus, - button:hover, - [type="checkbox"]:focus + label, - [type="checkbox"] + label:hover { - background: @control-bg-hover; - color: @control-color-hover; - opacity: 1; - } - button:focus, - input:focus + label { - outline: 0; + // Hover and tab focus + &.tab-focus, + &:hover { + background: @control-bg-hover; + color: @control-color-hover; + } + // Default focus + &:focus { + outline: 0; + } } + + // Hide toggle icons by default .icon-exit-fullscreen, .icon-muted, .icon-captions-on { display: none; } + + // Player time .player-time { display: inline-block; vertical-align: middle; @@ -309,7 +307,7 @@ // Add a slash in before &::before { - content: "\2044"; + content: '\2044'; margin-right: @control-spacing; } } @@ -338,7 +336,7 @@ // Arrow &::after { - content: ""; + content: ''; position: absolute; z-index: 1; top: 100%; @@ -352,14 +350,11 @@ border-width: 0 1px 1px 0; } } - label:hover .player-tooltip, - input.tab-focus:focus + label .player-tooltip, button:hover .player-tooltip, button.tab-focus:focus .player-tooltip { opacity: 1; transform: translate(-50%, 0) scale(1); } - label:hover .player-tooltip, button:hover .player-tooltip { z-index: 3; } @@ -377,7 +372,7 @@ &-buffer[value], &-played[value], - &-seek[type=range] { + &-seek[type='range'] { position: absolute; left: 0; top: 0; @@ -417,7 +412,7 @@ // Seek control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-seek[type=range] { + &-seek[type='range'] { z-index: 4; cursor: pointer; outline: 0; @@ -492,7 +487,7 @@ // Volume control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-volume[type="range"] { + &-volume[type='range'] { display: inline-block; vertical-align: middle; -webkit-appearance: none; @@ -558,7 +553,6 @@ // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html &.ios &-volume, &.ios [data-player='mute'], - &.ios [data-player='mute'] + label, &-audio.ios &-controls-right { display: none; } @@ -645,15 +639,11 @@ // Some options are hidden by default [data-player='captions'], - [data-player='captions'] + label, - [data-player='fullscreen'], - [data-player='fullscreen'] + label { + [data-player='fullscreen'] { display: none; } &.captions-enabled [data-player='captions'], - &.captions-enabled [data-player='captions'] + label, - &.fullscreen-enabled [data-player='fullscreen'], - &.fullscreen-enabled [data-player='fullscreen'] + label { + &.fullscreen-enabled [data-player='fullscreen'] { display: inline-block; } }
\ No newline at end of file diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index a4dab010..8009b0d7 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -17,7 +17,11 @@ $off-white: #D6DADD !default; // Font sizes $font-size-small: 14px !default; $font-size-base: 16px !default; -$font-size-large: ceil(($font-size-base * 1.5)) !default; + +// Captions +$font-size-captions-base: ceil(@font-size-base * 1.25) !default; +$font-size-captions-medium: ceil(@font-size-base * 1.5) !default; +$font-size-captions-large: (@font-size-base * 2) !default; // Controls $control-spacing: 10px !default; @@ -89,7 +93,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger { zoom: 1; &:before, - &:after { content: ""; display: table; } + &:after { content: ''; display: table; } &:after { clear: both; } } // Tab focus styles @@ -192,26 +196,31 @@ $bp-captions-large: 768px !default; // When captions jump to the larger bottom: 0; left: 0; width: 100%; - padding: 20px; - min-height: 2.5em; + padding: ($control-spacing * 2) ($control-spacing * 2) ($control-spacing * 3); color: #fff; - font-size: $font-size-base; - font-weight: 600; - text-shadow: - -1px -1px 0 $gray, - 1px -1px 0 $gray, - -1px 1px 0 $gray, - 1px 1px 0 $gray; + font-size: $font-size-captions-base; text-align: center; @include font-smoothing(); - @media (min-width: $bp-captions-large) { - font-size: $font-size-large; + span { + border-radius: 2px; + padding: 3px 10px; + background: rgba(0,0,0, .9); + } + span:empty { + display: none; + } + + @media (min-width: @bp-captions-large) { + font-size: $font-size-captions-medium; } } &.captions-active &-captions { display: block; } + &.fullscreen-active &-captions { + font-size: $font-size-captions-large; + } // Player controls &-controls { @@ -239,17 +248,20 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } } - input + label, + // Buttons button { display: inline-block; vertical-align: middle; margin: 0 2px; padding: ($control-spacing / 2) $control-spacing; - - transition: background .3s ease, color .3s ease, opacity .3s ease; + overflow: hidden; + border: 0; + background: transparent; border-radius: 3px; cursor: pointer; - + color: $control-color; + transition: background .3s ease, color .3s ease, opacity .3s ease; + svg { width: 18px; height: 18px; @@ -257,41 +269,27 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fill: currentColor; transition: fill .3s ease; } - } - input + label, - .inverted:checked + label { - opacity: .5; - } - button, - .inverted + label, - input:checked + label { - color: $control-color; - opacity: 1; - } - button { - border: 0; - background: transparent; - overflow: hidden; - } - // Specificity for overriding .inverted - button:focus, - button:hover, - [type="checkbox"]:focus + label, - [type="checkbox"] + label:hover { - background: $control-bg-hover; - color: $control-color-hover; - opacity: 1; - } - button:focus, - input:focus + label { - outline: 0; + // Hover and tab focus + &.tab-focus, + &:hover { + background: $control-bg-hover; + color: $control-color-hover; + } + // Default focus + &:focus { + outline: 0; + } } + + // Hide toggle icons by default .icon-exit-fullscreen, .icon-muted, .icon-captions-on { display: none; } + + // Time display .player-time { display: inline-block; vertical-align: middle; @@ -312,7 +310,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Add a slash in before &::before { - content: "\2044"; + content: '\2044'; margin-right: $control-spacing; } } @@ -339,7 +337,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger transition: transform .2s .1s ease, opacity .2s .1s ease; &::after { - content: ""; + content: ''; display: block; position: absolute; left: 50%; @@ -353,14 +351,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger border-color: $controls-bg transparent transparent; } } - label:hover .player-tooltip, - input:focus + label .player-tooltip, button:hover .player-tooltip, button:focus .player-tooltip { opacity: 1; transform: translate(-50%, 0) scale(1); } - label:hover .player-tooltip, button:hover .player-tooltip { z-index: 3; } @@ -378,7 +373,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger &-buffer[value], &-played[value], - &-seek[type=range] { + &-seek[type='range'] { position: absolute; left: 0; top: 0; @@ -418,7 +413,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Seek control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-seek[type=range] { + &-seek[type='range'] { z-index: 4; cursor: pointer; outline: 0; @@ -493,7 +488,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Volume control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-volume[type=range] { + &-volume[type='range'] { display: inline-block; vertical-align: middle; -webkit-appearance: none; @@ -559,7 +554,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html &.ios &-volume, &.ios [data-player='mute'], - &.ios [data-player='mute'] + label, &-audio.ios &-controls-right { display: none; } @@ -646,15 +640,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Some options are hidden by default [data-player='captions'], - [data-player='captions'] + label, - [data-player='fullscreen'], - [data-player='fullscreen'] + label { + [data-player='fullscreen'] { display: none; } &.captions-enabled [data-player='captions'], - &.captions-enabled [data-player='captions'] + label, - &.fullscreen-enabled [data-player='fullscreen'], - &.fullscreen-enabled [data-player='fullscreen'] + label { + &.fullscreen-enabled [data-player='fullscreen'] { display: inline-block; } } |