diff options
| -rw-r--r-- | changelog.md | 11 | ||||
| -rw-r--r-- | dist/plyr.css | 2 | ||||
| -rw-r--r-- | dist/plyr.js | 2 | ||||
| -rw-r--r-- | docs/dist/docs.css | 2 | ||||
| -rw-r--r-- | docs/dist/docs.js | 2 | ||||
| -rw-r--r-- | docs/index.html | 42 | ||||
| -rw-r--r-- | docs/src/js/docs.js | 30 | ||||
| -rw-r--r-- | docs/src/less/components/buttons.less | 30 | ||||
| -rw-r--r-- | docs/src/less/components/examples.less | 30 | ||||
| -rw-r--r-- | docs/src/less/components/panels.less | 13 | ||||
| -rw-r--r-- | docs/src/less/components/type.less | 12 | ||||
| -rw-r--r-- | docs/src/less/docs.less | 1 | ||||
| -rw-r--r-- | readme.md | 95 | ||||
| -rw-r--r-- | src/js/plyr.js | 232 | ||||
| -rw-r--r-- | src/less/plyr.less | 127 |
15 files changed, 341 insertions, 290 deletions
diff --git a/changelog.md b/changelog.md index ce536ec2..f43b3692 100644 --- a/changelog.md +++ b/changelog.md @@ -1,9 +1,14 @@ # Changelog # v1.5.0 -- *Beta* Vimeo support (please report bugs) -- New options for initialization (see docs) -- +- *Beta* Vimeo support (please report bugs) (fixes #8) +- New options for initialization (you can now pass a selector, HTMLElement or NodeList) (fixes #118) +- Switched to BEM methodology (you will need to change CSS and probably HTML) +- Decoupled CSS and JS hooks (fixes #129) +- Custom controls container (fixes #98) +- Fix for private/incognito mode local storage bug (fixes #131) +- UMD module setup (fixes #121) +- Specify iframe title for Vimeo and YouTube (fixes #124) ## v1.3.5 - Fixed bug with API use on basic supported browsers diff --git a/dist/plyr.css b/dist/plyr.css index 2304e671..a7364501 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;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:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,-webkit-transform .2s .1s ease}.plyr-tooltip::after,.plyr-tooltip::before{content:'';position:absolute;width:0;height:0;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.plyr-tooltip::after{bottom:-8px;border-right:7px solid transparent;border-top:7px solid rgba(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:100%;transition:background .3s ease,-webkit-transform .2s ease;transition:background .3s ease,transform .2s ease;transition:background .3s ease,transform .2s ease,-webkit-transform .2s ease;cursor:ew-resize}.plyr-volume[type=range]::-webkit-slider-thumb:hover{-webkit-transform:scale(110%);transform:scale(110%)}.plyr-volume[type=range]::-webkit-slider-thumb:active{height:15px;width:15px;border:2px solid #3498DB;background:#fff!important;margin-top:-4px}.plyr-volume[type=range]::-moz-range-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease,-webkit-transform .2s ease;transition:background .3s ease,transform .2s ease;transition:background .3s ease,transform .2s ease,-webkit-transform .2s ease;cursor:ew-resize}.plyr-volume[type=range]::-moz-range-thumb:hover{transform:scale(110%)}.plyr-volume[type=range]::-moz-range-thumb:active{height:15px;width:15px;border:2px solid #3498DB;background:#fff!important}.plyr-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.plyr-volume[type=range]::-ms-fill-lower,.plyr-volume[type=range]::-ms-fill-upper{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease,-webkit-transform .2s ease;transition:background .3s ease,transform .2s ease;transition:background .3s ease,transform .2s ease,-webkit-transform .2s ease;cursor:ew-resize}.plyr-volume[type=range]::-ms-thumb:hover{transform:scale(110%)}.plyr-volume[type=range]::-ms-thumb:active{height:15px;width:15px;border:2px solid #3498DB;background:#fff!important}.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;transition:transform .3s .2s ease,-webkit-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}}.plyr{position:relative;max-width:100%;min-width:290px}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr__sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.plyr__video-wrapper{position:relative}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle}.plyr__video-embed{padding-bottom:56.25%;height:0;overflow:hidden;background:#000}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr__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:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,-webkit-transform .2s .1s ease}.plyr__tooltip::after,.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.plyr__tooltip::after{bottom:-8px;border-right:7px solid transparent;border-top:7px solid rgba(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--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr__volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0;border:none}.plyr__volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease,-webkit-transform .2s ease;transition:background .3s ease,transform .2s ease;transition:background .3s ease,transform .2s ease,-webkit-transform .2s ease;cursor:ew-resize}.plyr__volume[type=range]::-webkit-slider-thumb:hover{-webkit-transform:scale(110%);transform:scale(110%)}.plyr__volume[type=range]::-webkit-slider-thumb:active{height:15px;width:15px;border:2px solid #3498DB;background:#fff!important;margin-top:-4px}.plyr__volume[type=range]::-moz-range-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease,-webkit-transform .2s ease;transition:background .3s ease,transform .2s ease;transition:background .3s ease,transform .2s ease,-webkit-transform .2s ease;cursor:ew-resize}.plyr__volume[type=range]::-moz-range-thumb:hover{transform:scale(110%)}.plyr__volume[type=range]::-moz-range-thumb:active{height:15px;width:15px;border:2px solid #3498DB;background:#fff!important}.plyr__volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.plyr__volume[type=range]::-ms-fill-lower,.plyr__volume[type=range]::-ms-fill-upper{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-ms-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease,-webkit-transform .2s ease;transition:background .3s ease,transform .2s ease;transition:background .3s ease,transform .2s ease,-webkit-transform .2s ease;cursor:ew-resize}.plyr__volume[type=range]::-ms-thumb:hover{transform:scale(110%)}.plyr__volume[type=range]::-ms-thumb:active{height:15px;width:15px;border:2px solid #3498DB;background:#fff!important}.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.plyr--playing .plyr__controls,.plyr--fullscreen-active--fullscreen--hide-controls.plyr--playing .plyr__controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease;transition:transform .3s .2s ease,-webkit-transform .3s .2s ease}.plyr--fullscreen--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__controls,.plyr--fullscreen-active--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__controls{-webkit-transform:translateY(0);transform:translateY(0)}.plyr--fullscreen--fullscreen--hide-controls.plyr--playing .plyr__captions,.plyr--fullscreen-active--fullscreen--hide-controls.plyr--playing .plyr__captions{bottom:5px;transition:bottom .3s .2s ease}.plyr--fullscreen .plyr__captions,.plyr--fullscreen--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__captions,.plyr--fullscreen-active .plyr__captions,.plyr--fullscreen-active--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__captions{top:auto;bottom:90px}@media (min-width:560px){.plyr--fullscreen .plyr__captions,.plyr--fullscreen--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__captions,.plyr--fullscreen-active .plyr__captions,.plyr--fullscreen-active--fullscreen--hide-controls.plyr--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 26911d9c..b01c5fe4 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1 +1 @@ -!function(e,t){"function"==typeof define&&define.amd?define(null,t):"object"==typeof exports?module.exports=t():e.plyr=t()}(this,function(){function e(){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>% "+S.i18n.played,"</progress>",'<progress class="plyr-progress-buffer" max="100" value="0">',"<span>0</span>% "+S.i18n.buffered,"</progress>","</div>",'<span class="plyr-controls-left">'];return a(S.controls,"restart")&&e.push('<button type="button" data-plyr="restart">','<svg><use xlink:href="#'+S.iconPrefix+'-restart" /></svg>','<span class="sr-only">'+S.i18n.restart+"</span>","</button>"),a(S.controls,"rewind")&&e.push('<button type="button" data-plyr="rewind">','<svg><use xlink:href="#'+S.iconPrefix+'-rewind" /></svg>','<span class="sr-only">'+S.i18n.rewind+"</span>","</button>"),a(S.controls,"play")&&e.push('<button type="button" data-plyr="play">','<svg><use xlink:href="#'+S.iconPrefix+'-play" /></svg>','<span class="sr-only">'+S.i18n.play+"</span>","</button>",'<button type="button" data-plyr="pause">','<svg><use xlink:href="#'+S.iconPrefix+'-pause" /></svg>','<span class="sr-only">'+S.i18n.pause+"</span>","</button>"),a(S.controls,"fast-forward")&&e.push('<button type="button" data-plyr="fast-forward">','<svg><use xlink:href="#'+S.iconPrefix+'-fast-forward" /></svg>','<span class="sr-only">'+S.i18n.forward+"</span>","</button>"),a(S.controls,"current-time")&&e.push('<span class="plyr-time">','<span class="sr-only">'+S.i18n.currentTime+"</span>",'<span class="plyr-current-time">00:00</span>',"</span>"),a(S.controls,"duration")&&e.push('<span class="plyr-time">','<span class="sr-only">'+S.i18n.duration+"</span>",'<span class="plyr-duration">00:00</span>',"</span>"),e.push("</span>",'<span class="plyr-controls-right">'),a(S.controls,"mute")&&e.push('<button type="button" data-plyr="mute">','<svg class="icon-muted"><use xlink:href="#'+S.iconPrefix+'-muted" /></svg>','<svg><use xlink:href="#'+S.iconPrefix+'-volume" /></svg>','<span class="sr-only">'+S.i18n.toggleMute+"</span>","</button>"),a(S.controls,"volume")&&e.push('<label for="volume{id}" class="sr-only">'+S.i18n.volume+"</label>",'<input id="volume{id}" class="plyr-volume" type="range" min="0" max="10" value="5" data-plyr="volume">'),a(S.controls,"captions")&&e.push('<button type="button" data-plyr="captions">','<svg class="icon-captions-on"><use xlink:href="#'+S.iconPrefix+'-captions-on" /></svg>','<svg><use xlink:href="#'+S.iconPrefix+'-captions-off" /></svg>','<span class="sr-only">'+S.i18n.toggleCaptions+"</span>","</button>"),a(S.controls,"fullscreen")&&e.push('<button type="button" data-plyr="fullscreen">','<svg class="icon-exit-fullscreen"><use xlink:href="#'+S.iconPrefix+'-exit-fullscreen" /></svg>','<svg><use xlink:href="#'+S.iconPrefix+'-enter-fullscreen" /></svg>','<span class="sr-only">'+S.i18n.toggleFullscreen+"</span>","</button>"),e.push("</span>","</div>"),e.join("")}function t(e,t){S.debug&&window.console&&console[t?"error":"log"](e)}function n(){var e,t,n,r=navigator.userAgent,o=navigator.appName,a=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(o="IE",a="11;"):-1!==(t=r.indexOf("MSIE"))?(o="IE",a=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(o="Chrome",a=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(o="Safari",a=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(a=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(o="Firefox",a=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(o=r.substring(e,t),a=r.substring(t+1),o.toLowerCase()==o.toUpperCase()&&(o=navigator.appName)),-1!==(n=a.indexOf(";"))&&(a=a.substring(0,n)),-1!==(n=a.indexOf(" "))&&(a=a.substring(0,n)),s=parseInt(""+a,10),isNaN(s)&&(a=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10)),{name:o,version:s,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform)}}function r(e,t){var n=e.media;if("video"==e.type)switch(t){case"video/webm":return!(!n.canPlayType||!n.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/,""));case"video/mp4":return!(!n.canPlayType||!n.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/,""));case"video/ogg":return!(!n.canPlayType||!n.canPlayType('video/ogg; codecs="theora"').replace(/no/,""))}else if("audio"==e.type)switch(t){case"audio/mpeg":return!(!n.canPlayType||!n.canPlayType("audio/mpeg;").replace(/no/,""));case"audio/ogg":return!(!n.canPlayType||!n.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/,""));case"audio/wav":return!(!n.canPlayType||!n.canPlayType('audio/wav; codecs="1"').replace(/no/,""))}return!1}function 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 a(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function s(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function i(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,o=e[n],a=o.parentNode,s=o.nextSibling;r.appendChild(o),s?a.insertBefore(r,s):a.appendChild(r)}}function l(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function u(e){e.parentNode.removeChild(e)}function c(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 p(e,t,n){var r=document.createElement(e);d(r,n),c(t,r)}function m(e){return e.replace(".","")}function f(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function y(e,t,n,r){var o=t.split(" ");if(e instanceof NodeList)for(var a=0;a<e.length;a++)e[a]instanceof Node&&y(e[a],arguments[1],arguments[2],arguments[3]);else for(var s=0;s<o.length;s++)e[r?"addEventListener":"removeEventListener"](o[s],n,!1)}function b(e,t,n){e&&y(e,t,n,!0)}function v(e,t,n){e&&y(e,t,n,!1)}function g(e,t){var n=document.createEvent("MouseEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function h(e,t){return t="boolean"==typeof t?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t}function w(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function k(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},k(e[n],t[n])):e[n]=t[n];return e}function T(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=document.body),this.prefix){case"":return document.fullscreenElement==e;case"moz":return document.mozFullScreenElement==e;default:return document[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return"undefined"==typeof e&&(e=document.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function x(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function F(k){function F(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&&(f(ve.container,S.classes.captions.enabled,!0),S.captions.defaultActive&&(f(ve.container,S.classes.captions.active,!0),h(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 V(){var n=S.html;if(t("Injecting custom controls."),n||(n=e()),n=s(n,"{seektime}",S.seekTime),n=s(n,"{id}",Math.floor(1e4*Math.random())),ve.container.insertAdjacentHTML("beforeend",n),S.tooltips)for(var r=M(S.selectors.labels),o=r.length-1;o>=0;o--){var a=r[o];f(a,S.classes.hidden,!1),f(a,S.classes.tooltip,!0)}}function q(){try{return ve.controls=L(S.selectors.controls),ve.buttons={},ve.buttons.seek=L(S.selectors.buttons.seek),ve.buttons.play=L(S.selectors.buttons.play),ve.buttons.pause=L(S.selectors.buttons.pause),ve.buttons.restart=L(S.selectors.buttons.restart),ve.buttons.rewind=L(S.selectors.buttons.rewind),ve.buttons.forward=L(S.selectors.buttons.forward),ve.buttons.fullscreen=L(S.selectors.buttons.fullscreen),ve.buttons.mute=L(S.selectors.buttons.mute),ve.buttons.captions=L(S.selectors.buttons.captions),ve.checkboxes=M('[type="checkbox"]'),ve.progress={},ve.progress.container=L(S.selectors.progress.container),ve.progress.buffer={},ve.progress.buffer.bar=L(S.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(S.selectors.progress.played),ve.progress.played.text=ve.progress.played.bar&&ve.progress.played.bar.getElementsByTagName("span")[0],ve.volume=L(S.selectors.buttons.volume),ve.duration=L(S.selectors.duration),ve.currentTime=L(S.selectors.currentTime),ve.seekTime=M(S.selectors.seekTime),!0}catch(e){return t("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||S.i18n.play;"undefined"!=typeof S.title&&S.title.length&&(e+=", "+S.title),ve.buttons.play.setAttribute("aria-label",e)}}function j(){if(!ve.media)return t("No audio or video element found!",!0),!1;if(ve.supported.full&&(ve.media.removeAttribute("controls"),f(ve.container,S.classes.type.replace("{0}",ve.type),!0),f(ve.container,S.classes.stopped,S.autoplay),ve.browser.ios&&f(ve.container,"ios",!0),"video"===ve.type)){var e=document.createElement("div");e.setAttribute("class",S.classes.videoWrapper),i(ve.media,e),ve.videoContainer=e}a(S.types.embed,ve.type)?(D(ve.embedId,ve.type),ve.embedId=null):S.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--)u(r[a]);if(f(ve.media,S.classes.videoWrapper,!0),f(ve.media,S.classes.embedWrapper,!0),"youtube"===ve.type)ve.media.appendChild(t),t.setAttribute("id",n),"object"==typeof YT?R(e,t):(o(S.urls.youtube.api),window.onYouTubeIframeAPIReady=function(){R(e,t)});else if("vimeo"===ve.type){var s=document.createElement("iframe");if(s.loaded=!1,b(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)b(s,"load",_);else{o(S.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(S.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:S.autoplay?1:0,controls:ve.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:S.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=!S.autoplay,ve.media.currentTime=t.getCurrentTime(),ve.media.muted=t.isMuted(),g(ve.media,"timeupdate"),window.clearInterval(ve.timer.buffering),ve.timer.buffering=window.setInterval(function(){ve.media.buffered=t.getVideoLoadedFraction(),g(ve.media,"progress"),1===ve.media.buffered&&window.clearInterval(ve.timer.buffering)},200),B(),S.displayDuration&&ie()},onStateChange:function(e){var t=e.target;switch(window.clearInterval(ve.timer.playing),e.data){case 0:ve.media.paused=!0,g(ve.media,"ended");break;case 1:ve.media.paused=!1,g(ve.media,"play"),ve.timer.playing=window.setInterval(function(){ve.media.currentTime=t.getCurrentTime(),g(ve.media,"timeupdate")},200);break;case 2:ve.media.paused=!0,g(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=!S.autoplay,ve.media.currentTime=0,B(),ve.embed.api("getCurrentTime",function(e){ve.media.currentTime=e,g(ve.media,"timeupdate")}),ve.embed.api("getDuration",function(e){ve.media.duration=e,ve.supported.full&&S.displayDuration&&ie()}),ve.embed.addEvent("play",function(){ve.media.paused=!1,g(ve.media,"play")}),ve.embed.addEvent("pause",function(){ve.media.paused=!0,g(ve.media,"pause")}),ve.embed.addEvent("playProgress",function(e){ve.media.currentTime=e.seconds,g(ve.media,"timeupdate")}),ve.embed.addEvent("loadProgress",function(e){ve.media.buffered=e.percent,g(ve.media,"progress")}),ve.embed.addEvent("finish",function(){ve.media.paused=!0,g(ve.media,"ended")})})}function W(){if("video"===ve.type){L(S.selectors.captions)||ve.videoContainer.insertAdjacentHTML("afterbegin",'<div class="'+m(S.selectors.captions)+'"><span></span></div>'),ve.captionsContainer=L(S.selectors.captions).querySelector("span"),ve.usingTextTracks=!1,ve.media.textTracks&&(ve.usingTextTracks=!0);for(var e,n="",r=ve.media.childNodes,o=0;o<r.length;o++)"track"===r[o].nodeName.toLowerCase()&&(e=r[o].kind,("captions"===e||"subtitles"===e)&&(n=r[o].getAttribute("src")));if(ve.captionExists=!0,""===n?(ve.captionExists=!1,t("No caption track found.")):t("Caption track found; URI: "+n),ve.captionExists){for(var a=ve.media.textTracks,s=0;s<a.length;s++)a[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)&&(t("Detected unsupported browser for HTML5 captions. Using fallback."),ve.usingTextTracks=!1),ve.usingTextTracks){t("TextTracks supported.");for(var i=0;i<a.length;i++){var l=a[i];("captions"===l.kind||"subtitles"===l.kind)&&b(l,"cuechange",function(){ve.captionsContainer.innerHTML="",this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&ve.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim())})}}else if(t("TextTracks not supported so rendering captions manually."),ve.currentCaption="",ve.captions=[],""!==n){var u=new XMLHttpRequest;u.onreadystatechange=function(){if(4===u.readyState)if(200===u.status){var e,n=[],r=u.responseText;n=r.split("\n\n");for(var o=0;o<n.length;o++)e=n[o],ve.captions[o]=[],ve.captions[o]=e.split("\n");ve.captions.shift(),t("Successfully loaded the caption file via AJAX.")}else t("There was a problem loading the caption file via AJAX.",!0)},u.open("get",n,!0),u.send()}if("Safari"===ve.browser.name&&ve.browser.version>=7){t("Safari 7+ detected; removing track from DOM."),a=ve.media.getElementsByTagName("track");for(var c=0;c<a.length;c++)ve.media.removeChild(a[c])}}else f(ve.container,S.classes.captions.enabled)}}function z(){if(("audio"!=ve.type||S.fullscreen.allowAudio)&&S.fullscreen.enabled){var e=C.supportsFullScreen;e||S.fullscreen.fallback&&!O()?(t((e?"Native":"Fallback")+" fullscreen enabled."),f(ve.container,S.classes.fullscreen.enabled,!0)):t("Fullscreen not supported and fallback disabled."),h(ve.buttons.fullscreen,!1),S.fullscreen.hideControls&&f(ve.container,S.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=S.seekTime),G(ve.media.currentTime-e)}function J(e){"number"!=typeof e&&(e=S.seekTime),G(ve.media.currentTime+e)}function G(e){var n=0,r=ve.media.paused;"number"==typeof e?n=e:"object"!=typeof e||"input"!==e.type&&"change"!==e.type||(n=e.target.value/e.target.max*ve.media.duration),0>n?n=0:n>ve.media.duration&&(n=ve.media.duration);try{ve.media.currentTime=n.toFixed(1)}catch(o){}"embed"in ve&&("youtube"===ve.type&&ve.embed.seekTo(n),"vimeo"===ve.type&&ve.embed.api("seekTo",n),g(ve.media,"timeupdate"),r&&U()),t("Seeking to "+ve.media.currentTime+" seconds"),F(n)}function K(){f(ve.container,S.classes.playing,!ve.media.paused),f(ve.container,S.classes.stopped,ve.media.paused)}function Q(e){function t(){f(ve.container,S.classes.hover,!0),window.clearTimeout(o),a||(o=window.setTimeout(function(){f(ve.container,S.classes.hover,!1)},2e3))}function n(e){a="mouseenter"===e.type}var r=C.supportsFullScreen;e&&e.type===C.fullScreenEventName?ve.isFullscreen=C.isFullScreen(ve.container):r?(C.isFullScreen(ve.container)?C.cancelFullScreen():C.requestFullScreen(ve.container),ve.isFullscreen=C.isFullScreen(ve.container)):(ve.isFullscreen=!ve.isFullscreen,ve.isFullscreen?(b(document,"keyup",Z),document.body.style.overflow="hidden"):(v(document,"keyup",Z),document.body.style.overflow="")),f(ve.container,S.classes.fullscreen.active,ve.isFullscreen),h(ve.buttons.fullscreen,ve.isFullscreen);var o,a=!1;S.fullscreen.hideControls&&(f(ve.controls,S.classes.hover,!1),y(ve.controls,"mouseenter mouseleave",n,ve.isFullscreen),y(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),h(ve.buttons.mute,e),ve.media.muted=e,"youtube"===ve.type&&(ve.embed[ve.media.muted?"mute":"unMute"](),g(ve.media,"volumechange")),"vimeo"===ve.type&&(ve.media.muted?ve.embed.api("setVolume",0):ve.embed.api("setVolume",parseFloat(S.volume/10)),g(ve.media,"volumechange"))}function te(e){"undefined"==typeof e&&(e=S.storage.enabled&&x().supported?window.localStorage[S.storage.key]||S.volume:S.volume),e>10&&(e=10),0>e&&(e=0),ve.media.volume=parseFloat(e/10),S.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&&g(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),S.storage.enabled&&x().supported&&window.localStorage.setItem(S.storage.key,e),f(ve.container,S.classes.muted,0===e),ve.supported.full&&ve.buttons.mute&&h(ve.buttons.mute,0===e)}function re(e){ve.supported.full&&ve.buttons.captions&&("boolean"!=typeof e&&(e=-1===ve.container.className.indexOf(S.classes.captions.active)),ve.captionsEnabled=e,h(ve.buttons.captions,ve.captionsEnabled),f(ve.container,S.classes.captions.active,ve.captionsEnabled))}function oe(e){var t="waiting"===e.type;clearTimeout(ve.loadingTimer),ve.loadingTimer=setTimeout(function(){f(ve.container,S.classes.loading,t)},t?250:0)}function ae(e){var t=ve.progress.played.bar,n=ve.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=w(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?w(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&&S.displayDuration&&ve.media.paused&&se(e,ve.currentTime),ve.duration&&se(e,ve.duration)}function le(e){se(ve.media.currentTime,ve.currentTime),ae(e)}function ue(e,t){if("string"==typeof t)p(e,ve.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)p(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&&u(ve.videoContainer),u(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}c(ve.container,ve.media),a(S.types.html5,ve.type)&&(S.crossorigin&&ve.media.setAttribute("crossorigin",""),S.autoplay&&ve.media.setAttribute("autoplay",""),"poster"in e&&ve.media.setAttribute("poster",e.poster),S.loop&&ve.media.setAttribute("loop","")),ve.container.className=ve.originalClassName,f(ve.container,S.classes.fullscreen.active,ve.isFullscreen),f(ve.container,S.classes.captions.active,ve.captionsEnabled),S.autoplay=e.autoplay||S.autoplay,a(S.types.embed,ve.type)&&(ve.embedId=e.sources),a(S.types.html5,ve.type)&&ue("source",e.sources),j(),be(),a(S.types.html5,ve.type)&&(te(),ne(),ve.supported.full&&(le(),K()),"tracks"in e&&(ue("track",e.tracks),W()),ve.media.load(),S.autoplay&&$()),"title"in e&&(S.title=e.title,H())}}function de(e){"video"===ve.type&&ve.media.setAttribute("poster",e)}function pe(){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];f(n,"tab-focus",n===e)}}var t="IE"==ve.browser.name?"change":"input";b(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];b(r,"blur",function(){f(r,"tab-focus",!1)})}b(ve.buttons.play,"click",function(){$(),setTimeout(function(){ve.buttons.pause.focus()},100)}),b(ve.buttons.pause,"click",function(){U(),setTimeout(function(){ve.buttons.play.focus()},100)}),b(ve.buttons.restart,"click",G),b(ve.buttons.rewind,"click",Y),b(ve.buttons.forward,"click",J),b(ve.buttons.seek,t,G),b(ve.volume,t,function(){te(this.value)}),b(ve.buttons.mute,"click",ee),b(ve.buttons.fullscreen,"click",Q),C.supportsFullScreen&&b(document,C.fullScreenEventName,Q),b(ve.media,"timeupdate seeking",le),b(ve.media,"timeupdate",F),b(ve.media,"loadedmetadata",ie),b(ve.buttons.captions,"click",re),b(ve.media,"ended",function(){"video"===ve.type&&(ve.captionsContainer.innerHTML=""),K()}),b(ve.media,"progress playing",ae),b(ve.media,"volumechange",ne),b(ve.media,"play pause",K),b(ve.media,"waiting canplay seeked",oe),"video"===ve.type&&S.click&&b(ve.videoContainer,"click",function(){ve.media.paused?g(ve.buttons.play,"click"):ve.media.ended?(G(),g(ve.buttons.play,"click")):g(ve.buttons.pause,"click")})}function me(){if(!ve.init)return null;if(ve.container.setAttribute("class",m(S.selectors.container)),ve.init=!1,u(L(S.selectors.controls)),"youtube"===ve.type)return void ve.embed.destroy();"video"===ve.type&&(u(L(S.selectors.captions)),l(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;C=T(),ve.browser=n(),ve.media=ve.container.querySelectorAll("audio, video, div")[0],ve.originalClassName=ve.container.className;var e=ve.media.tagName.toLowerCase();if("div"===e?(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=e,S.crossorigin=null!==ve.media.getAttribute("crossorigin"),S.autoplay=S.autoplay||null!==ve.media.getAttribute("autoplay"),S.loop=S.loop||null!==ve.media.getAttribute("loop")),ve.supported=E.supported(ve.type),!ve.supported.basic)return!1;if(t(ve.browser.name+" "+ve.browser.version),j(),"video"==ve.type||"audio"==ve.type){if(!ve.supported.full)return void(ve.init=!0);ye(),S.displayDuration&&ie(),H()}ve.init=!0}function ye(){return V(),q()?(W(),be(),te(),void ne()):!1}function be(){z(),pe()}var ve=this;return ve.container=k,fe(),ve.init?{media:ve.media,play:$,pause:U,restart:G,rewind:Y,forward:J,seek:G,source:ce,poster:de,setVolume:te,togglePlay:X,toggleMute:ee,toggleCaptions:re,toggleFullscreen:Q,isFullscreen:function(){return ve.isFullscreen||!1},support:function(e){return r(ve,e)},destroy:me,restore:fe}:{}}var C,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://f.vimeocdn.com/js/froogaloop2.min.js"},youtube:{api:"https://www.youtube.com/iframe_api"}}};return E.supported=function(e){var t,r,o=n(),a="IE"===o.name&&o.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,r=t&&!a&&!s;break;case"audio":t=i,r=t&&!a;break;case"vimeo":case"youtube":t=!0,r=!a&&!s;break;default:t=i&&l,r=t&&!a}return{basic:t,full:r}},E.setup=function(e,t){var n=[],e=[];if("string"==typeof e?e=document.querySelectorAll(e):e instanceof HTMLElement?e=[e]:e instanceof NodeList||"string"==typeof e||("undefined"==typeof t&&"object"==typeof e&&(t=e),e=document.querySelectorAll(A.selectors.container)),S=k(A,t),!S.enabled||!E.supported().basic||!e.length)return!1;for(var r=e.length-1;r>=0;r--){var o=e[r];if("undefined"==typeof o.plyr){var a=new F(o);o.plyr=Object.keys(a).length?a:!1,"function"==typeof S.onSetup&&S.onSetup.apply(o.plyr)}n.push(o.plyr)}return n},E});
\ No newline at end of file +!function(e,t){"use strict";"function"==typeof define&&define.amd?define(null,t):"object"==typeof module?module.exports=t():e.plyr=t()}(this,function(){"use strict";function e(){var e=['<div class="plyr__controls">','<div class="plyr__progress">','<label for="seek{id}" class="plyr__sr-only">Seek</label>','<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.5" value="0" data-plyr="seek">','<progress class="plyr__progress--played" max="100" value="0">',"<span>0</span>% "+C.i18n.played,"</progress>",'<progress class="plyr__progress--buffer" max="100" value="0">',"<span>0</span>% "+C.i18n.buffered,"</progress>","</div>",'<span class="plyr__controls--left">'];return a(C.controls,"restart")&&e.push('<button type="button" data-plyr="restart">','<svg><use xlink:href="#'+C.iconPrefix+'-restart" /></svg>','<span class="plyr__sr-only">'+C.i18n.restart+"</span>","</button>"),a(C.controls,"rewind")&&e.push('<button type="button" data-plyr="rewind">','<svg><use xlink:href="#'+C.iconPrefix+'-rewind" /></svg>','<span class="plyr__sr-only">'+C.i18n.rewind+"</span>","</button>"),a(C.controls,"play")&&e.push('<button type="button" data-plyr="play">','<svg><use xlink:href="#'+C.iconPrefix+'-play" /></svg>','<span class="plyr__sr-only">'+C.i18n.play+"</span>","</button>",'<button type="button" data-plyr="pause">','<svg><use xlink:href="#'+C.iconPrefix+'-pause" /></svg>','<span class="plyr__sr-only">'+C.i18n.pause+"</span>","</button>"),a(C.controls,"fast-forward")&&e.push('<button type="button" data-plyr="fast-forward">','<svg><use xlink:href="#'+C.iconPrefix+'-fast-forward" /></svg>','<span class="plyr__sr-only">'+C.i18n.forward+"</span>","</button>"),a(C.controls,"current-time")&&e.push('<span class="plyr__time">','<span class="plyr__sr-only">'+C.i18n.currentTime+"</span>",'<span class="plyr__time--current">00:00</span>',"</span>"),a(C.controls,"duration")&&e.push('<span class="plyr__time">','<span class="plyr__sr-only">'+C.i18n.duration+"</span>",'<span class="plyr__time--duration">00:00</span>',"</span>"),e.push("</span>",'<span class="plyr__controls--right">'),a(C.controls,"mute")&&e.push('<button type="button" data-plyr="mute">','<svg class="icon--muted"><use xlink:href="#'+C.iconPrefix+'-muted" /></svg>','<svg><use xlink:href="#'+C.iconPrefix+'-volume" /></svg>','<span class="plyr__sr-only">'+C.i18n.toggleMute+"</span>","</button>"),a(C.controls,"volume")&&e.push('<label for="volume{id}" class="plyr__sr-only">'+C.i18n.volume+"</label>",'<input id="volume{id}" class="plyr__volume" type="range" min="0" max="10" value="5" data-plyr="volume">'),a(C.controls,"captions")&&e.push('<button type="button" data-plyr="captions">','<svg class="icon--captions-on"><use xlink:href="#'+C.iconPrefix+'-captions-on" /></svg>','<svg><use xlink:href="#'+C.iconPrefix+'-captions-off" /></svg>','<span class="plyr__sr-only">'+C.i18n.toggleCaptions+"</span>","</button>"),a(C.controls,"fullscreen")&&e.push('<button type="button" data-plyr="fullscreen">','<svg class="icon--exit-fullscreen"><use xlink:href="#'+C.iconPrefix+'-exit-fullscreen" /></svg>','<svg><use xlink:href="#'+C.iconPrefix+'-enter-fullscreen" /></svg>','<span class="plyr__sr-only">'+C.i18n.toggleFullscreen+"</span>","</button>"),e.push("</span>","</div>"),e.join("")}function t(e,t){C.debug&&window.console&&console[t?"error":"log"](e)}function n(){var e,t,n,r=navigator.userAgent,o=navigator.appName,a=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(o="IE",a="11;"):-1!==(t=r.indexOf("MSIE"))?(o="IE",a=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(o="Chrome",a=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(o="Safari",a=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(a=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(o="Firefox",a=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(o=r.substring(e,t),a=r.substring(t+1),o.toLowerCase()==o.toUpperCase()&&(o=navigator.appName)),-1!==(n=a.indexOf(";"))&&(a=a.substring(0,n)),-1!==(n=a.indexOf(" "))&&(a=a.substring(0,n)),s=parseInt(""+a,10),isNaN(s)&&(a=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10)),{name:o,version:s,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform)}}function r(e,t){var n=e.media;if("video"==e.type)switch(t){case"video/webm":return!(!n.canPlayType||!n.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/,""));case"video/mp4":return!(!n.canPlayType||!n.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/,""));case"video/ogg":return!(!n.canPlayType||!n.canPlayType('video/ogg; codecs="theora"').replace(/no/,""))}else if("audio"==e.type)switch(t){case"audio/mpeg":return!(!n.canPlayType||!n.canPlayType("audio/mpeg;").replace(/no/,""));case"audio/ogg":return!(!n.canPlayType||!n.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/,""));case"audio/wav":return!(!n.canPlayType||!n.canPlayType('audio/wav; codecs="1"').replace(/no/,""))}return!1}function 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 a(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function s(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function i(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,o=e[n],a=o.parentNode,s=o.nextSibling;r.appendChild(o),s?a.insertBefore(r,s):a.appendChild(r)}}function l(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function u(e){e.parentNode.removeChild(e)}function c(e,t){e.insertBefore(t,e.firstChild)}function p(e,t){for(var n in t)e.setAttribute(n,"boolean"==typeof t[n]&&t[n]?"":t[n])}function d(e,t,n){var r=document.createElement(e);p(r,n),c(t,r)}function m(e){return e.replace(".","")}function f(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function y(e,t,n,r){var o=t.split(" ");if(e instanceof NodeList)for(var a=0;a<e.length;a++)e[a]instanceof Node&&y(e[a],arguments[1],arguments[2],arguments[3]);else for(var s=0;s<o.length;s++)e[r?"addEventListener":"removeEventListener"](o[s],n,!1)}function b(e,t,n){e&&y(e,t,n,!0)}function v(e,t,n){e&&y(e,t,n,!1)}function g(e,t){var n=document.createEvent("MouseEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function h(e,t){return t="boolean"==typeof t?t:!e.getAttribute("aria-pressed"),e.setAttribute("aria-pressed",t),t}function w(e,t){return 0===e||0===t||isNaN(e)||isNaN(t)?0:(e/t*100).toFixed(2)}function k(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},k(e[n],t[n])):e[n]=t[n];return e}function T(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=document.body),this.prefix){case"":return document.fullscreenElement==e;case"moz":return document.mozFullScreenElement==e;default:return document[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return"undefined"==typeof e&&(e=document.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function x(){var e={supported:function(){if(!("localStorage"in window))return!1;try{window.localStorage.setItem("___test","OK");var e=window.localStorage.getItem("___test");return window.localStorage.removeItem("___test"),"OK"===e}catch(t){return!1}return!1}()};return e}function _(k){function _(e){if(!ge.usingTextTracks&&"video"===ge.type&&ge.supported.full&&(ge.subcount=0,e="number"==typeof e?e:ge.media.currentTime,ge.captions[ge.subcount])){for(;I(ge.captions[ge.subcount][0])<e.toFixed(1);)if(ge.subcount++,ge.subcount>ge.captions.length-1){ge.subcount=ge.captions.length-1;break}if(ge.media.currentTime.toFixed(1)>=N(ge.captions[ge.subcount][0])&&ge.media.currentTime.toFixed(1)<=I(ge.captions[ge.subcount][0])){ge.currentCaption=ge.captions[ge.subcount][1];var t=ge.currentCaption.trim();ge.captionsContainer.innerHTML!=t&&(ge.captionsContainer.innerHTML="",ge.captionsContainer.innerHTML=t)}else ge.captionsContainer.innerHTML=""}}function A(){ge.buttons.captions&&(f(ge.container,C.classes.captions.enabled,!0),C.captions.defaultActive&&(f(ge.container,C.classes.captions.active,!0),h(ge.buttons.captions,!0)))}function N(e){var t=[];return t=e.split(" --> "),P(t[0])}function I(e){var t=[];return t=e.split(" --> "),P(t[1])}function P(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function M(e){return ge.container.querySelectorAll(e)}function L(e){return M(e)[0]}function O(){try{return window.self!==window.top}catch(e){return!0}}function V(){var n=C.html;if(t("Injecting custom controls."),n||(n=e()),n=s(n,"{seektime}",C.seekTime),n=s(n,"{id}",Math.floor(1e4*Math.random())),ge.container.insertAdjacentHTML("beforeend",n),C.tooltips)for(var r=M(C.selectors.labels),o=r.length-1;o>=0;o--){var a=r[o];f(a,C.classes.hidden,!1),f(a,C.classes.tooltip,!0)}}function q(){try{return ge.controls=L(C.selectors.controls),ge.buttons={},ge.buttons.seek=L(C.selectors.buttons.seek),ge.buttons.play=L(C.selectors.buttons.play),ge.buttons.pause=L(C.selectors.buttons.pause),ge.buttons.restart=L(C.selectors.buttons.restart),ge.buttons.rewind=L(C.selectors.buttons.rewind),ge.buttons.forward=L(C.selectors.buttons.forward),ge.buttons.fullscreen=L(C.selectors.buttons.fullscreen),ge.buttons.mute=L(C.selectors.buttons.mute),ge.buttons.captions=L(C.selectors.buttons.captions),ge.checkboxes=M('[type="checkbox"]'),ge.progress={},ge.progress.container=L(C.selectors.progress.container),ge.progress.buffer={},ge.progress.buffer.bar=L(C.selectors.progress.buffer),ge.progress.buffer.text=ge.progress.buffer.bar&&ge.progress.buffer.bar.getElementsByTagName("span")[0],ge.progress.played={},ge.progress.played.bar=L(C.selectors.progress.played),ge.progress.played.text=ge.progress.played.bar&&ge.progress.played.bar.getElementsByTagName("span")[0],ge.volume=L(C.selectors.buttons.volume),ge.duration=L(C.selectors.duration),ge.currentTime=L(C.selectors.currentTime),ge.seekTime=M(C.selectors.seekTime),!0}catch(e){return t("It looks like there's a problem with your controls html. Bailing.",!0),ge.media.setAttribute("controls",""),!1}}function H(){if(ge.buttons.play){var e=ge.buttons.play.innerText||C.i18n.play;"undefined"!=typeof C.title&&C.title.length&&(e+=", "+C.title),ge.buttons.play.setAttribute("aria-label",e)}}function j(){if(!ge.media)return t("No audio or video element found!",!0),!1;if(ge.supported.full&&(ge.media.removeAttribute("controls"),f(ge.container,C.classes.type.replace("{0}",ge.type),!0),f(ge.container,C.classes.stopped,C.autoplay),ge.browser.ios&&f(ge.container,"ios",!0),"video"===ge.type)){var e=document.createElement("div");e.setAttribute("class",C.classes.videoWrapper),i(ge.media,e),ge.videoContainer=e}a(C.types.embed,ge.type)?(D(ge.embedId,ge.type),ge.embedId=null):C.autoplay&&U()}function D(e){for(var t=document.createElement("div"),n=ge.type+"-"+Math.floor(1e4*Math.random()),r=M('[id^="'+ge.type+'-"]'),a=r.length-1;a>=0;a--)u(r[a]);if(f(ge.media,C.classes.videoWrapper,!0),f(ge.media,C.classes.embedWrapper,!0),"youtube"===ge.type)ge.media.appendChild(t),t.setAttribute("id",n),"object"==typeof YT?R(e,t):(o(C.urls.youtube.api),window.onYouTubeIframeAPIReady=function(){R(e,t)});else if("vimeo"===ge.type){var s=document.createElement("iframe");if(s.loaded=!1,b(s,"load",function(){s.loaded=!0}),p(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),ge.media.appendChild(t),"function"==typeof Froogaloop)b(s,"load",W);else{o(C.urls.vimeo.api);var i=window.setInterval(function(){"$f"in window&&s.loaded&&(window.clearInterval(i),W.call(s))},50)}}}function B(){ge.supported.full&&(ge.container.querySelectorAll(C.selectors.controls).length||be()),ne(),re()}function R(e,t){"timer"in ge||(ge.timer={}),ge.embed=new YT.Player(t.id,{videoId:e,playerVars:{autoplay:C.autoplay?1:0,controls:ge.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:C.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1},events:{onReady:function(e){var t=e.target;ge.media.play=function(){t.playVideo()},ge.media.pause=function(){t.pauseVideo()},ge.media.stop=function(){t.stopVideo()},ge.media.duration=t.getDuration(),ge.media.paused=!C.autoplay,ge.media.currentTime=t.getCurrentTime(),ge.media.muted=t.isMuted(),g(ge.media,"timeupdate"),window.clearInterval(ge.timer.buffering),ge.timer.buffering=window.setInterval(function(){ge.media.buffered=t.getVideoLoadedFraction(),g(ge.media,"progress"),1===ge.media.buffered&&window.clearInterval(ge.timer.buffering)},200),B(),C.displayDuration&&le()},onStateChange:function(e){var t=e.target;switch(window.clearInterval(ge.timer.playing),e.data){case 0:ge.media.paused=!0,g(ge.media,"ended");break;case 1:ge.media.paused=!1,g(ge.media,"play"),ge.timer.playing=window.setInterval(function(){ge.media.currentTime=t.getCurrentTime(),g(ge.media,"timeupdate")},200);break;case 2:ge.media.paused=!0,g(ge.media,"pause")}}}})}function W(){ge.embed=$f(this),ge.embed.addEvent("ready",function(){ge.media.play=function(){ge.embed.api("play")},ge.media.pause=function(){ge.embed.api("pause")},ge.media.stop=function(){ge.embed.api("stop")},ge.media.paused=!C.autoplay,ge.media.currentTime=0,B(),ge.embed.api("getCurrentTime",function(e){ge.media.currentTime=e,g(ge.media,"timeupdate")}),ge.embed.api("getDuration",function(e){ge.media.duration=e,ge.supported.full&&C.displayDuration&&le()}),ge.embed.addEvent("play",function(){ge.media.paused=!1,g(ge.media,"play")}),ge.embed.addEvent("pause",function(){ge.media.paused=!0,g(ge.media,"pause")}),ge.embed.addEvent("playProgress",function(e){ge.media.currentTime=e.seconds,g(ge.media,"timeupdate")}),ge.embed.addEvent("loadProgress",function(e){ge.media.buffered=e.percent,g(ge.media,"progress")}),ge.embed.addEvent("finish",function(){ge.media.paused=!0,g(ge.media,"ended")})})}function z(){if("video"===ge.type){L(C.selectors.captions)||ge.videoContainer.insertAdjacentHTML("afterbegin",'<div class="'+m(C.selectors.captions)+'"><span></span></div>'),ge.captionsContainer=L(C.selectors.captions).querySelector("span"),ge.usingTextTracks=!1,ge.media.textTracks&&(ge.usingTextTracks=!0);for(var e,n="",r=ge.media.childNodes,o=0;o<r.length;o++)"track"===r[o].nodeName.toLowerCase()&&(e=r[o].kind,("captions"===e||"subtitles"===e)&&(n=r[o].getAttribute("src")));if(ge.captionExists=!0,""===n?(ge.captionExists=!1,t("No caption track found.")):t("Caption track found; URI: "+n),ge.captionExists){for(var a=ge.media.textTracks,s=0;s<a.length;s++)a[s].mode="hidden";if(A(ge),("IE"===ge.browser.name&&ge.browser.version>=10||"Firefox"===ge.browser.name&&ge.browser.version>=31||"Chrome"===ge.browser.name&&ge.browser.version>=43||"Safari"===ge.browser.name&&ge.browser.version>=7)&&(t("Detected unsupported browser for HTML5 captions. Using fallback."),ge.usingTextTracks=!1),ge.usingTextTracks){t("TextTracks supported.");for(var i=0;i<a.length;i++){var l=a[i];("captions"===l.kind||"subtitles"===l.kind)&&b(l,"cuechange",function(){ge.captionsContainer.innerHTML="",this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&ge.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim())})}}else if(t("TextTracks not supported so rendering captions manually."),ge.currentCaption="",ge.captions=[],""!==n){var u=new XMLHttpRequest;u.onreadystatechange=function(){if(4===u.readyState)if(200===u.status){var e,n=[],r=u.responseText;n=r.split("\n\n");for(var o=0;o<n.length;o++)e=n[o],ge.captions[o]=[],ge.captions[o]=e.split("\n");ge.captions.shift(),t("Successfully loaded the caption file via AJAX.")}else t("There was a problem loading the caption file via AJAX.",!0)},u.open("get",n,!0),u.send()}if("Safari"===ge.browser.name&&ge.browser.version>=7){t("Safari 7+ detected; removing track from DOM."),a=ge.media.getElementsByTagName("track");for(var c=0;c<a.length;c++)ge.media.removeChild(a[c])}}else f(ge.container,C.classes.captions.enabled)}}function $(){if(("audio"!=ge.type||C.fullscreen.allowAudio)&&C.fullscreen.enabled){var e=F.supportsFullScreen;e||C.fullscreen.fallback&&!O()?(t((e?"Native":"Fallback")+" fullscreen enabled."),f(ge.container,C.classes.fullscreen.enabled,!0)):t("Fullscreen not supported and fallback disabled."),h(ge.buttons.fullscreen,!1),C.fullscreen.hideControls&&f(ge.container,C.classes.fullscreen.hideControls,!0)}}function U(){ge.media.play()}function X(){ge.media.pause()}function Y(e){e===!0?U():e===!1?X():ge.media[ge.media.paused?"play":"pause"]()}function J(e){"number"!=typeof e&&(e=C.seekTime),G(ge.media.currentTime-e)}function K(e){"number"!=typeof e&&(e=C.seekTime),G(ge.media.currentTime+e)}function G(e){var n=0,r=ge.media.paused;"number"==typeof e?n=e:"object"!=typeof e||"input"!==e.type&&"change"!==e.type||(n=e.target.value/e.target.max*ge.media.duration),0>n?n=0:n>ge.media.duration&&(n=ge.media.duration);try{ge.media.currentTime=n.toFixed(1)}catch(o){}"embed"in ge&&("youtube"===ge.type&&ge.embed.seekTo(n),"vimeo"===ge.type&&ge.embed.api("seekTo",n),g(ge.media,"timeupdate"),r&&X()),t("Seeking to "+ge.media.currentTime+" seconds"),_(n)}function Q(){f(ge.container,C.classes.playing,!ge.media.paused),f(ge.container,C.classes.stopped,ge.media.paused)}function Z(e){function t(){f(ge.container,C.classes.hover,!0),window.clearTimeout(o),a||(o=window.setTimeout(function(){f(ge.container,C.classes.hover,!1)},2e3))}function n(e){a="mouseenter"===e.type}var r=F.supportsFullScreen;e&&e.type===F.fullScreenEventName?ge.isFullscreen=F.isFullScreen(ge.container):r?(F.isFullScreen(ge.container)?F.cancelFullScreen():F.requestFullScreen(ge.container),ge.isFullscreen=F.isFullScreen(ge.container)):(ge.isFullscreen=!ge.isFullscreen,ge.isFullscreen?(b(document,"keyup",ee),document.body.style.overflow="hidden"):(v(document,"keyup",ee),document.body.style.overflow="")),f(ge.container,C.classes.fullscreen.active,ge.isFullscreen),h(ge.buttons.fullscreen,ge.isFullscreen);var o,a=!1;C.fullscreen.hideControls&&(f(ge.controls,C.classes.hover,!1),y(ge.controls,"mouseenter mouseleave",n,ge.isFullscreen),y(ge.container,"mousemove",t,ge.isFullscreen))}function ee(e){27===(e.which||e.charCode||e.keyCode)&&ge.isFullscreen&&Z()}function te(e){"boolean"!=typeof e&&(e=!ge.media.muted),h(ge.buttons.mute,e),ge.media.muted=e,"youtube"===ge.type&&(ge.embed[ge.media.muted?"mute":"unMute"](),g(ge.media,"volumechange")),"vimeo"===ge.type&&(ge.media.muted?ge.embed.api("setVolume",0):ge.embed.api("setVolume",parseFloat(C.volume/10)),g(ge.media,"volumechange"))}function ne(e){"undefined"==typeof e&&(e=C.storage.enabled&&x().supported?window.localStorage[C.storage.key]||C.volume:C.volume),e>10&&(e=10),0>e&&(e=0),ge.media.volume=parseFloat(e/10),C.volume=e,"youtube"===ge.type&&ge.embed.setVolume(100*ge.media.volume),"vimeo"===ge.type&&ge.embed.api("setVolume",ge.media.volume),"embed"in ge&&g(ge.media,"volumechange"),ge.media.muted&&e>0&&te()}function re(){var e=ge.media.muted?0:10*ge.media.volume;ge.supported.full&&ge.volume&&(ge.volume.value=e),C.storage.enabled&&x().supported&&window.localStorage.setItem(C.storage.key,e),f(ge.container,C.classes.muted,0===e),ge.supported.full&&ge.buttons.mute&&h(ge.buttons.mute,0===e)}function oe(e){ge.supported.full&&ge.buttons.captions&&("boolean"!=typeof e&&(e=-1===ge.container.className.indexOf(C.classes.captions.active)),ge.captionsEnabled=e,h(ge.buttons.captions,ge.captionsEnabled),f(ge.container,C.classes.captions.active,ge.captionsEnabled))}function ae(e){var t="waiting"===e.type;clearTimeout(ge.loadingTimer),ge.loadingTimer=setTimeout(function(){f(ge.container,C.classes.loading,t)},t?250:0)}function se(e){var t=ge.progress.played.bar,n=ge.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=w(ge.media.currentTime,ge.media.duration),"timeupdate"==e.type&&ge.buttons.seek&&(ge.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=ge.progress.buffer.bar,n=ge.progress.buffer.text,r=function(){var e=ge.media.buffered;return e&&e.length?w(e.end(0),ge.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function ie(e,t){if(t){isNaN(e)&&(e=0),ge.secs=parseInt(e%60),ge.mins=parseInt(e/60%60),ge.hours=parseInt(e/60/60%60);var n=parseInt(ge.media.duration/60/60%60)>0;ge.secs=("0"+ge.secs).slice(-2),ge.mins=("0"+ge.mins).slice(-2),t.innerHTML=(n?ge.hours+":":"")+ge.mins+":"+ge.secs}}function le(){var e=ge.media.duration||0;!ge.duration&&C.displayDuration&&ge.media.paused&&ie(e,ge.currentTime),ge.duration&&ie(e,ge.duration)}function ue(e){ie(ge.media.currentTime,ge.currentTime),se(e)}function ce(e,t){if("string"==typeof t)d(e,ge.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)d(e,ge.media,t[n])}function pe(e){if("undefined"!=typeof e){switch(X(),"youtube"===ge.type?(ge.embed.destroy(),window.clearInterval(ge.timer.buffering),window.clearInterval(ge.timer.playing)):"video"===ge.type&&u(ge.videoContainer),u(ge.media),"type"in e&&e.type!==ge.type&&(ge.type=e.type),ge.type){case"video":ge.media=document.createElement("video");break;case"audio":ge.media=document.createElement("audio");break;case"youtube":case"vimeo":ge.media=document.createElement("div"),ge.embedId="string"==typeof e.sources?e.sources:e.sources[0].src}c(ge.container,ge.media),a(C.types.html5,ge.type)&&(C.crossorigin&&ge.media.setAttribute("crossorigin",""),C.autoplay&&ge.media.setAttribute("autoplay",""),"poster"in e&&ge.media.setAttribute("poster",e.poster),C.loop&&ge.media.setAttribute("loop","")),ge.container.className=ge.originalClassName,f(ge.container,C.classes.fullscreen.active,ge.isFullscreen),f(ge.container,C.classes.captions.active,ge.captionsEnabled),C.autoplay=e.autoplay||C.autoplay,a(C.types.embed,ge.type)&&(ge.embedId=e.sources),a(C.types.html5,ge.type)&&ce("source",e.sources),j(),ve(),a(C.types.html5,ge.type)&&(ne(),re(),ge.supported.full&&(ue(),Q()),"tracks"in e&&(ce("track",e.tracks),z()),ge.media.load(),C.autoplay&&U()),"title"in e&&(C.title=e.title,H())}}function de(e){"video"===ge.type&&ge.media.setAttribute("poster",e)}function me(){function e(){var e=document.activeElement;e&&e!=document.body?document.querySelector&&(e=document.querySelector(":focus")):e=null;for(var t in ge.buttons){var n=ge.buttons[t];f(n,"tab-focus",n===e)}}var t="IE"==ge.browser.name?"change":"input";b(window,"keyup",function(t){var n=t.keyCode?t.keyCode:t.which;9==n&&e()});for(var n in ge.buttons){var r=ge.buttons[n];b(r,"blur",function(){f(r,"tab-focus",!1)})}b(ge.buttons.play,"click",function(){U(),setTimeout(function(){ge.buttons.pause.focus()},100)}),b(ge.buttons.pause,"click",function(){X(),setTimeout(function(){ge.buttons.play.focus()},100)}),b(ge.buttons.restart,"click",G),b(ge.buttons.rewind,"click",J),b(ge.buttons.forward,"click",K),b(ge.buttons.seek,t,G),b(ge.volume,t,function(){ne(this.value)}),b(ge.buttons.mute,"click",te),b(ge.buttons.fullscreen,"click",Z),F.supportsFullScreen&&b(document,F.fullScreenEventName,Z),b(ge.media,"timeupdate seeking",ue),b(ge.media,"timeupdate",_),b(ge.media,"loadedmetadata",le),b(ge.buttons.captions,"click",oe),b(ge.media,"ended",function(){"video"===ge.type&&(ge.captionsContainer.innerHTML=""),Q()}),b(ge.media,"progress playing",se),b(ge.media,"volumechange",re),b(ge.media,"play pause",Q),b(ge.media,"waiting canplay seeked",ae),"video"===ge.type&&C.click&&b(ge.videoContainer,"click",function(){ge.media.paused?g(ge.buttons.play,"click"):ge.media.ended?(G(),g(ge.buttons.play,"click")):g(ge.buttons.pause,"click")})}function fe(){if(!ge.init)return null;if(ge.container.setAttribute("class",m(C.selectors.container)),ge.init=!1,u(L(C.selectors.controls)),"youtube"===ge.type)return void ge.embed.destroy();"video"===ge.type&&(u(L(C.selectors.captions)),l(ge.videoContainer)),ge.media.setAttribute("controls","");var e=ge.media.cloneNode(!0);ge.media.parentNode.replaceChild(e,ge.media)}function ye(){if(ge.init)return null;F=T(),ge.browser=n(),ge.media=ge.container.querySelectorAll("audio, video, div")[0],f(ge.container,E.selectors.container.replace(".",""),!0),ge.originalClassName=ge.container.className;var e=ge.media.tagName.toLowerCase();if("div"===e?(ge.type=ge.media.getAttribute("data-type"),ge.embedId=ge.media.getAttribute("data-video-id"),ge.media.removeAttribute("data-type"),ge.media.removeAttribute("data-video-id")):(ge.type=e,C.crossorigin=null!==ge.media.getAttribute("crossorigin"),C.autoplay=C.autoplay||null!==ge.media.getAttribute("autoplay"),C.loop=C.loop||null!==ge.media.getAttribute("loop")),ge.supported=S.supported(ge.type),!ge.supported.basic)return!1;if(t(ge.browser.name+" "+ge.browser.version),j(),"video"==ge.type||"audio"==ge.type){if(!ge.supported.full)return void(ge.init=!0);be(),C.displayDuration&&le(),H()}ge.init=!0}function be(){return V(),q()?(z(),ve(),ne(),void re()):!1}function ve(){$(),me()}var ge=this;return ge.container=k,ye(),ge.init?{media:ge.media,play:U,pause:X,restart:G,rewind:J,forward:K,seek:G,source:pe,poster:de,setVolume:ne,togglePlay:Y,toggleMute:te,toggleCaptions:oe,toggleFullscreen:Z,isFullscreen:function(){return ge.isFullscreen||!1},support:function(e){return r(ge,e)},destroy:fe,restore:ye}:{}}var F,C,S={},E={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__time--current",duration:".plyr__time--duration"},classes:{videoWrapper:"plyr__video-wrapper",embedWrapper:"plyr__video-embed",type:"plyr--{0}",stopped:"plyr--stopped",playing:"plyr--playing",muted:"plyr--muted",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",hidden:"plyr__sr-only",captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",active:"plyr--fullscreen-active",hideControls:"plyr--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://f.vimeocdn.com/js/froogaloop2.min.js"},youtube:{api:"https://www.youtube.com/iframe_api"}}};return S.supported=function(e){var t,r,o=n(),a="IE"===o.name&&o.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,r=t&&!a&&!s;break;case"audio":t=i,r=t&&!a;break;case"vimeo":case"youtube":t=!0,r=!a&&!s;break;default:t=i&&l,r=t&&!a}return{basic:t,full:r}},S.setup=function(e,t){var n=[];if("string"==typeof e?e=document.querySelectorAll(e):e instanceof HTMLElement?e=[e]:e instanceof NodeList||"string"==typeof e||("undefined"==typeof t&&"object"==typeof e&&(t=e),e=document.querySelectorAll(E.selectors.container)),C=k(E,t),!C.enabled||!S.supported().basic||!e.length)return!1;for(var r=e.length-1;r>=0;r--){var o=e[r];if("undefined"==typeof o.plyr){var a=new _(o);o.plyr=Object.keys(a).length?a:!1,"function"==typeof C.onSetup&&C.onSetup.apply(o.plyr)}n.push(o.plyr)}return n},S});
\ No newline at end of file diff --git a/docs/dist/docs.css b/docs/dist/docs.css index 38dcd187..9cf43c00 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-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 +/*! 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,li,ul{margin:0}body,h1,h2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,small{padding:0 10px}li,nav ul,ul{list-style:none;padding:0}legend,li,nav ul,ul{padding:0}.btn__bar .btn--active,.btn__bar ul{z-index:1;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;position:relative;vertical-align:baseline}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}sup{top:-.5em;vertical-align:2px;font-size:9px;font-size:.563rem}.btn__bar::before,.btn__count::before{content:"";top:50%}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{position:relative;margin:0 auto 20px}.btn__bar::before{position:absolute;left:0;right:0;height:1px;background:#dbe3e8}.btn__bar ul{-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 .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:linear-gradient(#f8fafb,#e9eef1);border:1px solid #cbd0d3;box-shadow:0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .1s ease,color .1s 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--primary,.btn__bar .btn--active{background-image:linear-gradient(#3498db,#258cd1);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%)}.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}.plyr__cite{display:none}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block}
\ No newline at end of file diff --git a/docs/dist/docs.js b/docs/dist/docs.js index 5cbfb2f0..733bcd9c 100644 --- a/docs/dist/docs.js +++ b/docs/dist/docs.js @@ -1 +1 @@ -"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var n,s=arguments.length;for(n=0;s>n;n++)t=arguments[n],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:n.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var e="classList",n="prototype",s=t.Element[n],i=Object,o=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[n].indexOf||function(t){for(var e=0,n=this.length;n>e;e++)if(e in this&&this[e]===t)return e;return-1},c=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},a=function(t,e){if(""===e)throw new c("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new c("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(t,e)},l=function(t){for(var e=o.call(t.getAttribute("class")||""),n=e?e.split(/\s+/):[],s=0,i=n.length;i>s;s++)this.push(n[s]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[n]=[],p=function(){return new l(this)};if(c[n]=Error[n],u.item=function(t){return this[t]||null},u.contains=function(t){return t+="",-1!==a(this,t)},u.add=function(){var t,e=arguments,n=0,s=e.length,i=!1;do t=e[n]+"",-1===a(this,t)&&(this.push(t),i=!0);while(++n<s);i&&this._updateClassName()},u.remove=function(){var t,e,n=arguments,s=0,i=n.length,o=!1;do for(t=n[s]+"",e=a(this,t);-1!==e;)this.splice(e,1),o=!0,e=a(this,t);while(++s<i);o&&this._updateClassName()},u.toggle=function(t,e){t+="";var n=this.contains(t),s=n?e!==!0&&"remove":e!==!1&&"add";return s&&this[s](t),e===!0||e===!1?e:!n},u.toString=function(){return this.join(" ")},i.defineProperty){var d={get:p,enumerable:!0,configurable:!0};try{i.defineProperty(s,e,d)}catch(m){-2146823252===m.number&&(d.enumerable=!1,i.defineProperty(s,e,d))}}else i[n].__defineGetter__&&s.__defineGetter__(e,p)}}(self)),plyr.setup({debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0},onSetup:function(){console.log("✓ Setup done")}}),shr.setup({count:{classname:"btn-count"}}),function(){function t(){var t=this,n=t.getAttribute("data-source"),s=document.querySelector(".plyr").plyr;switch(n){case"video":s.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":!0}]});break;case"audio":s.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"}]});break;case"youtube":s.source({type:"youtube",title:"Enovato interview of Dan Cederholm for Made By",sources:"Au87oAJ2jeE"});break;case"vimeo":s.source({type:"vimeo",title:"View from a blue moon",sources:"143418951"})}for(var i=e.length-1;i>=0;i--)e[i].classList.remove("active");event.target.classList.add("active")}for(var e=document.querySelectorAll("[data-source]"),n=e.length-1;n>=0;n--)e[n].addEventListener("click",t)}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,n,s,i,o,r){t.GoogleAnalyticsObject=i,t[i]=t[i]||function(){(t[i].q=t[i].q||[]).push(arguments)},t[i].l=1*new Date,o=e.createElement(n),r=e.getElementsByTagName(n)[0],o.async=1,o.src=s,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
\ No newline at end of file +"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var n,i=arguments.length;for(n=0;i>n;n++)e=arguments[n],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:n.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",n="prototype",i=e.Element[n],s=Object,o=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[n].indexOf||function(e){for(var t=0,n=this.length;n>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),n=t?t.split(/\s+/):[],i=0,s=n.length;s>i;i++)this.push(n[i]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[n]=[],d=function(){return new l(this)};if(a[n]=Error[n],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,n=0,i=t.length,s=!1;do e=t[n]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++n<i);s&&this._updateClassName()},u.remove=function(){var e,t,n=arguments,i=0,s=n.length,o=!1;do for(e=n[i]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++i<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var n=this.contains(e),i=n?t!==!0&&"remove":t!==!1&&"add";return i&&this[i](e),t===!0||t===!1?t:!n},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(i,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(i,t,p))}}else s[n].__defineGetter__&&i.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0},onSetup:function(){console.log("✓ Setup done")}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(){var e=this,n=e.getAttribute("data-source"),i=document.querySelector(".js-media-player").plyr;switch(n){case"video":i.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.0/example_captions_en.vtt","default":!0}]});break;case"audio":i.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case"youtube":i.source({type:"youtube",title:"View From A Blue Moon",sources:"bTqVqk7FSmY"});break;case"vimeo":i.source({type:"vimeo",title:"View From A Blue Moon",sources:"143418951"})}for(var s=t.length-1;s>=0;s--)t[s].classList.remove("btn--active");event.target.classList.add("btn--active")}for(var t=document.querySelectorAll("[data-source]"),n=t.length-1;n>=0;n--)t[n].addEventListener("click",e)}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,n,i,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(n),r=t.getElementsByTagName(n)[0],o.async=1,o.src=i,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index cd4248a0..fcb9f441 100644 --- a/docs/index.html +++ b/docs/index.html @@ -13,20 +13,20 @@ <!-- Docs styles --> <link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/docs.css"> </head> - <body> + <<body> <header> <h1>Plyr</h1> <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p> <nav> <ul> <li> - <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary" data-shr-network="github"> - <svg class="icon"><use xlink:href="#shr-github"/></svg>Download on GitHub + <a href="https://github.com/selz/plyr" target="_blank" class="btn btn--primary" data-shr-network="github"> + <svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub </a> </li> <li> - <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn-twitter" data-shr-network="twitter"> - <svg class="icon"><use xlink:href="#shr-twitter"/></svg>Tweet + <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--twitter" data-shr-network="twitter"> + <svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet </a> </li> </ul> @@ -34,44 +34,42 @@ </header> <main role="main" id="main"> - <nav class="btn-bar nav-panel"> + <nav class="btn__bar"> <ul> <li> - <button type="button" class="btn active" data-source="video">Video</button> + <button type="button" class="btn btn--active" data-source="video">Video</button> </li> - <li> + <li> <button type="button" class="btn" data-source="audio">Audio</button> </li> <li> - <button type="button" class="btn btn-youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button> + <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button> </li> <li> - <button type="button" class="btn btn-vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button> + <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo <sup>BETA</sup></button> </li> </ul> </nav> <section> - <div class="plyr"> - <video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin> + <div class="js-media-player"> + <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin> <!-- Video files --> - <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4"> - <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> + <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4"> + <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm"> - <!-- Text track file --> <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default> - <!-- Fallback for browsers that don't support the <video> element --> <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a> </video> - </div> + </div> - <ul> - <li class="cite cite-video"><small><a href="https://www.bigbuckbunny.org" target="_blank">Big Buck Bunny</a> © Copyright 2008, Blender Foundation</small></li> - <li class="cite cite-audio"><small><a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">96 by Logistics</a> © Copyright, Hospital Records</small></li> - <li class="cite cite-youtube"><small><a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Envato's "Made By" interview of Dan Cederholm</a> on <span class="color-youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small> - <li class="cite cite-vimeo"><small><a href="https://vimeo.com/87701971" target="_blank">Yosemite HD II</a> on <span class="color-vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small> + <ul> + <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> © Brainfarm</small></li> + <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi – “It All Began With A Burst”</a> © Kishi Bashi</small></li> + <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small> + <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small> </ul> </section> </main> diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js index 05cdf59b..76cd5ada 100644 --- a/docs/src/js/docs.js +++ b/docs/src/js/docs.js @@ -5,7 +5,7 @@ /*global plyr, shr*/ // Setup the player -plyr.setup({ +plyr.setup('.js-media-player', { debug: true, title: 'Video demo', tooltips: true, @@ -20,7 +20,7 @@ plyr.setup({ // Setup shr shr.setup({ count: { - classname: 'btn-count' + classname: 'btn__count' } }); @@ -37,22 +37,22 @@ shr.setup({ function newSource() { var trigger = this, type = trigger.getAttribute('data-source'), - player = document.querySelector('.plyr').plyr; + player = document.querySelector('.js-media-player').plyr; switch(type) { case 'video': player.source({ type: 'video', - title: 'Bug Buck Bunny', + title: 'View From A Blue Moon', sources: [{ - src: 'https://cdn.selz.com/plyr/1.0/movie.mp4', + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', type: 'video/mp4' }, { - src: 'https://cdn.selz.com/plyr/1.0/movie.webm', + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm', type: 'video/webm' }], - poster: 'https://cdn.selz.com/plyr/1.0/poster.jpg', + poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg', tracks: [{ kind: 'captions', label: 'English', @@ -66,13 +66,13 @@ shr.setup({ case 'audio': player.source({ type: 'audio', - title: '96 by Logistics', + title: 'Kishi Bashi – “It All Began With A Burst”', sources: [{ - src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3', + src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', type: 'audio/mp3' }, { - src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg', + src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', type: 'audio/ogg' }] }); @@ -81,25 +81,25 @@ shr.setup({ case 'youtube': player.source({ type: 'youtube', - title: 'Enovato interview of Dan Cederholm for Made By', - sources: 'Au87oAJ2jeE' + title: 'View From A Blue Moon', + sources: 'bTqVqk7FSmY' }); break; case 'vimeo': player.source({ type: 'vimeo', - title: 'View from a blue moon', + title: 'View From A Blue Moon', sources: '143418951' }); break; } for (var x = buttons.length - 1; x >= 0; x--) { - buttons[x].classList.remove('active'); + buttons[x].classList.remove('btn--active'); } - event.target.classList.add('active'); + event.target.classList.add('btn--active'); } })(); diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less index 1401cd01..c42ea4bd 100644 --- a/docs/src/less/components/buttons.less +++ b/docs/src/less/components/buttons.less @@ -21,7 +21,7 @@ nav { } // Tabs -.btn-bar { +.btn__bar { position: relative; margin: 0 auto @padding-base; max-width: @example-width-video; @@ -60,10 +60,8 @@ nav { display: block; border-radius: 0; } - .active { - &:extend(.btn-primary); - } - .btn.active { + .btn--active { + &:extend(.btn--primary); box-shadow: inset 0 1px 1px rgba(0,0,0, .2); position: relative; z-index: 1; @@ -80,7 +78,7 @@ nav { // Shared .btn, -.btn-count { +.btn__count { display: inline-block; vertical-align: middle; border-radius: @border-radius-base; @@ -91,12 +89,12 @@ nav { // Buttons .btn { padding: (@padding-base / 2) @padding-base; - background: @body-background; + background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%)); border: 1px solid @gray-light; - box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05); + box-shadow: 0 1px 1px rgba(0,0,0, .05); text-shadow: 0 1px 1px #fff; color: @gray; - transition: background .3s ease, border .3s ease, color .3s ease; + transition: background .1s ease, color .1s ease; &:hover, &:focus { @@ -104,18 +102,18 @@ nav { color: @gray; outline: 0; } - &-youtube .icon { + &--youtube .icon { color: @color-youtube; } - &-vimeo .icon { + &--vimeo .icon { color: @color-vimeo; } - &-twitter .icon { + &--twitter .icon { color: @color-twitter; } } -.btn-primary { - background-image: linear-gradient(@link-color, darken(@link-color, 3%)); +.btn--primary { + background-image: linear-gradient(@link-color, darken(@link-color, 5%)); background-color: @link-color; border-color: darken(@link-color, 10%); box-shadow: 0 1px 1px rgba(0,0,0, .15); @@ -128,13 +126,13 @@ nav { border-color: darken(@link-color, 20%); } } -.btn-small { +.btn--small { padding-top: ceil(@padding-base / 3); padding-bottom: ceil(@padding-base / 3); } // Count bubble -.btn-count { +.btn__count { position: relative; margin-left: (@padding-base / 2); padding: (@padding-base / 2) (@padding-base * .75); diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less index 6312b642..6dde9690 100644 --- a/docs/src/less/components/examples.less +++ b/docs/src/less/components/examples.less @@ -3,10 +3,10 @@ // ========================================================================== video, -.plyr-video-embed { +.plyr__video-embed { border-radius: @border-radius-base; } -.plyr-video-embed { +.plyr__video-embed { -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } @@ -15,15 +15,15 @@ video, margin: 0 auto @padding-base; max-width: @example-width-video; - &-controls { + &__controls { border-radius: 0 0 @border-radius-base @border-radius-base; } video, - .plyr-video-embed { + .plyr__video-embed { border-radius: @border-radius-base @border-radius-base 0 0; } - &-fullscreen, - &.fullscreen-active { + &--fullscreen, + &--fullscreen-active { max-width: none; .plyr-controls, @@ -36,20 +36,20 @@ video, } } } -.plyr-audio { +.plyr--audio { max-width: @example-width-audio; - .plyr-controls { + .plyr__controls { border-radius: @border-radius-base; } - .plyr-progress { + .plyr__progress { border-radius: @border-radius-base @border-radius-base 0 0; overflow: hidden; } } // Style full supported player -.cite { +.plyr__cite { display: none; .icon { @@ -57,9 +57,9 @@ video, } } -.plyr-video ~ ul .cite-video, -.plyr-audio ~ ul .cite-audio, -.plyr-youtube ~ ul .cite-youtube, -.plyr-vimeo ~ ul .cite-vimeo { +.plyr--video ~ ul .plyr__cite--video, +.plyr--audio ~ ul .plyr__cite--audio, +.plyr--youtube ~ ul .plyr__cite--youtube, +.plyr--vimeo ~ ul .plyr__cite--vimeo { display: block; -}
\ No newline at end of file +} diff --git a/docs/src/less/components/panels.less b/docs/src/less/components/panels.less deleted file mode 100644 index 290e5dfc..00000000 --- a/docs/src/less/components/panels.less +++ /dev/null @@ -1,13 +0,0 @@ -// ========================================================================== -// Panels -// ========================================================================== - -// Panels -.panel { - display: none; - - &.active { - display: block; - animation: fade-in .3s ease; - } -}
\ No newline at end of file diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less index 8fc200e2..854da12d 100644 --- a/docs/src/less/components/type.less +++ b/docs/src/less/components/type.less @@ -26,7 +26,13 @@ small { padding: 0 (@padding-base / 2); .font-size(14); } -ul +sup { + vertical-align: 2px; + .font-size(9); +} + +// Lists +ul, li { list-style: none; margin: 0; @@ -53,9 +59,9 @@ a { } } -.color-vimeo { +.color--vimeo { color: @color-vimeo; } -.color-youtube { +.color--youtube { color: @color-youtube; } diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less index 965dcba1..e828d3b3 100644 --- a/docs/src/less/docs.less +++ b/docs/src/less/docs.less @@ -22,6 +22,5 @@ @import "components/base.less"; @import "components/icons.less"; @import "components/buttons.less"; -@import "components/panels.less"; @import "components/error.less"; @import "components/examples.less"; @@ -1,12 +1,12 @@ # Plyr -A simple, accessible HTML5 media player. +A simple, accessible HTML5 media player. Checkout the [demo](http://plyr.io). [](http://plyr.io) ## Why? -We wanted a lightweight, accessible and customisable media player that just supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. +We wanted a lightweight, accessible and customizable media player that just supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. ## Features - **Accessible** - full support for VTT captions and screen readers. @@ -15,19 +15,18 @@ We wanted a lightweight, accessible and customisable media player that just supp - **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks. - **Responsive** - as you'd expect these days. - **Audio & Video** - support for both formats. -- **[Embedded Video](#embeds)** - support for YouTube (Vimeo soon). +- **[Embedded Video](#embeds)** - support for YouTube and Vimeo (beta). - **[API](#api)** - toggle playback, volume, seeking, and more. - **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes. - **i18n support** - support for internationalization of controls. -- **No dependencies** - written in vanilla JavaScript, no jQuery required. +- **No dependencies** - written in vanilla JavaScript, no jQuery required. -Oh and yes, it works with Bootstrap. +Oh and yes, it works with Bootstrap. ## Changelog -Check out the [changelog](changelog.md). +Check out the [changelog](changelog.md) to see what's been new with Plyr. ## Planned Development -- Vimeo support - Playback speed - Playlists - Multiple language captions (with selection) @@ -38,7 +37,7 @@ If you have any cool ideas or features, please let me know by [creating an issue ## Implementation -Check `docs/index.html` and `docs/dist/docs.js` for an example setup. +Check `docs/index.html` and `docs/dist/docs.js` for an example setup. **Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.3.7/plyr.js` to `https://cdn.plyr.io/1.3.7/plyr.js` @@ -56,7 +55,7 @@ ember addon:install ember-cli-plyr ``` More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub](https://github.com/louisrudner/ember-cli-plyr) -### CDN +### CDN If you want to use our CDN, you can use the following: ```html @@ -66,13 +65,15 @@ If you want to use our CDN, you can use the following: You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.7/sprite.svg`. -### CSS -If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. +### CSS & Styling +If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. ```html <link rel="stylesheet" href="dist/plyr.css"> ``` +The default setup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options. Check out the source for more on this. + ### SVG The SVG sprite for the controls icons is loaded in by AJAX to help with performance. This is best added before the closing `</body>`, before any other scripts. @@ -92,25 +93,29 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa })(document, "dist/sprite.svg"); </script> ``` + +If you're using the `<base>` tag on your site, you may need to use something like this: +[https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2](svgfixer.js) + More info on SVG sprites here: -[http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/) -and the AJAX technique here: +[http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/) +and the AJAX technique here: [http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/) ### HTML The only extra markup that's needed to use plyr is a `<div>` wrapper. Replace the source, poster and captions with urls for your media. ```html <div class="plyr"> - <video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin> + <video poster="/path/to/poster.jpg" controls> <!-- Video files --> - <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4"> - <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> - + <source src="/path/to/video.mp4" type="video/mp4"> + <source src="/path/to/video.webm" type="video/webm"> + <!-- Text track file --> - <track kind="captions" label="English captions" src="https://cdn.selz.com/plyr/1.0/movie_captions_en.vtt" srclang="en" default> - + <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default> + <!-- Fallback for browsers that don't support the <video> element --> - <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a> + <a href="/path/to/movie.mp4">Download</a> </video> </div> ``` @@ -120,14 +125,14 @@ And the same for `<audio>` <div class="plyr"> <audio controls> <!-- Audio files --> - <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3"> - <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg"> - + <source src="/path/to/audio.mp3" type="audio/mp3"> + <source src="/path/to/audio.ogg" type="audio/ogg"> + <!-- Fallback for browsers that don't support the <audio> element --> - <a href="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a> + <a href="/path/to/audio.mp3">Download</a> </audio> </div> -``` +``` For YouTube, Plyr uses the standard YouTube API markup (an empty `<div>`): @@ -138,7 +143,7 @@ For YouTube, Plyr uses the standard YouTube API markup (an empty `<div>`): ``` #### Cross Origin (CORS) -You'll notice the `crossorigin` attribute on the example `<video>` and `<audio>` elements. This is because the media is loaded from another domain. If your media is hosted on another domain, you may need to add this attribute. +You'll notice the `crossorigin` attribute on the example `<video>` and `<audio>` elements. This is because the media is loaded from another domain. If your media is hosted on another domain, you may need to add this attribute. More info on CORS here: [https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) @@ -154,9 +159,9 @@ Here's an example of a default setup: <script>plyr.setup();</script> ``` -This will look for all elements with the `plyr` classname and setup plyr on each element found. You can specify other options, including a different selector hook below. +This will look for all elements with the specified container classname (default is `plyr`) and setup plyr on each element found. You can specify other options, including a different selector hook below. The container classname will be added to the specified element(s) if it is not already present (for the CSS). -You can initialise the player a few other ways: +You can initialize the player a few other ways: Passing a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList): ```javascript @@ -196,7 +201,7 @@ Options must be passed as an object to the `setup()` method as above. <td><code>enabled</code></td> <td>Boolean</td> <td><code>true</code></td> - <td>Completely disable Plyr. This would allow you to do a User Agent check or similar to programatically enable or disable Plyr for a certain UA. Example below.</td> + <td>Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below.</td> </tr> <tr> <td><code>html</code></td> @@ -214,7 +219,7 @@ Options must be passed as an object to the `setup()` method as above. <td><code>i18n</code></td> <td>Object</td> <td><code><a href="controls.md">See controls.md</a></code></td> - <td>Used for internationalisation (i18n) of the tooltips/labels within the buttons.</td> + <td>Used for internationalization (i18n) of the tooltips/labels within the buttons.</td> </tr> <tr> <td><code>iconPrefix</code></td> @@ -339,7 +344,7 @@ Options must be passed as an object to the `setup()` method as above. ## API #### Fetching the plyr instance -A `plyr` object is added to any element that Plyr is initialised on. You can then control the player by accessing methods in the `plyr` object. +A `plyr` object is added to any element that Plyr is initialized on. You can then control the player by accessing methods in the `plyr` object. There are two ways to access the instance, firstly you re-query the element container you used for setup (e.g. `.js-plyr`) like so: @@ -442,14 +447,14 @@ Here's a list of the methods supported: <td>Array</td> <td> Set the media source. - <br><br> + <br><br> <strong>string</strong><br> <code>.source("/path/to/video.mp4")</code><br> This will set the <code>src</code> attribute on the <code>video</code> or <code>audio</code> element. <br><br> <strong>array</strong><br> <code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br> - This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play. + This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play. <br><br> <strong>YouTube</strong><br> Currently this API method only accepts a YouTube ID when used with a YouTube player. I will add URL support soon, along with being able to swap between types (e.g. YouTube to Audio or Video and vice versa.) @@ -475,7 +480,7 @@ Here's a list of the methods supported: #### .source() method -This allows changing the plyr source and type on the fly. +This allows changing the plyr source and type on the fly. Video example: @@ -483,7 +488,7 @@ Video example: player.source({ type: 'video', title: 'Bug Buck Bunny', - sources: [{ + sources: [{ src: 'https://cdn.selz.com/plyr/1.0/movie.mp4', type: 'video/mp4' }, @@ -508,7 +513,7 @@ Audio example: player.source({ type: 'audio', title: '96 by Logistics', - sources: [{ + sources: [{ src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3', type: 'audio/mp3' }, @@ -586,7 +591,7 @@ The `plyr` object on the player element also contains a `media` property which i ```javascript var media = document.querySelector(".plyr").plyr.media; -media.addEventListener("playing", function() { +media.addEventListener("playing", function() { console.log("playing"); }); ``` @@ -604,14 +609,14 @@ Currently only YouTube is supported. Vimeo will be coming soon. Some HTML5 media Due to the way the YouTube API works, the `timeupdate` and `progress` events are triggered by polling every 200ms so the event may trigger without an actual value change. Buffering progress is `media.buffered` in the `plyr` object. It is a a number between 0 and 1 that specifies the percentage of the video that the player shows as buffered. ```javascript -document.querySelector(".plyr").plyr.media.addEventListener("play", function() { +document.querySelector(".plyr").plyr.media.addEventListener("play", function() { console.log("play"); }); -``` +``` -The `.source()` API method can also be used but the video id must be passed as the argument. +The `.source()` API method can also be used but the video id must be passed as the argument. -Currently caption control is not supported but I will work on this. +Currently caption control is not supported but I will work on this. ## Fullscreen @@ -648,7 +653,7 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt ³ IE10 has no native fullscreen support, fallback can be used (see options) -The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use: +The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use: ```javascript enabled: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) @@ -658,13 +663,13 @@ If a User Agent is disabled but supports `<video>` and `<audio>` natively, it wi Any unsupported browsers will display links to download the media if the correct html is used. ### Checking for support -There's an API method for checking support. You can call `plyr.supported()` and optionally pass a type to it, e.g. `plyr.supported("video")`. It will return an object with two keys; `basic` meaning there's basic support for that media type (or both if no type is passed) and `full` meaning there's full support for plyr. +There's an API method for checking support. You can call `plyr.supported()` and optionally pass a type to it, e.g. `plyr.supported("video")`. It will return an object with two keys; `basic` meaning there's basic support for that media type (or both if no type is passed) and `full` meaning there's full support for plyr. ## Issues If you find anything weird with Plyr, please let us know using the GitHub issues tracker. ## Author -Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/Selz/plyr/graphs/contributors) +Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/Selz/plyr/graphs/contributors) ## Mentions - [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/) @@ -679,7 +684,7 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me] ## Used by - [Selz.com](https://selz.com) -Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-) +Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-) ## Useful links and credits Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from: diff --git a/src/js/plyr.js b/src/js/plyr.js index cd6d9bc7..6bcf38c5 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -7,25 +7,26 @@ // Credits: http://paypal.github.io/accessible-html5-video-player/ // ========================================================================== -(function (root, factory) { +(function(root, factory) { + 'use strict'; + /*global define,module*/ + if (typeof define === 'function' && define.amd) { // AMD define(null, factory); - } else if (typeof exports === 'object') { + } else if (typeof module === 'object') { // Node, CommonJS-like module.exports = factory(); } else { // Browser globals (root is window) root.plyr = factory(); } -}(this, function () { - var api = {}; - +}(this, function() { 'use strict'; /*global YT,$f*/ // Globals - var fullscreen, config; + var fullscreen, config, api = {}; // Default config var defaults = { @@ -41,7 +42,10 @@ iconPrefix: 'icon', selectors: { container: '.plyr', - controls: '.plyr-controls', + controls: { + container: null, + wrapper: '.plyr__controls' + }, labels: '[data-plyr] .sr-only, label .sr-only', buttons: { seek: '[data-plyr="seek"]', @@ -56,33 +60,35 @@ fullscreen: '[data-plyr="fullscreen"]' }, progress: { - container: '.plyr-progress', - buffer: '.plyr-progress-buffer', - played: '.plyr-progress-played' + container: '.plyr__progress', + buffer: '.plyr__progress--buffer', + played: '.plyr__progress--played' }, - captions: '.plyr-captions', - currentTime: '.plyr-current-time', - duration: '.plyr-duration' + captions: '.plyr__captions', + currentTime: '.plyr__time--current', + duration: '.plyr__time--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', + videoWrapper: 'plyr__video-wrapper', + embedWrapper: 'plyr__video-embed', + type: 'plyr--{0}', + stopped: 'plyr--stopped', + playing: 'plyr--playing', + muted: 'plyr--muted', + loading: 'plyr--loading', + hover: 'plyr--hover', + tooltip: 'plyr__tooltip', + hidden: 'plyr__sr-only', + isIos: 'plyr--is-ios', + isTouch: 'plyr--is-touch', captions: { - enabled: 'captions-enabled', - active: 'captions-active' + enabled: 'plyr--captions-enabled', + active: 'plyr--captions-active' }, fullscreen: { - enabled: 'fullscreen-enabled', - active: 'fullscreen-active', - hideControls: 'fullscreen-hide-controls' + enabled: 'plyr--fullscreen-enabled', + active: 'plyr--fullscreen-active', + hideControls: 'plyr--fullscreen--hide-controls' } }, captions: { @@ -112,10 +118,11 @@ volume: 'Volume', toggleMute: 'Toggle Mute', toggleCaptions: 'Toggle Captions', - toggleFullscreen: 'Toggle Fullscreen' + toggleFullscreen: 'Toggle Fullscreen', + frameTitle: 'Player for {title}' }, types: { - embed: ['youtube','vimeo'], + embed: ['youtube', 'vimeo'], html5: ['video', 'audio'] }, urls: { @@ -132,25 +139,25 @@ function _buildControls() { // Open and add the progress and seek elements var html = [ - '<div class="plyr-controls">', - '<div class="plyr-progress">', - '<label for="seek{id}" class="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">', + '<div class="plyr__controls">', + '<div class="plyr__progress">', + '<label for="seek{id}" class="plyr__sr-only">Seek</label>', + '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.5" value="0" data-plyr="seek">', + '<progress class="plyr__progress--played" max="100" value="0">', '<span>0</span>% ' + config.i18n.played, '</progress>', - '<progress class="plyr-progress-buffer" max="100" value="0">', + '<progress class="plyr__progress--buffer" max="100" value="0">', '<span>0</span>% ' + config.i18n.buffered, '</progress>', '</div>', - '<span class="plyr-controls-left">']; + '<span class="plyr__controls--left">']; // Restart button if (_inArray(config.controls, 'restart')) { html.push( '<button type="button" data-plyr="restart">', '<svg><use xlink:href="#' + config.iconPrefix + '-restart" /></svg>', - '<span class="sr-only">' + config.i18n.restart + '</span>', + '<span class="plyr__sr-only">' + config.i18n.restart + '</span>', '</button>' ); } @@ -160,7 +167,7 @@ html.push( '<button type="button" data-plyr="rewind">', '<svg><use xlink:href="#' + config.iconPrefix + '-rewind" /></svg>', - '<span class="sr-only">' + config.i18n.rewind + '</span>', + '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>', '</button>' ); } @@ -170,11 +177,11 @@ html.push( '<button type="button" data-plyr="play">', '<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>', - '<span class="sr-only">' + config.i18n.play + '</span>', + '<span class="plyr__sr-only">' + config.i18n.play + '</span>', '</button>', '<button type="button" data-plyr="pause">', '<svg><use xlink:href="#' + config.iconPrefix + '-pause" /></svg>', - '<span class="sr-only">' + config.i18n.pause + '</span>', + '<span class="plyr__sr-only">' + config.i18n.pause + '</span>', '</button>' ); } @@ -184,7 +191,7 @@ html.push( '<button type="button" data-plyr="fast-forward">', '<svg><use xlink:href="#' + config.iconPrefix + '-fast-forward" /></svg>', - '<span class="sr-only">' + config.i18n.forward + '</span>', + '<span class="plyr__sr-only">' + config.i18n.forward + '</span>', '</button>' ); } @@ -192,9 +199,9 @@ // Media current time display if (_inArray(config.controls, 'current-time')) { html.push( - '<span class="plyr-time">', - '<span class="sr-only">' + config.i18n.currentTime + '</span>', - '<span class="plyr-current-time">00:00</span>', + '<span class="plyr__time">', + '<span class="plyr__sr-only">' + config.i18n.currentTime + '</span>', + '<span class="plyr__time--current">00:00</span>', '</span>' ); } @@ -202,9 +209,9 @@ // Media duration display if (_inArray(config.controls, 'duration')) { html.push( - '<span class="plyr-time">', - '<span class="sr-only">' + config.i18n.duration + '</span>', - '<span class="plyr-duration">00:00</span>', + '<span class="plyr__time">', + '<span class="plyr__sr-only">' + config.i18n.duration + '</span>', + '<span class="plyr__time--duration">00:00</span>', '</span>' ); } @@ -212,16 +219,16 @@ // Close left controls html.push( '</span>', - '<span class="plyr-controls-right">' + '<span class="plyr__controls--right">' ); // Toggle mute button if (_inArray(config.controls, 'mute')) { html.push( '<button type="button" data-plyr="mute">', - '<svg class="icon-muted"><use xlink:href="#' + config.iconPrefix + '-muted" /></svg>', + '<svg class="icon--muted"><use xlink:href="#' + config.iconPrefix + '-muted" /></svg>', '<svg><use xlink:href="#' + config.iconPrefix + '-volume" /></svg>', - '<span class="sr-only">' + config.i18n.toggleMute + '</span>', + '<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>', '</button>' ); } @@ -229,8 +236,8 @@ // Volume range control if (_inArray(config.controls, 'volume')) { html.push( - '<label for="volume{id}" class="sr-only">' + config.i18n.volume + '</label>', - '<input id="volume{id}" class="plyr-volume" type="range" min="0" max="10" value="5" data-plyr="volume">' + '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>', + '<input id="volume{id}" class="plyr__volume" type="range" min="0" max="10" value="5" data-plyr="volume">' ); } @@ -238,9 +245,9 @@ if (_inArray(config.controls, 'captions')) { html.push( '<button type="button" data-plyr="captions">', - '<svg class="icon-captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on" /></svg>', + '<svg class="icon--captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on" /></svg>', '<svg><use xlink:href="#' + config.iconPrefix + '-captions-off" /></svg>', - '<span class="sr-only">' + config.i18n.toggleCaptions + '</span>', + '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>', '</button>' ); } @@ -249,9 +256,9 @@ if (_inArray(config.controls, 'fullscreen')) { html.push( '<button type="button" data-plyr="fullscreen">', - '<svg class="icon-exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen" /></svg>', + '<svg class="icon--exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen" /></svg>', '<svg><use xlink:href="#' + config.iconPrefix + '-enter-fullscreen" /></svg>', - '<span class="sr-only">' + config.i18n.toggleFullscreen + '</span>', + '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>', '</button>' ); } @@ -338,7 +345,8 @@ return { name: name, version: majorVersion, - ios: /(iPad|iPhone|iPod)/g.test(navigator.platform) + ios: /(iPad|iPhone|iPod)/g.test(navigator.platform), + touch: 'ontouchstart' in document.documentElement }; } @@ -477,14 +485,14 @@ } // Toggle class on an element - function _toggleClass(element, name, state) { + function _toggleClass(element, className, state) { if (element) { if (element.classList) { - element.classList[state ? 'add' : 'remove'](name); + element.classList[state ? 'add' : 'remove'](className); } else { - var className = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + name + ' ', ''); - element.className = className + (state ? ' ' + name : ''); + var current = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', ''); + element.className = current + (state ? ' ' + className : ''); } } } @@ -645,12 +653,30 @@ function _storage() { var storage = { supported: (function() { - try { - return 'localStorage' in window && window.localStorage !== null; - } - catch(e) { - return false; - } + if(!('localStorage' in window)) { + return false; + } + + // Try to use it (it might be disabled, e.g. user is in private/porn mode) + // see: https://github.com/Selz/plyr/issues/131 + try { + // Add test item + window.localStorage.setItem('___test', 'OK'); + + // Get the test item + var result = window.localStorage.getItem('___test'); + + // Clean up + window.localStorage.removeItem('___test'); + + // Check if value matches + return (result === 'OK'); + } + catch (e) { + return false; + } + + return false; })() }; return storage; @@ -793,8 +819,25 @@ // Replace all id references with random numbers html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000))); - // Inject into the container - plyr.container.insertAdjacentHTML('beforeend', html); + // Controls container + var container; + + // Inject to custom location + if (config.selectors.controls.container !== null) { + container = config.selectors.controls.container; + + if(typeof selector === 'string') { + container = document.querySelector(container); + } + } + + // Inject into the container by default + if (!(container instanceof HTMLElement)) { + container = plyr.container + } + + // Inject controls HTML + container.insertAdjacentHTML('beforeend', html); // Setup tooltips if (config.tooltips) { @@ -812,7 +855,7 @@ // Find the UI controls and store references function _findElements() { try { - plyr.controls = _getElement(config.selectors.controls); + plyr.controls = _getElement(config.selectors.controls.wrapper); // Buttons plyr.buttons = {}; @@ -863,13 +906,8 @@ } } - // Setup aria attribute for play - function _setupPlayAria() { - // If there's no play button, bail - if (!plyr.buttons.play) { - return; - } - + // Setup aria attribute for play and iframe title + function _setTitle(iframe) { // Find the current text var label = plyr.buttons.play.innerText || config.i18n.play; @@ -878,7 +916,16 @@ label += ', ' + config.title; } - plyr.buttons.play.setAttribute('aria-label', label); + // If there's no play button, bail + if (plyr.buttons.play) { + plyr.buttons.play.setAttribute('aria-label', label); + } + + // Set iframe title + // https://github.com/Selz/plyr/issues/124 + if (iframe instanceof HTMLElement) { + iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title)); + } } // Setup media @@ -900,9 +947,10 @@ _toggleClass(plyr.container, config.classes.stopped, config.autoplay); // Add iOS class - if (plyr.browser.ios) { - _toggleClass(plyr.container, 'ios', true); - } + _toggleClass(plyr.container, config.classes.isIos, plyr.browser.ios); + + // Add touch class + _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.touch); // Inject the player wrapper if (plyr.type === 'video') { @@ -1013,11 +1061,14 @@ // Inject and update UI if (plyr.supported.full) { // Only setup controls once - if (!plyr.container.querySelectorAll(config.selectors.controls).length) { + if (!plyr.container.querySelectorAll(config.selectors.controls.wrapper).length) { _setupInterface(); } } + // Set title + _setTitle(_getElement('iframe')); + // Set the volume _setVolume(); _updateVolume(); @@ -1966,7 +2017,7 @@ if ('title' in source) { config.title = source.title; - _setupPlayAria(); + _setTitle(); } } @@ -2120,7 +2171,7 @@ plyr.init = false; // Remove controls - _remove(_getElement(config.selectors.controls)); + _remove(_getElement(config.selectors.controls.wrapper)); // YouTube if (plyr.type === 'youtube') { @@ -2162,6 +2213,9 @@ // Get the media element plyr.media = plyr.container.querySelectorAll('audio, video, div')[0]; + // Add style hook + _toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), true); + // Get original classname plyr.originalClassName = plyr.container.className; @@ -2177,7 +2231,7 @@ plyr.media.removeAttribute('data-video-id'); } else { - plyr.type = tagName; + plyr.type = tagName; config.crossorigin = (plyr.media.getAttribute('crossorigin') !== null); config.autoplay = (config.autoplay || (plyr.media.getAttribute('autoplay') !== null)); config.loop = (config.loop || (plyr.media.getAttribute('loop') !== null)); @@ -2216,8 +2270,8 @@ _displayDuration(); } - // Set up aria-label for Play button with the title option - _setupPlayAria(); + // Set title on button and frame + _setTitle(); } // Successful setup @@ -2322,7 +2376,7 @@ // Expose setup function api.setup = function(elements, options) { // Get the players - var instances = [], elements = []; + var instances = []; // Select the elements // Assume elements is a NodeList by default diff --git a/src/less/plyr.less b/src/less/plyr.less index d10458fc..f0222e67 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -141,18 +141,6 @@ border: 0; } -// Screen reader only -// ------------------------------- -.sr-only { - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; -} - // Styles // ------------------------------- // Base @@ -170,8 +158,19 @@ box-sizing: border-box; } + // Screen reader only elements + &__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; + } + // For video - &-video-wrapper { + &__video-wrapper { position: relative; } video, @@ -181,8 +180,8 @@ vertical-align: middle; } - // For embeds - &-video-embed { + // Container for embeds + &__video-embed { padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; @@ -207,7 +206,7 @@ } // Captions - &-captions { + &__captions { display: none; position: absolute; bottom: 0; @@ -232,15 +231,15 @@ font-size: @font-size-captions-medium; } } - &.captions-active &-captions { + &--captions-active &__captions { display: block; } - &.fullscreen-active &-captions { + &--fullscreen-active &__captions { font-size: @font-size-captions-large; } // Playback controls - &-controls { + &__controls { .clearfix(); .font-smoothing(); position: relative; @@ -251,15 +250,15 @@ box-shadow: 0 1px 1px rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .2); // Layout - &-right { + &--right { display: block; margin: @control-spacing auto 0; } @media (min-width: @bp-control-split) { - &-left { + &--left { float: left; } - &-right { + &--right { float: right; margin-top: 0; } @@ -300,14 +299,14 @@ } // Hide toggle icons by default - .icon-exit-fullscreen, - .icon-muted, - .icon-captions-on { + .icon--exit-fullscreen, + .icon--muted, + .icon--captions-on { display: none; } // plyr time - .plyr-time { + .plyr__time { display: inline-block; vertical-align: middle; margin-left: @control-spacing; @@ -318,7 +317,7 @@ } // Media duration hidden on small screens - .plyr-time + .plyr-time { + .plyr__time + .plyr__time { display: none; @media (min-width: @bp-control-split) { @@ -334,7 +333,7 @@ } // Tooltips - &-tooltip { + &__tooltip { position: absolute; z-index: 2; bottom: 100%; @@ -383,18 +382,18 @@ z-index: 2; } } - button:hover .plyr-tooltip, - button.tab-focus:focus .plyr-tooltip { + button:hover .plyr__tooltip, + button.tab-focus:focus .plyr__tooltip { opacity: 1; transform: translate(-50%, 0) scale(1); } - button:hover .plyr-tooltip { + button:hover .plyr__tooltip { z-index: 3; } // Playback progress // <progress> element - &-progress { + &__progress { position: absolute; bottom: 100%; left: 0; @@ -403,9 +402,9 @@ height: @control-spacing; background: @progress-bg; - &-buffer[value], - &-played[value], - &-seek[type='range'] { + &--buffer[value], + &--played[value], + &--seek[type='range'] { position: absolute; left: 0; top: 0; @@ -420,8 +419,8 @@ border: none; background: transparent; } - &-buffer[value], - &-played[value] { + &--buffer[value], + &--played[value] { &::-webkit-progress-bar { background: transparent; } @@ -434,18 +433,18 @@ background: currentColor; } } - &-played[value] { + &--played[value] { z-index: 2; color: @progress-playing-bg; } - &-buffer[value] { + &--buffer[value] { color: @progress-buffered-bg; } // Seek control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-seek[type='range'] { + &--seek[type='range'] { z-index: 4; cursor: pointer; outline: 0; @@ -491,7 +490,7 @@ } // Loading state - &.loading .plyr-progress-buffer { + &--loading .plyr__progress--buffer { animation: progress 1s linear infinite; background-size: @progress-loading-size @progress-loading-size; background-repeat: repeat-x; @@ -509,18 +508,18 @@ } // States - &-controls [data-plyr='pause'], - &.playing .plyr-controls [data-plyr='play'] { + &__controls [data-plyr='pause'], + &--playing .plyr__controls [data-plyr='play'] { display: none; } - &.playing .plyr-controls [data-plyr='pause'] { + &--playing .plyr__controls [data-plyr='pause'] { display: inline-block; } // Volume control // <input[type='range']> element // Specificity is for bootstrap compatibility - &-volume[type='range'] { + &__volume[type='range'] { display: inline-block; vertical-align: middle; -webkit-appearance: none; @@ -588,30 +587,30 @@ // Hide sound controls on iOS // It's not supported to change volume using JavaScript: // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html - &.ios &-volume, - &.ios [data-plyr='mute'], - &-audio.ios &-controls-right { + &--is-ios &-volume, + &--is-ios [data-plyr='mute'], + &--is-ios.plyr--audio &__controls--right { display: none; } // Center buttons so it looks less odd - &-audio.ios &-controls-left { + &--is-ios.plyr--audio &__controls--left { float: none; } // Audio specific styles // Position the progress within the container - &-audio .plyr-controls { + &--audio .plyr__controls { padding-top: (@control-spacing * 2); } - &-audio .plyr-progress { + &--audio .plyr__progress { bottom: auto; top: 0; background: @off-white; } // Full screen mode - &-fullscreen, - &.fullscreen-active { + &--fullscreen, + &--fullscreen-active { position: fixed; top: 0; left: 0; @@ -637,23 +636,23 @@ } // Hide controls when playing in full screen - &.fullscreen-hide-controls.playing { - .plyr-controls { + &--fullscreen--hide-controls.plyr--playing { + .plyr__controls { transform: translateY(100%) translateY(@control-spacing / 2); transition: transform .3s .2s ease; } - &.plyr-hover .plyr-controls { + &.plyr--hover .plyr__controls { transform: translateY(0); } - .plyr-captions { + .plyr__captions { bottom: (@control-spacing / 2); transition: bottom .3s .2s ease; } } // Captions - .plyr-captions, - &.fullscreen-hide-controls.playing.plyr-hover .plyr-captions { + .plyr__captions, + &--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__captions { top: auto; bottom: 90px; @@ -664,9 +663,9 @@ } // Change icons on state change - &.fullscreen-active .icon-exit-fullscreen, - &.muted .plyr-controls .icon-muted, - &.captions-active .plyr-controls .icon-captions-on { + &--fullscreen-active .icon--exit-fullscreen, + &--muted .plyr__controls .icon--muted, + &--captions-active .plyr__controls .icon--captions-on { display: block; & + svg { @@ -679,8 +678,8 @@ [data-plyr='fullscreen'] { display: none; } - &.captions-enabled [data-plyr='captions'], - &.fullscreen-enabled [data-plyr='fullscreen'] { + &--captions-enabled [data-plyr='captions'], + &--fullscreen-enabled [data-plyr='fullscreen'] { display: inline-block; } } |