From da15980b8a94fdee7c7e1bf1548d1400cc81fcb0 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 17 Apr 2017 00:32:41 +1000 Subject: [PATCH] ID fix and styling fix --- dist/plyr.css | 2 +- dist/plyr.js | 4 ++-- src/js/plyr.js | 30 ++++++++++++++---------------- src/less/plyr.less | 10 ++++++---- 4 files changed, 23 insertions(+), 23 deletions(-) diff --git a/dist/plyr.css b/dist/plyr.css index 976295ee..32301228 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.plyr input[type=range]:focus,.plyr:focus{outline:0}@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{from{transform:translateY(10px);opacity:.5}to{transform:translateY(0);opacity:1}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;font-weight:500;direction:ltr}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr [aria-hidden=true]{display:none}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;background:0 0}.plyr input[type=range]::-webkit-slider-runnable-track{height:8px;background:0 0;border:0;border-radius:4px;-webkit-user-select:none;user-select:none}.plyr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:0 0;border:0;border-radius:4px;-moz-user-select:none;user-select:none}.plyr input[type=range]::-moz-range-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box}.plyr input[type=range]::-ms-track{height:8px;background:0 0;border:0;color:transparent}.plyr input[type=range]::-ms-fill-upper{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none}.plyr input[type=range]::-ms-fill-lower{height:8px;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#3498db}.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box;margin-top:0}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--video input[type=range].tab-focus:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio input[type=range].tab-focus:focus{outline:rgba(86,93,100,.5) dotted 1px}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute!important;padding:0!important;border:0!important;height:1px!important;width:1px!important}.plyr__video-embed,.plyr__video-wrapper{border-radius:inherit;overflow:hidden;z-index:0}.plyr__video-wrapper{position:relative;background:#000}.plyr__video-embed{padding-bottom:56.25%;height:0}.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%;transform:translateY(-35.95%)}.plyr .plyr__video-embed iframe{pointer-events:none}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;transform:translateY(-40px);transition:transform .3s ease;color:#fff;font-size:16px;text-align:center}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.6);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:150%}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}@media (min-width:1024px){.plyr--fullscreen-active .plyr__captions{font-size:32px}}.plyr ::-webkit-media-controls{display:none}.plyr__controls{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;line-height:1;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none}.plyr__control{position:relative;display:inline-block;-ms-flex-negative:0;flex-shrink:0;overflow:visible;vertical-align:middle;padding:7px;border:0;background:0 0;border-radius:3px;cursor:pointer;transition:background .3s ease,color .3s ease,opacity .3s ease;color:inherit}.plyr__control svg{width:18px;height:18px;display:block;fill:currentColor;pointer-events:none}.plyr__control .icon--captions-on,.plyr__control .icon--exit-fullscreen,.plyr__control .icon--muted{display:none}.plyr__control:focus{outline:0}.plyr--video .plyr__controls{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:50px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff;transition:opacity .3s ease}.plyr--video .plyr__controls .plyr__control.tab-focus:focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#3498db;color:#fff}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;border:1px solid #dbe3e8;color:#565D64}.plyr--audio .plyr__controls .plyr__control.tab-focus:focus,.plyr--audio .plyr__controls .plyr__control:hover,.plyr--audio .plyr__controls .plyr__control[aria-expanded=true]{background:#3498db;color:#fff}.plyr__play-large{display:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;background:#3498db;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;transition:all .3s ease}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor;pointer-events:none}.plyr__play-large:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr .plyr__play-large{display:inline-block}.plyr--audio .plyr__play-large,.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__play-large{opacity:0;visibility:hidden}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr--captions-active .plyr__control .icon--captions-on,.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen,.plyr--muted .plyr__control .icon--muted{display:block}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr--captions-active .plyr__control .icon--captions-on+svg,.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen+svg,.plyr--muted .plyr__control .icon--muted+svg{display:none}.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen]{display:inline-block}.plyr__menu{position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu__container.is-resizing,.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(45deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{position:absolute;bottom:100%;right:-5px;margin-bottom:10px;animation:plyr-popup .2s ease;background:rgba(52,63,74,.9);box-shadow:0 1px 0 rgba(0,0,0,.2);border-radius:4px;white-space:nowrap;text-align:left;color:#fff;font-size:14px}.plyr__menu__container::after{content:"";position:absolute;top:100%;right:15px;height:0;width:0;border:6px solid transparent;border-top-color:rgba(52,63,74,.9)}.plyr__menu__container ul{margin:0;padding:5px;list-style:none;overflow:hidden}.plyr__menu__container .plyr__control{display:-ms-flexbox;display:flex;width:100%;padding:7px 14px;color:#fff;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__menu__container .plyr__control::after{content:"";position:absolute;top:50%;transform:translateY(-50%);border:5px solid transparent}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{right:5px;border-left-color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__control--back{position:relative;padding-top:4px;padding-bottom:4px;padding-left:28px;margin-bottom:10px;font-weight:500}.plyr__menu__container .plyr__control--back::after{left:5px;border-right-color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__control--back::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;overflow:hidden;margin-top:4px;background:rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(255,255,255,.1)}.plyr__menu__container label.plyr__control{padding-left:18px}.plyr__menu__container label.plyr__control input[type=radio]{position:relative;left:-7px}.plyr__menu__container .plyr__menu__value{display:inherit;margin-left:auto;padding-left:25px;pointer-events:none;overflow:hidden;font-weight:500;color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__menu__value .plyr__badge{font-weight:600}.plyr__badge{padding:2px 4px;border-radius:2px;background:#fff;color:rgba(52,63,74,.9);font-size:10px}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;pointer-events:none;opacity:0;background:rgba(52,63,74,.9);border-radius:3px;color:#fff;font-size:14px;font-weight:500;line-height:1.3;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;transform:translateX(-50%);bottom:-4px;border-right:4px solid transparent;border-top:4px solid rgba(52,63,74,.9);border-left:4px solid transparent;z-index:2}.plyr .plyr__control.tab-focus:focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr__progress{position:relative;display:none;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-upper{background:0 0}.plyr__progress .plyr__tooltip{left:0}.plyr .plyr__progress{display:inline-block}.plyr__progress--buffer,.plyr__progress--played,.plyr__volume--display{position:absolute;left:0;top:50%;width:100%;height:8px;margin:-4px 0 0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:100px}.plyr__progress--buffer::-webkit-progress-bar,.plyr__progress--played::-webkit-progress-bar,.plyr__volume--display::-webkit-progress-bar{background:0 0}.plyr__progress--buffer::-webkit-progress-value,.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-moz-progress-bar,.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-ms-fill,.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{border-radius:100px}.plyr__progress--played,.plyr__volume--display{z-index:1;color:#3498db;background:0 0;transition:none}.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{display:none}.plyr__progress--buffer::-webkit-progress-value{transition:width .2s ease}.plyr__progress--buffer::-moz-progress-bar{transition:width .2s ease}.plyr__progress--buffer::-ms-fill{transition:width .2s ease}.plyr--video .plyr__progress--buffer,.plyr--video .plyr__volume--display{background:rgba(255,255,255,.25)}.plyr--video .plyr__progress--buffer{color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display{background:rgba(198,214,219,.66)}.plyr--audio .plyr__progress--buffer{color:rgba(198,214,219,.66)}.plyr--loading .plyr__progress--buffer{animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-image:linear-gradient(-45deg,rgba(52,63,74,.2) 25%,transparent 25%,transparent 50%,rgba(52,63,74,.2) 50%,rgba(52,63,74,.2) 75%,transparent 75%,transparent);color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(198,214,219,.66)}.plyr__time{display:inline-block;vertical-align:middle;font-size:14px}.plyr__time+.plyr__time{display:none}@media (min-width:768px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr__volume{display:none}.plyr .plyr__volume{-ms-flex:1;flex:1;position:relative}.plyr .plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr .plyr__volume{display:block;max-width:60px}}@media (min-width:768px){.plyr .plyr__volume{max-width:100px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr--fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000;border-radius:0!important}.plyr--fullscreen-active video{height:100%}.plyr--fullscreen-active .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-active .plyr__video-embed{overflow:visible}.plyr--fullscreen-active .plyr__controls{position:absolute;bottom:0;left:0;right:0}.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)} \ No newline at end of file +.plyr input[type=range]:focus,.plyr:focus{outline:0}@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{from{transform:translateY(10px);opacity:.5}to{transform:translateY(0);opacity:1}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;font-weight:500;direction:ltr}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr [aria-hidden=true]{display:none}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;background:0 0}.plyr input[type=range]::-webkit-slider-runnable-track{height:8px;background:0 0;border:0;border-radius:4px;-webkit-user-select:none;user-select:none}.plyr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:0 0;border:0;border-radius:4px;-moz-user-select:none;user-select:none}.plyr input[type=range]::-moz-range-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box}.plyr input[type=range]::-ms-track{height:8px;background:0 0;border:0;color:transparent}.plyr input[type=range]::-ms-fill-upper{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none}.plyr input[type=range]::-ms-fill-lower{height:8px;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#3498db}.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box;margin-top:0}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--video input[type=range].tab-focus:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio input[type=range].tab-focus:focus{outline:rgba(86,93,100,.5) dotted 1px}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute!important;padding:0!important;border:0!important;height:1px!important;width:1px!important}.plyr__video-embed,.plyr__video-wrapper{border-radius:inherit;overflow:hidden;z-index:0}.plyr__video-wrapper{position:relative;background:#000}.plyr__video-embed{padding-bottom:56.25%;height:0}.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%;transform:translateY(-35.95%)}.plyr .plyr__video-embed iframe{pointer-events:none}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;transform:translateY(-40px);transition:transform .3s ease;color:#fff;font-size:16px;text-align:center}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.6);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:150%}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}@media (min-width:1024px){.plyr--fullscreen-active .plyr__captions{font-size:32px}}.plyr ::-webkit-media-controls{display:none}.plyr__controls{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;line-height:1;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none}.plyr__control{position:relative;display:inline-block;-ms-flex-negative:0;flex-shrink:0;overflow:visible;vertical-align:middle;padding:7px;border:0;background:0 0;border-radius:3px;cursor:pointer;transition:background .3s ease,color .3s ease,opacity .3s ease;color:inherit}.plyr__control svg{width:18px;height:18px;display:block;fill:currentColor;pointer-events:none}.plyr__control .icon--captions-on,.plyr__control .icon--exit-fullscreen,.plyr__control .icon--muted{display:none}.plyr__control:focus{outline:0}.plyr--video .plyr__controls{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:50px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff;transition:opacity .3s ease}.plyr--video .plyr__controls .plyr__control.tab-focus:focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#3498db;color:#fff}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;border:1px solid #dbe3e8;color:#565D64}.plyr--audio .plyr__controls .plyr__control.tab-focus:focus,.plyr--audio .plyr__controls .plyr__control:hover,.plyr--audio .plyr__controls .plyr__control[aria-expanded=true]{background:#3498db;color:#fff}.plyr__play-large{display:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;background:#3498db;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;transition:all .3s ease}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor;pointer-events:none}.plyr__play-large:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr .plyr__play-large{display:inline-block}.plyr--audio .plyr__play-large,.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__play-large{opacity:0;visibility:hidden}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr--captions-active .plyr__control .icon--captions-on,.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen,.plyr--muted .plyr__control .icon--muted{display:block}.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr--captions-active .plyr__control .icon--captions-on+svg,.plyr--fullscreen-active .plyr__control .icon--exit-fullscreen+svg,.plyr--muted .plyr__control .icon--muted+svg{display:none}.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen]{display:inline-block}.plyr__menu{position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu__container.is-resizing,.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(45deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{position:absolute;z-index:1;bottom:100%;right:-5px;margin-bottom:10px;animation:plyr-popup .2s ease;background:rgba(52,63,74,.9);box-shadow:0 1px 0 rgba(0,0,0,.2);border-radius:4px;white-space:nowrap;text-align:left;color:#fff;font-size:14px}.plyr__menu__container::after{content:"";position:absolute;top:100%;right:15px;height:0;width:0;border:6px solid transparent;border-top-color:rgba(52,63,74,.9)}.plyr__menu__container ul{margin:0;padding:7px;list-style:none;overflow:hidden}.plyr__menu__container .plyr__control{display:-ms-flexbox;display:flex;width:100%;padding:7px 14px;color:#fff;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__menu__container .plyr__control::after{content:"";position:absolute;top:50%;transform:translateY(-50%);border:5px solid transparent}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{right:5px;border-left-color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__control--back{position:relative;width:calc(100% - 14px);margin:7px 7px 3px;padding-left:28px;font-weight:500}.plyr__menu__container .plyr__control--back::after{left:5px;border-right-color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__control--back::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;overflow:hidden;margin-top:4px;background:rgba(0,0,0,.15);box-shadow:0 1px 0 rgba(255,255,255,.1)}.plyr__menu__container label.plyr__control{padding-left:18px}.plyr__menu__container label.plyr__control input[type=radio]{position:relative;left:-7px}.plyr__menu__container .plyr__menu__value{display:inherit;margin-left:auto;padding-left:25px;pointer-events:none;overflow:hidden;font-weight:500;color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__menu__value .plyr__badge{font-weight:600}.plyr__badge{padding:2px 4px;border-radius:2px;background:#fff;color:rgba(52,63,74,.9);font-size:10px}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;pointer-events:none;opacity:0;background:rgba(52,63,74,.9);border-radius:3px;color:#fff;font-size:14px;font-weight:500;line-height:1.3;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;transform:translateX(-50%);bottom:-4px;border-right:4px solid transparent;border-top:4px solid rgba(52,63,74,.9);border-left:4px solid transparent;z-index:2}.plyr .plyr__control.tab-focus:focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.tab-focus:focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr__progress{position:relative;display:none;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-upper{background:0 0}.plyr__progress .plyr__tooltip{left:0}.plyr .plyr__progress{display:inline-block}.plyr__progress--buffer,.plyr__progress--played,.plyr__volume--display{position:absolute;left:0;top:50%;width:100%;height:8px;margin:-4px 0 0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:100px}.plyr__progress--buffer::-webkit-progress-bar,.plyr__progress--played::-webkit-progress-bar,.plyr__volume--display::-webkit-progress-bar{background:0 0}.plyr__progress--buffer::-webkit-progress-value,.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-moz-progress-bar,.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-ms-fill,.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{border-radius:100px}.plyr__progress--played,.plyr__volume--display{z-index:1;color:#3498db;background:0 0;transition:none}.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{display:none}.plyr__progress--buffer::-webkit-progress-value{transition:width .2s ease}.plyr__progress--buffer::-moz-progress-bar{transition:width .2s ease}.plyr__progress--buffer::-ms-fill{transition:width .2s ease}.plyr--video .plyr__progress--buffer,.plyr--video .plyr__volume--display{background:rgba(255,255,255,.25)}.plyr--video .plyr__progress--buffer{color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display{background:rgba(198,214,219,.66)}.plyr--audio .plyr__progress--buffer{color:rgba(198,214,219,.66)}.plyr--loading .plyr__progress--buffer{animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-image:linear-gradient(-45deg,rgba(52,63,74,.2) 25%,transparent 25%,transparent 50%,rgba(52,63,74,.2) 50%,rgba(52,63,74,.2) 75%,transparent 75%,transparent);color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(198,214,219,.66)}.plyr__time{display:inline-block;vertical-align:middle;font-size:14px}.plyr__time+.plyr__time{display:none}@media (min-width:768px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr__volume{display:none}.plyr .plyr__volume{-ms-flex:1;flex:1;position:relative}.plyr .plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr .plyr__volume{display:block;max-width:60px}}@media (min-width:768px){.plyr .plyr__volume{max-width:100px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr--fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000;border-radius:0!important}.plyr--fullscreen-active video{height:100%}.plyr--fullscreen-active .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-active .plyr__video-embed{overflow:visible}.plyr--fullscreen-active .plyr__controls{position:absolute;bottom:0;left:0;right:0}.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)} \ No newline at end of file diff --git a/dist/plyr.js b/dist/plyr.js index 8200c1e3..d00d108f 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1,2 +1,2 @@ -!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define([],function(){return t(e,document)}):e.plyr=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(){var e,n,a,s=navigator.userAgent,l=navigator.appName,i=""+parseFloat(navigator.appVersion),r=parseInt(navigator.appVersion,10),o=!1,u=!1,c=!1,d=!1;return navigator.appVersion.indexOf("Windows NT")!==-1&&navigator.appVersion.indexOf("rv:11")!==-1?(o=!0,l="IE",i="11"):(n=s.indexOf("MSIE"))!==-1?(o=!0,l="IE",i=s.substring(n+5)):(n=s.indexOf("Chrome"))!==-1?(c=!0,l="Chrome",i=s.substring(n+7)):(n=s.indexOf("Safari"))!==-1?(d=!0,l="Safari",i=s.substring(n+7),(n=s.indexOf("Version"))!==-1&&(i=s.substring(n+8))):(n=s.indexOf("Firefox"))!==-1?(u=!0,l="Firefox",i=s.substring(n+8)):(e=s.lastIndexOf(" ")+1)<(n=s.lastIndexOf("/"))&&(l=s.substring(e,n),i=s.substring(n+1),l.toLowerCase()===l.toUpperCase()&&(l=navigator.appName)),(a=i.indexOf(";"))!==-1&&(i=i.substring(0,a)),(a=i.indexOf(" "))!==-1&&(i=i.substring(0,a)),r=parseInt(""+i,10),isNaN(r)&&(i=""+parseFloat(navigator.appVersion),r=parseInt(navigator.appVersion,10)),{name:l,version:r,isIE:o,isFirefox:u,isChrome:c,isSafari:d,isIos:/(iPad|iPhone|iPod)/g.test(navigator.platform),isTouch:"ontouchstart"in t.documentElement}}function a(e){if(!t.querySelectorAll('script[src="'+e+'"]').length){var n=t.createElement("script");n.src=e;var a=t.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a)}}function s(e,t){return Array.prototype.indexOf&&e.indexOf(t)!==-1}function l(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var a=n>0?t.cloneNode(!0):t,s=e[n],l=s.parentNode,i=s.nextSibling;return a.appendChild(s),i?l.insertBefore(a,i):l.appendChild(a),a}}function i(e){e&&e.parentNode.removeChild(e)}function r(e,t){e.insertBefore(t,e.firstChild)}function o(e,t){for(var n in t)e.setAttribute(n,t[n])}function u(e,t){if(!L.string(e)||L.empty(e))return{};var n={};return e.split(",").forEach(function(e){e=e.trim();var a=e.charAt(0);switch(a){case".":var s=e.replace(".","");L.object(t)&&L.string(t.class)&&(t.class+=" "+s),n.class=s;break;case"#":n.id=e.replace("#","");break;case"[":e=e.replace(/[\[\]]/g,"");var l=e.split("="),i=l[0],r=l.length>1?l[1].replace(/[\"\']/g,""):"";n[i]=r}}),n}function c(e,n,a){var s=t.createElement(e);return L.object(n)&&o(s,n),L.string(a)&&(s.textContent=a),s}function d(e,t,n,a){var s=c(e,n,a);r(t,s)}function p(e){for(var t=e.childNodes.length;t--;)e.removeChild(e.lastChild)}function m(e){return e.replace(".","")}function f(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var a=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=a+(n?" "+t:"")}}function y(e,t){return!!e&&(e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className))}function b(e,n){var a=Element.prototype,s=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||function(e){return[].indexOf.call(t.querySelectorAll(e),this)!==-1};return s.call(e,n)}function v(e,t,n,a,s){h(e,t,function(t){n&&n.apply(e,[t]),a.apply(e,[t])},s)}function g(e,t,n,a,s){var l=t.split(" ");if(L.boolean(s)||(s=!1),e instanceof NodeList)for(var i=0;i'),st.captions.textTracks=!1,st.elements.media.textTracks&&(st.captions.textTracks=!0);var e=[],t="";if(st.elements.media.childNodes.forEach(function(t){"track"===t.nodeName.toLowerCase()&&("captions"!==t.kind&&"subtitles"!==t.kind||e.push(t.getAttribute("src")))}),st.captions.exist=!0,0===e.length?(st.captions.exist=!1,rt("No caption track found")):Number(A.captions.selectedIndex)+1>e.length?(st.captions.exist=!1,rt("Caption index out of bound")):(t=e[A.captions.selectedIndex],rt("Caption track found; URI: "+t)),st.captions.exist){var n=st.elements.media.textTracks;if([].forEach.call(n,function(e){k(e,"cuechange",ee),e.mode="hidden"}),le(st),(st.browser.isIE&&st.browser.version>=10||st.browser.isFirefox&&st.browser.version>=31)&&(rt("Detected browser with known TextTrack issues - using manual fallback"),st.captions.textTracks=!1),st.captions.textTracks){rt("TextTracks supported");var a=n[A.captions.selectedIndex];"captions"!==a.kind&&"subtitles"!==a.kind||(h(a,"cuechange",ee),a.activeCues&&a.activeCues.length>0&&ee(a))}else if(rt("TextTracks not supported so rendering captions manually"),st.captions.current="",st.captions.captions=[],""!==t){var s=new XMLHttpRequest;s.onreadystatechange=function(){if(4===s.readyState)if(200===s.status){var e=s.responseText,t="\r\n";e.indexOf(t+t)===-1&&(t=e.indexOf("\r\r")!==-1?"\r":"\n");var n=e.split(t+t);st.captions.captions=n.map(function(e){var n=e.split(t),a=0;return n[a].indexOf(":")!==-1&&(a=1),[n[a],n[a+1]]}),st.captions.captions.shift(),rt("Successfully loaded the caption file via AJAX")}else ot(A.logPrefix+"There was a problem loading the caption file via AJAX")},s.open("get",t,!0),s.send()}}else f(st.elements.container,A.classes.captions.enabled)}}function ne(e){A.captions.selectedIndex=e||A.captions.selectedIndex,ae(),te()}function ae(e){var t=V(A.selectors.captions);if(L.htmlElement(t)){var n=c("span");p(t),L.undefined(e)&&(e=""),L.string(e)?n.innerHTML=e.trim():n.appendChild(e),t.appendChild(n)}}function se(e){function t(e,t){var n=[];n=e.split(" --> ");for(var a=0;ast.captions.captions.length-1){st.captions.count=st.captions.captions.length-1;break}st.elements.media.currentTime.toFixed(1)>=n(st.captions[st.subcount][0])&&st.elements.media.currentTime.toFixed(1)<=a(st.captions[st.subcount][0])?(st.captions.current=st.captions.captions[st.captions.count][1],ae(st.captions.current)):ae()}}function le(){if(st.elements.buttons.captions){f(st.elements.container,A.classes.captions.enabled,!0);var e=st.storage.captions;L.boolean(e)||(e=A.captions.defaultActive),e&&(f(st.elements.container,A.classes.captions.active,!0),C(st.elements.buttons.captions,!0))}}function ie(e){st.supported.full&&st.elements.buttons.captions&&(L.boolean(e)||(e=st.elements.container.className.indexOf(A.classes.captions.active)===-1),st.captions.enabled=e,C(st.elements.buttons.captions,st.captions.enabled),f(st.elements.container,A.classes.captions.active,st.captions.enabled),M(st.elements.container,st.captions.enabled?"captionsenabled":"captionsdisabled",!0),pe({captions:st.captions.enabled}))}function re(){if(A.loadSprite){var e=B();e.absolute?(rt("AJAX loading absolute SVG sprite"+(st.browser.isIE?" (due to IE)":"")),_(e.url,"sprite-plyr")):rt("Sprite will be used as external resource directly")}s(A.controls,"play-large")&&(st.elements.buttons.playLarge=J("play-large"),st.elements.container.appendChild(st.elements.buttons.playLarge)),st.id=Math.floor(1e4*Math.random());var n,a=$({id:st.id,seektime:A.seekTime,speed:Te(),quality:"HD",captions:"English",loop:"None"});if(L.string(A.selectors.controls.container)&&(n=t.querySelector(A.selectors.controls.container)),L.htmlElement(n)||(n=st.elements.container),n.appendChild(a),A.tooltips.controls)for(var l=R([A.selectors.controls.wrapper," ",A.selectors.labels," .",A.classes.hidden].join("")),i=l.length-1;i>=0;i--){var r=l[i];f(r,A.classes.hidden,!1),f(r,A.classes.tooltip,!0)}}function oe(){f(st.elements.container,A.selectors.container.replace(".",""),st.supported.full)}function ue(e){e&&s(A.types.html5,st.type)?st.elements.media.setAttribute("controls",""):st.elements.media.removeAttribute("controls")}function ce(e){var t=A.i18n.play;L.string(A.title)&&A.title.length&&(t+=", "+A.title,st.elements.container.setAttribute("aria-label",A.title)),st.supported.full&&(L.htmlElement(st.elements.buttons.play)&&st.elements.buttons.play.setAttribute("aria-label",t),L.htmlElement(st.elements.buttons.playLarge)&&st.elements.buttons.playLarge.setAttribute("aria-label",t)),L.htmlElement(e)&&e.setAttribute("title",A.i18n.frameTitle.replace("{title}",A.title))}function de(){var t=null;st.storage={},j.storage&&A.storage.enabled&&(e.localStorage.removeItem("plyr-volume"),t=e.localStorage.getItem(A.storage.key),t&&(/^\d+(\.\d+)?$/.test(t)?pe({volume:parseFloat(t)}):st.storage=JSON.parse(t)))}function pe(t){j.storage&&A.storage.enabled&&(T(st.storage,t),e.localStorage.setItem(A.storage.key,JSON.stringify(st.storage)))}function me(){if(!st.elements.media)return void ot("No media element found!");if(st.supported.full&&(f(st.elements.container,A.classes.type.replace("{0}",st.type),!0),s(A.types.embed,st.type)&&f(st.elements.container,A.classes.type.replace("{0}","video"),!0),f(st.elements.container,A.classes.pip.enabled,j.pip),f(st.elements.container,A.classes.stopped,A.autoplay),f(st.elements.container,A.classes.isIos,st.browser.isIos),f(st.elements.container,A.classes.isTouch,st.browser.isTouch),"video"===st.type)){var e=c("div");e.setAttribute("class",A.classes.videoWrapper),l(st.elements.media,e),st.elements.wrapper=e}s(A.types.embed,st.type)&&fe()}function fe(){var t,n=c("div"),s=st.type+"-"+Math.floor(1e4*Math.random());switch(st.type){case"youtube":t=S(st.embedId);break;case"vimeo":t=E(st.embedId);break;default:t=st.embedId}for(var l=R('[id^="'+st.type+'-"]'),r=l.length-1;r>=0;r--)i(l[r]);if(f(st.elements.media,A.classes.videoWrapper,!0),f(st.elements.media,A.classes.embedWrapper,!0),"youtube"===st.type)st.elements.media.appendChild(n),n.setAttribute("id",s),L.object(e.YT)?be(t,n):(a(A.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){be(t,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===st.type)if(st.supported.full?st.elements.media.appendChild(n):n=st.elements.media,n.setAttribute("id",s),L.object(e.Vimeo))ve(t,n);else{a(A.urls.vimeo.api);var u=e.setInterval(function(){L.object(e.Vimeo)&&(e.clearInterval(u),ve(t,n))},50)}else if("soundcloud"===st.type){var d=c("iframe");d.loaded=!1,h(d,"load",function(){d.loaded=!0}),o(d,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+t,id:s}),n.appendChild(d),st.elements.media.appendChild(n),e.SC||a(A.urls.soundcloud.api);var p=e.setInterval(function(){e.SC&&d.loaded&&(e.clearInterval(p),ge.call(d))},50)}}function ye(){st.supported.full&&(tt(),nt()),ce(V("iframe"))}function be(t,n){st.embed=new e.YT.Player(n.id,{videoId:t,playerVars:{autoplay:A.autoplay?1:0,controls:st.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:A.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onError:function(e){M(st.elements.container,"error",!0,{code:e.data,embed:e.target})},onPlaybackQualityChange:function(e){var t=e.target,n=t.getPlaybackQuality();console.warn(n)},onReady:function(t){var n=t.target;st.elements.media.play=function(){n.playVideo(),st.elements.media.paused=!1},st.elements.media.pause=function(){n.pauseVideo(),st.elements.media.paused=!0},st.elements.media.stop=function(){n.stopVideo(),st.elements.media.paused=!0},st.elements.media.duration=n.getDuration(),st.elements.media.paused=!0,st.elements.media.currentTime=0,st.elements.media.muted=n.isMuted();var a=n.getPlaybackRate(),s=n.getAvailablePlaybackRates();console.warn(a,s),A.title=n.getVideoData().title,st.supported.full&&st.elements.media.querySelector("iframe").setAttribute("tabindex","-1"),ye(),M(st.elements.media,"timeupdate"),M(st.elements.media,"durationchange"),e.clearInterval(lt.buffering),lt.buffering=e.setInterval(function(){st.elements.media.buffered=n.getVideoLoadedFraction(),(null===st.elements.media.lastBuffered||st.elements.media.lastBuffered=n)return;A.loop.end=n,A.loop.indicator.end=st.elements.display.played.value;break;case"all":A.loop.start=0,A.loop.end=st.elements.media.duration-2,A.loop.indicator.start=0,A.loop.indicator.end=100;break;case"toggle":A.loop.active?(A.loop.start=0,A.loop.end=null):(A.loop.start=0,A.loop.end=st.elements.media.duration-2);break;default:A.loop.start=0,A.loop.end=null}A.loop.active=L.number(A.loop.start)&&L.number(A.loop.end);var a=(We(A.loop.start,V('[data-plyr-loop="start"]')),null);L.number(A.loop.end)&&(a=We(A.loop.end,t.querySelector('[data-loop__value="loopout"]'))),A.loop.active}function xe(e){if(L.undefined(e)&&(e=st.storage.speed||A.defaultSpeed),!L.array(A.speeds))return void ot("Invalid speeds format");if(!L.number(e)){var t=A.speeds.indexOf(A.currentSpeed);if(t!==-1){var n=t+1;n>=A.speeds.length&&(n=0),e=A.speeds[n]}else e=A.defaultSpeed}A.currentSpeed=e,st.elements.media.playbackRate=e,pe({speed:e})}function Te(){return A.currentSpeed.toFixed(1).toString().replace(".0","")+"×"}function Se(e){L.number(e)||(e=A.seekTime),Ae(st.elements.media.currentTime-e)}function Ee(e){L.number(e)||(e=A.seekTime),Ae(st.elements.media.currentTime+e)}function Ae(e){var t=0,n=st.elements.media.paused,a=_e();L.number(e)?t=e:L.event(e)&&s(["input","change"],e.type)&&(t=e.target.value/e.target.max*a),t<0?t=0:t>a&&(t=a),Ye(t);try{st.elements.media.currentTime=t.toFixed(4)}catch(e){}if(s(A.types.embed,st.type)){switch(st.type){case"youtube":st.embed.seekTo(t);break;case"vimeo":st.embed.setCurrentTime(t.toFixed(0));break;case"soundcloud":st.embed.seekTo(1e3*t)}n&&ke(),M(st.elements.media,"timeupdate"),st.elements.media.seeking=!0,M(st.elements.media,"seeking")}rt("Seeking to "+st.elements.media.currentTime+" seconds"),se(t)}function _e(){var e=parseInt(A.duration),t=0;return null===st.elements.media.duration||isNaN(st.elements.media.duration)||(t=st.elements.media.duration),isNaN(e)?t:e}function Ie(){f(st.elements.container,A.classes.playing,!st.elements.media.paused),f(st.elements.container,A.classes.stopped,st.elements.media.paused),Ue(st.elements.media.paused)}function Pe(){F={x:e.pageXOffset||0,y:e.pageYOffset||0}}function Ne(){e.scrollTo(F.x,F.y)}function Fe(e){var n=j.fullscreen;if(n){if(!e||e.type!==O.eventType)return O.isFullScreen(st.elements.container)?O.cancelFullScreen():(Pe(),O.requestFullScreen(st.elements.container)),void(st.fullscreen.active=O.isFullScreen(st.elements.container));st.fullscreen.active=O.isFullScreen(st.elements.container)}else st.fullscreen.active=!st.fullscreen.active,t.body.style.overflow=st.fullscreen.active?"hidden":"";f(st.elements.container,A.classes.fullscreen.active,st.fullscreen.active),W(st.fullscreen.active),st.elements.buttons&&st.elements.buttons.fullscreen&&C(st.elements.buttons.fullscreen,st.fullscreen.active),M(st.elements.container,st.fullscreen.active?"enterfullscreen":"exitfullscreen",!0),!st.fullscreen.active&&n&&Ne()}function qe(e){if(L.boolean(e)||(e=!st.elements.media.muted),C(st.elements.buttons.mute,e),st.elements.media.muted=e,0===st.elements.media.volume&&Le(A.volume),s(A.types.embed,st.type)){switch(st.type){case"youtube":st.embed[st.elements.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":st.embed.setVolume(st.elements.media.muted?0:parseFloat(A.volume/10))}M(st.elements.media,"volumechange")}}function Le(e){var t=10,n=0;if(L.event(e)&&(e=e.target.value),L.undefined(e)&&(e=st.storage.volume),(null===e||isNaN(e))&&(e=A.volume),e>t&&(e=t),e0&&qe()}function Oe(e){var t=st.elements.media.muted?0:10*st.elements.media.volume;L.number(e)||(e=1),Le(t+e)}function je(e){var t=st.elements.media.muted?0:10*st.elements.media.volume;L.number(e)||(e=1),Le(t-e)}function Me(){var e=st.elements.media.muted?0:10*st.elements.media.volume;st.supported.full&&(st.elements.inputs.volume&&(st.elements.inputs.volume.value=e),st.elements.display.volume&&(st.elements.display.volume.value=e)),pe({volume:e}),f(st.elements.container,A.classes.muted,0===e),st.supported.full&&st.elements.buttons.mute&&C(st.elements.buttons.mute,0===e)}function Re(e){var t="waiting"===e.type;clearTimeout(lt.loading),lt.loading=setTimeout(function(){f(st.elements.container,A.classes.loading,t),Ue(t)},t?250:0)}function Ve(e){if(st.supported.full){var t=st.elements.display.played,n=0,a=_e();if(e)switch(e.type){case"timeupdate":case"seeking":if(st.elements.controls.pressed)return;n=x(st.elements.media.currentTime,a),"timeupdate"===e.type&&st.elements.inputs.seek&&(st.elements.inputs.seek.value=n);break;case"playing":case"progress":t=st.elements.display.buffer,n=function(){var e=st.elements.media.buffered;return e&&e.length?x(e.end(0),a):L.number(e)?100*e:0}()}L.number(A.loop.start)&&L.number(A.loop.end)&&st.elements.media.currentTime>=A.loop.end&&Ae(A.loop.start),De(t,n)}}function De(e,t){if(st.supported.full){if(L.undefined(t)&&(t=0),L.undefined(e)){if(!L.htmlElement(st.elements.display.buffer))return;e=st.elements.display.buffer}if(L.htmlElement(e)){e.value=t;var n=e.getElementsByTagName("span")[0];L.htmlElement(n)&&(n.childNodes[0].nodeValue=t)}}}function We(e,t){if(t){isNaN(e)&&(e=0);var n=parseInt(e%60),a=parseInt(e/60%60),s=parseInt(e/60/60%60),l=parseInt(_e()/60/60%60)>0;n=("0"+n).slice(-2),a=("0"+a).slice(-2);var i=(l?s+":":"")+a+":"+n;return t.textContent=i,i}}function He(){if(st.supported.full){var e=_e()||0;!st.elements.display.duration&&A.displayDuration&&st.elements.media.paused&&We(e,st.elements.display.currentTime),st.elements.display.duration&&We(e,st.elements.display.duration),Xe()}}function Be(e){We(st.elements.media.currentTime,st.elements.display.currentTime),e&&"timeupdate"===e.type&&st.elements.media.seeking||Ve(e)}function Ye(e){L.number(e)||(e=0);var t=_e(),n=x(e,t);st.elements.progress&&st.elements.display.played&&(st.elements.display.played.value=n),st.elements.buttons&&st.elements.inputs.seek&&(st.elements.inputs.seek.value=n)}function Xe(e){var t=_e();if(A.tooltips.seek&&L.htmlElement(st.elements.inputs.seek)&&L.htmlElement(st.elements.display.seekTooltip)&&0!==t){var n=st.elements.inputs.seek.getBoundingClientRect(),a=0,l=A.classes.tooltip+"--visible";if(L.event(e))a=100/n.width*(e.pageX-n.left);else{if(!y(st.elements.display.seekTooltip,l))return;a=st.elements.display.seekTooltip.style.left.replace("%","")}a<0?a=0:a>100&&(a=100),We(t/100*a,st.elements.display.seekTooltip),st.elements.display.seekTooltip.style.left=a+"%",L.event(e)&&s(["mouseenter","mouseleave"],e.type)&&f(st.elements.display.seekTooltip,l,"mouseenter"===e.type)}}function Ue(t){if(A.hideControls&&"audio"!==st.type){var n=0,a=!1,l=t,i=y(st.elements.container,A.classes.loading); -if(L.boolean(t)||(t&&t.type?(a="enterfullscreen"===t.type,l=s(["mousemove","touchstart","mouseenter","focus"],t.type),s(["mousemove","touchmove"],t.type)&&(n=2e3),"focus"===t.type&&(n=3e3)):l=y(st.elements.container,A.classes.hideControls)),e.clearTimeout(lt.hover),l||st.elements.media.paused||i){if(f(st.elements.container,A.classes.hideControls,!1),st.elements.media.paused||i)return;st.browser.isTouch&&(n=3e3)}l&&st.elements.media.paused||(lt.hover=e.setTimeout(function(){(!st.elements.controls.pressed&&!st.elements.controls.hover||a)&&f(st.elements.container,A.classes.hideControls,!0)},n))}}function Je(e){if(!L.undefined(e))return void Ke(e);var t;switch(st.type){case"youtube":t=st.embed.getVideoUrl();break;case"vimeo":st.embed.getVideoUrl.then(function(e){t=e});break;case"soundcloud":st.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=st.elements.media.currentSrc}return t||""}function Ke(e){function t(){if(st.embed=null,i(st.elements.media),"video"===st.type&&st.elements.wrapper&&i(st.elements.wrapper),st.elements.container&&st.elements.container.removeAttribute("class"),"type"in e&&(st.type=e.type,"video"===st.type)){var t=e.sources[0];"type"in t&&s(A.types.embed,t.type)&&(st.type=t.type)}switch(st.supported=I(st.type),st.type){case"video":st.elements.media=c("video");break;case"audio":st.elements.media=c("audio");break;case"youtube":case"vimeo":case"soundcloud":st.elements.media=c("div"),st.embedId=e.sources[0].src}r(st.elements.container,st.elements.media),L.boolean(e.autoplay)&&(A.autoplay=e.autoplay),s(A.types.html5,st.type)&&(A.crossorigin&&st.elements.media.setAttribute("crossorigin",""),A.autoplay&&st.elements.media.setAttribute("autoplay",""),"poster"in e&&st.elements.media.setAttribute("poster",e.poster),A.loop.active&&st.elements.media.setAttribute("loop","")),f(st.elements.container,A.classes.fullscreen.active,st.fullscreen.active),f(st.elements.container,A.classes.captions.active,st.captions.enabled),oe(),s(A.types.html5,st.type)&&H("source",e.sources),me(),s(A.types.html5,st.type)&&("tracks"in e&&H("track",e.tracks),st.elements.media.load()),(s(A.types.html5,st.type)||s(A.types.embed,st.type)&&!st.supported.full)&&(tt(),nt()),A.title=e.title,ce()}return L.object(e)&&"sources"in e&&e.sources.length?(f(st.elements.container,A.classes.ready,!1),ke(),Ye(),De(),Ge(),void Ze(t,!1)):void ot("Invalid source format")}function Qe(e){"video"===st.type&&st.elements.media.setAttribute("poster",e)}function ze(){function n(){var e=we(),t=st.elements.buttons[e?"play":"pause"],n=st.elements.buttons[e?"pause":"play"];if(n=n&&n.length>1?n[n.length-1]:n[0]){var a=y(t,A.classes.tabFocus);setTimeout(function(){n.focus(),a&&(f(t,A.classes.tabFocus,!1),f(n,A.classes.tabFocus,!0))},100)}}function a(){var e=t.activeElement;return e=e&&e!==t.body?t.querySelector(":focus"):null}function l(e){return e.keyCode?e.keyCode:e.which}function r(e){for(var t in st.elements.buttons){var n=st.elements.buttons[t];if(L.nodeList(n))for(var a=0;a0)&&(t?(je(n),a=-1):(Oe(n),a=1)),(e.deltaY>0||e.deltaX<0)&&(t?(Oe(n),a=1):(je(n),a=-1)),(1===a&&st.elements.media.volume<1||a===-1&&st.elements.media.volume>0)&&e.preventDefault()}),j.fullscreen&&h(t,O.eventType,Fe)}function $e(){if(h(st.elements.media,"timeupdate seeking",Be),h(st.elements.media,"timeupdate",se),h(st.elements.media,"durationchange loadedmetadata",He),h(st.elements.media,"ended",function(){"video"===st.type&&A.showPosterOnEnd&&("video"===st.type&&ae(),Ae(),st.elements.media.load())}),h(st.elements.media,"progress playing",Ve),h(st.elements.media,"volumechange",Me),h(st.elements.media,"play pause ended",Ie),h(st.elements.media,"waiting canplay seeked",Re),A.clickToPlay&&"audio"!==st.type){var e=V("."+A.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",h(e,"click",function(){A.hideControls&&st.browser.isTouch&&!st.elements.media.paused||(st.elements.media.paused?he():st.elements.media.ended?(Ae(),he()):ke())})}A.disableContextMenu&&h(st.elements.media,"contextmenu",function(e){e.preventDefault()}),h(st.elements.media,A.events.concat(["keyup","keydown"]).join(" "),function(e){M(st.elements.container,e.type,!0)})}function Ge(){if(s(A.types.html5,st.type)){for(var e=st.elements.media.querySelectorAll("source"),t=0;t=0;n--){var a=n>0?t.cloneNode(!0):t,s=e[n],l=s.parentNode,i=s.nextSibling;return a.appendChild(s),i?l.insertBefore(a,i):l.appendChild(a),a}}function r(e){e&&e.parentNode.removeChild(e)}function o(e,t){e.insertBefore(t,e.firstChild)}function u(e,t){for(var n in t)e.setAttribute(n,t[n])}function c(e,t){if(!O.string(e)||O.empty(e))return{};var n={};return e.split(",").forEach(function(e){e=e.trim();var a=e.charAt(0);switch(a){case".":var s=e.replace(".","");O.object(t)&&O.string(t.class)&&(t.class+=" "+s),n.class=s;break;case"#":n.id=e.replace("#","");break;case"[":e=e.replace(/[\[\]]/g,"");var l=e.split("="),i=l[0],r=l.length>1?l[1].replace(/[\"\']/g,""):"";n[i]=r}}),n}function d(e,n,a){var s=t.createElement(e);return O.object(n)&&u(s,n),O.string(a)&&(s.textContent=a),s}function p(e,t,n,a){var s=d(e,n,a);o(t,s)}function m(e){for(var t=e.childNodes.length;t--;)e.removeChild(e.lastChild)}function f(e){return e.replace(".","")}function y(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var a=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=a+(n?" "+t:"")}}function b(e,t){return!!e&&(e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className))}function v(e,n){var a=Element.prototype,s=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||function(e){return[].indexOf.call(t.querySelectorAll(e),this)!==-1};return s.call(e,n)}function g(e,t,n,a,s){k(e,t,function(t){n&&n.apply(e,[t]),a.apply(e,[t])},s)}function h(e,t,n,a,s){var l=t.split(" ");if(O.boolean(s)||(s=!1),e instanceof NodeList)for(var i=0;i'),st.captions.textTracks=!1,st.elements.media.textTracks&&(st.captions.textTracks=!0);var e=[],t="";if(st.elements.media.childNodes.forEach(function(t){"track"===t.nodeName.toLowerCase()&&("captions"!==t.kind&&"subtitles"!==t.kind||e.push(t.getAttribute("src")))}),st.captions.exist=!0,0===e.length?(st.captions.exist=!1,rt("No caption track found")):Number(_.captions.selectedIndex)+1>e.length?(st.captions.exist=!1,rt("Caption index out of bound")):(t=e[_.captions.selectedIndex],rt("Caption track found; URI: "+t)),st.captions.exist){var n=st.elements.media.textTracks;if([].forEach.call(n,function(e){w(e,"cuechange",ee),e.mode="hidden"}),le(st),(st.browser.isIE&&st.browser.version>=10||st.browser.isFirefox&&st.browser.version>=31)&&(rt("Detected browser with known TextTrack issues - using manual fallback"),st.captions.textTracks=!1),st.captions.textTracks){rt("TextTracks supported");var a=n[_.captions.selectedIndex];"captions"!==a.kind&&"subtitles"!==a.kind||(k(a,"cuechange",ee),a.activeCues&&a.activeCues.length>0&&ee(a))}else if(rt("TextTracks not supported so rendering captions manually"),st.captions.current="",st.captions.captions=[],""!==t){var s=new XMLHttpRequest;s.onreadystatechange=function(){if(4===s.readyState)if(200===s.status){var e=s.responseText,t="\r\n";e.indexOf(t+t)===-1&&(t=e.indexOf("\r\r")!==-1?"\r":"\n");var n=e.split(t+t);st.captions.captions=n.map(function(e){var n=e.split(t),a=0;return n[a].indexOf(":")!==-1&&(a=1),[n[a],n[a+1]]}),st.captions.captions.shift(),rt("Successfully loaded the caption file via AJAX")}else ot(_.logPrefix+"There was a problem loading the caption file via AJAX")},s.open("get",t,!0),s.send()}}else y(st.elements.container,_.classes.captions.enabled)}}function ne(e){_.captions.selectedIndex=e||_.captions.selectedIndex,ae(),te()}function ae(e){var t=D(_.selectors.captions);if(O.htmlElement(t)){var n=d("span");m(t),O.undefined(e)&&(e=""),O.string(e)?n.innerHTML=e.trim():n.appendChild(e),t.appendChild(n)}}function se(e){function t(e,t){var n=[];n=e.split(" --> ");for(var a=0;ast.captions.captions.length-1){st.captions.count=st.captions.captions.length-1;break}st.elements.media.currentTime.toFixed(1)>=n(st.captions[st.subcount][0])&&st.elements.media.currentTime.toFixed(1)<=a(st.captions[st.subcount][0])?(st.captions.current=st.captions.captions[st.captions.count][1],ae(st.captions.current)):ae()}}function le(){if(st.elements.buttons.captions){y(st.elements.container,_.classes.captions.enabled,!0);var e=st.storage.captions;O.boolean(e)||(e=_.captions.defaultActive),e&&(y(st.elements.container,_.classes.captions.active,!0),x(st.elements.buttons.captions,!0))}}function ie(e){st.supported.full&&st.elements.buttons.captions&&(O.boolean(e)||(e=st.elements.container.className.indexOf(_.classes.captions.active)===-1),st.captions.enabled=e,x(st.elements.buttons.captions,st.captions.enabled),y(st.elements.container,_.classes.captions.active,st.captions.enabled),R(st.elements.container,st.captions.enabled?"captionsenabled":"captionsdisabled",!0),pe({captions:st.captions.enabled}))}function re(){if(_.loadSprite){var e=B();e.absolute?(rt("AJAX loading absolute SVG sprite"+(st.browser.isIE?" (due to IE)":"")),I(e.url,"sprite-plyr")):rt("Sprite will be used as external resource directly")}l(_.controls,"play-large")&&(st.elements.buttons.playLarge=J("play-large"),st.elements.container.appendChild(st.elements.buttons.playLarge)),st.id=Math.floor(1e4*Math.random());var n,a=$({id:st.id,seektime:_.seekTime,speed:Te(),quality:"HD",captions:"English",loop:"None"});if(O.string(_.selectors.controls.container)&&(n=t.querySelector(_.selectors.controls.container)),O.htmlElement(n)||(n=st.elements.container),n.appendChild(a),_.tooltips.controls)for(var s=V([_.selectors.controls.wrapper," ",_.selectors.labels," .",_.classes.hidden].join("")),i=s.length-1;i>=0;i--){var r=s[i];y(r,_.classes.hidden,!1),y(r,_.classes.tooltip,!0)}}function oe(){y(st.elements.container,_.selectors.container.replace(".",""),st.supported.full)}function ue(e){e&&l(_.types.html5,st.type)?st.elements.media.setAttribute("controls",""):st.elements.media.removeAttribute("controls")}function ce(e){var t=_.i18n.play;O.string(_.title)&&_.title.length&&(t+=", "+_.title,st.elements.container.setAttribute("aria-label",_.title)),st.supported.full&&(O.htmlElement(st.elements.buttons.play)&&st.elements.buttons.play.setAttribute("aria-label",t),O.htmlElement(st.elements.buttons.playLarge)&&st.elements.buttons.playLarge.setAttribute("aria-label",t)),O.htmlElement(e)&&e.setAttribute("title",_.i18n.frameTitle.replace("{title}",_.title))}function de(){var t=null;st.storage={},M.storage&&_.storage.enabled&&(e.localStorage.removeItem("plyr-volume"),t=e.localStorage.getItem(_.storage.key),t&&(/^\d+(\.\d+)?$/.test(t)?pe({volume:parseFloat(t)}):st.storage=JSON.parse(t)))}function pe(t){M.storage&&_.storage.enabled&&(S(st.storage,t),e.localStorage.setItem(_.storage.key,JSON.stringify(st.storage)))}function me(){if(!st.elements.media)return void ot("No media element found!");if(st.supported.full&&(y(st.elements.container,_.classes.type.replace("{0}",st.type),!0),l(_.types.embed,st.type)&&y(st.elements.container,_.classes.type.replace("{0}","video"),!0),y(st.elements.container,_.classes.pip.enabled,M.pip),y(st.elements.container,_.classes.stopped,_.autoplay),y(st.elements.container,_.classes.isIos,st.browser.isIos),y(st.elements.container,_.classes.isTouch,st.browser.isTouch),"video"===st.type)){var e=d("div");e.setAttribute("class",_.classes.videoWrapper),i(st.elements.media,e),st.elements.wrapper=e}l(_.types.embed,st.type)&&fe()}function fe(){var t,n=d("div"),s=st.type+"-"+Math.floor(1e4*Math.random());switch(st.type){case"youtube":t=E(st.embedId);break;case"vimeo":t=A(st.embedId);break;default:t=st.embedId}for(var l=V('[id^="'+st.type+'-"]'),i=l.length-1;i>=0;i--)r(l[i]);if(y(st.elements.media,_.classes.videoWrapper,!0),y(st.elements.media,_.classes.embedWrapper,!0),"youtube"===st.type)st.elements.media.appendChild(n),n.setAttribute("id",s),O.object(e.YT)?be(t,n):(a(_.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){be(t,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===st.type)if(st.supported.full?st.elements.media.appendChild(n):n=st.elements.media,n.setAttribute("id",s),O.object(e.Vimeo))ve(t,n);else{a(_.urls.vimeo.api);var o=e.setInterval(function(){O.object(e.Vimeo)&&(e.clearInterval(o),ve(t,n))},50)}else if("soundcloud"===st.type){var c=d("iframe");c.loaded=!1,k(c,"load",function(){c.loaded=!0}),u(c,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+t,id:s}),n.appendChild(c),st.elements.media.appendChild(n),e.SC||a(_.urls.soundcloud.api);var p=e.setInterval(function(){e.SC&&c.loaded&&(e.clearInterval(p),ge.call(c))},50)}}function ye(){st.supported.full&&(tt(),nt()),ce(D("iframe"))}function be(t,n){st.embed=new e.YT.Player(n.id,{videoId:t,playerVars:{autoplay:_.autoplay?1:0,controls:st.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:_.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onError:function(e){R(st.elements.container,"error",!0,{code:e.data,embed:e.target})},onPlaybackQualityChange:function(e){var t=e.target,n=t.getPlaybackQuality();console.warn(n)},onReady:function(t){var n=t.target;st.elements.media.play=function(){n.playVideo(),st.elements.media.paused=!1},st.elements.media.pause=function(){n.pauseVideo(),st.elements.media.paused=!0},st.elements.media.stop=function(){n.stopVideo(),st.elements.media.paused=!0},st.elements.media.duration=n.getDuration(),st.elements.media.paused=!0,st.elements.media.currentTime=0,st.elements.media.muted=n.isMuted();var a=n.getPlaybackRate(),s=n.getAvailablePlaybackRates();console.warn(a,s),_.title=n.getVideoData().title,st.supported.full&&st.elements.media.querySelector("iframe").setAttribute("tabindex","-1"),ye(),R(st.elements.media,"timeupdate"),R(st.elements.media,"durationchange"),e.clearInterval(lt.buffering),lt.buffering=e.setInterval(function(){st.elements.media.buffered=n.getVideoLoadedFraction(),(null===st.elements.media.lastBuffered||st.elements.media.lastBuffered=n)return;_.loop.end=n,_.loop.indicator.end=st.elements.display.played.value;break;case"all":_.loop.start=0,_.loop.end=st.elements.media.duration-2,_.loop.indicator.start=0,_.loop.indicator.end=100;break;case"toggle":_.loop.active?(_.loop.start=0,_.loop.end=null):(_.loop.start=0,_.loop.end=st.elements.media.duration-2);break;default:_.loop.start=0,_.loop.end=null}_.loop.active=O.number(_.loop.start)&&O.number(_.loop.end);var a=(We(_.loop.start,D('[data-plyr-loop="start"]')),null);O.number(_.loop.end)&&(a=We(_.loop.end,t.querySelector('[data-loop__value="loopout"]'))),_.loop.active}function xe(e){if(O.undefined(e)&&(e=st.storage.speed||_.defaultSpeed),!O.array(_.speeds))return void ot("Invalid speeds format");if(!O.number(e)){var t=_.speeds.indexOf(_.currentSpeed);if(t!==-1){var n=t+1;n>=_.speeds.length&&(n=0),e=_.speeds[n]}else e=_.defaultSpeed}_.currentSpeed=e,st.elements.media.playbackRate=e,pe({speed:e})}function Te(){return _.currentSpeed.toFixed(1).toString().replace(".0","")+"×"}function Se(e){O.number(e)||(e=_.seekTime),Ae(st.elements.media.currentTime-e)}function Ee(e){O.number(e)||(e=_.seekTime),Ae(st.elements.media.currentTime+e)}function Ae(e){var t=0,n=st.elements.media.paused,a=_e();O.number(e)?t=e:O.event(e)&&l(["input","change"],e.type)&&(t=e.target.value/e.target.max*a),t<0?t=0:t>a&&(t=a),Ye(t);try{st.elements.media.currentTime=t.toFixed(4)}catch(e){}if(l(_.types.embed,st.type)){switch(st.type){case"youtube":st.embed.seekTo(t);break;case"vimeo":st.embed.setCurrentTime(t.toFixed(0));break;case"soundcloud":st.embed.seekTo(1e3*t)}n&&ke(),R(st.elements.media,"timeupdate"),st.elements.media.seeking=!0,R(st.elements.media,"seeking")}rt("Seeking to "+st.elements.media.currentTime+" seconds"),se(t)}function _e(){var e=parseInt(_.duration),t=0;return null===st.elements.media.duration||isNaN(st.elements.media.duration)||(t=st.elements.media.duration),isNaN(e)?t:e}function Ie(){y(st.elements.container,_.classes.playing,!st.elements.media.paused),y(st.elements.container,_.classes.stopped,st.elements.media.paused),Ue(st.elements.media.paused)}function Pe(){q={x:e.pageXOffset||0,y:e.pageYOffset||0}}function Ne(){e.scrollTo(q.x,q.y)}function Fe(e){var n=M.fullscreen;if(n){if(!e||e.type!==j.eventType)return j.isFullScreen(st.elements.container)?j.cancelFullScreen():(Pe(),j.requestFullScreen(st.elements.container)),void(st.fullscreen.active=j.isFullScreen(st.elements.container));st.fullscreen.active=j.isFullScreen(st.elements.container)}else st.fullscreen.active=!st.fullscreen.active,t.body.style.overflow=st.fullscreen.active?"hidden":"";y(st.elements.container,_.classes.fullscreen.active,st.fullscreen.active),W(st.fullscreen.active),st.elements.buttons&&st.elements.buttons.fullscreen&&x(st.elements.buttons.fullscreen,st.fullscreen.active),R(st.elements.container,st.fullscreen.active?"enterfullscreen":"exitfullscreen",!0),!st.fullscreen.active&&n&&Ne()}function qe(e){if(O.boolean(e)||(e=!st.elements.media.muted),x(st.elements.buttons.mute,e),st.elements.media.muted=e,0===st.elements.media.volume&&Le(_.volume),l(_.types.embed,st.type)){switch(st.type){case"youtube":st.embed[st.elements.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":st.embed.setVolume(st.elements.media.muted?0:parseFloat(_.volume/10))}R(st.elements.media,"volumechange")}}function Le(e){var t=10,n=0;if(O.event(e)&&(e=e.target.value),O.undefined(e)&&(e=st.storage.volume),(null===e||isNaN(e))&&(e=_.volume),e>t&&(e=t),e0&&qe()}function Oe(e){var t=st.elements.media.muted?0:10*st.elements.media.volume;O.number(e)||(e=1),Le(t+e)}function je(e){var t=st.elements.media.muted?0:10*st.elements.media.volume;O.number(e)||(e=1),Le(t-e)}function Me(){var e=st.elements.media.muted?0:10*st.elements.media.volume;st.supported.full&&(st.elements.inputs.volume&&(st.elements.inputs.volume.value=e),st.elements.display.volume&&(st.elements.display.volume.value=e)),pe({volume:e}),y(st.elements.container,_.classes.muted,0===e),st.supported.full&&st.elements.buttons.mute&&x(st.elements.buttons.mute,0===e)}function Re(e){var t="waiting"===e.type;clearTimeout(lt.loading),lt.loading=setTimeout(function(){y(st.elements.container,_.classes.loading,t),Ue(t)},t?250:0)}function Ve(e){if(st.supported.full){var t=st.elements.display.played,n=0,a=_e();if(e)switch(e.type){case"timeupdate":case"seeking":if(st.elements.controls.pressed)return;n=T(st.elements.media.currentTime,a),"timeupdate"===e.type&&st.elements.inputs.seek&&(st.elements.inputs.seek.value=n);break;case"playing":case"progress":t=st.elements.display.buffer,n=function(){var e=st.elements.media.buffered;return e&&e.length?T(e.end(0),a):O.number(e)?100*e:0}()}O.number(_.loop.start)&&O.number(_.loop.end)&&st.elements.media.currentTime>=_.loop.end&&Ae(_.loop.start),De(t,n)}}function De(e,t){if(st.supported.full){if(O.undefined(t)&&(t=0),O.undefined(e)){if(!O.htmlElement(st.elements.display.buffer))return;e=st.elements.display.buffer}if(O.htmlElement(e)){e.value=t;var n=e.getElementsByTagName("span")[0];O.htmlElement(n)&&(n.childNodes[0].nodeValue=t)}}}function We(e,t){if(t){isNaN(e)&&(e=0);var n=parseInt(e%60),a=parseInt(e/60%60),s=parseInt(e/60/60%60),l=parseInt(_e()/60/60%60)>0;n=("0"+n).slice(-2),a=("0"+a).slice(-2);var i=(l?s+":":"")+a+":"+n;return t.textContent=i,i}}function He(){if(st.supported.full){var e=_e()||0;!st.elements.display.duration&&_.displayDuration&&st.elements.media.paused&&We(e,st.elements.display.currentTime),st.elements.display.duration&&We(e,st.elements.display.duration),Xe()}}function Be(e){We(st.elements.media.currentTime,st.elements.display.currentTime),e&&"timeupdate"===e.type&&st.elements.media.seeking||Ve(e)}function Ye(e){O.number(e)||(e=0);var t=_e(),n=T(e,t);st.elements.progress&&st.elements.display.played&&(st.elements.display.played.value=n),st.elements.buttons&&st.elements.inputs.seek&&(st.elements.inputs.seek.value=n)}function Xe(e){var t=_e();if(_.tooltips.seek&&O.htmlElement(st.elements.inputs.seek)&&O.htmlElement(st.elements.display.seekTooltip)&&0!==t){var n=st.elements.inputs.seek.getBoundingClientRect(),a=0,s=_.classes.tooltip+"--visible";if(O.event(e))a=100/n.width*(e.pageX-n.left);else{if(!b(st.elements.display.seekTooltip,s))return;a=st.elements.display.seekTooltip.style.left.replace("%","")}a<0?a=0:a>100&&(a=100),We(t/100*a,st.elements.display.seekTooltip),st.elements.display.seekTooltip.style.left=a+"%",O.event(e)&&l(["mouseenter","mouseleave"],e.type)&&y(st.elements.display.seekTooltip,s,"mouseenter"===e.type)}}function Ue(t){if(_.hideControls&&"audio"!==st.type){var n=0,a=!1,s=t,i=b(st.elements.container,_.classes.loading); +if(O.boolean(t)||(t&&t.type?(a="enterfullscreen"===t.type,s=l(["mousemove","touchstart","mouseenter","focus"],t.type),l(["mousemove","touchmove"],t.type)&&(n=2e3),"focus"===t.type&&(n=3e3)):s=b(st.elements.container,_.classes.hideControls)),e.clearTimeout(lt.hover),s||st.elements.media.paused||i){if(y(st.elements.container,_.classes.hideControls,!1),st.elements.media.paused||i)return;st.browser.isTouch&&(n=3e3)}s&&st.elements.media.paused||(lt.hover=e.setTimeout(function(){(!st.elements.controls.pressed&&!st.elements.controls.hover||a)&&y(st.elements.container,_.classes.hideControls,!0)},n))}}function Je(e){if(!O.undefined(e))return void Ke(e);var t;switch(st.type){case"youtube":t=st.embed.getVideoUrl();break;case"vimeo":st.embed.getVideoUrl.then(function(e){t=e});break;case"soundcloud":st.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=st.elements.media.currentSrc}return t||""}function Ke(e){function t(){if(st.embed=null,r(st.elements.media),"video"===st.type&&st.elements.wrapper&&r(st.elements.wrapper),st.elements.container&&st.elements.container.removeAttribute("class"),"type"in e&&(st.type=e.type,"video"===st.type)){var t=e.sources[0];"type"in t&&l(_.types.embed,t.type)&&(st.type=t.type)}switch(st.supported=P(st.type),st.type){case"video":st.elements.media=d("video");break;case"audio":st.elements.media=d("audio");break;case"youtube":case"vimeo":case"soundcloud":st.elements.media=d("div"),st.embedId=e.sources[0].src}o(st.elements.container,st.elements.media),O.boolean(e.autoplay)&&(_.autoplay=e.autoplay),l(_.types.html5,st.type)&&(_.crossorigin&&st.elements.media.setAttribute("crossorigin",""),_.autoplay&&st.elements.media.setAttribute("autoplay",""),"poster"in e&&st.elements.media.setAttribute("poster",e.poster),_.loop.active&&st.elements.media.setAttribute("loop","")),y(st.elements.container,_.classes.fullscreen.active,st.fullscreen.active),y(st.elements.container,_.classes.captions.active,st.captions.enabled),oe(),l(_.types.html5,st.type)&&H("source",e.sources),me(),l(_.types.html5,st.type)&&("tracks"in e&&H("track",e.tracks),st.elements.media.load()),(l(_.types.html5,st.type)||l(_.types.embed,st.type)&&!st.supported.full)&&(tt(),nt()),_.title=e.title,ce()}return O.object(e)&&"sources"in e&&e.sources.length?(y(st.elements.container,_.classes.ready,!1),ke(),Ye(),De(),Ge(),void Ze(t,!1)):void ot("Invalid source format")}function Qe(e){"video"===st.type&&st.elements.media.setAttribute("poster",e)}function ze(){function n(){var e=we(),t=st.elements.buttons[e?"play":"pause"],n=st.elements.buttons[e?"pause":"play"];if(n=n&&n.length>1?n[n.length-1]:n[0]){var a=b(t,_.classes.tabFocus);setTimeout(function(){n.focus(),a&&(y(t,_.classes.tabFocus,!1),y(n,_.classes.tabFocus,!0))},100)}}function a(){var e=t.activeElement;return e=e&&e!==t.body?t.querySelector(":focus"):null}function s(e){return e.keyCode?e.keyCode:e.which}function i(e){for(var t in st.elements.buttons){var n=st.elements.buttons[t];if(O.nodeList(n))for(var a=0;a0)&&(t?(je(n),a=-1):(Oe(n),a=1)),(e.deltaY>0||e.deltaX<0)&&(t?(Oe(n),a=1):(je(n),a=-1)),(1===a&&st.elements.media.volume<1||a===-1&&st.elements.media.volume>0)&&e.preventDefault()}),M.fullscreen&&k(t,j.eventType,Fe)}function $e(){if(k(st.elements.media,"timeupdate seeking",Be),k(st.elements.media,"timeupdate",se),k(st.elements.media,"durationchange loadedmetadata",He),k(st.elements.media,"ended",function(){"video"===st.type&&_.showPosterOnEnd&&("video"===st.type&&ae(),Ae(),st.elements.media.load())}),k(st.elements.media,"progress playing",Ve),k(st.elements.media,"volumechange",Me),k(st.elements.media,"play pause ended",Ie),k(st.elements.media,"waiting canplay seeked",Re),_.clickToPlay&&"audio"!==st.type){var e=D("."+_.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",k(e,"click",function(){_.hideControls&&st.browser.isTouch&&!st.elements.media.paused||(st.elements.media.paused?he():st.elements.media.ended?(Ae(),he()):ke())})}_.disableContextMenu&&k(st.elements.media,"contextmenu",function(e){e.preventDefault()}),k(st.elements.media,_.events.concat(["keyup","keydown"]).join(" "),function(e){R(st.elements.container,e.type,!0)})}function Ge(){if(l(_.types.html5,st.type)){for(var e=st.elements.media.querySelectorAll("source"),t=0;t function createRange(type, attributes) { - var id = 'plyr-' + type + (is.object(attributes) && 'id' in attributes ? '-' + attributes.id : ''); - // Seek label var label = createElement('label', { - for: id, + for: attributes.id, class: config.classes.hidden }, config.i18n[type]); // Seek input var input = createElement('input', extend(getAttributesFromSelector(config.selectors.inputs[type]), { - id: id, type: 'range', min: 0, max: 100, @@ -1278,7 +1275,7 @@ // Seek range slider var seek = createRange('seek', { - id: data.id + id: 'plyr-seek-' + data.id }); container.appendChild(seek.label); container.appendChild(seek.input); @@ -1329,13 +1326,14 @@ // Set the attributes var attributes = { - id: data.id, max: 10, value: config.volume }; // Create the volume range slider - var range = createRange('volume', attributes); + var range = createRange('volume', extend(attributes, { + id: 'plyr-volume-' + data.id + })); volume.appendChild(range.label); volume.appendChild(range.input); diff --git a/src/less/plyr.less b/src/less/plyr.less index f4a0a754..45b81d5c 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -495,6 +495,7 @@ // The actual menu container &__container { position: absolute; + z-index: 1; bottom: 100%; right: -5px; margin-bottom: 10px; @@ -528,7 +529,7 @@ ul { margin: 0; - padding: 5px; + padding: @plyr-control-padding; list-style: none; overflow: hidden; } @@ -561,10 +562,11 @@ &--back { position: relative; - padding-top: floor(@plyr-control-padding * .7); - padding-bottom: floor(@plyr-control-padding * .7); + @horizontal-padding: (@plyr-control-padding * 2); + width: ~"calc(100% - @{horizontal-padding})"; + margin: @plyr-control-padding; + margin-bottom: floor(@plyr-control-padding / 2); padding-left: ceil(@plyr-control-padding * 4); - margin-bottom: ceil(@plyr-control-padding * 1.3); font-weight: 500; &::after {