diff --git a/changelog.md b/changelog.md index 1cf71c24..ce536ec2 100644 --- a/changelog.md +++ b/changelog.md @@ -1,21 +1,26 @@ # Changelog -# v1.3.5 +# v1.5.0 +- *Beta* Vimeo support (please report bugs) +- New options for initialization (see docs) +- + +## v1.3.5 - Fixed bug with API use on basic supported browsers -# v1.3.4 +## v1.3.4 - Code cleanup by @calvintam236 -# v1.3.3 +## v1.3.3 - Removed captions being read by screen readers -# v1.3.2 +## v1.3.2 - Voiceover fix for captions -# v1.3.1 +## v1.3.1 - ARIA improvements for captions being read -# v1.3.0 +## v1.3.0 - Internationalization support (i18n) using default controls (required markup changes to controls) - ARIA enhancements for controls (required markup changes to controls) - Captions legibility improvements @@ -55,10 +60,10 @@ - Bug fix for Chrome Canary ## v1.1.11 -- Bug fix +- Bug fix ## v1.1.10 -- Bug fix +- Bug fix ## v1.1.9 - Bug fix for 1.1.8 diff --git a/dist/plyr.css b/dist/plyr.css index 00f2191d..2304e671 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:6px;transition:background .3s ease;cursor:ew-resize}.plyr-volume[type=range]::-moz-range-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr-volume[type=range]::-moz-range-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.plyr-volume[type=range]::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.plyr-volume[type=range]::-ms-fill-lower,.plyr-volume[type=range]::-ms-fill-upper{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr-volume[type=range]::-ms-thumb{height:12px;width:12px;background:#6B7D86;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.plyr-volume[type=range]:focus::-webkit-slider-thumb{background:#3498DB}.plyr-volume[type=range]:focus::-moz-range-thumb{background:#3498DB}.plyr-volume[type=range]:focus::-ms-thumb{background:#3498DB}.plyr-audio.ios .plyr-controls-right,.plyr.ios .plyr-volume,.plyr.ios [data-plyr=mute]{display:none}.plyr-audio.ios .plyr-controls-left{float:none}.plyr-audio .plyr-controls{padding-top:20px}.plyr-audio .plyr-progress{bottom:auto;top:0;background:#D6DADD}.plyr-fullscreen,.plyr.fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.plyr-fullscreen video,.plyr.fullscreen-active video{height:100%}.plyr-fullscreen .plyr-video-wrapper,.plyr.fullscreen-active .plyr-video-wrapper{height:100%;width:100%}.plyr-fullscreen .plyr-controls,.plyr.fullscreen-active .plyr-controls{position:absolute;bottom:0;left:0;right:0}.plyr-fullscreen.fullscreen-hide-controls.playing .plyr-controls,.plyr.fullscreen-active.fullscreen-hide-controls.playing .plyr-controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease;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}}.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 diff --git a/dist/plyr.js b/dist/plyr.js index 4402a6e4..26911d9c 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1 +1 @@ -!function(e){"use strict";function t(){var e=['
','
','','','',"0% "+E.i18n.played,"",'',"0% "+E.i18n.buffered,"","
",''];return s(E.controls,"restart")&&e.push('"),s(E.controls,"rewind")&&e.push('"),s(E.controls,"play")&&e.push('",'"),s(E.controls,"fast-forward")&&e.push('"),s(E.controls,"current-time")&&e.push('',''+E.i18n.currentTime+"",'00:00',""),s(E.controls,"duration")&&e.push('',''+E.i18n.duration+"",'00:00',""),e.push("",''),s(E.controls,"mute")&&e.push('"),s(E.controls,"volume")&&e.push('",''),s(E.controls,"captions")&&e.push('"),s(E.controls,"fullscreen")&&e.push('"),e.push("","
"),e.join("")}function n(e,t){E.debug&&window.console&&console[t?"error":"log"](e)}function r(){var e,t,n,r=navigator.userAgent,a=navigator.appName,o=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",o="11;"):-1!==(t=r.indexOf("MSIE"))?(a="IE",o=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(a="Chrome",o=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(a="Safari",o=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(o=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(a="Firefox",o=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(a=r.substring(e,t),o=r.substring(t+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(n=o.indexOf(";"))&&(o=o.substring(0,n)),-1!==(n=o.indexOf(" "))&&(o=o.substring(0,n)),s=parseInt(""+o,10),isNaN(s)&&(o=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10)),{name:a,version:s,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform)}}function a(e,t){var n=e.media;if("video"==e.type)switch(t){case"video/webm":return!(!n.canPlayType||!n.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/,""));case"video/mp4":return!(!n.canPlayType||!n.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/,""));case"video/ogg":return!(!n.canPlayType||!n.canPlayType('video/ogg; codecs="theora"').replace(/no/,""))}else if("audio"==e.type)switch(t){case"audio/mpeg":return!(!n.canPlayType||!n.canPlayType("audio/mpeg;").replace(/no/,""));case"audio/ogg":return!(!n.canPlayType||!n.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/,""));case"audio/wav":return!(!n.canPlayType||!n.canPlayType('audio/wav; codecs="1"').replace(/no/,""))}return!1}function o(e){if(!document.querySelectorAll('script[src="'+e+'"]').length){var t=document.createElement("script");t.src=e;var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}}function s(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function i(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function l(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],o=a.parentNode,s=a.nextSibling;r.appendChild(a),s?o.insertBefore(r,s):o.appendChild(r)}}function u(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function c(e){e.parentNode.removeChild(e)}function d(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 m(e,t,n){var r=document.createElement(e);p(r,n),d(t,r)}function f(e){return e.replace(".","")}function y(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function b(e,t,n,r){var a=t.split(" ");if(e instanceof NodeList)for(var o=0;on;n++){if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof document.msExitFullscreen&&document.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=document.body),this.prefix){case"":return document.fullscreenElement==e;case"moz":return document.mozFullScreenElement==e;default:return document[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return"undefined"==typeof e&&(e=document.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),e}function F(){var e={supported:function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}()};return e}function C(T){function C(e){if(!ve.usingTextTracks&&"video"===ve.type&&ve.supported.full&&(ve.subcount=0,e="number"==typeof e?e:ve.media.currentTime,ve.captions[ve.subcount])){for(;P(ve.captions[ve.subcount][0])ve.captions.length-1){ve.subcount=ve.captions.length-1;break}if(ve.media.currentTime.toFixed(1)>=N(ve.captions[ve.subcount][0])&&ve.media.currentTime.toFixed(1)<=P(ve.captions[ve.subcount][0])){ve.currentCaption=ve.captions[ve.subcount][1];var t=ve.currentCaption.trim();ve.captionsContainer.innerHTML!=t&&(ve.captionsContainer.innerHTML="",ve.captionsContainer.innerHTML=t)}else ve.captionsContainer.innerHTML=""}}function A(){ve.buttons.captions&&(y(ve.container,E.classes.captions.enabled,!0),E.captions.defaultActive&&(y(ve.container,E.classes.captions.active,!0),w(ve.buttons.captions,!0)))}function N(e){var t=[];return t=e.split(" --> "),I(t[0])}function P(e){var t=[];return t=e.split(" --> "),I(t[1])}function I(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function M(e){return ve.container.querySelectorAll(e)}function L(e){return M(e)[0]}function O(){try{return window.self!==window.top}catch(e){return!0}}function V(){var e=E.html;if(n("Injecting custom controls."),e||(e=t()),e=i(e,"{seektime}",E.seekTime),e=i(e,"{id}",Math.floor(1e4*Math.random())),ve.container.insertAdjacentHTML("beforeend",e),E.tooltips)for(var r=M(E.selectors.labels),a=r.length-1;a>=0;a--){var o=r[a];y(o,E.classes.hidden,!1),y(o,E.classes.tooltip,!0)}}function q(){try{return ve.controls=L(E.selectors.controls),ve.buttons={},ve.buttons.seek=L(E.selectors.buttons.seek),ve.buttons.play=L(E.selectors.buttons.play),ve.buttons.pause=L(E.selectors.buttons.pause),ve.buttons.restart=L(E.selectors.buttons.restart),ve.buttons.rewind=L(E.selectors.buttons.rewind),ve.buttons.forward=L(E.selectors.buttons.forward),ve.buttons.fullscreen=L(E.selectors.buttons.fullscreen),ve.buttons.mute=L(E.selectors.buttons.mute),ve.buttons.captions=L(E.selectors.buttons.captions),ve.checkboxes=M('[type="checkbox"]'),ve.progress={},ve.progress.container=L(E.selectors.progress.container),ve.progress.buffer={},ve.progress.buffer.bar=L(E.selectors.progress.buffer),ve.progress.buffer.text=ve.progress.buffer.bar&&ve.progress.buffer.bar.getElementsByTagName("span")[0],ve.progress.played={},ve.progress.played.bar=L(E.selectors.progress.played),ve.progress.played.text=ve.progress.played.bar&&ve.progress.played.bar.getElementsByTagName("span")[0],ve.volume=L(E.selectors.buttons.volume),ve.duration=L(E.selectors.duration),ve.currentTime=L(E.selectors.currentTime),ve.seekTime=M(E.selectors.seekTime),!0}catch(e){return n("It looks like there's a problem with your controls html. Bailing.",!0),ve.media.setAttribute("controls",""),!1}}function H(){if(ve.buttons.play){var e=ve.buttons.play.innerText||E.i18n.play;"undefined"!=typeof E.title&&E.title.length&&(e+=", "+E.title),ve.buttons.play.setAttribute("aria-label",e)}}function j(){if(!ve.media)return n("No audio or video element found!",!0),!1;if(ve.supported.full&&(ve.media.removeAttribute("controls"),y(ve.container,E.classes.type.replace("{0}",ve.type),!0),y(ve.container,E.classes.stopped,E.autoplay),ve.browser.ios&&y(ve.container,"ios",!0),"video"===ve.type)){var e=document.createElement("div");e.setAttribute("class",E.classes.videoWrapper),l(ve.media,e),ve.videoContainer=e}s(E.types.embed,ve.type)?(D(ve.embedId,ve.type),ve.embedId=null):E.autoplay&&$()}function D(e){for(var t=document.createElement("div"),n=ve.type+"-"+Math.floor(1e4*Math.random()),r=M('[id^="'+ve.type+'-"]'),a=r.length-1;a>=0;a--)c(r[a]);if(y(ve.media,E.classes.videoWrapper,!0),y(ve.media,E.classes.embedWrapper,!0),"youtube"===ve.type)ve.media.appendChild(t),t.setAttribute("id",n),"object"==typeof YT?R(e,t):(o(E.urls.youtube.api),window.onYouTubeIframeAPIReady=function(){R(e,t)});else if("vimeo"===ve.type){var s=document.createElement("iframe");if(s.loaded=!1,v(s,"load",function(){s.loaded=!0}),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),ve.media.appendChild(t),"function"==typeof Froogaloop)v(s,"load",_);else{o(E.urls.vimeo.api);var i=window.setInterval(function(){"$f"in window&&s.loaded&&(window.clearInterval(i),_.call(s))},50)}}}function B(){ve.supported.full&&(ve.container.querySelectorAll(E.selectors.controls).length||ye()),te(),ne()}function R(e,t){"timer"in ve||(ve.timer={}),ve.embed=new YT.Player(t.id,{videoId:e,playerVars:{autoplay:E.autoplay?1:0,controls:ve.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:E.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1},events:{onReady:function(e){var t=e.target;ve.media.play=function(){t.playVideo()},ve.media.pause=function(){t.pauseVideo()},ve.media.stop=function(){t.stopVideo()},ve.media.duration=t.getDuration(),ve.media.paused=!E.autoplay,ve.media.currentTime=t.getCurrentTime(),ve.media.muted=t.isMuted(),h(ve.media,"timeupdate"),window.clearInterval(ve.timer.buffering),ve.timer.buffering=window.setInterval(function(){ve.media.buffered=t.getVideoLoadedFraction(),h(ve.media,"progress"),1===ve.media.buffered&&window.clearInterval(ve.timer.buffering)},200),B(),E.displayDuration&&ie()},onStateChange:function(e){var t=e.target;switch(window.clearInterval(ve.timer.playing),e.data){case 0:ve.media.paused=!0,h(ve.media,"ended");break;case 1:ve.media.paused=!1,h(ve.media,"play"),ve.timer.playing=window.setInterval(function(){ve.media.currentTime=t.getCurrentTime(),h(ve.media,"timeupdate")},200);break;case 2:ve.media.paused=!0,h(ve.media,"pause")}}}})}function _(){ve.embed=$f(this),ve.embed.addEvent("ready",function(){ve.media.play=function(){ve.embed.api("play")},ve.media.pause=function(){ve.embed.api("pause")},ve.media.stop=function(){ve.embed.api("stop")},ve.media.paused=!E.autoplay,ve.media.currentTime=0,B(),ve.embed.api("getCurrentTime",function(e){ve.media.currentTime=e,h(ve.media,"timeupdate")}),ve.embed.api("getDuration",function(e){ve.media.duration=e,ve.supported.full&&E.displayDuration&&ie()}),ve.embed.addEvent("play",function(){ve.media.paused=!1,h(ve.media,"play")}),ve.embed.addEvent("pause",function(){ve.media.paused=!0,h(ve.media,"pause")}),ve.embed.addEvent("playProgress",function(e){ve.media.currentTime=e.seconds,h(ve.media,"timeupdate")}),ve.embed.addEvent("loadProgress",function(e){ve.media.buffered=e.percent,h(ve.media,"progress")}),ve.embed.addEvent("finish",function(){ve.media.paused=!0,h(ve.media,"ended")})})}function W(){if("video"===ve.type){L(E.selectors.captions)||ve.videoContainer.insertAdjacentHTML("afterbegin",'
'),ve.captionsContainer=L(E.selectors.captions).querySelector("span"),ve.usingTextTracks=!1,ve.media.textTracks&&(ve.usingTextTracks=!0);for(var e,t="",r=ve.media.childNodes,a=0;a=10||"Firefox"===ve.browser.name&&ve.browser.version>=31||"Chrome"===ve.browser.name&&ve.browser.version>=43||"Safari"===ve.browser.name&&ve.browser.version>=7)&&(n("Detected unsupported browser for HTML5 captions. Using fallback."),ve.usingTextTracks=!1),ve.usingTextTracks){n("TextTracks supported.");for(var i=0;i=7){n("Safari 7+ detected; removing track from DOM."),o=ve.media.getElementsByTagName("track");for(var c=0;ct?t=0:t>ve.media.duration&&(t=ve.media.duration);try{ve.media.currentTime=t.toFixed(1)}catch(a){}"embed"in ve&&("youtube"===ve.type&&ve.embed.seekTo(t),"vimeo"===ve.type&&ve.embed.api("seekTo",t),h(ve.media,"timeupdate"),r&&U()),n("Seeking to "+ve.media.currentTime+" seconds"),C(t)}function K(){y(ve.container,E.classes.playing,!ve.media.paused),y(ve.container,E.classes.stopped,ve.media.paused)}function Q(e){function t(){y(ve.container,E.classes.hover,!0),window.clearTimeout(a),o||(a=window.setTimeout(function(){y(ve.container,E.classes.hover,!1)},2e3))}function n(e){o="mouseenter"===e.type}var r=S.supportsFullScreen;e&&e.type===S.fullScreenEventName?ve.isFullscreen=S.isFullScreen(ve.container):r?(S.isFullScreen(ve.container)?S.cancelFullScreen():S.requestFullScreen(ve.container),ve.isFullscreen=S.isFullScreen(ve.container)):(ve.isFullscreen=!ve.isFullscreen,ve.isFullscreen?(v(document,"keyup",Z),document.body.style.overflow="hidden"):(g(document,"keyup",Z),document.body.style.overflow="")),y(ve.container,E.classes.fullscreen.active,ve.isFullscreen),w(ve.buttons.fullscreen,ve.isFullscreen);var a,o=!1;E.fullscreen.hideControls&&(y(ve.controls,E.classes.hover,!1),b(ve.controls,"mouseenter mouseleave",n,ve.isFullscreen),b(ve.container,"mousemove",t,ve.isFullscreen))}function Z(e){27===(e.which||e.charCode||e.keyCode)&&ve.isFullscreen&&Q()}function ee(e){"boolean"!=typeof e&&(e=!ve.media.muted),w(ve.buttons.mute,e),ve.media.muted=e,"youtube"===ve.type&&(ve.embed[ve.media.muted?"mute":"unMute"](),h(ve.media,"volumechange")),"vimeo"===ve.type&&(ve.media.muted?ve.embed.api("setVolume",0):ve.embed.api("setVolume",parseFloat(E.volume/10)),h(ve.media,"volumechange"))}function te(e){"undefined"==typeof e&&(e=E.storage.enabled&&F().supported?window.localStorage[E.storage.key]||E.volume:E.volume),e>10&&(e=10),0>e&&(e=0),ve.media.volume=parseFloat(e/10),E.volume=e,"youtube"===ve.type&&ve.embed.setVolume(100*ve.media.volume),"vimeo"===ve.type&&ve.embed.api("setVolume",ve.media.volume),"embed"in ve&&h(ve.media,"volumechange"),ve.media.muted&&e>0&&ee()}function ne(){var e=ve.media.muted?0:10*ve.media.volume;ve.supported.full&&ve.volume&&(ve.volume.value=e),E.storage.enabled&&F().supported&&window.localStorage.setItem(E.storage.key,e),y(ve.container,E.classes.muted,0===e),ve.supported.full&&ve.buttons.mute&&w(ve.buttons.mute,0===e)}function re(e){ve.supported.full&&ve.buttons.captions&&("boolean"!=typeof e&&(e=-1===ve.container.className.indexOf(E.classes.captions.active)),ve.captionsEnabled=e,w(ve.buttons.captions,ve.captionsEnabled),y(ve.container,E.classes.captions.active,ve.captionsEnabled))}function ae(e){var t="waiting"===e.type;clearTimeout(ve.loadingTimer),ve.loadingTimer=setTimeout(function(){y(ve.container,E.classes.loading,t)},t?250:0)}function oe(e){var t=ve.progress.played.bar,n=ve.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=k(ve.media.currentTime,ve.media.duration),"timeupdate"==e.type&&ve.buttons.seek&&(ve.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=ve.progress.buffer.bar,n=ve.progress.buffer.text,r=function(){var e=ve.media.buffered;return e&&e.length?k(e.end(0),ve.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function se(e,t){if(t){isNaN(e)&&(e=0),ve.secs=parseInt(e%60),ve.mins=parseInt(e/60%60),ve.hours=parseInt(e/60/60%60);var n=parseInt(ve.media.duration/60/60%60)>0;ve.secs=("0"+ve.secs).slice(-2),ve.mins=("0"+ve.mins).slice(-2),t.innerHTML=(n?ve.hours+":":"")+ve.mins+":"+ve.secs}}function ie(){var e=ve.media.duration||0;!ve.duration&&E.displayDuration&&ve.media.paused&&se(e,ve.currentTime),ve.duration&&se(e,ve.duration)}function le(e){se(ve.media.currentTime,ve.currentTime),oe(e)}function ue(e,t){if("string"==typeof t)m(e,ve.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)m(e,ve.media,t[n])}function ce(e){if("undefined"!=typeof e){switch(U(),"youtube"===ve.type?(ve.embed.destroy(),window.clearInterval(ve.timer.buffering),window.clearInterval(ve.timer.playing)):"video"===ve.type&&c(ve.videoContainer),c(ve.media),"type"in e&&e.type!==ve.type&&(ve.type=e.type),ve.type){case"video":ve.media=document.createElement("video");break;case"audio":ve.media=document.createElement("audio");break;case"youtube":case"vimeo":ve.media=document.createElement("div"),ve.embedId="string"==typeof e.sources?e.sources:e.sources[0].src}d(ve.container,ve.media),s(E.types.html5,ve.type)&&(E.crossorigin&&ve.media.setAttribute("crossorigin",""),E.autoplay&&ve.media.setAttribute("autoplay",""),"poster"in e&&ve.media.setAttribute("poster",e.poster),E.loop&&ve.media.setAttribute("loop","")),ve.container.className=ve.originalClassName,y(ve.container,E.classes.fullscreen.active,ve.isFullscreen),y(ve.container,E.classes.captions.active,ve.captionsEnabled),E.autoplay=e.autoplay||E.autoplay,s(E.types.embed,ve.type)&&(ve.embedId=e.sources),s(E.types.html5,ve.type)&&ue("source",e.sources),j(),be(),s(E.types.html5,ve.type)&&(te(),ne(),ve.supported.full&&(le(),K()),"tracks"in e&&(ue("track",e.tracks),W()),ve.media.load(),E.autoplay&&$()),"title"in e&&(E.title=e.title,H())}}function 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];y(n,"tab-focus",n===e)}}var t="IE"==ve.browser.name?"change":"input";v(window,"keyup",function(t){var n=t.keyCode?t.keyCode:t.which;9==n&&e()});for(var n in ve.buttons){var r=ve.buttons[n];v(r,"blur",function(){y(r,"tab-focus",!1)})}v(ve.buttons.play,"click",function(){$(),setTimeout(function(){ve.buttons.pause.focus()},100)}),v(ve.buttons.pause,"click",function(){U(),setTimeout(function(){ve.buttons.play.focus()},100)}),v(ve.buttons.restart,"click",G),v(ve.buttons.rewind,"click",Y),v(ve.buttons.forward,"click",J),v(ve.buttons.seek,t,G),v(ve.volume,t,function(){te(this.value)}),v(ve.buttons.mute,"click",ee),v(ve.buttons.fullscreen,"click",Q),S.supportsFullScreen&&v(document,S.fullScreenEventName,Q),v(ve.media,"timeupdate seeking",le),v(ve.media,"timeupdate",C),v(ve.media,"loadedmetadata",ie),v(ve.buttons.captions,"click",re),v(ve.media,"ended",function(){"video"===ve.type&&(ve.captionsContainer.innerHTML=""),K()}),v(ve.media,"progress playing",oe),v(ve.media,"volumechange",ne),v(ve.media,"play pause",K),v(ve.media,"waiting canplay seeked",ae),"video"===ve.type&&E.click&&v(ve.videoContainer,"click",function(){ve.media.paused?h(ve.buttons.play,"click"):ve.media.ended?(G(),h(ve.buttons.play,"click")):h(ve.buttons.pause,"click")})}function me(){if(!ve.init)return null;if(ve.container.setAttribute("class",f(E.selectors.container)),ve.init=!1,c(L(E.selectors.controls)),"youtube"===ve.type)return void ve.embed.destroy();"video"===ve.type&&(c(L(E.selectors.captions)),u(ve.videoContainer)),ve.media.setAttribute("controls","");var e=ve.media.cloneNode(!0);ve.media.parentNode.replaceChild(e,ve.media)}function fe(){if(ve.init)return null;S=x(),ve.browser=r(),ve.media=ve.container.querySelectorAll("audio, video, div")[0],ve.originalClassName=ve.container.className;var t=ve.media.tagName.toLowerCase();if("div"===t?(ve.type=ve.media.getAttribute("data-type"),ve.embedId=ve.media.getAttribute("data-video-id"),ve.media.removeAttribute("data-type"),ve.media.removeAttribute("data-video-id")):(ve.type=t,E.crossorigin=null!==ve.media.getAttribute("crossorigin"),E.autoplay=E.autoplay||null!==ve.media.getAttribute("autoplay"),E.loop=E.loop||null!==ve.media.getAttribute("loop")),ve.supported=e.supported(ve.type),!ve.supported.basic)return!1;if(n(ve.browser.name+" "+ve.browser.version),j(),"video"==ve.type||"audio"==ve.type){if(!ve.supported.full)return void(ve.init=!0);ye(),E.displayDuration&&ie(),H()}ve.init=!0}function ye(){return V(),q()?(W(),be(),te(),void ne()):!1}function be(){z(),pe()}var ve=this;return ve.container=T,fe(),ve.init?{media:ve.media,play:$,pause:U,restart:G,rewind:Y,forward:J,seek:G,source:ce,poster:de,setVolume:te,togglePlay:X,toggleMute:ee,toggleCaptions:re,toggleFullscreen:Q,isFullscreen:function(){return ve.isFullscreen||!1},support:function(e){return a(ve,e)},destroy:me,restore:fe}:{}}var S,E,A={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,iconPrefix:"icon",selectors:{container:".plyr",controls:".plyr-controls",labels:"[data-plyr] .sr-only, label .sr-only",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',volume:'[data-plyr="volume"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},progress:{container:".plyr-progress",buffer:".plyr-progress-buffer",played:".plyr-progress-played"},captions:".plyr-captions",currentTime:".plyr-current-time",duration:".plyr-duration"},classes:{videoWrapper:"plyr-video-wrapper",embedWrapper:"plyr-video-embed",type:"plyr-{0}",stopped:"stopped",playing:"playing",muted:"muted",loading:"loading",tooltip:"plyr-tooltip",hidden:"sr-only",hover:"plyr-hover",captions:{enabled:"captions-enabled",active:"captions-active"},fullscreen:{enabled:"fullscreen-enabled",active:"fullscreen-active",hideControls:"fullscreen-hide-controls"}},captions:{defaultActive:!1},fullscreen:{enabled:!0,fallback:!0,hideControls:!0,allowAudio:!1},storage:{enabled:!0,key:"plyr_volume"},controls:["restart","rewind","play","fast-forward","current-time","duration","mute","volume","captions","fullscreen"],i18n:{restart:"Restart",rewind:"Rewind {seektime} secs",play:"Play",pause:"Pause",forward:"Forward {seektime} secs",played:"played",buffered:"buffered",currentTime:"Current time",duration:"Duration",volume:"Volume",toggleMute:"Toggle Mute",toggleCaptions:"Toggle Captions",toggleFullscreen:"Toggle Fullscreen"},types:{embed:["youtube","vimeo"],html5:["video","audio"]},urls:{vimeo:{api:"https://f.vimeocdn.com/js/froogaloop2.min.js"},youtube:{api:"https://www.youtube.com/iframe_api"}}};e.supported=function(e){var t,n,a=r(),o="IE"===a.name&&a.version<=9,s=/iPhone|iPod/i.test(navigator.userAgent),i=!!document.createElement("audio").canPlayType,l=!!document.createElement("video").canPlayType;switch(e){case"video":t=l,n=t&&!o&&!s;break;case"audio":t=i,n=t&&!o;break;case"vimeo":case"youtube":t=!0,n=!o&&!s;break;default:t=i&&l,n=t&&!o}return{basic:t,full:n}},e.setup=function(t,n){var r=[];if("string"==typeof t?t=document.querySelectorAll(t):t instanceof HTMLElement?t=[t]:t instanceof NodeList||"string"==typeof t||("undefined"==typeof n&&"object"==typeof t&&(n=t),t=document.querySelectorAll(A.selectors.container)),E=T(A,n),!E.enabled||!e.supported().basic)return!1;for(var a=t.length-1;a>=0;a--){var o=t[a];if("undefined"==typeof o.plyr){var s=new C(o);o.plyr=Object.keys(s).length?s:!1,"function"==typeof E.onSetup&&E.onSetup.apply(o.plyr)}r.push(o.plyr)}return r}}(this.plyr=this.plyr||{}); \ No newline at end of file +!function(e,t){"function"==typeof define&&define.amd?define(null,t):"object"==typeof exports?module.exports=t():e.plyr=t()}(this,function(){function e(){var e=['
','
','','','',"0% "+S.i18n.played,"",'',"0% "+S.i18n.buffered,"","
",''];return a(S.controls,"restart")&&e.push('"),a(S.controls,"rewind")&&e.push('"),a(S.controls,"play")&&e.push('",'"),a(S.controls,"fast-forward")&&e.push('"),a(S.controls,"current-time")&&e.push('',''+S.i18n.currentTime+"",'00:00',""),a(S.controls,"duration")&&e.push('',''+S.i18n.duration+"",'00:00',""),e.push("",''),a(S.controls,"mute")&&e.push('"),a(S.controls,"volume")&&e.push('",''),a(S.controls,"captions")&&e.push('"),a(S.controls,"fullscreen")&&e.push('"),e.push("","
"),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;an;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])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",'
'),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=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=7){t("Safari 7+ detected; removing track from DOM."),a=ve.media.getElementsByTagName("track");for(var c=0;cn?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 diff --git a/package.json b/package.json index 0300322f..751ce67e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plyr", - "version": "1.4.0", + "version": "1.5.0", "description": "A simple HTML5 media player using custom controls", "homepage": "http://plyr.io", "main": "gulpfile.js", diff --git a/src/js/plyr.js b/src/js/plyr.js index 55bfd62e..cd6d9bc7 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,13 +1,26 @@ // ========================================================================== // Plyr -// plyr.js v1.4.0 +// plyr.js v1.5.0 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ // ========================================================================== -(function (api) { +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD + define(null, factory); + } else if (typeof exports === 'object') { + // Node, CommonJS-like + module.exports = factory(); + } else { + // Browser globals (root is window) + root.plyr = factory(); + } +}(this, function () { + var api = {}; + 'use strict'; /*global YT,$f*/ @@ -103,7 +116,7 @@ }, types: { embed: ['youtube','vimeo'], - html5: ['video', 'audio'] + html5: ['video', 'audio'] }, urls: { vimeo: { @@ -298,7 +311,7 @@ name = 'Firefox'; fullVersion = nAgt.substring(verOffset + 8); } - // In most other browsers, 'name/version' is at the end of userAgent + // In most other browsers, 'name/version' is at the end of userAgent else if ((nameOffset=nAgt.lastIndexOf(' ') + 1) < (verOffset=nAgt.lastIndexOf('/'))) { name = nAgt.substring(nameOffset,verOffset); fullVersion = nAgt.substring(verOffset + 1); @@ -330,7 +343,7 @@ } // Check for mime type support against a player instance - // Credits: http://diveintohtml5.info/everything.html + // Credits: http://diveintohtml5.info/everything.html // Related: http://www.leanbackplyr.com/test/h5mt.html function _supportMime(plyr, mimeType) { var media = plyr.media; @@ -353,7 +366,7 @@ case 'audio/ogg': return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '')); case 'audio/wav': return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, '')); } - } + } // If we got this far, we're stuffed return false; @@ -375,7 +388,7 @@ function _inArray(haystack, needle) { return Array.prototype.indexOf && (haystack.indexOf(needle) != -1); } - + // Replace all function _replaceAll(string, find, replace) { return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace); @@ -386,28 +399,28 @@ // Convert `elements` to an array, if necessary. if (!elements.length) { elements = [elements]; - } - + } + // Loops backwards to prevent having to clone the wrapper on the // first element (see `child` below). for (var i = elements.length - 1; i >= 0; i--) { var child = (i > 0) ? wrapper.cloneNode(true) : wrapper; var element = elements[i]; - + // Cache the current parent and sibling. var parent = element.parentNode; var sibling = element.nextSibling; - + // Wrap the element (is automatically removed from its current // parent). child.appendChild(element); - + // If the element had a sibling, insert the wrapper before // the sibling to maintain the HTML structure; otherwise, just // append it to the parent. if (sibling) { parent.insertBefore(child, sibling); - } + } else { parent.appendChild(child); } @@ -526,10 +539,10 @@ function _toggleState(target, state) { // Get state state = (typeof state === 'boolean' ? state : !target.getAttribute('aria-pressed')); - + // Set the attribute on target target.setAttribute('aria-pressed', state); - + return state; } @@ -549,7 +562,7 @@ if (source[property] && source[property].constructor && source[property].constructor === Object) { destination[property] = destination[property] || {}; _extend(destination[property], source[property]); - } + } else { destination[property] = source[property]; } @@ -634,7 +647,7 @@ supported: (function() { try { return 'localStorage' in window && window.localStorage !== null; - } + } catch(e) { return false; } @@ -678,7 +691,7 @@ } // Check if the next caption is in the current time range - if (plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) && + if (plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) && plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])) { plyr.currentCaption = plyr.captions[plyr.subcount][1]; @@ -755,7 +768,7 @@ function _inFrame() { try { return window.self !== window.top; - } + } catch (e) { return true; } @@ -879,13 +892,13 @@ if (plyr.supported.full) { // Remove native video controls plyr.media.removeAttribute('controls'); - + // Add type class _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true); // If there's no autoplay attribute, assume the video is stopped and add state class _toggleClass(plyr.container, config.classes.stopped, config.autoplay); - + // Add iOS class if (plyr.browser.ios) { _toggleClass(plyr.container, 'ios', true); @@ -974,7 +987,7 @@ }); container.appendChild(iframe); plyr.media.appendChild(container); - + // Setup API if (typeof Froogaloop === 'function') { _on(iframe, 'load', _vimeoReady); @@ -1058,7 +1071,7 @@ plyr.timer.buffering = window.setInterval(function() { // Get loaded % from YouTube plyr.media.buffered = instance.getVideoLoadedFraction(); - + // Trigger progress _triggerEvent(plyr.media, 'progress'); @@ -1089,9 +1102,9 @@ // 1 Playing // 2 Paused // 3 Buffering - // 5 Video cued + // 5 Video cued switch (event.data) { - case 0: + case 0: plyr.media.paused = true; _triggerEvent(plyr.media, 'ended'); break; @@ -1185,7 +1198,7 @@ // Prevent autoplay if needed (seek will play) //if (!config.autoplay) { // plyr.embed.api('pause'); - //} + //} }); } @@ -1236,7 +1249,7 @@ } // If caption file exists, process captions else { - // Turn off native caption rendering to avoid double captions + // Turn off native caption rendering to avoid double captions // This doesn't seem to work in Safari 7+, so the elements are removed from the dom below var tracks = plyr.media.textTracks; for (var x = 0; x < tracks.length; x++) { @@ -1247,9 +1260,9 @@ _showCaptions(plyr); // Disable unsupported browsers than report false positive - if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) || - (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) || - (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) || + if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) || + (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) || + (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) || (plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) { // Debugging _log('Detected unsupported browser for HTML5 captions. Using fallback.'); @@ -1262,7 +1275,7 @@ // Native support required - http://caniuse.com/webvtt if (plyr.usingTextTracks) { _log('TextTracks supported.'); - + for (var y = 0; y < tracks.length; y++) { var track = tracks[y]; @@ -1310,13 +1323,13 @@ plyr.captions.shift(); _log('Successfully loaded the caption file via AJAX.'); - } + } else { _log('There was a problem loading the caption file via AJAX.', true); } } }; - + xhr.open('get', captionSrc, true); xhr.send(); @@ -1329,7 +1342,7 @@ // Find all elements tracks = plyr.media.getElementsByTagName('track'); - + // Loop through and remove one by one for (var t = 0; t < tracks.length; t++) { plyr.media.removeChild(tracks[t]); @@ -1362,7 +1375,7 @@ if (config.fullscreen.hideControls) { _toggleClass(plyr.container, config.classes.fullscreen.hideControls, true); } - } + } } // Play media @@ -1517,7 +1530,7 @@ // Set button state _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); - + // Toggle controls visibility based on mouse movement and location var hoverTimer, isMouseOver = false; @@ -1554,7 +1567,7 @@ } } - // Bail from faux-fullscreen + // Bail from faux-fullscreen function _handleEscapeFullscreen(event) { // If it's a keypress and not escape, bail if ((event.which || event.charCode || event.keyCode) === 27 && plyr.isFullscreen) { @@ -1606,7 +1619,7 @@ } else { volume = config.volume; - } + } } // Maximum is 10 @@ -1642,7 +1655,7 @@ // Toggle muted state if (plyr.media.muted && volume > 0) { _toggleMute(); - } + } } // Update volume UI and storage @@ -1662,7 +1675,7 @@ // Toggle class if muted _toggleClass(plyr.container, config.classes.muted, (volume === 0)); - + // Update checkbox for mute state if (plyr.supported.full && plyr.buttons.mute) { _toggleState(plyr.buttons.mute, (volume === 0)); @@ -1674,7 +1687,7 @@ // If there's no full support, or there's no caption toggle if (!plyr.supported.full || !plyr.buttons.captions) { return; - } + } // If the method is called without parameter, toggle based on current value if (typeof show !== 'boolean') { @@ -1721,7 +1734,7 @@ if (event.type == 'timeupdate' && plyr.buttons.seek) { plyr.buttons.seek.value = value; } - + break; // Events from seek range @@ -1780,7 +1793,7 @@ // Do we need to display hours? var displayHours = (parseInt(((plyr.media.duration / 60) / 60) % 60) > 0); - + // Ensure it's two digits. For example, 03 rather than 3. plyr.secs = ('0' + plyr.secs).slice(-2); plyr.mins = ('0' + plyr.mins).slice(-2); @@ -1848,7 +1861,7 @@ // Remove video wrapper _remove(plyr.videoContainer); } - + // Remove the old media _remove(plyr.media); @@ -1902,10 +1915,10 @@ // Autoplay the new source? config.autoplay = (source.autoplay || config.autoplay); - + // Set media id for embeds if (_inArray(config.types.embed, plyr.type)) { - plyr.embedId = source.sources; + plyr.embedId = source.sources; } // Set new sources for html5 @@ -1914,7 +1927,7 @@ } // Set up from scratch - _setupMedia(); + _setupMedia(); // Trigger media updated _mediaUpdated(); @@ -1948,13 +1961,13 @@ // Play if autoplay attribute is present if (config.autoplay) { _play(); - } - } + } + } if ('title' in source) { config.title = source.title; _setupPlayAria(); - } + } } // Update poster @@ -2020,7 +2033,7 @@ // Fast forward _on(plyr.buttons.forward, 'click', _forward); - // Seek + // Seek _on(plyr.buttons.seek, inputEvent, _seek); // Set volume @@ -2038,7 +2051,7 @@ if (fullscreen.supportsFullScreen) { _on(document, fullscreen.fullScreenEventName, _toggleFullscreen); } - + // Time change on media _on(plyr.media, 'timeupdate seeking', _timeUpdate); @@ -2053,7 +2066,7 @@ // Handle the media finishing _on(plyr.media, 'ended', function() { - // Clear + // Clear if (plyr.type === 'video') { plyr.captionsContainer.innerHTML = ''; } @@ -2140,7 +2153,7 @@ return null; } - // Setup the fullscreen api + // Setup the fullscreen api fullscreen = _fullscreen(); // Sniff out the browser @@ -2169,7 +2182,7 @@ config.autoplay = (config.autoplay || (plyr.media.getAttribute('autoplay') !== null)); config.loop = (config.loop || (plyr.media.getAttribute('loop') !== null)); } - + // Check for full support plyr.supported = api.supported(plyr.type); @@ -2239,7 +2252,7 @@ _listeners(); } - // Initialize instance + // Initialize instance _init(); // If init failed, return an empty object @@ -2269,7 +2282,7 @@ }; } - // Check for support + // Check for support api.supported = function(type) { var browser = _browserSniff(), oldIE = (browser.name === 'IE' && browser.version <= 9), @@ -2279,18 +2292,18 @@ basic, full; switch (type) { - case 'video': + case 'video': basic = video; full = (basic && (!oldIE && !iPhone)); break; - case 'audio': + case 'audio': basic = audio; full = (basic && !oldIE); break; - case 'vimeo': - case 'youtube': + case 'vimeo': + case 'youtube': basic = true; full = (!oldIE && !iPhone); break; @@ -2308,8 +2321,8 @@ // Expose setup function api.setup = function(elements, options) { - // Get the players - var instances = []; + // Get the players + var instances = [], elements = []; // Select the elements // Assume elements is a NodeList by default @@ -2336,7 +2349,7 @@ // Bail if disabled or no basic support // You may want to disable certain UAs etc - if (!config.enabled || !api.supported().basic) { + if (!config.enabled || !api.supported().basic || !elements.length) { return false; } @@ -2366,4 +2379,5 @@ return instances; }; -}(this.plyr = this.plyr || {})); + return api; +})); diff --git a/src/less/plyr.less b/src/less/plyr.less index c2411ea9..d10458fc 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -21,7 +21,7 @@ // Captions @font-size-captions-base: ceil(@font-size-base * 1.25); @font-size-captions-medium: ceil(@font-size-base * 1.5); -@font-size-captions-large: (@font-size-base * 2); +@font-size-captions-large: (@font-size-base * 2); // Controls @control-spacing: 10px; @@ -36,7 +36,7 @@ @tooltip-border-width: 1px; @tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color; @tooltip-color: @control-color; -@tooltip-padding: @control-spacing; +@tooltip-padding: @control-spacing; @tooltip-arrow-size: 6px; @tooltip-radius: 3px; @@ -94,7 +94,7 @@ // Contain floats: nicolasgallagher.com/micro-clearfix-hack/ .clearfix() { zoom: 1; - &:before, + &:before, &:after { content: ""; display: table; } &:after { clear: both; } } @@ -110,9 +110,19 @@ width: @volume-thumb-width; background: @volume-thumb-bg; border: 0; - border-radius: (@volume-thumb-height / 2); - transition: background .3s ease; + border-radius: 100%; + transition: background .3s ease, transform .2s ease; cursor: ew-resize; + + &:hover { + transform: scale(110%); + } + &:active { + height: @volume-thumb-height + 3; + width: @volume-thumb-width + 3; + border: 2px solid @control-bg-hover; + background: #fff !important; + } } .volume-track() { height: @volume-track-height; @@ -145,7 +155,7 @@ // Styles // ------------------------------- -// Base +// Base .plyr { position: relative; max-width: 100%; @@ -156,8 +166,8 @@ &, *, *::after, - *::before { - box-sizing: border-box; + *::before { + box-sizing: border-box; } // For video @@ -177,7 +187,7 @@ height: 0; overflow: hidden; background: #000; - + iframe { position: absolute; top: 0; @@ -254,7 +264,7 @@ margin-top: 0; } } - + // Buttons button { display: inline-block; @@ -268,7 +278,7 @@ cursor: pointer; color: @control-color; transition: background .3s ease, color .3s ease, opacity .3s ease; - + svg { width: 18px; height: 18px; @@ -276,7 +286,7 @@ fill: currentColor; transition: fill .3s ease; } - + // Hover and tab focus &.tab-focus, &:hover { @@ -343,7 +353,7 @@ transform: translate(-50%, (@tooltip-padding * 3)) scale(.8); transform-origin: 50% 100%; transition: transform .2s .1s ease, opacity .2s .1s ease; - + // Arrows &::after, &::before { @@ -363,15 +373,15 @@ border-top: @border-arrow-size solid @tooltip-border-color; border-left: @border-arrow-size solid transparent; z-index: 1; - } - // The background triangle + } + // The background triangle &::before { bottom: -@tooltip-arrow-size; border-right: @tooltip-arrow-size solid transparent; border-top: @tooltip-arrow-size solid @tooltip-bg; border-left: @tooltip-arrow-size solid transparent; z-index: 2; - } + } } button:hover .plyr-tooltip, button.tab-focus:focus .plyr-tooltip { @@ -411,7 +421,7 @@ background: transparent; } &-buffer[value], - &-played[value] { + &-played[value] { &::-webkit-progress-bar { background: transparent; } @@ -457,7 +467,7 @@ -moz-appearance: none; .seek-thumb(); } - + // Microsoft &::-ms-track { color: transparent; @@ -487,13 +497,13 @@ background-repeat: repeat-x; background-color: @progress-buffered-bg; background-image: linear-gradient( - -45deg, - @progress-loading-bg 25%, - transparent 25%, - transparent 50%, - @progress-loading-bg 50%, + -45deg, + @progress-loading-bg 25%, + transparent 25%, + transparent 50%, + @progress-loading-bg 50%, @progress-loading-bg 75%, - transparent 75%, + transparent 75%, transparent); color: transparent; } @@ -517,11 +527,11 @@ -moz-appearance: none; width: 100px; margin: 0 @control-spacing 0 0; - padding: 0; + padding: 0; cursor: pointer; background: transparent; border: none; - + // Webkit &::-webkit-slider-runnable-track { .volume-track(); @@ -530,6 +540,10 @@ -webkit-appearance: none; margin-top: -((@volume-thumb-height - @volume-track-height) / 2); .volume-thumb(); + + &:active { + margin-top: -(((@volume-thumb-height - @volume-track-height) / 2) + 1); + } } // Mozilla @@ -539,7 +553,7 @@ &::-moz-range-thumb { .volume-thumb(); } - + // Microsoft &::-ms-track { height: @volume-track-height; @@ -614,7 +628,7 @@ .plyr-video-wrapper { height: 100%; width: 100%; - } + } .plyr-controls { position: absolute; bottom: 0; @@ -669,4 +683,4 @@ &.fullscreen-enabled [data-plyr='fullscreen'] { display: inline-block; } -} \ No newline at end of file +}