diff options
| author | Sam Potts <me@sampotts.me> | 2015-10-25 11:57:52 +1100 |
|---|---|---|
| committer | Sam Potts <me@sampotts.me> | 2015-10-25 11:57:52 +1100 |
| commit | 125a95e9e1e279a53f7481b3a2100dc3f8398d08 (patch) | |
| tree | 5b1f56e456f1db91568f5919e7a4cd47300dde0c | |
| parent | 58f8cdd8c827d16ceedbd0c16d2dca04f442cae3 (diff) | |
| download | plyr-125a95e9e1e279a53f7481b3a2100dc3f8398d08.tar.lz plyr-125a95e9e1e279a53f7481b3a2100dc3f8398d08.tar.xz plyr-125a95e9e1e279a53f7481b3a2100dc3f8398d08.zip | |
Audio fullscreen, Tooltip tweaks, Docs
| -rw-r--r-- | dist/plyr.css | 2 | ||||
| -rw-r--r-- | dist/plyr.js | 2 | ||||
| -rw-r--r-- | docs/dist/docs.css | 2 | ||||
| -rw-r--r-- | docs/src/less/components/examples.less | 46 | ||||
| -rw-r--r-- | readme.md | 155 | ||||
| -rw-r--r-- | src/js/plyr.js | 78 | ||||
| -rw-r--r-- | src/less/plyr.less | 43 | ||||
| -rw-r--r-- | src/sass/plyr.scss | 44 |
8 files changed, 277 insertions, 95 deletions
diff --git a/dist/plyr.css b/dist/plyr.css index de5a062e..4ad9ac55 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.plyr-captions,.plyr-controls,.plyr-controls .plyr-time{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.plyr-controls button:focus,.plyr-progress-seek[type=range]:focus,.plyr-volume[type=range]:focus{outline:0}@-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}.plyr,.plyr-video-wrapper{position:relative}.plyr{max-width:100%;min-width:290px}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle}.plyr-video-embed{padding-bottom:56.25%;height:0;overflow:hidden;background:#000}.plyr-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr-video-embed>div{position:relative;padding-bottom:200%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px 20px 30px;color:#fff;font-size:20px;text-align:center}.plyr-captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.9)}.plyr-captions span:empty{display:none}@media (min-width:768px){.plyr-captions{font-size:24px}}.plyr.captions-active .plyr-captions{display:block}.plyr.fullscreen-active .plyr-captions{font-size:32px}.plyr-controls{zoom:1;position:relative;padding:10px;background:#fff;line-height:1;text-align:center;box-shadow:0 1px 1px rgba(52,63,74,.2)}.plyr-controls:after,.plyr-controls:before{content:"";display:table}.plyr-controls:after{clear:both}.plyr-controls-right{display:block;margin:10px auto 0}@media (min-width:560px){.plyr-controls-left{float:left}.plyr-controls-right{float:right;margin-top:0}}.plyr-controls button{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;overflow:hidden;border:0;background:0 0;border-radius:3px;cursor:pointer;color:#6B7D86;transition:background .3s ease,color .3s ease,opacity .3s ease}.plyr-controls button svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.plyr-controls button.tab-focus,.plyr-controls button:hover{background:#3498DB;color:#fff}.plyr-controls .plyr-time,.plyr-tooltip{color:#6B7D86;font-size:14px;font-weight:600}.plyr-controls .icon-captions-on,.plyr-controls .icon-exit-fullscreen,.plyr-controls .icon-muted{display:none}.plyr-controls .plyr-time{display:inline-block;vertical-align:middle;margin-left:10px}.plyr-controls .plyr-time+.plyr-time{display:none}@media (min-width:560px){.plyr-controls .plyr-time+.plyr-time{display:inline-block}}.plyr-controls .plyr-time+.plyr-time::before{content:'\2044';margin-right:10px}.plyr-tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:10px 15px;opacity:0;background:#fff;border:1px solid #D6DADD;border-radius:3px;line-height:1.5;-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}.plyr-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}.plyr button.tab-focus:focus .plyr-tooltip,.plyr button:hover .plyr-tooltip{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr-tooltip{z-index:3}.plyr-progress{position:absolute;bottom:100%;left:0;right:0;width:100%;height:10px;background:rgba(86,93,100,.2)}.plyr-progress-buffer[value],.plyr-progress-played[value],.plyr-progress-seek[type=range]{position:absolute;left:0;top:0;width:100%;height:10px;margin:0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;background:0 0}.plyr-progress-buffer[value]::-webkit-progress-bar,.plyr-progress-played[value]::-webkit-progress-bar{background:0 0}.plyr-progress-buffer[value]::-webkit-progress-value,.plyr-progress-played[value]::-webkit-progress-value{background:currentColor}.plyr-progress-buffer[value]::-moz-progress-bar,.plyr-progress-played[value]::-moz-progress-bar{background:currentColor}.plyr-progress-played[value]{z-index:2;color:#3498DB}.plyr-progress-buffer[value]{color:rgba(86,93,100,.25)}.plyr-progress-seek[type=range]{z-index:4;cursor:pointer;outline:0}.plyr-progress-seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.plyr-progress-seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:20px;height:10px}.plyr-progress-seek[type=range]::-moz-range-track{background:0 0;border:0}.plyr-progress-seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:20px;height:10px}.plyr-progress-seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.plyr-progress-seek[type=range]::-ms-fill-lower,.plyr-progress-seek[type=range]::-ms-fill-upper{background:0 0;border:0}.plyr-progress-seek[type=range]::-ms-thumb{background:0 0;border:0;width:20px;height:10px}.plyr-progress-seek[type=range]::-moz-focus-outer{border:0}.plyr.loading .plyr-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}.plyr-controls [data-plyr=pause],.plyr.playing .plyr-controls [data-plyr=play]{display:none}.plyr.playing .plyr-controls [data-plyr=pause]{display:inline-block}.plyr-volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0;border:none}.plyr-volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr-volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#6B7D86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.plyr-volume[type=range]::-moz-range-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.plyr-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.plyr-volume[type=range]::-ms-fill-lower,.plyr-volume[type=range]::-ms-fill-upper{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.plyr-volume[type=range]:focus::-webkit-slider-thumb{background:#3498DB}.plyr-volume[type=range]:focus::-moz-range-thumb{background:#3498DB}.plyr-volume[type=range]:focus::-ms-thumb{background:#3498DB}.plyr-audio.ios .plyr-controls-right,.plyr.ios .plyr-volume,.plyr.ios [data-plyr=mute]{display:none}.plyr-audio.ios .plyr-controls-left{float:none}.plyr-audio .plyr-controls{padding-top:20px}.plyr-audio .plyr-progress{bottom:auto;top:0;background:#D6DADD}.plyr-fullscreen,.plyr.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.plyr-fullscreen video,.plyr.fullscreen-active video{height:100%}.plyr-fullscreen .plyr-video-wrapper,.plyr.fullscreen-active .plyr-video-wrapper{height:100%;width:100%}.plyr-fullscreen .plyr-controls,.plyr.fullscreen-active .plyr-controls{position:absolute;bottom:0;left:0;right:0}.plyr-fullscreen.fullscreen-hide-controls.playing .plyr-controls,.plyr.fullscreen-active.fullscreen-hide-controls.playing .plyr-controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease}.plyr-fullscreen.fullscreen-hide-controls.playing.plyr-hover .plyr-controls,.plyr.fullscreen-active.fullscreen-hide-controls.playing.plyr-hover .plyr-controls{-webkit-transform:translateY(0);transform:translateY(0)}.plyr-fullscreen.fullscreen-hide-controls.playing .plyr-captions,.plyr.fullscreen-active.fullscreen-hide-controls.playing .plyr-captions{bottom:5px;transition:bottom .3s .2s ease}.plyr-fullscreen .plyr-captions,.plyr-fullscreen.fullscreen-hide-controls.playing.plyr-hover .plyr-captions,.plyr.fullscreen-active .plyr-captions,.plyr.fullscreen-active.fullscreen-hide-controls.playing.plyr-hover .plyr-captions{top:auto;bottom:90px}@media (min-width:560px){.plyr-fullscreen .plyr-captions,.plyr-fullscreen.fullscreen-hide-controls.playing.plyr-hover .plyr-captions,.plyr.fullscreen-active .plyr-captions,.plyr.fullscreen-active.fullscreen-hide-controls.playing.plyr-hover .plyr-captions{bottom:60px}}.plyr.captions-active .plyr-controls .icon-captions-on,.plyr.fullscreen-active .icon-exit-fullscreen,.plyr.muted .plyr-controls .icon-muted{display:block}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr.captions-active .plyr-controls .icon-captions-on+svg,.plyr.fullscreen-active .icon-exit-fullscreen+svg,.plyr.muted .plyr-controls .icon-muted+svg{display:none}.plyr.captions-enabled [data-plyr=captions],.plyr.fullscreen-enabled [data-plyr=fullscreen]{display:inline-block}
\ No newline at end of file +.plyr-captions,.plyr-controls,.plyr-controls .plyr-time{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.plyr-controls button:focus,.plyr-progress-seek[type=range]:focus,.plyr-volume[type=range]:focus{outline:0}@-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}.plyr,.plyr-video-wrapper{position:relative}.plyr{max-width:100%;min-width:290px}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle}.plyr-video-embed{padding-bottom:56.25%;height:0;overflow:hidden;background:#000}.plyr-video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr-video-embed>div{position:relative;padding-bottom:200%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px 20px 30px;color:#fff;font-size:20px;text-align:center}.plyr-captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.9)}.plyr-captions span:empty{display:none}@media (min-width:768px){.plyr-captions{font-size:24px}}.plyr.captions-active .plyr-captions{display:block}.plyr.fullscreen-active .plyr-captions{font-size:32px}.plyr-controls{zoom:1;position:relative;padding:10px;background:#fff;line-height:1;text-align:center;box-shadow:0 1px 1px rgba(52,63,74,.2)}.plyr-controls:after,.plyr-controls:before{content:"";display:table}.plyr-controls:after{clear:both}.plyr-controls-right{display:block;margin:10px auto 0}@media (min-width:560px){.plyr-controls-left{float:left}.plyr-controls-right{float:right;margin-top:0}}.plyr-controls button{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;overflow:hidden;border:0;background:0 0;border-radius:3px;cursor:pointer;color:#6B7D86;transition:background .3s ease,color .3s ease,opacity .3s ease}.plyr-controls button svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.plyr-controls button.tab-focus,.plyr-controls button:hover{background:#3498DB;color:#fff}.plyr-controls .plyr-time,.plyr-tooltip{color:#6B7D86;font-size:14px;font-weight:600}.plyr-controls .icon-captions-on,.plyr-controls .icon-exit-fullscreen,.plyr-controls .icon-muted{display:none}.plyr-controls .plyr-time{display:inline-block;vertical-align:middle;margin-left:10px}.plyr-controls .plyr-time+.plyr-time{display:none}@media (min-width:560px){.plyr-controls .plyr-time+.plyr-time{display:inline-block}}.plyr-controls .plyr-time+.plyr-time::before{content:'\2044';margin-right:10px}.plyr-tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:10px 15px;opacity:0;background:#fff;box-shadow:0 0 5px rgba(52,63,74,.1),0 0 0 1px rgba(52,63,74,.1);border-radius:3px;line-height:1.5;-webkit-transform:translate(-50%,30px) scale(.8);transform:translate(-50%,30px) scale(.8);-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}.plyr-tooltip::after,.plyr-tooltip::before{content:'';position:absolute;width:0;height:0;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.plyr-tooltip::after{bottom:-8px;border-right:7px solid transparent;border-top:7px solid rgba(52,63,74,.1);border-left:7px solid transparent;z-index:1}.plyr-tooltip::before{bottom:-6px;border-right:6px solid transparent;border-top:6px solid #fff;border-left:6px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr-tooltip,.plyr button:hover .plyr-tooltip{opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr-tooltip{z-index:3}.plyr-progress{position:absolute;bottom:100%;left:0;right:0;width:100%;height:10px;background:rgba(86,93,100,.2)}.plyr-progress-buffer[value],.plyr-progress-played[value],.plyr-progress-seek[type=range]{position:absolute;left:0;top:0;width:100%;height:10px;margin:0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;border:none;background:0 0}.plyr-progress-buffer[value]::-webkit-progress-bar,.plyr-progress-played[value]::-webkit-progress-bar{background:0 0}.plyr-progress-buffer[value]::-webkit-progress-value,.plyr-progress-played[value]::-webkit-progress-value{background:currentColor}.plyr-progress-buffer[value]::-moz-progress-bar,.plyr-progress-played[value]::-moz-progress-bar{background:currentColor}.plyr-progress-played[value]{z-index:2;color:#3498DB}.plyr-progress-buffer[value]{color:rgba(86,93,100,.25)}.plyr-progress-seek[type=range]{z-index:4;cursor:pointer;outline:0}.plyr-progress-seek[type=range]::-webkit-slider-runnable-track{background:0 0;border:0}.plyr-progress-seek[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:0;width:20px;height:10px}.plyr-progress-seek[type=range]::-moz-range-track{background:0 0;border:0}.plyr-progress-seek[type=range]::-moz-range-thumb{-moz-appearance:none;background:0 0;border:0;width:20px;height:10px}.plyr-progress-seek[type=range]::-ms-track{color:transparent;background:0 0;border:0}.plyr-progress-seek[type=range]::-ms-fill-lower,.plyr-progress-seek[type=range]::-ms-fill-upper{background:0 0;border:0}.plyr-progress-seek[type=range]::-ms-thumb{background:0 0;border:0;width:20px;height:10px}.plyr-progress-seek[type=range]::-moz-focus-outer{border:0}.plyr.loading .plyr-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}.plyr-controls [data-plyr=pause],.plyr.playing .plyr-controls [data-plyr=play]{display:none}.plyr.playing .plyr-controls [data-plyr=pause]{display:inline-block}.plyr-volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0;border:none}.plyr-volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr-volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#6B7D86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.plyr-volume[type=range]::-moz-range-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.plyr-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.plyr-volume[type=range]::-ms-fill-lower,.plyr-volume[type=range]::-ms-fill-upper{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.plyr-volume[type=range]:focus::-webkit-slider-thumb{background:#3498DB}.plyr-volume[type=range]:focus::-moz-range-thumb{background:#3498DB}.plyr-volume[type=range]:focus::-ms-thumb{background:#3498DB}.plyr-audio.ios .plyr-controls-right,.plyr.ios .plyr-volume,.plyr.ios [data-plyr=mute]{display:none}.plyr-audio.ios .plyr-controls-left{float:none}.plyr-audio .plyr-controls{padding-top:20px}.plyr-audio .plyr-progress{bottom:auto;top:0;background:#D6DADD}.plyr-fullscreen,.plyr.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.plyr-fullscreen video,.plyr.fullscreen-active video{height:100%}.plyr-fullscreen .plyr-video-wrapper,.plyr.fullscreen-active .plyr-video-wrapper{height:100%;width:100%}.plyr-fullscreen .plyr-controls,.plyr.fullscreen-active .plyr-controls{position:absolute;bottom:0;left:0;right:0}.plyr-fullscreen.fullscreen-hide-controls.playing .plyr-controls,.plyr.fullscreen-active.fullscreen-hide-controls.playing .plyr-controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease}.plyr-fullscreen.fullscreen-hide-controls.playing.plyr-hover .plyr-controls,.plyr.fullscreen-active.fullscreen-hide-controls.playing.plyr-hover .plyr-controls{-webkit-transform:translateY(0);transform:translateY(0)}.plyr-fullscreen.fullscreen-hide-controls.playing .plyr-captions,.plyr.fullscreen-active.fullscreen-hide-controls.playing .plyr-captions{bottom:5px;transition:bottom .3s .2s ease}.plyr-fullscreen .plyr-captions,.plyr-fullscreen.fullscreen-hide-controls.playing.plyr-hover .plyr-captions,.plyr.fullscreen-active .plyr-captions,.plyr.fullscreen-active.fullscreen-hide-controls.playing.plyr-hover .plyr-captions{top:auto;bottom:90px}@media (min-width:560px){.plyr-fullscreen .plyr-captions,.plyr-fullscreen.fullscreen-hide-controls.playing.plyr-hover .plyr-captions,.plyr.fullscreen-active .plyr-captions,.plyr.fullscreen-active.fullscreen-hide-controls.playing.plyr-hover .plyr-captions{bottom:60px}}.plyr.captions-active .plyr-controls .icon-captions-on,.plyr.fullscreen-active .icon-exit-fullscreen,.plyr.muted .plyr-controls .icon-muted{display:block}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr.captions-active .plyr-controls .icon-captions-on+svg,.plyr.fullscreen-active .icon-exit-fullscreen+svg,.plyr.muted .plyr-controls .icon-muted+svg{display:none}.plyr.captions-enabled [data-plyr=captions],.plyr.fullscreen-enabled [data-plyr=fullscreen]{display:inline-block}
\ No newline at end of file diff --git a/dist/plyr.js b/dist/plyr.js index 3e79617e..6312b38d 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1 +1 @@ -!function(e){"use strict";function t(){var e=['<div class="plyr-controls">','<div class="plyr-progress">','<label for="seek{id}" class="sr-only">Seek</label>','<input id="seek{id}" class="plyr-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-plyr="seek">','<progress class="plyr-progress-played" max="100" value="0">',"<span>0</span>% "+E.i18n.played,"</progress>",'<progress class="plyr-progress-buffer" max="100" value="0">',"<span>0</span>% "+E.i18n.buffered,"</progress>","</div>",'<span class="plyr-controls-left">'];return s(E.controls,"restart")&&e.push('<button type="button" data-plyr="restart">','<svg><use xlink:href="#'+E.iconPrefix+'-restart" /></svg>','<span class="sr-only">'+E.i18n.restart+"</span>","</button>"),s(E.controls,"rewind")&&e.push('<button type="button" data-plyr="rewind">','<svg><use xlink:href="#'+E.iconPrefix+'-rewind" /></svg>','<span class="sr-only">'+E.i18n.rewind+"</span>","</button>"),s(E.controls,"play")&&e.push('<button type="button" data-plyr="play">','<svg><use xlink:href="#'+E.iconPrefix+'-play" /></svg>','<span class="sr-only">'+E.i18n.play+"</span>","</button>",'<button type="button" data-plyr="pause">','<svg><use xlink:href="#'+E.iconPrefix+'-pause" /></svg>','<span class="sr-only">'+E.i18n.pause+"</span>","</button>"),s(E.controls,"fast-forward")&&e.push('<button type="button" data-plyr="fast-forward">','<svg><use xlink:href="#'+E.iconPrefix+'-fast-forward" /></svg>','<span class="sr-only">'+E.i18n.forward+"</span>","</button>"),s(E.controls,"current-time")&&e.push('<span class="plyr-time">','<span class="sr-only">'+E.i18n.currentTime+"</span>",'<span class="plyr-current-time">00:00</span>',"</span>"),s(E.controls,"duration")&&e.push('<span class="plyr-time">','<span class="sr-only">'+E.i18n.duration+"</span>",'<span class="plyr-duration">00:00</span>',"</span>"),e.push("</span>",'<span class="plyr-controls-right">'),s(E.controls,"mute")&&e.push('<button type="button" data-plyr="mute">','<svg class="icon-muted"><use xlink:href="#'+E.iconPrefix+'-muted" /></svg>','<svg><use xlink:href="#'+E.iconPrefix+'-volume" /></svg>','<span class="sr-only">'+E.i18n.toggleMute+"</span>","</button>"),s(E.controls,"volume")&&e.push('<label for="volume{id}" class="sr-only">'+E.i18n.volume+"</label>",'<input id="volume{id}" class="plyr-volume" type="range" min="0" max="10" value="5" data-plyr="volume">'),s(E.controls,"captions")&&e.push('<button type="button" data-plyr="captions">','<svg class="icon-captions-on"><use xlink:href="#'+E.iconPrefix+'-captions-on" /></svg>','<svg><use xlink:href="#'+E.iconPrefix+'-captions-off" /></svg>','<span class="sr-only">'+E.i18n.toggleCaptions+"</span>","</button>"),s(E.controls,"fullscreen")&&e.push('<button type="button" data-plyr="fullscreen">','<svg class="icon-exit-fullscreen"><use xlink:href="#'+E.iconPrefix+'-exit-fullscreen" /></svg>','<svg><use xlink:href="#'+E.iconPrefix+'-enter-fullscreen" /></svg>','<span class="sr-only">'+E.i18n.toggleFullscreen+"</span>","</button>"),e.push("</span>","</div>"),e.join("")}function n(e,t){E.debug&&window.console&&console[t?"error":"log"](e)}function r(){var e,t,n,r=navigator.userAgent,a=navigator.appName,o=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",o="11;"):-1!==(t=r.indexOf("MSIE"))?(a="IE",o=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(a="Chrome",o=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(a="Safari",o=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(o=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(a="Firefox",o=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(a=r.substring(e,t),o=r.substring(t+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(n=o.indexOf(";"))&&(o=o.substring(0,n)),-1!==(n=o.indexOf(" "))&&(o=o.substring(0,n)),s=parseInt(""+o,10),isNaN(s)&&(o=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10)),{name:a,version:s,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 o(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 s(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function i(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function l(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],o=a.parentNode,s=a.nextSibling;r.appendChild(a),s?o.insertBefore(r,s):o.appendChild(r)}}function u(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function c(e){e.parentNode.removeChild(e)}function p(e,t){e.insertBefore(t,e.firstChild)}function d(e,t){for(var n in t)e.setAttribute(n,"boolean"==typeof t[n]&&t[n]?"":t[n])}function m(e,t,n){var r=document.createElement(e);d(r,n),p(t,r)}function f(e){return e.replace(".","")}function y(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 b(e,t,n,r){var a=t.split(" ");if(e instanceof NodeList)for(var o=0;o<e.length;o++)e[o]instanceof Node&&b(e[o],arguments[1],arguments[2],arguments[3]);else for(var s=0;s<a.length;s++)e[r?"addEventListener":"removeEventListener"](a[s],n,!1)}function v(e,t,n){e&&b(e,t,n,!0)}function g(e,t,n){e&&b(e,t,n,!1)}function h(e,t){var n=document.createEvent("MouseEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function w(e,t){return t="boolean"==typeof t?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t}function k(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function T(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},T(e[n],t[n])):e[n]=t[n];return e}function x(){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 F(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function C(T){function C(e){if(!ve.usingTextTracks&&"video"===ve.type&&ve.supported.full&&(ve.subcount=0,e="number"==typeof e?e:ve.media.currentTime,ve.captions[ve.subcount])){for(;P(ve.captions[ve.subcount][0])<e.toFixed(1);)if(ve.subcount++,ve.subcount>ve.captions.length-1){ve.subcount=ve.captions.length-1;break}if(ve.media.currentTime.toFixed(1)>=N(ve.captions[ve.subcount][0])&&ve.media.currentTime.toFixed(1)<=P(ve.captions[ve.subcount][0])){ve.currentCaption=ve.captions[ve.subcount][1];var t=ve.currentCaption.trim();ve.captionsContainer.innerHTML!=t&&(ve.captionsContainer.innerHTML="",ve.captionsContainer.innerHTML=t)}else ve.captionsContainer.innerHTML=""}}function A(){ve.buttons.captions&&(y(ve.container,E.classes.captions.enabled,!0),E.captions.defaultActive&&(y(ve.container,E.classes.captions.active,!0),w(ve.buttons.captions,!0)))}function N(e){var t=[];return t=e.split(" --> "),I(t[0])}function P(e){var t=[];return t=e.split(" --> "),I(t[1])}function I(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 M(e){return ve.container.querySelectorAll(e)}function L(e){return M(e)[0]}function O(){try{return window.self!==window.top}catch(e){return!0}}function q(){var e=E.html;if(n("Injecting custom controls."),e||(e=t()),e=i(e,"{seektime}",E.seekTime),e=i(e,"{id}",Math.floor(1e4*Math.random())),ve.container.insertAdjacentHTML("beforeend",e),E.tooltips)for(var r=M(E.selectors.labels),a=r.length-1;a>=0;a--){var o=r[a];y(o,E.classes.hidden,!1),y(o,E.classes.tooltip,!0)}}function V(){try{return ve.controls=L(E.selectors.controls),ve.buttons={},ve.buttons.seek=L(E.selectors.buttons.seek),ve.buttons.play=L(E.selectors.buttons.play),ve.buttons.pause=L(E.selectors.buttons.pause),ve.buttons.restart=L(E.selectors.buttons.restart),ve.buttons.rewind=L(E.selectors.buttons.rewind),ve.buttons.forward=L(E.selectors.buttons.forward),ve.buttons.fullscreen=L(E.selectors.buttons.fullscreen),ve.buttons.mute=L(E.selectors.buttons.mute),ve.buttons.captions=L(E.selectors.buttons.captions),ve.checkboxes=M('[type="checkbox"]'),ve.progress={},ve.progress.container=L(E.selectors.progress.container),ve.progress.buffer={},ve.progress.buffer.bar=L(E.selectors.progress.buffer),ve.progress.buffer.text=ve.progress.buffer.bar&&ve.progress.buffer.bar.getElementsByTagName("span")[0],ve.progress.played={},ve.progress.played.bar=L(E.selectors.progress.played),ve.progress.played.text=ve.progress.played.bar&&ve.progress.played.bar.getElementsByTagName("span")[0],ve.volume=L(E.selectors.buttons.volume),ve.duration=L(E.selectors.duration),ve.currentTime=L(E.selectors.currentTime),ve.seekTime=M(E.selectors.seekTime),!0}catch(e){return n("It looks like there's a problem with your controls html. Bailing.",!0),ve.media.setAttribute("controls",""),!1}}function H(){if(ve.buttons.play){var e=ve.buttons.play.innerText||E.i18n.play;"undefined"!=typeof E.title&&E.title.length&&(e+=", "+E.title),ve.buttons.play.setAttribute("aria-label",e)}}function j(){if(!ve.media)return n("No audio or video element found!",!0),!1;if(ve.supported.full&&(ve.media.removeAttribute("controls"),y(ve.container,E.classes.type.replace("{0}",ve.type),!0),y(ve.container,E.classes.stopped,E.autoplay),ve.browser.ios&&y(ve.container,"ios",!0),"video"===ve.type)){var e=document.createElement("div");e.setAttribute("class",E.classes.videoWrapper),l(ve.media,e),ve.videoContainer=e}s(E.types.embed,ve.type)?(D(ve.embedId,ve.type),ve.embedId=null):E.autoplay&&$()}function D(e){for(var t=document.createElement("div"),n=ve.type+"-"+Math.floor(1e4*Math.random()),r=M('[id^="'+ve.type+'-"]'),a=r.length-1;a>=0;a--)c(r[a]);if(t.setAttribute("id",n),y(ve.media,E.classes.videoWrapper,!0),y(ve.media,E.classes.embedWrapper,!0),"youtube"===ve.type)ve.media.appendChild(t),"object"==typeof YT?R(e,t):(o(E.urls.youtube.api),window.onYouTubeIframeAPIReady=function(){R(e,t)});else if("vimeo"===ve.type){var s=document.createElement("iframe");if(s.loaded=!1,v(s,"load",function(){s.loaded=!0}),d(s,{src:"https://player.vimeo.com/video/"+e+"?player_id="+n+"&api=1&badge=0&byline=0&portrait=0&title=0",id:n,webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:"",frameborder:0}),t.appendChild(s),ve.media.appendChild(t),"function"==typeof Froogaloop)v(s,"load",_);else{o(E.urls.vimeo.api);var i=window.setInterval(function(){"$f"in window&&s.loaded&&(window.clearInterval(i),_.call(s))},50)}}}function B(){ve.supported.full&&(ve.container.querySelectorAll(E.selectors.controls).length||ye()),te(),ne()}function R(e,t){"timer"in ve||(ve.timer={}),ve.embed=new YT.Player(t.id,{videoId:e,playerVars:{autoplay:E.autoplay?1:0,controls:ve.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:E.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1},events:{onReady:function(e){var t=e.target;ve.media.play=function(){t.playVideo()},ve.media.pause=function(){t.pauseVideo()},ve.media.stop=function(){t.stopVideo()},ve.media.duration=t.getDuration(),ve.media.paused=!E.autoplay,ve.media.currentTime=t.getCurrentTime(),ve.media.muted=t.isMuted(),h(ve.media,"timeupdate"),window.clearInterval(ve.timer.buffering),ve.timer.buffering=window.setInterval(function(){ve.media.buffered=t.getVideoLoadedFraction(),h(ve.media,"progress"),1===ve.media.buffered&&window.clearInterval(ve.timer.buffering)},200),B(),E.displayDuration&&ie()},onStateChange:function(e){var t=e.target;switch(window.clearInterval(ve.timer.playing),e.data){case 0:ve.media.paused=!0,h(ve.media,"ended");break;case 1:ve.media.paused=!1,h(ve.media,"play"),ve.timer.playing=window.setInterval(function(){ve.media.currentTime=t.getCurrentTime(),h(ve.media,"timeupdate")},200);break;case 2:ve.media.paused=!0,h(ve.media,"pause")}}}})}function _(){ve.embed=$f(this),ve.embed.addEvent("ready",function(){ve.media.play=function(){ve.embed.api("play")},ve.media.pause=function(){ve.embed.api("pause")},ve.media.stop=function(){ve.embed.api("stop")},ve.media.paused=!E.autoplay,ve.media.currentTime=0,B(),ve.embed.api("getCurrentTime",function(e){ve.media.currentTime=e,h(ve.media,"timeupdate")}),ve.embed.api("getDuration",function(e){ve.media.duration=e,ve.supported.full&&E.displayDuration&&ie()}),ve.embed.addEvent("play",function(){ve.media.paused=!1,h(ve.media,"play")}),ve.embed.addEvent("pause",function(){ve.media.paused=!0,h(ve.media,"pause")}),ve.embed.addEvent("playProgress",function(e){ve.media.currentTime=e.seconds,h(ve.media,"timeupdate")}),ve.embed.addEvent("loadProgress",function(e){ve.media.buffered=e.percent,h(ve.media,"progress")}),ve.embed.addEvent("finish",function(){ve.media.paused=!0,h(ve.media,"ended")})})}function W(){if("video"===ve.type){L(E.selectors.captions)||ve.videoContainer.insertAdjacentHTML("afterbegin",'<div class="'+f(E.selectors.captions)+'"><span></span></div>'),ve.captionsContainer=L(E.selectors.captions).querySelector("span"),ve.usingTextTracks=!1,ve.media.textTracks&&(ve.usingTextTracks=!0);for(var e,t="",r=ve.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(ve.captionExists=!0,""===t?(ve.captionExists=!1,n("No caption track found.")):n("Caption track found; URI: "+t),ve.captionExists){for(var o=ve.media.textTracks,s=0;s<o.length;s++)o[s].mode="hidden";if(A(ve),("IE"===ve.browser.name&&ve.browser.version>=10||"Firefox"===ve.browser.name&&ve.browser.version>=31||"Chrome"===ve.browser.name&&ve.browser.version>=43||"Safari"===ve.browser.name&&ve.browser.version>=7)&&(n("Detected unsupported browser for HTML5 captions. Using fallback."),ve.usingTextTracks=!1),ve.usingTextTracks){n("TextTracks supported.");for(var i=0;i<o.length;i++){var l=o[i];("captions"===l.kind||"subtitles"===l.kind)&&v(l,"cuechange",function(){ve.captionsContainer.innerHTML="",this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&ve.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim())})}}else if(n("TextTracks not supported so rendering captions manually."),ve.currentCaption="",ve.captions=[],""!==t){var u=new XMLHttpRequest;u.onreadystatechange=function(){if(4===u.readyState)if(200===u.status){var e,t=[],r=u.responseText;t=r.split("\n\n");for(var a=0;a<t.length;a++)e=t[a],ve.captions[a]=[],ve.captions[a]=e.split("\n");ve.captions.shift(),n("Successfully loaded the caption file via AJAX.")}else n("There was a problem loading the caption file via AJAX.",!0)},u.open("get",t,!0),u.send()}if("Safari"===ve.browser.name&&ve.browser.version>=7){n("Safari 7+ detected; removing track from DOM."),o=ve.media.getElementsByTagName("track");for(var c=0;c<o.length;c++)ve.media.removeChild(o[c])}}else y(ve.container,E.classes.captions.enabled)}}function z(){if("audio"!=ve.type&&E.fullscreen.enabled){var e=S.supportsFullScreen;e||E.fullscreen.fallback&&!O()?(n((e?"Native":"Fallback")+" fullscreen enabled."),y(ve.container,E.classes.fullscreen.enabled,!0)):n("Fullscreen not supported and fallback disabled."),w(ve.buttons.fullscreen,!1),E.fullscreen.hideControls&&y(ve.container,E.classes.fullscreen.hideControls,!0)}}function $(){ve.media.play()}function U(){ve.media.pause()}function X(e){e===!0?$():e===!1?U():ve.media[ve.media.paused?"play":"pause"]()}function Y(e){"number"!=typeof e&&(e=E.seekTime),G(ve.media.currentTime-e)}function J(e){"number"!=typeof e&&(e=E.seekTime),G(ve.media.currentTime+e)}function G(e){var t=0,r=ve.media.paused;"number"==typeof e?t=e:"object"!=typeof e||"input"!==e.type&&"change"!==e.type||(t=e.target.value/e.target.max*ve.media.duration),0>t?t=0:t>ve.media.duration&&(t=ve.media.duration);try{ve.media.currentTime=t.toFixed(1)}catch(a){}"embed"in ve&&("youtube"===ve.type&&ve.embed.seekTo(t),"vimeo"===ve.type&&ve.embed.api("seekTo",t),h(ve.media,"timeupdate"),r&&U()),n("Seeking to "+ve.media.currentTime+" seconds"),C(t)}function K(){y(ve.container,E.classes.playing,!ve.media.paused),y(ve.container,E.classes.stopped,ve.media.paused)}function Q(e){function t(){y(ve.container,E.classes.hover,!0),window.clearTimeout(a),o||(a=window.setTimeout(function(){y(ve.container,E.classes.hover,!1)},2e3))}function n(e){o="mouseenter"===e.type}var r=S.supportsFullScreen;e&&e.type===S.fullScreenEventName?ve.isFullscreen=S.isFullScreen(ve.container):r?(S.isFullScreen(ve.container)?S.cancelFullScreen():S.requestFullScreen(ve.container),ve.isFullscreen=S.isFullScreen(ve.container)):(ve.isFullscreen=!ve.isFullscreen,ve.isFullscreen?(v(document,"keyup",Z),document.body.style.overflow="hidden"):(g(document,"keyup",Z),document.body.style.overflow="")),y(ve.container,E.classes.fullscreen.active,ve.isFullscreen),w(ve.buttons.fullscreen,ve.isFullscreen);var a,o=!1;E.fullscreen.hideControls&&(y(ve.controls,E.classes.hover,!1),b(ve.controls,"mouseenter mouseleave",n,ve.isFullscreen),b(ve.container,"mousemove",t,ve.isFullscreen))}function Z(e){27===(e.which||e.charCode||e.keyCode)&&ve.isFullscreen&&Q()}function ee(e){"boolean"!=typeof e&&(e=!ve.media.muted),w(ve.buttons.mute,e),ve.media.muted=e,"youtube"===ve.type&&(ve.embed[ve.media.muted?"mute":"unMute"](),h(ve.media,"volumechange"))}function te(e){"undefined"==typeof e&&(e=E.storage.enabled&&F().supported?window.localStorage[E.storage.key]||E.volume:E.volume),e>10&&(e=10),0>e&&(e=0),ve.media.volume=parseFloat(e/10),E.volume=e,"youtube"===ve.type&&ve.embed.setVolume(100*ve.media.volume),"vimeo"===ve.type&&ve.embed.api("setVolume",ve.media.volume),"embed"in ve&&h(ve.media,"volumechange"),ve.media.muted&&e>0&&ee()}function ne(){var e=ve.media.muted?0:10*ve.media.volume;ve.supported.full&&ve.volume&&(ve.volume.value=e),E.storage.enabled&&F().supported&&window.localStorage.setItem(E.storage.key,e),y(ve.container,E.classes.muted,0===e),ve.supported.full&&ve.buttons.mute&&w(ve.buttons.mute,0===e)}function re(e){ve.supported.full&&ve.buttons.captions&&("boolean"!=typeof e&&(e=-1===ve.container.className.indexOf(E.classes.captions.active)),w(ve.buttons.captions,e),y(ve.container,E.classes.captions.active,e))}function ae(e){var t="waiting"===e.type;clearTimeout(ve.loadingTimer),ve.loadingTimer=setTimeout(function(){y(ve.container,E.classes.loading,t)},t?250:0)}function oe(e){var t=ve.progress.played.bar,n=ve.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=k(ve.media.currentTime,ve.media.duration),"timeupdate"==e.type&&ve.buttons.seek&&(ve.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=ve.progress.buffer.bar,n=ve.progress.buffer.text,r=function(){var e=ve.media.buffered;return e&&e.length?k(e.end(0),ve.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function se(e,t){if(t){isNaN(e)&&(e=0),ve.secs=parseInt(e%60),ve.mins=parseInt(e/60%60),ve.hours=parseInt(e/60/60%60);var n=parseInt(ve.media.duration/60/60%60)>0;ve.secs=("0"+ve.secs).slice(-2),ve.mins=("0"+ve.mins).slice(-2),t.innerHTML=(n?ve.hours+":":"")+ve.mins+":"+ve.secs}}function ie(){var e=ve.media.duration||0;!ve.duration&&E.displayDuration&&ve.media.paused&&se(e,ve.currentTime),ve.duration&&se(e,ve.duration)}function le(e){se(ve.media.currentTime,ve.currentTime),oe(e)}function ue(e,t){if("string"==typeof t)m(e,ve.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)m(e,ve.media,t[n])}function ce(e){if("undefined"!=typeof e){switch(U(),"youtube"===ve.type?(ve.embed.destroy(),window.clearInterval(ve.timer.buffering),window.clearInterval(ve.timer.playing)):"video"===ve.type&&c(ve.videoContainer),c(ve.media),"type"in e&&e.type!==ve.type&&(ve.type=e.type),ve.type){case"video":ve.media=document.createElement("video");break;case"audio":ve.media=document.createElement("audio");break;case"youtube":case"vimeo":ve.media=document.createElement("div"),ve.embedId=e.sources}p(ve.container,ve.media),s(E.types.html5,ve.type)&&(E.crossorigin&&ve.media.setAttribute("crossorigin",""),E.autoplay&&ve.media.setAttribute("autoplay",""),"poster"in e&&ve.media.setAttribute("poster",e.poster),E.loop&&ve.media.setAttribute("loop","")),ve.container.className=ve.originalClassName,E.autoplay=e.autoplay||E.autoplay,s(E.types.embed,ve.type)&&(ve.embedId=e.sources),s(E.types.html5,ve.type)&&ue("source",e.sources),j(),be(),s(E.types.html5,ve.type)&&(te(),ne(),ve.supported.full&&(le(),K()),"tracks"in e&&(ue("track",e.tracks),W()),ve.media.load(),E.autoplay&&$()),"title"in e&&(E.title=e.title,H())}}function pe(e){"video"===ve.type&&ve.media.setAttribute("poster",e)}function de(){function e(){var e=document.activeElement;e&&e!=document.body?document.querySelector&&(e=document.querySelector(":focus")):e=null;for(var t in ve.buttons){var n=ve.buttons[t];y(n,"tab-focus",n===e)}}var t="IE"==ve.browser.name?"change":"input";v(window,"keyup",function(t){var n=t.keyCode?t.keyCode:t.which;9==n&&e()});for(var n in ve.buttons){var r=ve.buttons[n];v(r,"blur",function(){y(r,"tab-focus",!1)})}v(ve.buttons.play,"click",function(){$(),setTimeout(function(){ve.buttons.pause.focus()},100)}),v(ve.buttons.pause,"click",function(){U(),setTimeout(function(){ve.buttons.play.focus()},100)}),v(ve.buttons.restart,"click",G),v(ve.buttons.rewind,"click",Y),v(ve.buttons.forward,"click",J),v(ve.buttons.seek,t,G),v(ve.volume,t,function(){te(this.value)}),v(ve.buttons.mute,"click",ee),v(ve.buttons.fullscreen,"click",Q),S.supportsFullScreen&&v(document,S.fullScreenEventName,Q),v(ve.media,"timeupdate seeking",le),v(ve.media,"timeupdate",C),v(ve.media,"loadedmetadata",ie),v(ve.buttons.captions,"click",re),v(ve.media,"ended",function(){"video"===ve.type&&(ve.captionsContainer.innerHTML=""),K()}),v(ve.media,"progress playing",oe),v(ve.media,"volumechange",ne),v(ve.media,"play pause",K),v(ve.media,"waiting canplay seeked",ae),"video"===ve.type&&E.click&&v(ve.videoContainer,"click",function(){ve.media.paused?h(ve.buttons.play,"click"):ve.media.ended?(G(),h(ve.buttons.play,"click")):h(ve.buttons.pause,"click")})}function me(){if(!ve.init)return null;if(ve.container.setAttribute("class",f(E.selectors.container)),ve.init=!1,c(L(E.selectors.controls)),"youtube"===ve.type)return void ve.embed.destroy();"video"===ve.type&&(c(L(E.selectors.captions)),u(ve.videoContainer)),ve.media.setAttribute("controls","");var e=ve.media.cloneNode(!0);ve.media.parentNode.replaceChild(e,ve.media)}function fe(){if(ve.init)return null;S=x(),ve.browser=r(),ve.media=ve.container.querySelectorAll("audio, video, div")[0],ve.originalClassName=ve.container.className;var t=ve.media.tagName.toLowerCase();if("div"===t?(ve.type=ve.media.getAttribute("data-type"),ve.embedId=ve.media.getAttribute("data-video-id"),ve.media.removeAttribute("data-type"),ve.media.removeAttribute("data-video-id")):(ve.type=t,E.crossorigin=null!==ve.media.getAttribute("crossorigin"),E.autoplay=E.autoplay||null!==ve.media.getAttribute("autoplay"),E.loop=E.loop||null!==ve.media.getAttribute("loop")),ve.supported=e.supported(ve.type),!ve.supported.basic)return!1;if(n(ve.browser.name+" "+ve.browser.version),j(),"video"==ve.type||"audio"==ve.type){if(!ve.supported.full)return void(ve.init=!0);ye(),E.displayDuration&&ie(),H()}ve.init=!0}function ye(){return q(),V()?(W(),be(),te(),void ne()):!1}function be(){z(),de()}var ve=this;return ve.container=T,fe(),ve.init?{media:ve.media,play:$,pause:U,restart:G,rewind:Y,forward:J,seek:G,source:ce,poster:pe,setVolume:te,togglePlay:X,toggleMute:ee,toggleCaptions:re,toggleFullscreen:Q,isFullscreen:function(){return ve.isFullscreen||!1},support:function(e){return a(ve,e)},destroy:me,restore:fe}:{}}var S,E,A={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,iconPrefix:"icon",selectors:{container:".plyr",controls:".plyr-controls",labels:"[data-plyr] .sr-only, label .sr-only",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',volume:'[data-plyr="volume"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},progress:{container:".plyr-progress",buffer:".plyr-progress-buffer",played:".plyr-progress-played"},captions:".plyr-captions",currentTime:".plyr-current-time",duration:".plyr-duration"},classes:{videoWrapper:"plyr-video-wrapper",embedWrapper:"plyr-video-embed",type:"plyr-{0}",stopped:"stopped",playing:"playing",muted:"muted",loading:"loading",tooltip:"plyr-tooltip",hidden:"sr-only",hover:"plyr-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"},types:{embed:["youtube","vimeo"],html5:["video","audio"]},urls:{vimeo:{api:"https://cdn.rawgit.com/vimeo/player-api/master/javascript/froogaloop.js"},youtube:{api:"https://www.youtube.com/iframe_api"}}};e.supported=function(e){var t,n,a=r(),o="IE"===a.name&&a.version<=9,s=/iPhone|iPod/i.test(navigator.userAgent),i=!!document.createElement("audio").canPlayType,l=!!document.createElement("video").canPlayType;switch(e){case"video":t=l,n=t&&!o&&!s;break;case"audio":t=i,n=t&&!o;break;case"vimeo":case"youtube":t=!0,n=!o&&!s;break;default:t=i&&l,n=t&&!o}return{basic:t,full:n}},e.setup=function(t,n){var r=[];if("string"==typeof t?t=document.querySelectorAll(t):t instanceof HTMLElement?t=[t]:t instanceof NodeList||"string"==typeof t||("undefined"==typeof n&&"object"==typeof t&&(n=t),t=document.querySelectorAll(A.selectors.container)),E=T(A,n),!E.enabled||!e.supported().basic)return!1;for(var a=t.length-1;a>=0;a--){var o=t[a];if("undefined"==typeof o.plyr){var s=new C(o);o.plyr=Object.keys(s).length?s:!1,"function"==typeof E.onSetup&&E.onSetup.apply(o.plyr)}r.push(o.plyr)}return r}}(this.plyr=this.plyr||{});
\ No newline at end of file +!function(e){"use strict";function t(){var e=['<div class="plyr-controls">','<div class="plyr-progress">','<label for="seek{id}" class="sr-only">Seek</label>','<input id="seek{id}" class="plyr-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-plyr="seek">','<progress class="plyr-progress-played" max="100" value="0">',"<span>0</span>% "+E.i18n.played,"</progress>",'<progress class="plyr-progress-buffer" max="100" value="0">',"<span>0</span>% "+E.i18n.buffered,"</progress>","</div>",'<span class="plyr-controls-left">'];return s(E.controls,"restart")&&e.push('<button type="button" data-plyr="restart">','<svg><use xlink:href="#'+E.iconPrefix+'-restart" /></svg>','<span class="sr-only">'+E.i18n.restart+"</span>","</button>"),s(E.controls,"rewind")&&e.push('<button type="button" data-plyr="rewind">','<svg><use xlink:href="#'+E.iconPrefix+'-rewind" /></svg>','<span class="sr-only">'+E.i18n.rewind+"</span>","</button>"),s(E.controls,"play")&&e.push('<button type="button" data-plyr="play">','<svg><use xlink:href="#'+E.iconPrefix+'-play" /></svg>','<span class="sr-only">'+E.i18n.play+"</span>","</button>",'<button type="button" data-plyr="pause">','<svg><use xlink:href="#'+E.iconPrefix+'-pause" /></svg>','<span class="sr-only">'+E.i18n.pause+"</span>","</button>"),s(E.controls,"fast-forward")&&e.push('<button type="button" data-plyr="fast-forward">','<svg><use xlink:href="#'+E.iconPrefix+'-fast-forward" /></svg>','<span class="sr-only">'+E.i18n.forward+"</span>","</button>"),s(E.controls,"current-time")&&e.push('<span class="plyr-time">','<span class="sr-only">'+E.i18n.currentTime+"</span>",'<span class="plyr-current-time">00:00</span>',"</span>"),s(E.controls,"duration")&&e.push('<span class="plyr-time">','<span class="sr-only">'+E.i18n.duration+"</span>",'<span class="plyr-duration">00:00</span>',"</span>"),e.push("</span>",'<span class="plyr-controls-right">'),s(E.controls,"mute")&&e.push('<button type="button" data-plyr="mute">','<svg class="icon-muted"><use xlink:href="#'+E.iconPrefix+'-muted" /></svg>','<svg><use xlink:href="#'+E.iconPrefix+'-volume" /></svg>','<span class="sr-only">'+E.i18n.toggleMute+"</span>","</button>"),s(E.controls,"volume")&&e.push('<label for="volume{id}" class="sr-only">'+E.i18n.volume+"</label>",'<input id="volume{id}" class="plyr-volume" type="range" min="0" max="10" value="5" data-plyr="volume">'),s(E.controls,"captions")&&e.push('<button type="button" data-plyr="captions">','<svg class="icon-captions-on"><use xlink:href="#'+E.iconPrefix+'-captions-on" /></svg>','<svg><use xlink:href="#'+E.iconPrefix+'-captions-off" /></svg>','<span class="sr-only">'+E.i18n.toggleCaptions+"</span>","</button>"),s(E.controls,"fullscreen")&&e.push('<button type="button" data-plyr="fullscreen">','<svg class="icon-exit-fullscreen"><use xlink:href="#'+E.iconPrefix+'-exit-fullscreen" /></svg>','<svg><use xlink:href="#'+E.iconPrefix+'-enter-fullscreen" /></svg>','<span class="sr-only">'+E.i18n.toggleFullscreen+"</span>","</button>"),e.push("</span>","</div>"),e.join("")}function n(e,t){E.debug&&window.console&&console[t?"error":"log"](e)}function r(){var e,t,n,r=navigator.userAgent,a=navigator.appName,o=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",o="11;"):-1!==(t=r.indexOf("MSIE"))?(a="IE",o=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(a="Chrome",o=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(a="Safari",o=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(o=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(a="Firefox",o=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(a=r.substring(e,t),o=r.substring(t+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(n=o.indexOf(";"))&&(o=o.substring(0,n)),-1!==(n=o.indexOf(" "))&&(o=o.substring(0,n)),s=parseInt(""+o,10),isNaN(s)&&(o=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10)),{name:a,version:s,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 o(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 s(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function i(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function l(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],o=a.parentNode,s=a.nextSibling;r.appendChild(a),s?o.insertBefore(r,s):o.appendChild(r)}}function u(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function c(e){e.parentNode.removeChild(e)}function p(e,t){e.insertBefore(t,e.firstChild)}function d(e,t){for(var n in t)e.setAttribute(n,"boolean"==typeof t[n]&&t[n]?"":t[n])}function m(e,t,n){var r=document.createElement(e);d(r,n),p(t,r)}function f(e){return e.replace(".","")}function y(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 b(e,t,n,r){var a=t.split(" ");if(e instanceof NodeList)for(var o=0;o<e.length;o++)e[o]instanceof Node&&b(e[o],arguments[1],arguments[2],arguments[3]);else for(var s=0;s<a.length;s++)e[r?"addEventListener":"removeEventListener"](a[s],n,!1)}function v(e,t,n){e&&b(e,t,n,!0)}function g(e,t,n){e&&b(e,t,n,!1)}function h(e,t){var n=document.createEvent("MouseEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function w(e,t){return t="boolean"==typeof t?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t}function k(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function T(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},T(e[n],t[n])):e[n]=t[n];return e}function x(){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 F(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function C(T){function C(e){if(!ve.usingTextTracks&&"video"===ve.type&&ve.supported.full&&(ve.subcount=0,e="number"==typeof e?e:ve.media.currentTime,ve.captions[ve.subcount])){for(;P(ve.captions[ve.subcount][0])<e.toFixed(1);)if(ve.subcount++,ve.subcount>ve.captions.length-1){ve.subcount=ve.captions.length-1;break}if(ve.media.currentTime.toFixed(1)>=N(ve.captions[ve.subcount][0])&&ve.media.currentTime.toFixed(1)<=P(ve.captions[ve.subcount][0])){ve.currentCaption=ve.captions[ve.subcount][1];var t=ve.currentCaption.trim();ve.captionsContainer.innerHTML!=t&&(ve.captionsContainer.innerHTML="",ve.captionsContainer.innerHTML=t)}else ve.captionsContainer.innerHTML=""}}function A(){ve.buttons.captions&&(y(ve.container,E.classes.captions.enabled,!0),E.captions.defaultActive&&(y(ve.container,E.classes.captions.active,!0),w(ve.buttons.captions,!0)))}function N(e){var t=[];return t=e.split(" --> "),I(t[0])}function P(e){var t=[];return t=e.split(" --> "),I(t[1])}function I(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 M(e){return ve.container.querySelectorAll(e)}function L(e){return M(e)[0]}function O(){try{return window.self!==window.top}catch(e){return!0}}function q(){var e=E.html;if(n("Injecting custom controls."),e||(e=t()),e=i(e,"{seektime}",E.seekTime),e=i(e,"{id}",Math.floor(1e4*Math.random())),ve.container.insertAdjacentHTML("beforeend",e),E.tooltips)for(var r=M(E.selectors.labels),a=r.length-1;a>=0;a--){var o=r[a];y(o,E.classes.hidden,!1),y(o,E.classes.tooltip,!0)}}function V(){try{return ve.controls=L(E.selectors.controls),ve.buttons={},ve.buttons.seek=L(E.selectors.buttons.seek),ve.buttons.play=L(E.selectors.buttons.play),ve.buttons.pause=L(E.selectors.buttons.pause),ve.buttons.restart=L(E.selectors.buttons.restart),ve.buttons.rewind=L(E.selectors.buttons.rewind),ve.buttons.forward=L(E.selectors.buttons.forward),ve.buttons.fullscreen=L(E.selectors.buttons.fullscreen),ve.buttons.mute=L(E.selectors.buttons.mute),ve.buttons.captions=L(E.selectors.buttons.captions),ve.checkboxes=M('[type="checkbox"]'),ve.progress={},ve.progress.container=L(E.selectors.progress.container),ve.progress.buffer={},ve.progress.buffer.bar=L(E.selectors.progress.buffer),ve.progress.buffer.text=ve.progress.buffer.bar&&ve.progress.buffer.bar.getElementsByTagName("span")[0],ve.progress.played={},ve.progress.played.bar=L(E.selectors.progress.played),ve.progress.played.text=ve.progress.played.bar&&ve.progress.played.bar.getElementsByTagName("span")[0],ve.volume=L(E.selectors.buttons.volume),ve.duration=L(E.selectors.duration),ve.currentTime=L(E.selectors.currentTime),ve.seekTime=M(E.selectors.seekTime),!0}catch(e){return n("It looks like there's a problem with your controls html. Bailing.",!0),ve.media.setAttribute("controls",""),!1}}function H(){if(ve.buttons.play){var e=ve.buttons.play.innerText||E.i18n.play;"undefined"!=typeof E.title&&E.title.length&&(e+=", "+E.title),ve.buttons.play.setAttribute("aria-label",e)}}function j(){if(!ve.media)return n("No audio or video element found!",!0),!1;if(ve.supported.full&&(ve.media.removeAttribute("controls"),y(ve.container,E.classes.type.replace("{0}",ve.type),!0),y(ve.container,E.classes.stopped,E.autoplay),ve.browser.ios&&y(ve.container,"ios",!0),"video"===ve.type)){var e=document.createElement("div");e.setAttribute("class",E.classes.videoWrapper),l(ve.media,e),ve.videoContainer=e}s(E.types.embed,ve.type)?(D(ve.embedId,ve.type),ve.embedId=null):E.autoplay&&$()}function D(e){for(var t=document.createElement("div"),n=ve.type+"-"+Math.floor(1e4*Math.random()),r=M('[id^="'+ve.type+'-"]'),a=r.length-1;a>=0;a--)c(r[a]);if(y(ve.media,E.classes.videoWrapper,!0),y(ve.media,E.classes.embedWrapper,!0),"youtube"===ve.type)ve.media.appendChild(t),t.setAttribute("id",n),"object"==typeof YT?R(e,t):(o(E.urls.youtube.api),window.onYouTubeIframeAPIReady=function(){R(e,t)});else if("vimeo"===ve.type){var s=document.createElement("iframe");if(s.loaded=!1,v(s,"load",function(){s.loaded=!0}),d(s,{src:"https://player.vimeo.com/video/"+e+"?player_id="+n+"&api=1&badge=0&byline=0&portrait=0&title=0",id:n,webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:"",frameborder:0}),t.appendChild(s),ve.media.appendChild(t),"function"==typeof Froogaloop)v(s,"load",_);else{o(E.urls.vimeo.api);var i=window.setInterval(function(){"$f"in window&&s.loaded&&(window.clearInterval(i),_.call(s))},50)}}}function B(){ve.supported.full&&(ve.container.querySelectorAll(E.selectors.controls).length||ye()),te(),ne()}function R(e,t){"timer"in ve||(ve.timer={}),ve.embed=new YT.Player(t.id,{videoId:e,playerVars:{autoplay:E.autoplay?1:0,controls:ve.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:E.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1},events:{onReady:function(e){var t=e.target;ve.media.play=function(){t.playVideo()},ve.media.pause=function(){t.pauseVideo()},ve.media.stop=function(){t.stopVideo()},ve.media.duration=t.getDuration(),ve.media.paused=!E.autoplay,ve.media.currentTime=t.getCurrentTime(),ve.media.muted=t.isMuted(),h(ve.media,"timeupdate"),window.clearInterval(ve.timer.buffering),ve.timer.buffering=window.setInterval(function(){ve.media.buffered=t.getVideoLoadedFraction(),h(ve.media,"progress"),1===ve.media.buffered&&window.clearInterval(ve.timer.buffering)},200),B(),E.displayDuration&&ie()},onStateChange:function(e){var t=e.target;switch(window.clearInterval(ve.timer.playing),e.data){case 0:ve.media.paused=!0,h(ve.media,"ended");break;case 1:ve.media.paused=!1,h(ve.media,"play"),ve.timer.playing=window.setInterval(function(){ve.media.currentTime=t.getCurrentTime(),h(ve.media,"timeupdate")},200);break;case 2:ve.media.paused=!0,h(ve.media,"pause")}}}})}function _(){ve.embed=$f(this),ve.embed.addEvent("ready",function(){ve.media.play=function(){ve.embed.api("play")},ve.media.pause=function(){ve.embed.api("pause")},ve.media.stop=function(){ve.embed.api("stop")},ve.media.paused=!E.autoplay,ve.media.currentTime=0,B(),ve.embed.api("getCurrentTime",function(e){ve.media.currentTime=e,h(ve.media,"timeupdate")}),ve.embed.api("getDuration",function(e){ve.media.duration=e,ve.supported.full&&E.displayDuration&&ie()}),ve.embed.addEvent("play",function(){ve.media.paused=!1,h(ve.media,"play")}),ve.embed.addEvent("pause",function(){ve.media.paused=!0,h(ve.media,"pause")}),ve.embed.addEvent("playProgress",function(e){ve.media.currentTime=e.seconds,h(ve.media,"timeupdate")}),ve.embed.addEvent("loadProgress",function(e){ve.media.buffered=e.percent,h(ve.media,"progress")}),ve.embed.addEvent("finish",function(){ve.media.paused=!0,h(ve.media,"ended")})})}function W(){if("video"===ve.type){L(E.selectors.captions)||ve.videoContainer.insertAdjacentHTML("afterbegin",'<div class="'+f(E.selectors.captions)+'"><span></span></div>'),ve.captionsContainer=L(E.selectors.captions).querySelector("span"),ve.usingTextTracks=!1,ve.media.textTracks&&(ve.usingTextTracks=!0);for(var e,t="",r=ve.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(ve.captionExists=!0,""===t?(ve.captionExists=!1,n("No caption track found.")):n("Caption track found; URI: "+t),ve.captionExists){for(var o=ve.media.textTracks,s=0;s<o.length;s++)o[s].mode="hidden";if(A(ve),("IE"===ve.browser.name&&ve.browser.version>=10||"Firefox"===ve.browser.name&&ve.browser.version>=31||"Chrome"===ve.browser.name&&ve.browser.version>=43||"Safari"===ve.browser.name&&ve.browser.version>=7)&&(n("Detected unsupported browser for HTML5 captions. Using fallback."),ve.usingTextTracks=!1),ve.usingTextTracks){n("TextTracks supported.");for(var i=0;i<o.length;i++){var l=o[i];("captions"===l.kind||"subtitles"===l.kind)&&v(l,"cuechange",function(){ve.captionsContainer.innerHTML="",this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&ve.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim())})}}else if(n("TextTracks not supported so rendering captions manually."),ve.currentCaption="",ve.captions=[],""!==t){var u=new XMLHttpRequest;u.onreadystatechange=function(){if(4===u.readyState)if(200===u.status){var e,t=[],r=u.responseText;t=r.split("\n\n");for(var a=0;a<t.length;a++)e=t[a],ve.captions[a]=[],ve.captions[a]=e.split("\n");ve.captions.shift(),n("Successfully loaded the caption file via AJAX.")}else n("There was a problem loading the caption file via AJAX.",!0)},u.open("get",t,!0),u.send()}if("Safari"===ve.browser.name&&ve.browser.version>=7){n("Safari 7+ detected; removing track from DOM."),o=ve.media.getElementsByTagName("track");for(var c=0;c<o.length;c++)ve.media.removeChild(o[c])}}else y(ve.container,E.classes.captions.enabled)}}function z(){if(("audio"!=ve.type||E.fullscreen.allowAudio)&&E.fullscreen.enabled){var e=S.supportsFullScreen;e||E.fullscreen.fallback&&!O()?(n((e?"Native":"Fallback")+" fullscreen enabled."),y(ve.container,E.classes.fullscreen.enabled,!0)):n("Fullscreen not supported and fallback disabled."),w(ve.buttons.fullscreen,!1),E.fullscreen.hideControls&&y(ve.container,E.classes.fullscreen.hideControls,!0)}}function $(){ve.media.play()}function U(){ve.media.pause()}function X(e){e===!0?$():e===!1?U():ve.media[ve.media.paused?"play":"pause"]()}function Y(e){"number"!=typeof e&&(e=E.seekTime),G(ve.media.currentTime-e)}function J(e){"number"!=typeof e&&(e=E.seekTime),G(ve.media.currentTime+e)}function G(e){var t=0,r=ve.media.paused;"number"==typeof e?t=e:"object"!=typeof e||"input"!==e.type&&"change"!==e.type||(t=e.target.value/e.target.max*ve.media.duration),0>t?t=0:t>ve.media.duration&&(t=ve.media.duration);try{ve.media.currentTime=t.toFixed(1)}catch(a){}"embed"in ve&&("youtube"===ve.type&&ve.embed.seekTo(t),"vimeo"===ve.type&&ve.embed.api("seekTo",t),h(ve.media,"timeupdate"),r&&U()),n("Seeking to "+ve.media.currentTime+" seconds"),C(t)}function K(){y(ve.container,E.classes.playing,!ve.media.paused),y(ve.container,E.classes.stopped,ve.media.paused)}function Q(e){function t(){y(ve.container,E.classes.hover,!0),window.clearTimeout(a),o||(a=window.setTimeout(function(){y(ve.container,E.classes.hover,!1)},2e3))}function n(e){o="mouseenter"===e.type}var r=S.supportsFullScreen;e&&e.type===S.fullScreenEventName?ve.isFullscreen=S.isFullScreen(ve.container):r?(S.isFullScreen(ve.container)?S.cancelFullScreen():S.requestFullScreen(ve.container),ve.isFullscreen=S.isFullScreen(ve.container)):(ve.isFullscreen=!ve.isFullscreen,ve.isFullscreen?(v(document,"keyup",Z),document.body.style.overflow="hidden"):(g(document,"keyup",Z),document.body.style.overflow="")),y(ve.container,E.classes.fullscreen.active,ve.isFullscreen),w(ve.buttons.fullscreen,ve.isFullscreen);var a,o=!1;E.fullscreen.hideControls&&(y(ve.controls,E.classes.hover,!1),b(ve.controls,"mouseenter mouseleave",n,ve.isFullscreen),b(ve.container,"mousemove",t,ve.isFullscreen))}function Z(e){27===(e.which||e.charCode||e.keyCode)&&ve.isFullscreen&&Q()}function ee(e){"boolean"!=typeof e&&(e=!ve.media.muted),w(ve.buttons.mute,e),ve.media.muted=e,"youtube"===ve.type&&(ve.embed[ve.media.muted?"mute":"unMute"](),h(ve.media,"volumechange"))}function te(e){"undefined"==typeof e&&(e=E.storage.enabled&&F().supported?window.localStorage[E.storage.key]||E.volume:E.volume),e>10&&(e=10),0>e&&(e=0),ve.media.volume=parseFloat(e/10),E.volume=e,"youtube"===ve.type&&ve.embed.setVolume(100*ve.media.volume),"vimeo"===ve.type&&ve.embed.api("setVolume",ve.media.volume),"embed"in ve&&h(ve.media,"volumechange"),ve.media.muted&&e>0&&ee()}function ne(){var e=ve.media.muted?0:10*ve.media.volume;ve.supported.full&&ve.volume&&(ve.volume.value=e),E.storage.enabled&&F().supported&&window.localStorage.setItem(E.storage.key,e),y(ve.container,E.classes.muted,0===e),ve.supported.full&&ve.buttons.mute&&w(ve.buttons.mute,0===e)}function re(e){ve.supported.full&&ve.buttons.captions&&("boolean"!=typeof e&&(e=-1===ve.container.className.indexOf(E.classes.captions.active)),ve.captionsEnabled=e,w(ve.buttons.captions,ve.captionsEnabled),y(ve.container,E.classes.captions.active,ve.captionsEnabled))}function ae(e){var t="waiting"===e.type;clearTimeout(ve.loadingTimer),ve.loadingTimer=setTimeout(function(){y(ve.container,E.classes.loading,t)},t?250:0)}function oe(e){var t=ve.progress.played.bar,n=ve.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=k(ve.media.currentTime,ve.media.duration),"timeupdate"==e.type&&ve.buttons.seek&&(ve.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=ve.progress.buffer.bar,n=ve.progress.buffer.text,r=function(){var e=ve.media.buffered;return e&&e.length?k(e.end(0),ve.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function se(e,t){if(t){isNaN(e)&&(e=0),ve.secs=parseInt(e%60),ve.mins=parseInt(e/60%60),ve.hours=parseInt(e/60/60%60);var n=parseInt(ve.media.duration/60/60%60)>0;ve.secs=("0"+ve.secs).slice(-2),ve.mins=("0"+ve.mins).slice(-2),t.innerHTML=(n?ve.hours+":":"")+ve.mins+":"+ve.secs}}function ie(){var e=ve.media.duration||0;!ve.duration&&E.displayDuration&&ve.media.paused&&se(e,ve.currentTime),ve.duration&&se(e,ve.duration)}function le(e){se(ve.media.currentTime,ve.currentTime),oe(e)}function ue(e,t){if("string"==typeof t)m(e,ve.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)m(e,ve.media,t[n])}function ce(e){if("undefined"!=typeof e){switch(U(),"youtube"===ve.type?(ve.embed.destroy(),window.clearInterval(ve.timer.buffering),window.clearInterval(ve.timer.playing)):"video"===ve.type&&c(ve.videoContainer),c(ve.media),"type"in e&&e.type!==ve.type&&(ve.type=e.type),ve.type){case"video":ve.media=document.createElement("video");break;case"audio":ve.media=document.createElement("audio");break;case"youtube":case"vimeo":ve.media=document.createElement("div"),ve.embedId="string"==typeof e.sources?e.sources:e.sources[0].src}p(ve.container,ve.media),s(E.types.html5,ve.type)&&(E.crossorigin&&ve.media.setAttribute("crossorigin",""),E.autoplay&&ve.media.setAttribute("autoplay",""),"poster"in e&&ve.media.setAttribute("poster",e.poster),E.loop&&ve.media.setAttribute("loop","")),ve.container.className=ve.originalClassName,y(ve.container,E.classes.fullscreen.active,ve.isFullscreen),y(ve.container,E.classes.captions.active,ve.captionsEnabled),E.autoplay=e.autoplay||E.autoplay,s(E.types.embed,ve.type)&&(ve.embedId=e.sources),s(E.types.html5,ve.type)&&ue("source",e.sources),j(),be(),s(E.types.html5,ve.type)&&(te(),ne(),ve.supported.full&&(le(),K()),"tracks"in e&&(ue("track",e.tracks),W()),ve.media.load(),E.autoplay&&$()),"title"in e&&(E.title=e.title,H())}}function pe(e){"video"===ve.type&&ve.media.setAttribute("poster",e)}function de(){function e(){var e=document.activeElement;e&&e!=document.body?document.querySelector&&(e=document.querySelector(":focus")):e=null;for(var t in ve.buttons){var n=ve.buttons[t];y(n,"tab-focus",n===e)}}var t="IE"==ve.browser.name?"change":"input";v(window,"keyup",function(t){var n=t.keyCode?t.keyCode:t.which;9==n&&e()});for(var n in ve.buttons){var r=ve.buttons[n];v(r,"blur",function(){y(r,"tab-focus",!1)})}v(ve.buttons.play,"click",function(){$(),setTimeout(function(){ve.buttons.pause.focus()},100)}),v(ve.buttons.pause,"click",function(){U(),setTimeout(function(){ve.buttons.play.focus()},100)}),v(ve.buttons.restart,"click",G),v(ve.buttons.rewind,"click",Y),v(ve.buttons.forward,"click",J),v(ve.buttons.seek,t,G),v(ve.volume,t,function(){te(this.value)}),v(ve.buttons.mute,"click",ee),v(ve.buttons.fullscreen,"click",Q),S.supportsFullScreen&&v(document,S.fullScreenEventName,Q),v(ve.media,"timeupdate seeking",le),v(ve.media,"timeupdate",C),v(ve.media,"loadedmetadata",ie),v(ve.buttons.captions,"click",re),v(ve.media,"ended",function(){"video"===ve.type&&(ve.captionsContainer.innerHTML=""),K()}),v(ve.media,"progress playing",oe),v(ve.media,"volumechange",ne),v(ve.media,"play pause",K),v(ve.media,"waiting canplay seeked",ae),"video"===ve.type&&E.click&&v(ve.videoContainer,"click",function(){ve.media.paused?h(ve.buttons.play,"click"):ve.media.ended?(G(),h(ve.buttons.play,"click")):h(ve.buttons.pause,"click")})}function me(){if(!ve.init)return null;if(ve.container.setAttribute("class",f(E.selectors.container)),ve.init=!1,c(L(E.selectors.controls)),"youtube"===ve.type)return void ve.embed.destroy();"video"===ve.type&&(c(L(E.selectors.captions)),u(ve.videoContainer)),ve.media.setAttribute("controls","");var e=ve.media.cloneNode(!0);ve.media.parentNode.replaceChild(e,ve.media)}function fe(){if(ve.init)return null;S=x(),ve.browser=r(),ve.media=ve.container.querySelectorAll("audio, video, div")[0],ve.originalClassName=ve.container.className;var t=ve.media.tagName.toLowerCase();if("div"===t?(ve.type=ve.media.getAttribute("data-type"),ve.embedId=ve.media.getAttribute("data-video-id"),ve.media.removeAttribute("data-type"),ve.media.removeAttribute("data-video-id")):(ve.type=t,E.crossorigin=null!==ve.media.getAttribute("crossorigin"),E.autoplay=E.autoplay||null!==ve.media.getAttribute("autoplay"),E.loop=E.loop||null!==ve.media.getAttribute("loop")),ve.supported=e.supported(ve.type),!ve.supported.basic)return!1;if(n(ve.browser.name+" "+ve.browser.version),j(),"video"==ve.type||"audio"==ve.type){if(!ve.supported.full)return void(ve.init=!0);ye(),E.displayDuration&&ie(),H()}ve.init=!0}function ye(){return q(),V()?(W(),be(),te(),void ne()):!1}function be(){z(),de()}var ve=this;return ve.container=T,fe(),ve.init?{media:ve.media,play:$,pause:U,restart:G,rewind:Y,forward:J,seek:G,source:ce,poster:pe,setVolume:te,togglePlay:X,toggleMute:ee,toggleCaptions:re,toggleFullscreen:Q,isFullscreen:function(){return ve.isFullscreen||!1},support:function(e){return a(ve,e)},destroy:me,restore:fe}:{}}var S,E,A={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,iconPrefix:"icon",selectors:{container:".plyr",controls:".plyr-controls",labels:"[data-plyr] .sr-only, label .sr-only",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',volume:'[data-plyr="volume"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},progress:{container:".plyr-progress",buffer:".plyr-progress-buffer",played:".plyr-progress-played"},captions:".plyr-captions",currentTime:".plyr-current-time",duration:".plyr-duration"},classes:{videoWrapper:"plyr-video-wrapper",embedWrapper:"plyr-video-embed",type:"plyr-{0}",stopped:"stopped",playing:"playing",muted:"muted",loading:"loading",tooltip:"plyr-tooltip",hidden:"sr-only",hover:"plyr-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,allowAudio:!1},storage:{enabled:!0,key:"plyr_volume"},controls:["restart","rewind","play","fast-forward","current-time","duration","mute","volume","captions","fullscreen"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",played:"played",buffered:"buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen"},types:{embed:["youtube","vimeo"],html5:["video","audio"]},urls:{vimeo:{api:"https://cdn.rawgit.com/vimeo/player-api/master/javascript/froogaloop.js"},youtube:{api:"https://www.youtube.com/iframe_api"}}};e.supported=function(e){var t,n,a=r(),o="IE"===a.name&&a.version<=9,s=/iPhone|iPod/i.test(navigator.userAgent),i=!!document.createElement("audio").canPlayType,l=!!document.createElement("video").canPlayType;switch(e){case"video":t=l,n=t&&!o&&!s;break;case"audio":t=i,n=t&&!o;break;case"vimeo":case"youtube":t=!0,n=!o&&!s;break;default:t=i&&l,n=t&&!o}return{basic:t,full:n}},e.setup=function(t,n){var r=[];if("string"==typeof t?t=document.querySelectorAll(t):t instanceof HTMLElement?t=[t]:t instanceof NodeList||"string"==typeof t||("undefined"==typeof n&&"object"==typeof t&&(n=t),t=document.querySelectorAll(A.selectors.container)),E=T(A,n),!E.enabled||!e.supported().basic)return!1;for(var a=t.length-1;a>=0;a--){var o=t[a];if("undefined"==typeof o.plyr){var s=new C(o);o.plyr=Object.keys(s).length?s:!1,"function"==typeof E.onSetup&&E.onSetup.apply(o.plyr)}r.push(o.plyr)}return r}}(this.plyr=this.plyr||{});
\ No newline at end of file diff --git a/docs/dist/docs.css b/docs/dist/docs.css index 6a75e430..38dcd187 100644 --- a/docs/dist/docs.css +++ b/docs/dist/docs.css @@ -1 +1 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */a.logo,img,legend{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}[hidden],template{display:none}body,figure,ul li{margin:0}body,h1,h2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,small{padding:0 10px}nav ul,ul li{list-style:none;padding:0}legend,nav ul,ul li{padding:0}.btn-bar,sub,sup{position:relative}.btn-bar,.plyr{max-width:1200px}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0;text-decoration:none;color:#3498db;border-bottom:1px dotted currentColor;transition:background .3s ease,color .3s ease,border .3s ease}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}.btn-bar,nav li{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}.btn-bar::before,.btn-count::before{content:"";top:50%}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:600}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{font-size:14px;font-size:.875rem}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.color-vimeo{color:#19b7ed}.color-youtube{color:#cc181e}*,::after,::before{box-sizing:border-box}.btn-bar ul,nav li{display:inline-block}html{height:100%;font-size:100%;background:linear-gradient(#fff,#f2f5f7) fixed}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}section{padding-bottom:20px}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}section{padding-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}nav ul{margin:0;font-size:0}nav li{margin-top:10px;font-size:16px;font-size:1rem}nav li+li{margin-left:20px}.btn-bar{margin:0 auto 20px}.btn-bar::before{position:absolute;left:0;right:0;height:1px;background:#dbe3e8}.btn-bar ul{position:relative;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-bar li{margin:0}.btn-bar li:first-child .btn{border-radius:4px 0 0 4px}.btn-bar li:last-child .btn{border-radius:0 4px 4px 0}.btn-bar li+li .btn{margin-left:-1px}.btn-bar .btn{display:block;border-radius:0}.btn-bar .btn.active{box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;z-index:1}.btn-bar .btn.active .icon{color:inherit}@media (min-width:560px){.btn-bar{margin-bottom:40px}}.btn,.btn-count{display:inline-block;vertical-align:middle;border-radius:4px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 20px;background:#f2f5f7;border:1px solid #cbd0d3;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .3s ease,border .3s ease,color .3s ease}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn-youtube .icon{color:#cc181e}.btn-vimeo .icon{color:#19b7ed}.btn-twitter .icon{color:#4BAAF4}.btn-bar .active,.btn-primary{background-image:linear-gradient(#3498db,#2791d9);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn-primary:focus,.btn-primary:hover{color:#fff;border-color:#196090}.btn-small{padding-top:7px;padding-bottom:7px}.btn-count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn-count::before{position:absolute;display:block;width:8px;height:8px;left:1px;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.panel{display:none}.panel.active{display:block;-webkit-animation:fade-in .3s ease;animation:fade-in .3s ease}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}.plyr{margin:0 auto 20px}.plyr-controls{border-radius:0 0 4px 4px}.plyr-audio{max-width:520px}.plyr-audio .plyr-controls{border-radius:4px}.plyr-audio .plyr-progress{border-radius:4px 4px 0 0;overflow:hidden}.plyr-video-embed,video{border-radius:4px}.plyr-video-embed{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.plyr-video .plyr-video-embed,.plyr-video video,.plyr-vimeo .plyr-video-embed,.plyr-vimeo video,.plyr-youtube .plyr-video-embed,.plyr-youtube video{border-radius:4px 4px 0 0}.plyr-video.fullscreen-active,.plyr-video.plyr-fullscreen,.plyr-vimeo.fullscreen-active,.plyr-vimeo.plyr-fullscreen,.plyr-youtube.fullscreen-active,.plyr-youtube.plyr-fullscreen{max-width:none}.plyr-video.fullscreen-active .plyr-controls,.plyr-video.fullscreen-active iframe,.plyr-video.fullscreen-active video,.plyr-video.plyr-fullscreen .plyr-controls,.plyr-video.plyr-fullscreen iframe,.plyr-video.plyr-fullscreen video,.plyr-vimeo.fullscreen-active .plyr-controls,.plyr-vimeo.fullscreen-active iframe,.plyr-vimeo.fullscreen-active video,.plyr-vimeo.plyr-fullscreen .plyr-controls,.plyr-vimeo.plyr-fullscreen iframe,.plyr-vimeo.plyr-fullscreen video,.plyr-youtube.fullscreen-active .plyr-controls,.plyr-youtube.fullscreen-active iframe,.plyr-youtube.fullscreen-active video,.plyr-youtube.plyr-fullscreen .plyr-controls,.plyr-youtube.plyr-fullscreen iframe,.plyr-youtube.plyr-fullscreen video{border-radius:0}.plyr-video.fullscreen-active iframe,.plyr-video.plyr-fullscreen iframe,.plyr-vimeo.fullscreen-active iframe,.plyr-vimeo.plyr-fullscreen iframe,.plyr-youtube.fullscreen-active iframe,.plyr-youtube.plyr-fullscreen iframe{-webkit-mask-image:none}.cite{display:none}.cite .icon{margin-right:5px}.plyr-audio~ul .cite-audio,.plyr-video~ul .cite-video,.plyr-vimeo~ul .cite-vimeo,.plyr-youtube~ul .cite-youtube{display:block}
\ No newline at end of file +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */a.logo,img,legend{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}[hidden],template{display:none}body,figure,ul li{margin:0}body,h1,h2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,small{padding:0 10px}nav ul,ul li{list-style:none;padding:0}legend,nav ul,ul li{padding:0}.btn-bar,sub,sup{position:relative}.btn-bar,.plyr{max-width:1200px}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0;text-decoration:none;color:#3498db;border-bottom:1px dotted currentColor;transition:background .3s ease,color .3s ease,border .3s ease}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}.btn-bar,nav li{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}.btn-bar::before,.btn-count::before{content:"";top:50%}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:600}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{font-size:14px;font-size:.875rem}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.color-vimeo{color:#19b7ed}.color-youtube{color:#cc181e}*,::after,::before{box-sizing:border-box}.btn-bar ul,nav li{display:inline-block}html{height:100%;font-size:100%;background:linear-gradient(#fff,#f2f5f7) fixed}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}section{padding-bottom:20px}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}section{padding-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}nav ul{margin:0;font-size:0}nav li{margin-top:10px;font-size:16px;font-size:1rem}nav li+li{margin-left:20px}.btn-bar{margin:0 auto 20px}.btn-bar::before{position:absolute;left:0;right:0;height:1px;background:#dbe3e8}.btn-bar ul{position:relative;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn-bar li{margin:0}.btn-bar li:first-child .btn{border-radius:4px 0 0 4px}.btn-bar li:last-child .btn{border-radius:0 4px 4px 0}.btn-bar li+li .btn{margin-left:-1px}.btn-bar .btn{display:block;border-radius:0}.btn-bar .btn.active{box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;z-index:1}.btn-bar .btn.active .icon{color:inherit}@media (min-width:560px){.btn-bar{margin-bottom:40px}}.btn,.btn-count{display:inline-block;vertical-align:middle;border-radius:4px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 20px;background:#f2f5f7;border:1px solid #cbd0d3;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .3s ease,border .3s ease,color .3s ease}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn-youtube .icon{color:#cc181e}.btn-vimeo .icon{color:#19b7ed}.btn-twitter .icon{color:#4BAAF4}.btn-bar .active,.btn-primary{background-image:linear-gradient(#3498db,#2791d9);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn-primary:focus,.btn-primary:hover{color:#fff;border-color:#196090}.btn-small{padding-top:7px;padding-bottom:7px}.btn-count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn-count::before{position:absolute;display:block;width:8px;height:8px;left:1px;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.panel{display:none}.panel.active{display:block;-webkit-animation:fade-in .3s ease;animation:fade-in .3s ease}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}.plyr-video-embed,video{border-radius:4px}.plyr-video-embed{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.plyr{margin:0 auto 20px}.plyr-controls{border-radius:0 0 4px 4px}.plyr .plyr-video-embed,.plyr video{border-radius:4px 4px 0 0}.plyr-fullscreen,.plyr.fullscreen-active{max-width:none}.plyr-fullscreen .plyr-controls,.plyr-fullscreen iframe,.plyr-fullscreen video,.plyr.fullscreen-active .plyr-controls,.plyr.fullscreen-active iframe,.plyr.fullscreen-active video{border-radius:0}.plyr-fullscreen iframe,.plyr.fullscreen-active iframe{-webkit-mask-image:none}.plyr-audio{max-width:520px}.plyr-audio .plyr-controls{border-radius:4px}.plyr-audio .plyr-progress{border-radius:4px 4px 0 0;overflow:hidden}.cite{display:none}.cite .icon{margin-right:5px}.plyr-audio~ul .cite-audio,.plyr-video~ul .cite-video,.plyr-vimeo~ul .cite-vimeo,.plyr-youtube~ul .cite-youtube{display:block}
\ No newline at end of file diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less index 5e09cab6..6312b642 100644 --- a/docs/src/less/components/examples.less +++ b/docs/src/less/components/examples.less @@ -2,26 +2,6 @@ // Examples // ========================================================================== -// Example players -.plyr { - margin: 0 auto @padding-base; - max-width: @example-width-video; - - &-controls { - border-radius: 0 0 @border-radius-base @border-radius-base; - } -} -.plyr-audio { - max-width: @example-width-audio; - - .plyr-controls { - border-radius: @border-radius-base; - } - .plyr-progress { - border-radius: @border-radius-base @border-radius-base 0 0; - overflow: hidden; - } -} video, .plyr-video-embed { border-radius: @border-radius-base; @@ -30,15 +10,19 @@ video, -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } -// Style full supported player -.plyr-video, -.plyr-youtube, -.plyr-vimeo { +// Example players +.plyr { + margin: 0 auto @padding-base; + max-width: @example-width-video; + + &-controls { + border-radius: 0 0 @border-radius-base @border-radius-base; + } video, .plyr-video-embed { border-radius: @border-radius-base @border-radius-base 0 0; } - &.plyr-fullscreen, + &-fullscreen, &.fullscreen-active { max-width: none; @@ -52,7 +36,19 @@ video, } } } +.plyr-audio { + max-width: @example-width-audio; + + .plyr-controls { + border-radius: @border-radius-base; + } + .plyr-progress { + border-radius: @border-radius-base @border-radius-base 0 0; + overflow: hidden; + } +} +// Style full supported player .cite { display: none; @@ -262,7 +262,7 @@ Options must be passed as an object to the `setup()` method as above. <td><code>selectors</code></td> <td>Object</td> <td>—</td> - <td>See <code>plyr.js</code> in <code>/src</code> for more info. The only option you might want to change is <code>container</code> which is the hook used for `setup()`, the default is <code>.plyr</code>.</td> + <td>See <code>plyr.js</code> in <code>/src</code> for more info. You probably don't need to change any of these.</td> </tr> <tr> <td><code>classes</code></td> @@ -280,7 +280,7 @@ Options must be passed as an object to the `setup()` method as above. <td><code>fullscreen</code></td> <td>Object</td> <td>—</td> - <td>Three properties; <code>enabled</code> which toggles if fullscreen should be enabled (if the browser supports it). The default value is <code>true</code>. A <code>fallback</code> property which will enable a full window view for older browsers. The default value is <code>true</code>. A <code>hideControls</code> property which will hide the controls when fullscreen is active and the video is playing, after 1s. The controls reappear on hover of the progress bar (mouse), focusing a child control or pausing the video (by tap/click of video if `click` is `true`). The default value is <code>true</code>.</td> + <td>See <a href="#fullscreen-options">below</a></td> </tr> <tr> <td><code>storage</code></td> @@ -297,6 +297,45 @@ Options must be passed as an object to the `setup()` method as above. </tbody> </table> +#### Fullscreen options + +<table class="table" width="100%" id="fullscreen-options"> +<thead> + <tr> + <th width="20%">Option</th> + <th width="15%">Type</th> + <th width="15%">Default</th> + <th width="50%">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>enabled</code></td> + <td>Boolean</td> + <td><code>true</code></td> + <td>Toggles if fullscreen should be enabled (if the browser supports it).</td> + </tr> + <tr> + <td><code>fallback</code></td> + <td>Boolean</td> + <td><code>true</code></td> + <td>Enable a full viewport view for older browsers.</td> + </tr> + <tr> + <td><code>hideControls</code></td> + <td>Boolean</td> + <td><code>true</code></td> + <td>Hide the controls when fullscreen is active and the video is playing, after 1s. The controls reappear on hover of the progress bar (mouse), focusing a child control or pausing the video (by tap/click of video if `click` is `true`).</td> + </tr> + <tr> + <td><code>allowAudio</code></td> + <td>Boolean</td> + <td><code>false</code></td> + <td>Allow audio play to toggle fullscreen. This will be more useful later when posters are supported.</td> + </tr> + </tbody> +</table> + ## API #### Fetching the plyr instance @@ -331,8 +370,8 @@ Here's a list of the methods supported: <th width="15%">Parameters</th> <th width="65%">Description</th> </tr> - </thead> - <tbody> +</thead> +<tbody> <tr> <td><code>play()</code></td> <td>—</td> @@ -400,7 +439,7 @@ Here's a list of the methods supported: </tr> <tr> <td><code>source(...)</code></td> - <td>String or Array</td> + <td>Array</td> <td> Set the media source. <br><br> @@ -434,6 +473,112 @@ Here's a list of the methods supported: </tbody> </table> +#### .source() method + +This allows changing the plyr source and type on the fly. + +Video example: + +```javascript +player.source({ + type: 'video', + title: 'Bug Buck Bunny', + sources: [{ + src: 'https://cdn.selz.com/plyr/1.0/movie.mp4', + type: 'video/mp4' + }, + { + src: 'https://cdn.selz.com/plyr/1.0/movie.webm', + type: 'video/webm' + }], + poster: 'https://cdn.selz.com/plyr/1.0/poster.jpg', + tracks: [{ + kind: 'captions', + label: 'English', + srclang:'en', + src: 'https://cdn.selz.com/plyr/1.0/example_captions_en.vtt', + default: true + }] +}); +``` + +Audio example: + +```javascript +player.source({ + type: 'audio', + title: '96 by Logistics', + sources: [{ + src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3', + type: 'audio/mp3' + }, + { + src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg', + type: 'audio/ogg' + }] +}); +``` + +YouTube example: + +```javascript +player.source({ + type: 'youtube', + title: 'Enovato interview of Dan Cederholm for Made By', + sources: 'Au87oAJ2jeE' +}); +``` + +Vimeo example + +```javascript +player.source({ + type: 'vimeo', + title: 'Yosemite HD II', + sources: '87701971' +}); +``` + +Some more details on the object parameters + +<table class="table" width="100%"> + <thead> + <tr> + <th width="20%">Key</th> + <th width="15%">Type</th> + <th width="65%">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>type</code></td> + <td>String</td> + <td>Options are <code>video</code>, <code>audio</code>, <code>youtube</code> and <code>vimeo</code></td> + </tr> + <tr> + <td><code>title</code></td> + <td>String</td> + <td>Title of the new media. Used for the aria labelling.</td> + </tr> + <tr> + <td><code>sources</code></td> + <td>Array or String</td> + <td>This is an array of sources or optionally a string for embedded players (YouTube and Vimeo). `type` is also optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td> + </tr> + <tr> + <td><code>poster</code></td> + <td>String</td> + <td>URL for the poster image (video only).</td> + </tr> + <tr> + <td><code>tracks</code></td> + <td>Array</td> + <td>An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>`. Booleans are converted to HTML5 value-less attributes.</td> + </tr> + </tbody> +</table> + + ## Events/Callbacks The `plyr` object on the player element also contains a `media` property which is a reference to the `<audio>` or `<video>` element within the player which you can use to listen for events. Here's an example: diff --git a/src/js/plyr.js b/src/js/plyr.js index 5e22c680..2d497e75 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -78,7 +78,8 @@ fullscreen: { enabled: true, fallback: true, - hideControls: true + hideControls: true, + allowAudio: false }, storage: { enabled: true, @@ -664,7 +665,7 @@ time = typeof time === 'number' ? time : plyr.media.currentTime; // If there's no subs available, bail - if(!plyr.captions[plyr.subcount]) { + if (!plyr.captions[plyr.subcount]) { return; } @@ -930,9 +931,6 @@ _remove(containers[i]); } - // Set ID - container.setAttribute('id', id); - // Add embed class for responsive _toggleClass(plyr.media, config.classes.videoWrapper, true); _toggleClass(plyr.media, config.classes.embedWrapper, true); @@ -942,6 +940,9 @@ // Create the YouTube container plyr.media.appendChild(container); + // Set ID + container.setAttribute('id', id); + // Setup API if (typeof YT === 'object') { _youTubeReady(videoId, container); @@ -984,7 +985,7 @@ // Wait for fragaloop load var timer = window.setInterval(function() { - if('$f' in window && iframe.loaded) { + if ('$f' in window && iframe.loaded) { window.clearInterval(timer); _vimeoReady.call(iframe); @@ -1122,11 +1123,11 @@ // Vimeo ready function _vimeoReady() { /* jshint validthis: true */ - // Get the frame with fragaloop lib plyr.embed = $f(this); // Setup on ready plyr.embed.addEvent('ready', function() { + // Create a faux HTML5 API using the Vimeo API plyr.media.play = function() { plyr.embed.api('play'); }; plyr.media.pause = function() { plyr.embed.api('pause'); }; @@ -1178,13 +1179,13 @@ _triggerEvent(plyr.media, 'ended'); }); - /*// Always seek to 0 - plyr.embed.api('seekTo', 0); + // Always seek to 0 + //plyr.embed.api('seekTo', 0); // Prevent autoplay if needed (seek will play) - if (!config.autoplay) { - plyr.embed.api('pause'); - }*/ + //if (!config.autoplay) { + // plyr.embed.api('pause'); + //} }); } @@ -1192,7 +1193,7 @@ function _setupCaptions() { if (plyr.type === 'video') { // Inject the container - if(!_getElement(config.selectors.captions)) { + if (!_getElement(config.selectors.captions)) { plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"><span></span></div>'); } @@ -1340,7 +1341,7 @@ // Setup fullscreen function _setupFullscreen() { - if (plyr.type != 'audio' && config.fullscreen.enabled) { + if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) { // Check for native support var nativeSupport = fullscreen.supportsFullScreen; @@ -1660,18 +1661,21 @@ // If there's no full support, or there's no caption toggle if (!plyr.supported.full || !plyr.buttons.captions) { return; - } + } // If the method is called without parameter, toggle based on current value if (typeof show !== 'boolean') { show = (plyr.container.className.indexOf(config.classes.captions.active) === -1); } + // Set global + plyr.captionsEnabled = show; + // Toggle state - _toggleState(plyr.buttons.captions, show); + _toggleState(plyr.buttons.captions, plyr.captionsEnabled); // Add class hook - _toggleClass(plyr.container, config.classes.captions.active, show); + _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); } // Check if media is loading @@ -1753,7 +1757,7 @@ } // Fallback to 0 - if(isNaN(time)) { + if (isNaN(time)) { time = 0; } @@ -1798,10 +1802,10 @@ // Add elements to HTML5 media (source, tracks, etc) function _insertChildElements(type, attributes) { - if(typeof attributes === 'string') { + if (typeof attributes === 'string') { _insertElement(type, plyr.media, { src: attributes }); } - else if(attributes.constructor === Array) { + else if (attributes.constructor === Array) { for (var i = attributes.length - 1; i >= 0; i--) { _insertElement(type, plyr.media, attributes[i]); } @@ -1811,7 +1815,7 @@ // Update source // Sources are not checked for support so be careful function _updateSource(source) { - if(typeof source === 'undefined') { + if (typeof source === 'undefined') { return; } @@ -1819,7 +1823,7 @@ _pause(); // Clean up YouTube stuff - if(plyr.type === 'youtube') { + if (plyr.type === 'youtube') { // Destroy the embed instance plyr.embed.destroy(); @@ -1836,7 +1840,7 @@ _remove(plyr.media); // Set the new type - if('type' in source && source.type !== plyr.type) { + if ('type' in source && source.type !== plyr.type) { plyr.type = source.type; } @@ -1853,7 +1857,7 @@ case 'youtube': case 'vimeo': plyr.media = document.createElement('div'); - plyr.embedId = source.sources; + plyr.embedId = (typeof source.sources === 'string' ? source.sources : source.sources[0].src); break; } @@ -1861,8 +1865,8 @@ _prependChild(plyr.container, plyr.media); // Set attributes for audio video - if(_inArray(config.types.html5, plyr.type)) { - if(config.crossorigin) { + if (_inArray(config.types.html5, plyr.type)) { + if (config.crossorigin) { plyr.media.setAttribute('crossorigin', ''); } if (config.autoplay) { @@ -1879,16 +1883,20 @@ // Classname reset plyr.container.className = plyr.originalClassName; + // Restore class hooks + _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); + _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); + // Autoplay the new source? config.autoplay = (source.autoplay || config.autoplay); // Set media id for embeds - if(_inArray(config.types.embed, plyr.type)) { + if (_inArray(config.types.embed, plyr.type)) { plyr.embedId = source.sources; } // Set new sources for html5 - if(_inArray(config.types.html5, plyr.type)) { + if (_inArray(config.types.html5, plyr.type)) { _insertChildElements('source', source.sources); } @@ -1899,13 +1907,13 @@ _mediaUpdated(); // HTML5 stuff - if(_inArray(config.types.html5, plyr.type)) { + if (_inArray(config.types.html5, plyr.type)) { // Set volume _setVolume(); _updateVolume(); // UI updates - if(plyr.supported.full) { + if (plyr.supported.full) { // Reset time display _timeUpdate(); @@ -1914,7 +1922,7 @@ } // Setup captions - if('tracks' in source) { + if ('tracks' in source) { _insertChildElements('track', source.tracks); // Captions @@ -1930,7 +1938,7 @@ } } - if('title' in source) { + if ('title' in source) { config.title = source.title; _setupPlayAria(); } @@ -2292,17 +2300,17 @@ // Select the elements // Assume elements is a NodeList by default - if(typeof elements === 'string') { + if (typeof elements === 'string') { elements = document.querySelectorAll(elements); } // Single HTMLElement passed - else if(elements instanceof HTMLElement) { + else if (elements instanceof HTMLElement) { elements = [elements]; } // No selector passed, possibly options as first argument else if (!(elements instanceof NodeList) && typeof elements !== 'string') { // If options are the first argument - if(typeof options === 'undefined' && typeof elements === 'object') { + if (typeof options === 'undefined' && typeof elements === 'object') { options = elements; } diff --git a/src/less/plyr.less b/src/less/plyr.less index e57c2b1a..c2411ea9 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -32,10 +32,12 @@ // Tooltips @tooltip-bg: @controls-bg; -@tooltip-border-color: @off-white; +@tooltip-border-color: fade(@gray-dark, 10%); +@tooltip-border-width: 1px; +@tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color; @tooltip-color: @control-color; @tooltip-padding: @control-spacing; -@tooltip-arrow-size: 5px; +@tooltip-arrow-size: 6px; @tooltip-radius: 3px; // Progress @@ -331,32 +333,45 @@ opacity: 0; background: @tooltip-bg; - border: 1px solid @tooltip-border-color; + box-shadow: @tooltip-shadow; border-radius: @tooltip-radius; color: @tooltip-color; font-size: @font-size-small; line-height: 1.5; font-weight: 600; - transform: translate(-50%, (@tooltip-padding * 3)) scale(0); + transform: translate(-50%, (@tooltip-padding * 3)) scale(.8); transform-origin: 50% 100%; transition: transform .2s .1s ease, opacity .2s .1s ease; - // Arrow - &::after { + // Arrows + &::after, + &::before { content: ''; position: absolute; - z-index: 1; + width: 0; + height: 0; top: 100%; left: 50%; - display: block; - width: 10px; - height: 10px; - background: @tooltip-bg; - transform: translate(-50%, -50%) rotate(45deg) translateY(1px); - border: 1px solid @tooltip-border-color; - border-width: 0 1px 1px 0; + transform: translateX(-50%); } + // The border triangle + &::after { + @border-arrow-size: (@tooltip-arrow-size + (@tooltip-border-width * 1)); + bottom: -(@border-arrow-size + @tooltip-border-width); + border-right: @border-arrow-size solid transparent; + border-top: @border-arrow-size solid @tooltip-border-color; + border-left: @border-arrow-size solid transparent; + z-index: 1; + } + // The background triangle + &::before { + bottom: -@tooltip-arrow-size; + border-right: @tooltip-arrow-size solid transparent; + border-top: @tooltip-arrow-size solid @tooltip-bg; + border-left: @tooltip-arrow-size solid transparent; + z-index: 2; + } } button:hover .plyr-tooltip, button.tab-focus:focus .plyr-tooltip { diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 08485efa..7cefca3a 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -44,15 +44,18 @@ $control-color-hover: null !default; // Tooltips $tooltip-bg: $controls-bg !default; +$tooltip-border-color: transparentize(@gray-dark, .1) !default; +$tooltip-border-width: 1px; +$tooltip-shadow: 0 0 5px $tooltip-border-color, 0 0 0 $tooltip-border-width $tooltip-border-color; $tooltip-color: $control-color !default; $tooltip-padding: $control-spacing !default; -$tooltip-arrow-size: 5px !default; +$tooltip-arrow-size: 6px !default; $tooltip-radius: 3px !default; // Progress -$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default; +$progress-bg: transparentize($gray, .2) !default; $progress-playing-bg: $blue !default; -$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default; +$progress-buffered-bg: transparentize($gray, .25) !default; $progress-loading-size: 40px !default; $progress-loading-bg: rgba(0,0,0, .15) !default; @@ -334,29 +337,44 @@ $bp-captions-large: 768px !default; // When captions jump to the larger opacity: 0; background: $tooltip-bg; + box-shadow: $tooltip-shadow; border-radius: $tooltip-radius; color: $tooltip-color; font-size: $font-size-small; line-height: 1.5; font-weight: 600; - transform: translate(-50%, ($tooltip-padding * 3)) scale(0); + transform: translate(-50%, ($tooltip-padding * 3)) scale(.8); transform-origin: 50% 100%; transition: transform .2s .1s ease, opacity .2s .1s ease; - &::after { + // Arrows + &::after, + &::before { content: ''; - display: block; position: absolute; - left: 50%; - bottom: -$tooltip-arrow-size; - margin-left: -$tooltip-arrow-size; width: 0; height: 0; - transition: inherit; - border-style: solid; - border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size; - border-color: $controls-bg transparent transparent; + top: 100%; + left: 50%; + transform: translateX(-50%); + } + // The border triangle + &::after { + $border-arrow-size: ($tooltip-arrow-size + ($tooltip-border-width * 1)); + bottom: -($border-arrow-size + $tooltip-border-width); + border-right: $border-arrow-size solid transparent; + border-top: $border-arrow-size solid $tooltip-border-color; + border-left: $border-arrow-size solid transparent; + z-index: 1; + } + // The background triangle + &::before { + bottom: -$tooltip-arrow-size; + border-right: $tooltip-arrow-size solid transparent; + border-top: $tooltip-arrow-size solid $tooltip-bg; + border-left: $tooltip-arrow-size solid transparent; + z-index: 2; } } button:hover .plyr-tooltip, |