diff --git a/changelog.md b/changelog.md index 2813e66b..1b27cc5d 100644 --- a/changelog.md +++ b/changelog.md @@ -12,7 +12,9 @@ - Better handling of mission controls (fixes #132) - Retain classname on source change (fixes #120) - Increased thumb size on seek (partially fixes #130) -- Passing no argument to `source` api method, now returns current source +- Passing no argument to `source` api method, now returns current source (by @gurupras) +- Ability to add custom handlers to controls prior to Plyr bindings (by @gurupras) +- Keyboard navigation improvements (focus on seek, focus trap in fullscreen) (fixes #135) ## v1.3.5 - Fixed bug with API use on basic supported browsers diff --git a/dist/plyr.css b/dist/plyr.css index 03457207..9196495d 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}@-webkit-keyframes progress{to{background-position:40px 0}}@keyframes progress{to{background-position:40px 0}}.plyr{position:relative;max-width:100%;min-width:290px}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr__sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.plyr__video-wrapper{position:relative}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle}.plyr__video-embed{padding-bottom:56.25%;height:0;overflow:hidden;background:#000}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px 20px 30px;color:#fff;font-size:20px;text-align:center}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.9)}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--fullscreen-active .plyr__captions{font-size:32px}.plyr__controls{zoom:1;position:relative;padding:10px;background:#fff;line-height:1;text-align:center;box-shadow:0 1px 1px rgba(52,63,74,.2)}.plyr__controls:after,.plyr__controls:before{content:"";display:table}.plyr__controls:after{clear:both}.plyr__controls--right{display:block;margin:10px auto 0}@media (min-width:560px){.plyr__controls--left{float:left}.plyr__controls--right{float:right;margin-top:0}}.plyr__controls button{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;overflow:hidden;border:0;background:0 0;border-radius:3px;cursor:pointer;color:#6B7D86;transition:background .3s ease,color .3s ease,opacity .3s ease}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.plyr__controls button.tab-focus,.plyr__controls button:hover{background:#3498DB;color:#fff}.plyr__controls .plyr__time,.plyr__tooltip{color:#6B7D86;font-size:14px;font-weight:600}.plyr__controls button:focus{outline:0}.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 input[type=range].tab-focus{outline:rgba(52,63,74,.8) dotted 1px;outline-offset:3px}.plyr__progress--seek[type=range]:focus,.plyr__volume[type=range]:focus{outline:0}.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:40px;height:10px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.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:40px;height:10px;transform:translateX(-50%)}.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:40px;height:10px;transform:translateX(-50%)}.plyr__progress--seek[type=range]::-moz-focus-outer{border:0}.plyr--loading .plyr__progress--buffer{-webkit-animation:progress 1s linear infinite;animation:progress 1s linear infinite;background-size:40px 40px;background-repeat:repeat-x;background-color:rgba(86,93,100,.25);background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr__volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0;border:none}.plyr__volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease,-webkit-transform .2s ease;transition:background .3s ease,transform .2s ease;transition:background .3s ease,transform .2s ease,-webkit-transform .2s ease;cursor:ew-resize}.plyr__volume[type=range]::-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]::-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]: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--is-ios .plyr-volume,.plyr--is-ios [data-plyr=mute],.plyr--is-ios.plyr--audio .plyr__controls--right{display:none}.plyr--is-ios.plyr--audio .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--hide-controls.plyr--fullscreen-active.plyr--playing .plyr__controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease;transition:transform .3s .2s ease,-webkit-transform .3s .2s ease}.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__controls{-webkit-transform:translateY(0);transform:translateY(0)}.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing .plyr__captions{bottom:5px;transition:bottom .3s .2s ease}.plyr--fullscreen .plyr__captions,.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions,.plyr--fullscreen-active .plyr__captions{top:auto;bottom:90px}@media (min-width:560px){.plyr--fullscreen .plyr__captions,.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions,.plyr--fullscreen-active .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{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-align:center}@-webkit-keyframes progress{to{background-position:40px 0}}@keyframes progress{to{background-position:40px 0}}.plyr{position:relative;max-width:100%;min-width:290px}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr__sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.plyr__video-wrapper{position:relative}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle}.plyr__video-embed{padding-bottom:56.25%;height:0;overflow:hidden;background:#000}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px 20px 30px;color:#fff;font-size:20px}.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;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: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 button:focus{outline:0}.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 input[type=range].tab-focus:focus{outline:rgba(52,63,74,.8) dotted 1px;outline-offset:3px}.plyr__progress--seek[type=range]:focus,.plyr__volume[type=range]:focus{outline:0}.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:40px;height:10px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.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:40px;height:10px;transform:translateX(-50%)}.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:40px;height:10px;transform:translateX(-50%)}.plyr__progress--seek[type=range]::-moz-focus-outer{border:0}.plyr--loading .plyr__progress--buffer{-webkit-animation:progress 1s linear infinite;animation:progress 1s linear infinite;background-size:40px 40px;background-repeat:repeat-x;background-color:rgba(86,93,100,.25);background-image:linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent);color:transparent}.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr__volume[type=range]{display:inline-block;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0;border:none}.plyr__volume[type=range]::-webkit-slider-runnable-track{height:6px;background:#e6e6e6;border:0;border-radius:3px}.plyr__volume[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#6B7D86;border:0;border-radius:100%;transition:background .3s ease;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:100%;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:100%;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--is-ios .plyr-volume,.plyr--is-ios [data-plyr=mute],.plyr--is-ios.plyr--audio .plyr__controls--right{display:none}.plyr--is-ios.plyr--audio .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--hide-controls.plyr--fullscreen-active.plyr--playing .plyr__controls{-webkit-transform:translateY(100%) translateY(5px);transform:translateY(100%) translateY(5px);transition:-webkit-transform .3s .2s ease;transition:transform .3s .2s ease;transition:transform .3s .2s ease,-webkit-transform .3s .2s ease}.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__controls{-webkit-transform:translateY(0);transform:translateY(0)}.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing .plyr__captions{bottom:5px;transition:bottom .3s .2s ease}.plyr--fullscreen .plyr__captions,.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions,.plyr--fullscreen-active .plyr__captions{top:auto;bottom:90px}@media (min-width:560px){.plyr--fullscreen .plyr__captions,.plyr--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions,.plyr--fullscreen-active .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 d33a6762..e6b3a145 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1 +1 @@ -!function(e,t){"use strict";"function"==typeof define&&define.amd?define(null,function(){t(e,document)}):"object"==typeof module?module.exports=t(e,document):e.plyr=t(e,document)}(this,function(e,t){"use strict";function n(){var e=['
','
','','','',"0% "+I.i18n.played,"",'',"0% "+I.i18n.buffered,"","
",''];return i(I.controls,"restart")&&e.push('"),i(I.controls,"rewind")&&e.push('"),i(I.controls,"play")&&e.push('",'"),i(I.controls,"fast-forward")&&e.push('"),i(I.controls,"current-time")&&e.push('',''+I.i18n.currentTime+"",'00:00',""),i(I.controls,"duration")&&e.push('',''+I.i18n.duration+"",'00:00',""),e.push("",''),i(I.controls,"mute")&&e.push('"),i(I.controls,"volume")&&e.push('",''),i(I.controls,"captions")&&e.push('"),i(I.controls,"fullscreen")&&e.push('"),e.push("","
"),e.join("")}function r(t,n){I.debug&&e.console&&console[n?"error":"log"](t)}function a(){var e,n,r,a=navigator.userAgent,s=navigator.appName,o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(s="IE",o="11;"):-1!==(n=a.indexOf("MSIE"))?(s="IE",o=a.substring(n+5)):-1!==(n=a.indexOf("Chrome"))?(s="Chrome",o=a.substring(n+7)):-1!==(n=a.indexOf("Safari"))?(s="Safari",o=a.substring(n+7),-1!==(n=a.indexOf("Version"))&&(o=a.substring(n+8))):-1!==(n=a.indexOf("Firefox"))?(s="Firefox",o=a.substring(n+8)):(e=a.lastIndexOf(" ")+1)<(n=a.lastIndexOf("/"))&&(s=a.substring(e,n),o=a.substring(n+1),s.toLowerCase()==s.toUpperCase()&&(s=navigator.appName)),-1!==(r=o.indexOf(";"))&&(o=o.substring(0,r)),-1!==(r=o.indexOf(" "))&&(o=o.substring(0,r)),i=parseInt(""+o,10),isNaN(i)&&(o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10)),{name:s,version:i,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform),touch:"ontouchstart"in t.documentElement}}function s(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(!t.querySelectorAll('script[src="'+e+'"]').length){var n=t.createElement("script");n.src=e;var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(n,r)}}function i(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function l(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function u(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],s=a.parentNode,o=a.nextSibling;r.appendChild(a),o?s.insertBefore(r,o):s.appendChild(r)}}function c(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function p(e){e.parentNode.removeChild(e)}function d(e,t){e.insertBefore(t,e.firstChild)}function f(e,t){for(var n in t)e.setAttribute(n,"boolean"==typeof t[n]&&t[n]?"":t[n])}function m(e,n,r){var a=t.createElement(e);f(a,r),d(n,a)}function y(e){return e.replace(".","")}function b(e,t,n){e&&e.classList[n?"add":"remove"](t)}function v(e,t){return e?e.classList.contains(t):!1}function g(e,t,n){e&&T(e,t,n,!0)}function h(e,t,n){e&&T(e,t,n,!1)}function k(e,t,n,r){g(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])})}function T(e,t,n,r){var a=t.split(" ");if(e instanceof NodeList)for(var s=0;sr;r++){if(e.prefix=n[r],"undefined"!=typeof t[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof t.msExitFullscreen&&t.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=t.body),this.prefix){case"":return t.fullscreenElement==e;case"moz":return t.mozFullScreenElement==e;default:return t[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return"undefined"==typeof e&&(e=t.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?t.cancelFullScreen():t[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?t.fullscreenElement:t[this.prefix+"FullscreenElement"]}),e}function S(){var t={supported:function(){if(!("localStorage"in e))return!1;try{e.localStorage.setItem("___test","OK");var t=e.localStorage.getItem("___test");return e.localStorage.removeItem("___test"),"OK"===t}catch(n){return!1}return!1}()};return t}function E(F){function E(e){if(!xe.usingTextTracks&&"video"===xe.type&&xe.supported.full&&(xe.subcount=0,e="number"==typeof e?e:xe.media.currentTime,xe.captions[xe.subcount])){for(;O(xe.captions[xe.subcount][0])xe.captions.length-1){xe.subcount=xe.captions.length-1;break}if(xe.media.currentTime.toFixed(1)>=L(xe.captions[xe.subcount][0])&&xe.media.currentTime.toFixed(1)<=O(xe.captions[xe.subcount][0])){xe.currentCaption=xe.captions[xe.subcount][1];var t=xe.currentCaption.trim();xe.captionsContainer.innerHTML!=t&&(xe.captionsContainer.innerHTML="",xe.captionsContainer.innerHTML=t)}else xe.captionsContainer.innerHTML=""}}function M(){xe.buttons.captions&&(b(xe.container,I.classes.captions.enabled,!0),I.captions.defaultActive&&(b(xe.container,I.classes.captions.active,!0),x(xe.buttons.captions,!0)))}function L(e){var t=[];return t=e.split(" --> "),V(t[0])}function O(e){var t=[];return t=e.split(" --> "),V(t[1])}function V(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 q(e){return xe.container.querySelectorAll(e)}function H(e){return q(e)[0]}function R(){try{return e.self!==e.top}catch(t){return!0}}function j(){var e=I.html;r("Injecting custom controls."),e||(e=n()),e=l(e,"{seektime}",I.seekTime),e=l(e,"{id}",Math.floor(1e4*Math.random()));var a;if(null!==I.selectors.controls.container&&(a=I.selectors.controls.container,"string"==typeof selector&&(a=t.querySelector(a))),a instanceof HTMLElement||(a=xe.container),a.insertAdjacentHTML("beforeend",e),I.tooltips)for(var s=q(I.selectors.labels),o=s.length-1;o>=0;o--){var i=s[o];b(i,I.classes.hidden,!1),b(i,I.classes.tooltip,!0)}}function D(){try{return xe.controls=H(I.selectors.controls.wrapper),xe.buttons={},xe.buttons.seek=H(I.selectors.buttons.seek),xe.buttons.play=H(I.selectors.buttons.play),xe.buttons.pause=H(I.selectors.buttons.pause),xe.buttons.restart=H(I.selectors.buttons.restart),xe.buttons.rewind=H(I.selectors.buttons.rewind),xe.buttons.forward=H(I.selectors.buttons.forward),xe.buttons.fullscreen=H(I.selectors.buttons.fullscreen),xe.buttons.volume=H(I.selectors.buttons.volume),xe.buttons.mute=H(I.selectors.buttons.mute),xe.buttons.captions=H(I.selectors.buttons.captions),xe.checkboxes=q('[type="checkbox"]'),xe.progress={},xe.progress.container=H(I.selectors.progress.container),xe.progress.buffer={},xe.progress.buffer.bar=H(I.selectors.progress.buffer),xe.progress.buffer.text=xe.progress.buffer.bar&&xe.progress.buffer.bar.getElementsByTagName("span")[0],xe.progress.played={},xe.progress.played.bar=H(I.selectors.progress.played),xe.progress.played.text=xe.progress.played.bar&&xe.progress.played.bar.getElementsByTagName("span")[0],xe.volume=H(I.selectors.buttons.volume),xe.duration=H(I.selectors.duration),xe.currentTime=H(I.selectors.currentTime),xe.seekTime=q(I.selectors.seekTime),!0}catch(e){return r("It looks like there's a problem with your controls html. Bailing.",!0),xe.media.setAttribute("controls",""),!1}}function B(e){var t=I.i18n.play;"undefined"!=typeof I.title&&I.title.length&&(t+=", "+I.title),xe.buttons.play&&xe.buttons.play.setAttribute("aria-label",t),e instanceof HTMLElement&&e.setAttribute("title",I.i18n.frameTitle.replace("{title}",I.title))}function Y(){if(!xe.media)return r("No audio or video element found!",!0),!1;if(xe.supported.full&&(xe.media.removeAttribute("controls"),b(xe.container,I.classes.type.replace("{0}",xe.type),!0),b(xe.container,I.classes.stopped,I.autoplay),b(xe.container,I.classes.isIos,xe.browser.ios),b(xe.container,I.classes.isTouch,xe.browser.touch),"video"===xe.type)){var e=t.createElement("div");e.setAttribute("class",I.classes.videoWrapper),u(xe.media,e),xe.videoContainer=e}i(I.types.embed,xe.type)?(W(),xe.embedId=null):I.autoplay&&K()}function W(){for(var n=t.createElement("div"),r=xe.embedId,a=xe.type+"-"+Math.floor(1e4*Math.random()),s=q('[id^="'+xe.type+'-"]'),i=s.length-1;i>=0;i--)p(s[i]);if(b(xe.media,I.classes.videoWrapper,!0),b(xe.media,I.classes.embedWrapper,!0),"youtube"===xe.type)xe.media.appendChild(n),n.setAttribute("id",a),"object"==typeof YT?$(r,n):(o(I.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){$(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===xe.type){var l=t.createElement("iframe");l.loaded=!1,g(l,"load",function(){l.loaded=!0}),f(l,{src:"https://player.vimeo.com/video/"+r+"?player_id="+a+"&api=1&badge=0&byline=0&portrait=0&title=0",id:a,webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:"",frameborder:0}),n.appendChild(l),xe.media.appendChild(n),"$f"in e||o(I.urls.vimeo.api);var u=e.setInterval(function(){"$f"in e&&l.loaded&&(e.clearInterval(u),z.call(l))},50)}}function U(){xe.supported.full&&(xe.container.querySelectorAll(I.selectors.controls.wrapper).length||Te()),B(H("iframe")),oe(),ie()}function $(t,n){"timer"in xe||(xe.timer={}),xe.embed=new YT.Player(n.id,{videoId:t,playerVars:{autoplay:I.autoplay?1:0,controls:xe.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:I.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onReady:function(t){var n=t.target;xe.media.play=function(){n.playVideo(),xe.media.paused=!1},xe.media.pause=function(){n.pauseVideo(),xe.media.paused=!0},xe.media.stop=function(){n.stopVideo(),xe.media.paused=!0},xe.media.duration=n.getDuration(),xe.media.paused=!I.autoplay,xe.media.currentTime=n.getCurrentTime(),xe.media.muted=n.isMuted(),w(xe.media,"timeupdate"),e.clearInterval(xe.timer.buffering),xe.timer.buffering=e.setInterval(function(){xe.media.buffered=n.getVideoLoadedFraction(),w(xe.media,"progress"),1===xe.media.buffered&&e.clearInterval(xe.timer.buffering)},200),U(),I.displayDuration&&de()},onStateChange:function(t){var n=t.target;switch(e.clearInterval(xe.timer.playing),t.data){case 0:xe.media.paused=!0,w(xe.media,"ended");break;case 1:xe.media.paused=!1,w(xe.media,"play"),xe.timer.playing=e.setInterval(function(){xe.media.currentTime=n.getCurrentTime(),w(xe.media,"timeupdate")},200);break;case 2:xe.media.paused=!0,w(xe.media,"pause")}}}})}function z(){xe.embed=$f(this),xe.embed.addEvent("ready",function(){xe.media.play=function(){xe.embed.api("play"),xe.media.paused=!1},xe.media.pause=function(){xe.embed.api("pause"),xe.media.paused=!0},xe.media.stop=function(){xe.embed.api("stop"),xe.media.paused=!0},xe.media.paused=!I.autoplay,xe.media.currentTime=0,U(),xe.embed.api("getCurrentTime",function(e){xe.media.currentTime=e,w(xe.media,"timeupdate")}),xe.embed.api("getDuration",function(e){xe.media.duration=e,xe.supported.full&&I.displayDuration&&de()}),xe.embed.addEvent("play",function(){xe.media.paused=!1,w(xe.media,"play")}),xe.embed.addEvent("pause",function(){xe.media.paused=!0,w(xe.media,"pause")}),xe.embed.addEvent("playProgress",function(e){xe.media.currentTime=e.seconds,w(xe.media,"timeupdate")}),xe.embed.addEvent("loadProgress",function(e){xe.media.buffered=e.percent,w(xe.media,"progress")}),xe.embed.addEvent("finish",function(){xe.media.paused=!0,w(xe.media,"ended")})})}function X(){if("video"===xe.type){H(I.selectors.captions)||xe.videoContainer.insertAdjacentHTML("afterbegin",'
'),xe.captionsContainer=H(I.selectors.captions).querySelector("span"),xe.usingTextTracks=!1,xe.media.textTracks&&(xe.usingTextTracks=!0);for(var e,t="",n=xe.media.childNodes,a=0;a=10||"Firefox"===xe.browser.name&&xe.browser.version>=31||"Chrome"===xe.browser.name&&xe.browser.version>=43||"Safari"===xe.browser.name&&xe.browser.version>=7)&&(r("Detected unsupported browser for HTML5 captions. Using fallback."),xe.usingTextTracks=!1),xe.usingTextTracks){r("TextTracks supported.");for(var i=0;i=7){r("Safari 7+ detected; removing track from DOM."),s=xe.media.getElementsByTagName("track");for(var c=0;ct?t=0:t>xe.media.duration&&(t=xe.media.duration);try{xe.media.currentTime=t.toFixed(1)}catch(a){}"embed"in xe&&("youtube"===xe.type&&xe.embed.seekTo(t),"vimeo"===xe.type&&xe.embed.api("seekTo",t),w(xe.media,"timeupdate"),n&&G()),r("Seeking to "+xe.media.currentTime+" seconds"),E(t)}function ne(){b(xe.container,I.classes.playing,!xe.media.paused),b(xe.container,I.classes.stopped,xe.media.paused)}function re(n){function r(){b(xe.container,I.classes.hover,!0),e.clearTimeout(o),i||(o=e.setTimeout(function(){b(xe.container,I.classes.hover,!1)},2e3))}function a(e){i="mouseenter"===e.type}var s=A.supportsFullScreen;n&&n.type===A.fullScreenEventName?xe.isFullscreen=A.isFullScreen(xe.container):s?(A.isFullScreen(xe.container)?A.cancelFullScreen():A.requestFullScreen(xe.container),xe.isFullscreen=A.isFullScreen(xe.container)):(xe.isFullscreen=!xe.isFullscreen,xe.isFullscreen?(g(t,"keyup",ae),t.body.style.overflow="hidden"):(h(t,"keyup",ae),t.body.style.overflow="")),b(xe.container,I.classes.fullscreen.active,xe.isFullscreen),x(xe.buttons.fullscreen,xe.isFullscreen);var o,i=!1;I.fullscreen.hideControls&&(b(xe.controls,I.classes.hover,!1),T(xe.controls,"mouseenter mouseleave",a,xe.isFullscreen),T(xe.container,"mousemove",r,xe.isFullscreen))}function ae(e){27===(e.which||e.charCode||e.keyCode)&&xe.isFullscreen&&re()}function se(e){"boolean"!=typeof e&&(e=!xe.media.muted),x(xe.buttons.mute,e),xe.media.muted=e,"youtube"===xe.type&&(xe.embed[xe.media.muted?"mute":"unMute"](),w(xe.media,"volumechange")),"vimeo"===xe.type&&(xe.media.muted?xe.embed.api("setVolume",0):xe.embed.api("setVolume",parseFloat(I.volume/10)),w(xe.media,"volumechange"))}function oe(t){"undefined"==typeof t&&(t=I.storage.enabled&&S().supported?e.localStorage[I.storage.key]||I.volume:I.volume),t>10&&(t=10),0>t&&(t=0),xe.media.volume=parseFloat(t/10),I.volume=t,"youtube"===xe.type&&xe.embed.setVolume(100*xe.media.volume),"vimeo"===xe.type&&xe.embed.api("setVolume",xe.media.volume),"embed"in xe&&w(xe.media,"volumechange"),xe.media.muted&&t>0&&se()}function ie(){var t=xe.media.muted?0:10*xe.media.volume;xe.supported.full&&xe.volume&&(xe.volume.value=t),I.storage.enabled&&S().supported&&e.localStorage.setItem(I.storage.key,t),b(xe.container,I.classes.muted,0===t),xe.supported.full&&xe.buttons.mute&&x(xe.buttons.mute,0===t)}function le(e){xe.supported.full&&xe.buttons.captions&&("boolean"!=typeof e&&(e=-1===xe.container.className.indexOf(I.classes.captions.active)),xe.captionsEnabled=e,x(xe.buttons.captions,xe.captionsEnabled),b(xe.container,I.classes.captions.active,xe.captionsEnabled))}function ue(e){var t="waiting"===e.type;clearTimeout(xe.loadingTimer),xe.loadingTimer=setTimeout(function(){b(xe.container,I.classes.loading,t)},t?250:0)}function ce(e){var t=xe.progress.played.bar,n=xe.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=_(xe.media.currentTime,xe.media.duration),"timeupdate"==e.type&&xe.buttons.seek&&(xe.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=xe.progress.buffer.bar,n=xe.progress.buffer.text,r=function(){var e=xe.media.buffered;return e&&e.length?_(e.end(0),xe.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function pe(e,t){if(t){isNaN(e)&&(e=0),xe.secs=parseInt(e%60),xe.mins=parseInt(e/60%60),xe.hours=parseInt(e/60/60%60);var n=parseInt(xe.media.duration/60/60%60)>0;xe.secs=("0"+xe.secs).slice(-2),xe.mins=("0"+xe.mins).slice(-2),t.innerHTML=(n?xe.hours+":":"")+xe.mins+":"+xe.secs}}function de(){var e=xe.media.duration||0;!xe.duration&&I.displayDuration&&xe.media.paused&&pe(e,xe.currentTime),xe.duration&&pe(e,xe.duration)}function fe(e){pe(xe.media.currentTime,xe.currentTime),ce(e)}function me(e,t){if("string"==typeof t)m(e,xe.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)m(e,xe.media,t[n])}function ye(e){if("undefined"!=typeof e)return void be(e);var t;switch(xe.type){case"youtube":t=xe.embed.getVideoUrl();break;case"vimeo":xe.embed.api("getVideoUrl",function(e){t=e});break;default:t=xe.media.currentSrc}return t||""}function be(n){if(!("undefined"!=typeof n&&"sources"in n&&n.sources.length))return void r("Invalid source format",!0);if(G(),"youtube"===xe.type?(xe.embed.destroy(),e.clearInterval(xe.timer.buffering),e.clearInterval(xe.timer.playing)):"video"===xe.type&&p(xe.videoContainer),p(xe.media),"type"in n&&(xe.type=n.type,"video"===xe.type)){var a=n.sources[0];"type"in a&&i(I.types.embed,a.type)&&(xe.type=a.type)}switch(xe.type){case"video":xe.media=t.createElement("video");break;case"audio":xe.media=t.createElement("audio");break;case"youtube":case"vimeo":xe.media=t.createElement("div"),xe.embedId=n.sources[0].src}d(xe.container,xe.media),i(I.types.html5,xe.type)&&(I.crossorigin&&xe.media.setAttribute("crossorigin",""),I.autoplay&&xe.media.setAttribute("autoplay",""),"poster"in n&&xe.media.setAttribute("poster",n.poster),I.loop&&xe.media.setAttribute("loop","")),xe.container.className=xe.originalClassName,b(xe.container,I.classes.fullscreen.active,xe.isFullscreen),b(xe.container,I.classes.captions.active,xe.captionsEnabled),I.autoplay=n.autoplay||I.autoplay,i(I.types.html5,xe.type)&&me("source",n.sources),Y(),we(),i(I.types.html5,xe.type)&&(oe(),ie(),xe.supported.full&&(fe(),ne()),"tracks"in n&&(me("track",n.tracks),X()),xe.media.load(),I.autoplay&&K()),"title"in n&&(I.title=n.title,B())}function ve(e){"video"===xe.type&&xe.media.setAttribute("poster",e)}function ge(){function n(e){e?K():G();var t=xe.buttons[e?"play":"pause"],n=xe.buttons[e?"pause":"play"];if(n){var r=v(t,I.classes.tabFocus);setTimeout(function(){n.focus(),r&&(b(t,I.classes.tabFocus,!1),b(n,I.classes.tabFocus,!0))},100)}}function r(){var e=t.activeElement;e&&e!=t.body?t.querySelector&&(e=t.querySelector(":focus")):e=null;for(var n in xe.buttons){var r=xe.buttons[n];b(r,I.classes.tabFocus,r===e)}}var a="IE"==xe.browser.name?"change":"input";g(e,"keyup",function(e){var t=e.keyCode?e.keyCode:e.which;9==t&&r()}),g(t.body,"click",function(){b(H("."+I.classes.tabFocus),I.classes.tabFocus,!1)});for(var s in xe.buttons){var o=xe.buttons[s];g(o,"blur",function(){b(o,"tab-focus",!1)})}k(xe.buttons.play,"click",I.handlers.play,function(){n(!0)}),k(xe.buttons.pause,"click",I.handlers.pause,function(){n()}),k(xe.buttons.restart,"click",I.handlers.restart,te),k(xe.buttons.rewind,"click",I.handlers.rewind,Z),k(xe.buttons.forward,"click",I.handlers.forward,ee),k(xe.buttons.seek,a,I.handlers.seek,te),k(xe.volume,a,I.handlers.volume,function(){oe(xe.volume.value)}),k(xe.buttons.mute,"click",I.handlers.mute,se),k(xe.buttons.fullscreen,"click",I.handlers.fullscreen,re),A.supportsFullScreen&&g(t,A.fullScreenEventName,re),g(xe.media,"timeupdate seeking",fe),g(xe.media,"timeupdate",E),g(xe.media,"loadedmetadata",de),g(xe.buttons.captions,"click",le),g(xe.media,"ended",function(){"video"===xe.type&&(xe.captionsContainer.innerHTML=""),ne()}),g(xe.media,"progress playing",ce),g(xe.media,"volumechange",ie),g(xe.media,"play pause",ne),g(xe.media,"waiting canplay seeked",ue),"video"===xe.type&&I.click&&g(xe.videoContainer,"click",function(){xe.media.paused?K():xe.media.ended?(te(),K()):G()})}function he(){if(!xe.init)return null;if(xe.container.setAttribute("class",y(I.selectors.container)),xe.init=!1,p(H(I.selectors.controls.wrapper)),"youtube"===xe.type)return void xe.embed.destroy();"video"===xe.type&&(p(H(I.selectors.captions)),c(xe.videoContainer)),xe.media.setAttribute("controls","");var e=xe.media.cloneNode(!0);xe.media.parentNode.replaceChild(e,xe.media)}function ke(){if(xe.init)return null;A=C(),xe.browser=a(),xe.media=xe.container.querySelectorAll("audio, video, div")[0],b(xe.container,P.selectors.container.replace(".",""),!0),xe.originalClassName=xe.container.className;var e=xe.media.tagName.toLowerCase();if("div"===e?(xe.type=xe.media.getAttribute("data-type"),xe.embedId=xe.media.getAttribute("data-video-id"),xe.media.removeAttribute("data-type"),xe.media.removeAttribute("data-video-id")):(xe.type=e,I.crossorigin=null!==xe.media.getAttribute("crossorigin"),I.autoplay=I.autoplay||null!==xe.media.getAttribute("autoplay"),I.loop=I.loop||null!==xe.media.getAttribute("loop")),xe.supported=N.supported(xe.type),!xe.supported.basic)return!1;if(r(xe.browser.name+" "+xe.browser.version),Y(),"video"==xe.type||"audio"==xe.type){if(!xe.supported.full)return void(xe.init=!0);Te(),I.displayDuration&&de(),B()}xe.init=!0}function Te(){return j(),D()?(X(),we(),oe(),void ie()):!1}function we(){J(),ge()}var xe=this;return xe.container=F,ke(),xe.init?{media:xe.media,play:K,pause:G,restart:te,rewind:Z,forward:ee,seek:te,source:ye,poster:ve,setVolume:oe,togglePlay:Q,toggleMute:se,toggleCaptions:le,toggleFullscreen:re,isFullscreen:function(){return xe.isFullscreen||!1},support:function(e){return s(xe,e)},destroy:he,restore:ke}:{}}var A,I,N={},P={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,iconPrefix:"icon",selectors:{container:".plyr",controls:{container:null,wrapper:".plyr__controls"},labels:"[data-plyr] .sr-only, label .sr-only",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',volume:'[data-plyr="volume"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},progress:{container:".plyr__progress",buffer:".plyr__progress--buffer",played:".plyr__progress--played"},captions:".plyr__captions",currentTime:".plyr__time--current",duration:".plyr__time--duration"},classes:{videoWrapper:"plyr__video-wrapper",embedWrapper:"plyr__video-embed",type:"plyr--{0}",stopped:"plyr--stopped",playing:"plyr--playing",muted:"plyr--muted",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",hidden:"plyr__sr-only",isIos:"plyr--is-ios",isTouch:"plyr--is-touch",captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",active:"plyr--fullscreen-active",hideControls:"plyr--fullscreen--hide-controls"},tabFocus:"tab-focus"},handlers:{seek:null,play:null,pause:null,restart:null,rewind:null,forward:null,mute:null,volume:null,captions:null,fullscreen:null},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",frameTitle:"Player for {title}"},types:{embed:["youtube","vimeo"],html5:["video","audio"]},urls:{vimeo:{api:"http://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js"},youtube:{api:"https://www.youtube.com/iframe_api"}}};return N.supported=function(e){var n,r,s=a(),o="IE"===s.name&&s.version<=9,i=/iPhone|iPod/i.test(navigator.userAgent),l=!!t.createElement("audio").canPlayType,u=!!t.createElement("video").canPlayType;switch(e){case"video":n=u,r=n&&!o&&!i;break;case"audio":n=l,r=n&&!o;break;case"vimeo":case"youtube":n=!0,r=!o&&!i;break;default:n=l&&u,r=n&&!o}return{basic:n,full:r}},N.setup=function(e,n){var r=[];if("string"==typeof e?e=t.querySelectorAll(e):e instanceof HTMLElement?e=[e]:e instanceof NodeList||"string"==typeof e||("undefined"==typeof n&&"object"==typeof e&&(n=e),e=t.querySelectorAll(P.selectors.container)),I=F(P,n),!I.enabled||!N.supported().basic||!e.length)return!1;for(var a=e.length-1;a>=0;a--){var s=e[a];if("undefined"==typeof s.plyr){var o=new E(s);s.plyr=Object.keys(o).length?o:!1,"function"==typeof I.onSetup&&I.onSetup.apply(s.plyr)}r.push(s.plyr)}return r},N}); \ No newline at end of file +!function(e,t){"use strict";"function"==typeof define&&define.amd?define(null,function(){t(e,document)}):"object"==typeof module?module.exports=t(e,document):e.plyr=t(e,document)}(this,function(e,t){"use strict";function n(){var e=['
','
','','','',"0% "+I.i18n.played,"",'',"0% "+I.i18n.buffered,"","
",''];return i(I.controls,"restart")&&e.push('"),i(I.controls,"rewind")&&e.push('"),i(I.controls,"play")&&e.push('",'"),i(I.controls,"fast-forward")&&e.push('"),i(I.controls,"current-time")&&e.push('',''+I.i18n.currentTime+"",'00:00',""),i(I.controls,"duration")&&e.push('',''+I.i18n.duration+"",'00:00',""),e.push("",''),i(I.controls,"mute")&&e.push('"),i(I.controls,"volume")&&e.push('",''),i(I.controls,"captions")&&e.push('"),i(I.controls,"fullscreen")&&e.push('"),e.push("","
"),e.join("")}function r(t,n){I.debug&&e.console&&console[n?"error":"log"](t)}function a(){var e,n,r,a=navigator.userAgent,s=navigator.appName,o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(s="IE",o="11;"):-1!==(n=a.indexOf("MSIE"))?(s="IE",o=a.substring(n+5)):-1!==(n=a.indexOf("Chrome"))?(s="Chrome",o=a.substring(n+7)):-1!==(n=a.indexOf("Safari"))?(s="Safari",o=a.substring(n+7),-1!==(n=a.indexOf("Version"))&&(o=a.substring(n+8))):-1!==(n=a.indexOf("Firefox"))?(s="Firefox",o=a.substring(n+8)):(e=a.lastIndexOf(" ")+1)<(n=a.lastIndexOf("/"))&&(s=a.substring(e,n),o=a.substring(n+1),s.toLowerCase()==s.toUpperCase()&&(s=navigator.appName)),-1!==(r=o.indexOf(";"))&&(o=o.substring(0,r)),-1!==(r=o.indexOf(" "))&&(o=o.substring(0,r)),i=parseInt(""+o,10),isNaN(i)&&(o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10)),{name:s,version:i,ios:/(iPad|iPhone|iPod)/g.test(navigator.platform),touch:"ontouchstart"in t.documentElement}}function s(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(!t.querySelectorAll('script[src="'+e+'"]').length){var n=t.createElement("script");n.src=e;var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(n,r)}}function i(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function l(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function u(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],s=a.parentNode,o=a.nextSibling;r.appendChild(a),o?s.insertBefore(r,o):s.appendChild(r)}}function c(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function p(e){e.parentNode.removeChild(e)}function d(e,t){e.insertBefore(t,e.firstChild)}function f(e,t){for(var n in t)e.setAttribute(n,"boolean"==typeof t[n]&&t[n]?"":t[n])}function m(e,n,r){var a=t.createElement(e);f(a,r),d(n,a)}function y(e){return e.replace(".","")}function b(e,t,n){e&&e.classList[n?"add":"remove"](t)}function v(e,t){return e?e.classList.contains(t):!1}function g(e,t,n){e&&T(e,t,n,!0)}function h(e,t,n){e&&T(e,t,n,!1)}function k(e,t,n,r){g(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])})}function T(e,t,n,r){var a=t.split(" ");if(e instanceof NodeList)for(var s=0;sr;r++){if(e.prefix=n[r],"undefined"!=typeof t[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof t.msExitFullscreen&&t.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=t.body),this.prefix){case"":return t.fullscreenElement==e;case"moz":return t.mozFullScreenElement==e;default:return t[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return"undefined"==typeof e&&(e=t.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?t.cancelFullScreen():t[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?t.fullscreenElement:t[this.prefix+"FullscreenElement"]}),e}function S(){var t={supported:function(){if(!("localStorage"in e))return!1;try{e.localStorage.setItem("___test","OK");var t=e.localStorage.getItem("___test");return e.localStorage.removeItem("___test"),"OK"===t}catch(n){return!1}return!1}()};return t}function E(F){function E(e){if(!_e.usingTextTracks&&"video"===_e.type&&_e.supported.full&&(_e.subcount=0,e="number"==typeof e?e:_e.media.currentTime,_e.captions[_e.subcount])){for(;O(_e.captions[_e.subcount][0])_e.captions.length-1){_e.subcount=_e.captions.length-1;break}if(_e.media.currentTime.toFixed(1)>=L(_e.captions[_e.subcount][0])&&_e.media.currentTime.toFixed(1)<=O(_e.captions[_e.subcount][0])){_e.currentCaption=_e.captions[_e.subcount][1];var t=_e.currentCaption.trim();_e.captionsContainer.innerHTML!=t&&(_e.captionsContainer.innerHTML="",_e.captionsContainer.innerHTML=t)}else _e.captionsContainer.innerHTML=""}}function M(){_e.buttons.captions&&(b(_e.container,I.classes.captions.enabled,!0),I.captions.defaultActive&&(b(_e.container,I.classes.captions.active,!0),x(_e.buttons.captions,!0)))}function L(e){var t=[];return t=e.split(" --> "),V(t[0])}function O(e){var t=[];return t=e.split(" --> "),V(t[1])}function V(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 q(e){return _e.container.querySelectorAll(e)}function H(e){return q(e)[0]}function R(){try{return e.self!==e.top}catch(t){return!0}}function D(){function e(e){9===e.which&&_e.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=q("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];g(_e.container,"keydown",e)}function j(e,t){if("string"==typeof t)m(e,_e.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)m(e,_e.media,t[n])}function B(){var e=I.html;r("Injecting custom controls."),e||(e=n()),e=l(e,"{seektime}",I.seekTime),e=l(e,"{id}",Math.floor(1e4*Math.random()));var a;if(null!==I.selectors.controls.container&&(a=I.selectors.controls.container,"string"==typeof selector&&(a=t.querySelector(a))),a instanceof HTMLElement||(a=_e.container),a.insertAdjacentHTML("beforeend",e),I.tooltips)for(var s=q(I.selectors.labels),o=s.length-1;o>=0;o--){var i=s[o];b(i,I.classes.hidden,!1),b(i,I.classes.tooltip,!0)}}function Y(){try{return _e.controls=H(I.selectors.controls.wrapper),_e.buttons={},_e.buttons.seek=H(I.selectors.buttons.seek),_e.buttons.play=H(I.selectors.buttons.play),_e.buttons.pause=H(I.selectors.buttons.pause),_e.buttons.restart=H(I.selectors.buttons.restart),_e.buttons.rewind=H(I.selectors.buttons.rewind),_e.buttons.forward=H(I.selectors.buttons.forward),_e.buttons.fullscreen=H(I.selectors.buttons.fullscreen),_e.buttons.volume=H(I.selectors.buttons.volume),_e.buttons.mute=H(I.selectors.buttons.mute),_e.buttons.captions=H(I.selectors.buttons.captions),_e.checkboxes=q('[type="checkbox"]'),_e.progress={},_e.progress.container=H(I.selectors.progress.container),_e.progress.buffer={},_e.progress.buffer.bar=H(I.selectors.progress.buffer),_e.progress.buffer.text=_e.progress.buffer.bar&&_e.progress.buffer.bar.getElementsByTagName("span")[0],_e.progress.played={},_e.progress.played.bar=H(I.selectors.progress.played),_e.progress.played.text=_e.progress.played.bar&&_e.progress.played.bar.getElementsByTagName("span")[0],_e.volume=H(I.selectors.buttons.volume),_e.duration=H(I.selectors.duration),_e.currentTime=H(I.selectors.currentTime),_e.seekTime=q(I.selectors.seekTime),!0}catch(e){return r("It looks like there's a problem with your controls html. Bailing.",!0),_e.media.setAttribute("controls",""),!1}}function W(e){var t=I.i18n.play;"undefined"!=typeof I.title&&I.title.length&&(t+=", "+I.title),_e.buttons.play&&_e.buttons.play.setAttribute("aria-label",t),e instanceof HTMLElement&&e.setAttribute("title",I.i18n.frameTitle.replace("{title}",I.title))}function U(){if(!_e.media)return r("No audio or video element found!",!0),!1;if(_e.supported.full&&(_e.media.removeAttribute("controls"),b(_e.container,I.classes.type.replace("{0}",_e.type),!0),b(_e.container,I.classes.stopped,I.autoplay),b(_e.container,I.classes.isIos,_e.browser.ios),b(_e.container,I.classes.isTouch,_e.browser.touch),"video"===_e.type)){var e=t.createElement("div");e.setAttribute("class",I.classes.videoWrapper),u(_e.media,e),_e.videoContainer=e}i(I.types.embed,_e.type)?($(),_e.embedId=null):I.autoplay&&Q()}function $(){for(var n=t.createElement("div"),r=_e.embedId,a=_e.type+"-"+Math.floor(1e4*Math.random()),s=q('[id^="'+_e.type+'-"]'),i=s.length-1;i>=0;i--)p(s[i]);if(b(_e.media,I.classes.videoWrapper,!0),b(_e.media,I.classes.embedWrapper,!0),"youtube"===_e.type)_e.media.appendChild(n),n.setAttribute("id",a),"object"==typeof YT?K(r,n):(o(I.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){K(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===_e.type){var l=t.createElement("iframe");l.loaded=!1,g(l,"load",function(){l.loaded=!0}),f(l,{src:"https://player.vimeo.com/video/"+r+"?player_id="+a+"&api=1&badge=0&byline=0&portrait=0&title=0",id:a,webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:"",frameborder:0}),n.appendChild(l),_e.media.appendChild(n),"$f"in e||o(I.urls.vimeo.api);var u=e.setInterval(function(){"$f"in e&&l.loaded&&(e.clearInterval(u),X.call(l))},50)}}function z(){_e.supported.full&&(_e.container.querySelectorAll(I.selectors.controls.wrapper).length||we()),W(H("iframe")),le(),ue()}function K(t,n){"timer"in _e||(_e.timer={}),_e.embed=new YT.Player(n.id,{videoId:t,playerVars:{autoplay:I.autoplay?1:0,controls:_e.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:I.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onReady:function(t){var n=t.target;_e.media.play=function(){n.playVideo(),_e.media.paused=!1},_e.media.pause=function(){n.pauseVideo(),_e.media.paused=!0},_e.media.stop=function(){n.stopVideo(),_e.media.paused=!0},_e.media.duration=n.getDuration(),_e.media.paused=!I.autoplay,_e.media.currentTime=n.getCurrentTime(),_e.media.muted=n.isMuted(),w(_e.media,"timeupdate"),e.clearInterval(_e.timer.buffering),_e.timer.buffering=e.setInterval(function(){_e.media.buffered=n.getVideoLoadedFraction(),w(_e.media,"progress"),1===_e.media.buffered&&e.clearInterval(_e.timer.buffering)},200),z(),I.displayDuration&&me()},onStateChange:function(t){var n=t.target;switch(e.clearInterval(_e.timer.playing),t.data){case 0:_e.media.paused=!0,w(_e.media,"ended");break;case 1:_e.media.paused=!1,w(_e.media,"play"),_e.timer.playing=e.setInterval(function(){_e.media.currentTime=n.getCurrentTime(),w(_e.media,"timeupdate")},200);break;case 2:_e.media.paused=!0,w(_e.media,"pause")}}}})}function X(){_e.embed=$f(this),_e.embed.addEvent("ready",function(){_e.media.play=function(){_e.embed.api("play"),_e.media.paused=!1},_e.media.pause=function(){_e.embed.api("pause"),_e.media.paused=!0},_e.media.stop=function(){_e.embed.api("stop"),_e.media.paused=!0},_e.media.paused=!I.autoplay,_e.media.currentTime=0,z(),_e.embed.api("getCurrentTime",function(e){_e.media.currentTime=e,w(_e.media,"timeupdate")}),_e.embed.api("getDuration",function(e){_e.media.duration=e,_e.supported.full&&I.displayDuration&&me()}),_e.embed.addEvent("play",function(){_e.media.paused=!1,w(_e.media,"play")}),_e.embed.addEvent("pause",function(){_e.media.paused=!0,w(_e.media,"pause")}),_e.embed.addEvent("playProgress",function(e){_e.media.currentTime=e.seconds,w(_e.media,"timeupdate")}),_e.embed.addEvent("loadProgress",function(e){_e.media.buffered=e.percent,w(_e.media,"progress")}),_e.embed.addEvent("finish",function(){_e.media.paused=!0,w(_e.media,"ended")})})}function J(){if("video"===_e.type){H(I.selectors.captions)||_e.videoContainer.insertAdjacentHTML("afterbegin",'
'),_e.captionsContainer=H(I.selectors.captions).querySelector("span"),_e.usingTextTracks=!1,_e.media.textTracks&&(_e.usingTextTracks=!0);for(var e,t="",n=_e.media.childNodes,a=0;a=10||"Firefox"===_e.browser.name&&_e.browser.version>=31||"Chrome"===_e.browser.name&&_e.browser.version>=43||"Safari"===_e.browser.name&&_e.browser.version>=7)&&(r("Detected unsupported browser for HTML5 captions. Using fallback."),_e.usingTextTracks=!1),_e.usingTextTracks){r("TextTracks supported.");for(var i=0;i=7){r("Safari 7+ detected; removing track from DOM."),s=_e.media.getElementsByTagName("track");for(var c=0;ct?t=0:t>_e.media.duration&&(t=_e.media.duration);try{_e.media.currentTime=t.toFixed(1)}catch(a){}"embed"in _e&&("youtube"===_e.type&&_e.embed.seekTo(t),"vimeo"===_e.type&&_e.embed.api("seekTo",t),w(_e.media,"timeupdate"),n&&Z()),r("Seeking to "+_e.media.currentTime+" seconds"),E(t)}function ae(){b(_e.container,I.classes.playing,!_e.media.paused),b(_e.container,I.classes.stopped,_e.media.paused)}function se(n){function r(){b(_e.container,I.classes.hover,!0),e.clearTimeout(o),i||(o=e.setTimeout(function(){b(_e.container,I.classes.hover,!1)},2e3))}function a(e){i="mouseenter"===e.type}var s=A.supportsFullScreen;n&&n.type===A.fullScreenEventName?_e.isFullscreen=A.isFullScreen(_e.container):s?(A.isFullScreen(_e.container)?A.cancelFullScreen():A.requestFullScreen(_e.container),_e.isFullscreen=A.isFullScreen(_e.container)):(_e.isFullscreen=!_e.isFullscreen,_e.isFullscreen?(g(t,"keyup",oe),t.body.style.overflow="hidden"):(h(t,"keyup",oe),t.body.style.overflow="")),b(_e.container,I.classes.fullscreen.active,_e.isFullscreen),_e.isFullscreen?_e.container.setAttribute("tabindex","-1"):_e.container.removeAttribute("tabindex"),D(_e.isFullscreen),x(_e.buttons.fullscreen,_e.isFullscreen);var o,i=!1;I.fullscreen.hideControls&&(b(_e.controls,I.classes.hover,!1),T(_e.controls,"mouseenter mouseleave",a,_e.isFullscreen),T(_e.container,"mousemove",r,_e.isFullscreen))}function oe(e){27===(e.which||e.charCode||e.keyCode)&&_e.isFullscreen&&se()}function ie(e){"boolean"!=typeof e&&(e=!_e.media.muted),x(_e.buttons.mute,e),_e.media.muted=e,"youtube"===_e.type&&(_e.embed[_e.media.muted?"mute":"unMute"](),w(_e.media,"volumechange")),"vimeo"===_e.type&&(_e.media.muted?_e.embed.api("setVolume",0):_e.embed.api("setVolume",parseFloat(I.volume/10)),w(_e.media,"volumechange"))}function le(t){"undefined"==typeof t&&(t=I.storage.enabled&&S().supported?e.localStorage[I.storage.key]||I.volume:I.volume),t>10&&(t=10),0>t&&(t=0),_e.media.volume=parseFloat(t/10),I.volume=t,"youtube"===_e.type&&_e.embed.setVolume(100*_e.media.volume),"vimeo"===_e.type&&_e.embed.api("setVolume",_e.media.volume),"embed"in _e&&w(_e.media,"volumechange"),_e.media.muted&&t>0&&ie()}function ue(){var t=_e.media.muted?0:10*_e.media.volume;_e.supported.full&&_e.volume&&(_e.volume.value=t),I.storage.enabled&&S().supported&&e.localStorage.setItem(I.storage.key,t),b(_e.container,I.classes.muted,0===t),_e.supported.full&&_e.buttons.mute&&x(_e.buttons.mute,0===t)}function ce(e){_e.supported.full&&_e.buttons.captions&&("boolean"!=typeof e&&(e=-1===_e.container.className.indexOf(I.classes.captions.active)),_e.captionsEnabled=e,x(_e.buttons.captions,_e.captionsEnabled),b(_e.container,I.classes.captions.active,_e.captionsEnabled))}function pe(e){var t="waiting"===e.type;clearTimeout(_e.loadingTimer),_e.loadingTimer=setTimeout(function(){b(_e.container,I.classes.loading,t)},t?250:0)}function de(e){var t=_e.progress.played.bar,n=_e.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=_(_e.media.currentTime,_e.media.duration),"timeupdate"==e.type&&_e.buttons.seek&&(_e.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=_e.progress.buffer.bar,n=_e.progress.buffer.text,r=function(){var e=_e.media.buffered;return e&&e.length?_(e.end(0),_e.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function fe(e,t){if(t){isNaN(e)&&(e=0),_e.secs=parseInt(e%60),_e.mins=parseInt(e/60%60),_e.hours=parseInt(e/60/60%60);var n=parseInt(_e.media.duration/60/60%60)>0;_e.secs=("0"+_e.secs).slice(-2),_e.mins=("0"+_e.mins).slice(-2),t.innerHTML=(n?_e.hours+":":"")+_e.mins+":"+_e.secs}}function me(){var e=_e.media.duration||0;!_e.duration&&I.displayDuration&&_e.media.paused&&fe(e,_e.currentTime),_e.duration&&fe(e,_e.duration)}function ye(e){fe(_e.media.currentTime,_e.currentTime),de(e)}function be(e){if("undefined"!=typeof e)return void ve(e);var t;switch(_e.type){case"youtube":t=_e.embed.getVideoUrl();break;case"vimeo":_e.embed.api("getVideoUrl",function(e){t=e});break;default:t=_e.media.currentSrc}return t||""}function ve(n){if(!("undefined"!=typeof n&&"sources"in n&&n.sources.length))return void r("Invalid source format",!0);if(Z(),"youtube"===_e.type?(_e.embed.destroy(),e.clearInterval(_e.timer.buffering),e.clearInterval(_e.timer.playing)):"video"===_e.type&&p(_e.videoContainer),p(_e.media),"type"in n&&(_e.type=n.type,"video"===_e.type)){var a=n.sources[0];"type"in a&&i(I.types.embed,a.type)&&(_e.type=a.type)}switch(_e.type){case"video":_e.media=t.createElement("video");break;case"audio":_e.media=t.createElement("audio");break;case"youtube":case"vimeo":_e.media=t.createElement("div"),_e.embedId=n.sources[0].src}d(_e.container,_e.media),i(I.types.html5,_e.type)&&(I.crossorigin&&_e.media.setAttribute("crossorigin",""),I.autoplay&&_e.media.setAttribute("autoplay",""),"poster"in n&&_e.media.setAttribute("poster",n.poster),I.loop&&_e.media.setAttribute("loop","")),_e.container.className=_e.originalClassName,b(_e.container,I.classes.fullscreen.active,_e.isFullscreen),b(_e.container,I.classes.captions.active,_e.captionsEnabled),I.autoplay=n.autoplay||I.autoplay,i(I.types.html5,_e.type)&&j("source",n.sources),U(),xe(),i(I.types.html5,_e.type)&&(le(),ue(),_e.supported.full&&(ye(),ae()),"tracks"in n&&(j("track",n.tracks),J()),_e.media.load(),I.autoplay&&Q()),"title"in n&&(I.title=n.title,W())}function ge(e){"video"===_e.type&&_e.media.setAttribute("poster",e)}function he(){function n(e){e?Q():Z();var t=_e.buttons[e?"play":"pause"],n=_e.buttons[e?"pause":"play"];if(n){var r=v(t,I.classes.tabFocus);setTimeout(function(){n.focus(),r&&(b(t,I.classes.tabFocus,!1),b(n,I.classes.tabFocus,!0))},100)}}function r(){var e=t.activeElement;e&&e!=t.body?t.querySelector&&(e=t.querySelector(":focus")):e=null;for(var n in _e.buttons){var r=_e.buttons[n];b(r,I.classes.tabFocus,r===e)}}var a="IE"==_e.browser.name?"change":"input";g(e,"keyup",function(e){var t=e.keyCode?e.keyCode:e.which;9==t&&r()}),g(t.body,"click",function(){b(H("."+I.classes.tabFocus),I.classes.tabFocus,!1)});for(var s in _e.buttons){var o=_e.buttons[s];g(o,"blur",function(){b(o,"tab-focus",!1)})}k(_e.buttons.play,"click",I.handlers.play,function(){n(!0)}),k(_e.buttons.pause,"click",I.handlers.pause,function(){n()}),k(_e.buttons.restart,"click",I.handlers.restart,re),k(_e.buttons.rewind,"click",I.handlers.rewind,te),k(_e.buttons.forward,"click",I.handlers.forward,ne),k(_e.buttons.seek,a,I.handlers.seek,re),k(_e.volume,a,I.handlers.volume,function(){le(_e.volume.value)}),k(_e.buttons.mute,"click",I.handlers.mute,ie),k(_e.buttons.fullscreen,"click",I.handlers.fullscreen,se),A.supportsFullScreen&&g(t,A.fullScreenEventName,se),g(_e.media,"timeupdate seeking",ye),g(_e.media,"timeupdate",E),g(_e.media,"loadedmetadata",me),g(_e.buttons.captions,"click",ce),g(_e.media,"ended",function(){"video"===_e.type&&(_e.captionsContainer.innerHTML=""),ae()}),g(_e.media,"progress playing",de),g(_e.media,"volumechange",ue),g(_e.media,"play pause",ae),g(_e.media,"waiting canplay seeked",pe),"video"===_e.type&&I.click&&g(_e.videoContainer,"click",function(){_e.media.paused?Q():_e.media.ended?(re(),Q()):Z()})}function ke(){if(!_e.init)return null;if(_e.container.setAttribute("class",y(I.selectors.container)),_e.init=!1,p(H(I.selectors.controls.wrapper)),"youtube"===_e.type)return void _e.embed.destroy();"video"===_e.type&&(p(H(I.selectors.captions)),c(_e.videoContainer)),_e.media.setAttribute("controls","");var e=_e.media.cloneNode(!0);_e.media.parentNode.replaceChild(e,_e.media)}function Te(){if(_e.init)return null;A=C(),_e.browser=a(),_e.media=_e.container.querySelectorAll("audio, video, div")[0],b(_e.container,P.selectors.container.replace(".",""),!0),_e.originalClassName=_e.container.className;var e=_e.media.tagName.toLowerCase();if("div"===e?(_e.type=_e.media.getAttribute("data-type"),_e.embedId=_e.media.getAttribute("data-video-id"),_e.media.removeAttribute("data-type"),_e.media.removeAttribute("data-video-id")):(_e.type=e,I.crossorigin=null!==_e.media.getAttribute("crossorigin"),I.autoplay=I.autoplay||null!==_e.media.getAttribute("autoplay"),I.loop=I.loop||null!==_e.media.getAttribute("loop")),_e.supported=N.supported(_e.type),!_e.supported.basic)return!1;if(r(_e.browser.name+" "+_e.browser.version),U(),"video"==_e.type||"audio"==_e.type){if(!_e.supported.full)return void(_e.init=!0);we(),I.displayDuration&&me(),W()}_e.init=!0}function we(){return B(),Y()?(J(),xe(),le(),void ue()):!1}function xe(){G(),he()}var _e=this;return _e.container=F,Te(),_e.init?{media:_e.media,play:Q,pause:Z,restart:re,rewind:te,forward:ne,seek:re,source:be,poster:ge,setVolume:le,togglePlay:ee,toggleMute:ie,toggleCaptions:ce,toggleFullscreen:se,isFullscreen:function(){return _e.isFullscreen||!1},support:function(e){return s(_e,e)},destroy:ke,restore:Te}:{}}var A,I,N={},P={enabled:!0,debug:!1,autoplay:!1,loop:!1,seekTime:10,volume:5,click:!0,tooltips:!1,displayDuration:!0,iconPrefix:"icon",selectors:{container:".plyr",controls:{container:null,wrapper:".plyr__controls"},labels:"[data-plyr] .sr-only, label .sr-only",buttons:{seek:'[data-plyr="seek"]',play:'[data-plyr="play"]',pause:'[data-plyr="pause"]',restart:'[data-plyr="restart"]',rewind:'[data-plyr="rewind"]',forward:'[data-plyr="fast-forward"]',mute:'[data-plyr="mute"]',volume:'[data-plyr="volume"]',captions:'[data-plyr="captions"]',fullscreen:'[data-plyr="fullscreen"]'},progress:{container:".plyr__progress",buffer:".plyr__progress--buffer",played:".plyr__progress--played"},captions:".plyr__captions",currentTime:".plyr__time--current",duration:".plyr__time--duration"},classes:{videoWrapper:"plyr__video-wrapper",embedWrapper:"plyr__video-embed",type:"plyr--{0}",stopped:"plyr--stopped",playing:"plyr--playing",muted:"plyr--muted",loading:"plyr--loading",hover:"plyr--hover",tooltip:"plyr__tooltip",hidden:"plyr__sr-only",isIos:"plyr--is-ios",isTouch:"plyr--is-touch",captions:{enabled:"plyr--captions-enabled",active:"plyr--captions-active"},fullscreen:{enabled:"plyr--fullscreen-enabled",active:"plyr--fullscreen-active",hideControls:"plyr--fullscreen--hide-controls"},tabFocus:"tab-focus"},handlers:{seek:null,play:null,pause:null,restart:null,rewind:null,forward:null,mute:null,volume:null,captions:null,fullscreen:null},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",frameTitle:"Player for {title}"},types:{embed:["youtube","vimeo"],html5:["video","audio"]},urls:{vimeo:{api:"http://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js"},youtube:{api:"https://www.youtube.com/iframe_api"}}};return N.supported=function(e){var n,r,s=a(),o="IE"===s.name&&s.version<=9,i=/iPhone|iPod/i.test(navigator.userAgent),l=!!t.createElement("audio").canPlayType,u=!!t.createElement("video").canPlayType;switch(e){case"video":n=u,r=n&&!o&&!i;break;case"audio":n=l,r=n&&!o;break;case"vimeo":case"youtube":n=!0,r=!o&&!i;break;default:n=l&&u,r=n&&!o}return{basic:n,full:r}},N.setup=function(e,n){var r=[];if("string"==typeof e?e=t.querySelectorAll(e):e instanceof HTMLElement?e=[e]:e instanceof NodeList||"string"==typeof e||("undefined"==typeof n&&"object"==typeof e&&(n=e),e=t.querySelectorAll(P.selectors.container)),I=F(P,n),!I.enabled||!N.supported().basic||!e.length)return!1;for(var a=e.length-1;a>=0;a--){var s=e[a];if("undefined"==typeof s.plyr){var o=new E(s);s.plyr=Object.keys(o).length?o:!1,"function"==typeof I.onSetup&&I.onSetup.apply(s.plyr)}r.push(s.plyr)}return r},N}); \ No newline at end of file diff --git a/dist/sprite.svg b/dist/sprite.svg index c1f8a560..26e438e1 100644 --- a/dist/sprite.svg +++ b/dist/sprite.svg @@ -1 +1 @@ -Captions OffCaptions OnEnter FullscreenExit FullscreenFast ForwardMutedPausePlayRestartRewindVolume \ No newline at end of file +Captions OffCaptions OnEnter FullscreenExit FullscreenFast ForwardMutedPausePlayRewindVolume \ No newline at end of file diff --git a/src/js/plyr.js b/src/js/plyr.js index fac7d555..1953f864 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -835,6 +835,44 @@ } } + // Trap focus inside container + function _focusTrap() { + var tabbables = _getElements('input:not([disabled]), button:not([disabled])'), + first = tabbables[0], + last = tabbables[tabbables.length - 1]; + + function _checkFocus(event) { + // If it is TAB + if (event.which === 9 && plyr.isFullscreen) { + // Move focus to first element that can be tabbed if Shift isn't used + if (event.target === last && !event.shiftKey) { + event.preventDefault(); + first.focus(); + } + // Move focus to last element that can be tabbed if Shift is used + else if (event.target === first && event.shiftKey) { + event.preventDefault(); + last.focus(); + } + } + } + + // Bind the handler + _on(plyr.container, 'keydown', _checkFocus); + } + + // Add elements to HTML5 media (source, tracks, etc) + function _insertChildElements(type, attributes) { + if (typeof attributes === 'string') { + _insertElement(type, plyr.media, { src: attributes }); + } + else if (attributes.constructor === Array) { + for (var i = attributes.length - 1; i >= 0; i--) { + _insertElement(type, plyr.media, attributes[i]); + } + } + } + // Insert controls function _injectControls() { // Make a copy of the html @@ -1481,6 +1519,9 @@ // Toggle state _toggleState(plyr.buttons.fullscreen, false); + // Setup focus trap + _focusTrap(); + // Set control hide class hook if (config.fullscreen.hideControls) { _toggleClass(plyr.container, config.classes.fullscreen.hideControls, true); @@ -1642,6 +1683,17 @@ // Set class hook _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); + // Trap focus + if(plyr.isFullscreen) { + plyr.container.setAttribute('tabindex', '-1'); + } + else { + plyr.container.removeAttribute('tabindex'); + } + + // Trap focus + _focusTrap(plyr.isFullscreen); + // Set button state _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); @@ -1940,18 +1992,6 @@ _updateProgress(event); } - // Add elements to HTML5 media (source, tracks, etc) - function _insertChildElements(type, attributes) { - if (typeof attributes === 'string') { - _insertElement(type, plyr.media, { src: attributes }); - } - else if (attributes.constructor === Array) { - for (var i = attributes.length - 1; i >= 0; i--) { - _insertElement(type, plyr.media, attributes[i]); - } - } - } - // Add common function to retrieve media source function _source(source) { // If not null or undefined, parse it diff --git a/src/less/plyr.less b/src/less/plyr.less index affa7cef..891b6f9d 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -111,7 +111,7 @@ background: @volume-thumb-bg; border: 0; border-radius: 100%; - transition: background .3s ease, transform .2s ease; + transition: background .3s ease; cursor: ew-resize; } .volume-track() { @@ -243,7 +243,7 @@ background: @controls-bg; line-height: 1; text-align: center; - box-shadow: 0 1px 1px rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .2); + box-shadow: 0 1px 1px fade(@gray-dark, 20%); // Layout &--right { @@ -283,7 +283,7 @@ } // Hover and tab focus - &.tab-focus, + &.tab-focus:focus, &:hover { background: @control-bg-hover; color: @control-color-hover; @@ -309,7 +309,6 @@ color: @control-color; font-weight: 600; font-size: @font-size-small; - .font-smoothing(); } // Media duration hidden on small screens @@ -388,7 +387,7 @@ } // Common range styles - input[type='range'].tab-focus { + input[type='range'].tab-focus:focus { .tab-focus(); } diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 7cefca3a..8bf481db 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -32,14 +32,16 @@ $control-color-hover: null !default; // Contrast @if lightness($controls-bg) >= 65% { - $control-color: $gray-light; -} @else { - $control-color: $gray-lighter; + $control-color: $gray-light; +} +@else { + $control-color: $gray-lighter; } @if lightness($control-bg-hover) >= 65% { - $control-color-hover: $gray; -} @else { - $control-color-hover: #fff; + $control-color-hover: $gray; +} +@else { + $control-color-hover: #fff; } // Tooltips @@ -48,7 +50,7 @@ $tooltip-border-color: transparentize(@gray-dark, .1) !default; $tooltip-border-width: 1px; $tooltip-shadow: 0 0 5px $tooltip-border-color, 0 0 0 $tooltip-border-width $tooltip-border-color; $tooltip-color: $control-color !default; -$tooltip-padding: $control-spacing !default; +$tooltip-padding: $control-spacing !default; $tooltip-arrow-size: 6px !default; $tooltip-radius: 3px !default; @@ -80,77 +82,61 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Font smoothing @mixin font-smoothing($mode: on) { - @if ($mode == 'on') { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - } - @else if ($mode == 'off') { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; - } + @if ($mode == 'on') { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + } + @else if ($mode == 'off') { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: subpixel-antialiased; + } } // Contain floats: nicolasgallagher.com/micro-clearfix-hack/ @mixin clearfix() { zoom: 1; - &:before, + &:before, &:after { content: ''; display: table; } &:after { clear: both; } } // Tab focus styles -@mixin tab-focus() -{ - outline: thin dotted #000; - outline-offset: 0; +@mixin tab-focus() { + outline: thin dotted transparentize($gray-dark, .8); + outline-offset: 3px; } // styling -@mixin volume-thumb() -{ +@mixin volume-thumb() { height: $volume-thumb-height; width: $volume-thumb-width; background: $volume-thumb-bg; border: 0; - border-radius: ($volume-thumb-height / 2); + border-radius: 100%; transition: background .3s ease; cursor: ew-resize; } -@mixin volume-track() -{ +@mixin volume-track() { height: $volume-track-height; background: $volume-track-bg; border: 0; border-radius: ($volume-track-height / 2); } -@mixin seek-thumb() -{ +@mixin seek-thumb() { background: transparent; border: 0; - width: ($control-spacing * 2); + width: ($control-spacing * 4); height: $control-spacing; + transform: translateX(-50%); } -@mixin seek-track() -{ +@mixin seek-track() { background: none; border: 0; } -// Screen reader only -// ------------------------------- -.sr-only { - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; -} - // Styles // ------------------------------- -// Base +// Base .plyr { position: relative; max-width: 100%; @@ -161,12 +147,28 @@ $bp-captions-large: 768px !default; // When captions jump to the larger &, *, *::after, - *::before { - box-sizing: border-box; + *::before { + box-sizing: border-box; + } + + // Fix 300ms delay + a, button, input, label { + touch-action: manipulation; + } + + // Screen reader only + &__sr-only { + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); + padding: 0 !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; } // For video - &-video-wrapper { + &__video-wrapper { position: relative; } video, @@ -177,12 +179,12 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // For embeds - &-video-embed { + &__video-embed { padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; background: #000; - + iframe { position: absolute; top: 0; @@ -201,7 +203,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // Captions - &-captions { + &__captions { display: none; position: absolute; bottom: 0; @@ -226,15 +228,15 @@ $bp-captions-large: 768px !default; // When captions jump to the larger font-size: $font-size-captions-medium; } } - &.captions-active &-captions { + &--captions-active &__captions { display: block; } - &.fullscreen-active &-captions { + &--fullscreen-active &__captions { font-size: $font-size-captions-large; } // Playback controls - &-controls { + &__controls { @include clearfix(); @include font-smoothing(); position: relative; @@ -242,23 +244,23 @@ $bp-captions-large: 768px !default; // When captions jump to the larger background: $controls-bg; line-height: 1; text-align: center; - box-shadow: 0 1px 1px rgba(red($gray-dark), green($gray-dark), blue($gray-dark), .2); + box-shadow: 0 1px 1px transparentize($gray-dark, .2); // Layout - &-right { + &--right { display: block; margin: $control-spacing auto 0; } @media (min-width: $bp-control-split) { - &-left { + &--left { float: left; } - &-right { + &--right { float: right; margin-top: 0; } } - + // Buttons button { display: inline-block; @@ -272,7 +274,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger cursor: pointer; color: $control-color; transition: background .3s ease, color .3s ease, opacity .3s ease; - + svg { width: 18px; height: 18px; @@ -280,9 +282,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fill: currentColor; transition: fill .3s ease; } - + // Hover and tab focus - &.tab-focus, + &.tab-focus:hover, &:hover { background: $control-bg-hover; color: $control-color-hover; @@ -292,27 +294,26 @@ $bp-captions-large: 768px !default; // When captions jump to the larger outline: 0; } } - + // Hide toggle icons by default - .icon-exit-fullscreen, - .icon-muted, - .icon-captions-on { + .icon--exit-fullscreen, + .icon--muted, + .icon--captions-on { display: none; } - + // Time display - .plyr-time { + .plyr__time { display: inline-block; vertical-align: middle; margin-left: $control-spacing; color: $control-color; font-weight: 600; font-size: $font-size-small; - @include font-smoothing(); } // Media duration hidden on small screens - .plyr-time + .plyr-time { + .plyr__time + .plyr__time { display: none; @media (min-width: $bp-control-split) { @@ -328,7 +329,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // Tooltips - &-tooltip { + &__tooltip { position: absolute; z-index: 2; bottom: 100%; @@ -367,8 +368,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger 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; @@ -377,15 +378,20 @@ $bp-captions-large: 768px !default; // When captions jump to the larger z-index: 2; } } - button:hover .plyr-tooltip, - button:focus .plyr-tooltip { + button:hover .plyr__tooltip, + button.tab-focus:focus .plyr__tooltip { opacity: 1; transform: translate(-50%, 0) scale(1); } - button:hover .plyr-tooltip { + button:hover .plyr__tooltip { z-index: 3; } + // Common range styles + input[type='range'].tab-focus:focus { + .tab-focus(); + } + // Playback progress // element &-progress { @@ -397,9 +403,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger height: $control-spacing; background: $progress-bg; - &-buffer[value], - &-played[value], - &-seek[type='range'] { + &--buffer[value], + &--played[value], + &--seek[type='range'] { position: absolute; left: 0; top: 0; @@ -414,8 +420,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger border: none; background: transparent; } - &-buffer[value], - &-played[value] { + &--buffer[value], + &--played[value] { &::-webkit-progress-bar { background: transparent; } @@ -428,18 +434,18 @@ $bp-captions-large: 768px !default; // When captions jump to the larger background: currentColor; } } - &-played[value] { + &--played[value] { z-index: 2; color: $progress-playing-bg; } - &-buffer[value] { + &--buffer[value] { color: $progress-buffered-bg; } // Seek control // element // Specificity is for bootstrap compatibility - &-seek[type='range'] { + &--seek[type='range'] { z-index: 4; cursor: pointer; outline: 0; @@ -461,7 +467,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger -moz-appearance: none; @include seek-thumb(); } - + // Microsoft &::-ms-track { color: transparent; @@ -485,47 +491,47 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // Loading state - &.loading .plyr-progress-buffer { + &--loading .plyr__progress--buffer { animation: progress 1s linear infinite; background-size: $progress-loading-size $progress-loading-size; background-repeat: repeat-x; 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; } // States - &-controls [data-plyr='pause'], - &.playing .plyr-controls [data-plyr='play'] { + &__controls [data-plyr='pause'], + &--playing .plyr__controls [data-plyr='play'] { display: none; } - &.playing .plyr-controls [data-plyr='pause'] { + &--playing .plyr__controls [data-plyr='pause'] { display: inline-block; } // Volume control // element // Specificity is for bootstrap compatibility - &-volume[type='range'] { + &__volume[type='range'] { display: inline-block; vertical-align: middle; -webkit-appearance: none; -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 { @include volume-track(); @@ -543,7 +549,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger &::-moz-range-thumb { @include volume-thumb(); } - + // Microsoft &::-ms-track { height: $volume-track-height; @@ -578,30 +584,30 @@ $bp-captions-large: 768px !default; // When captions jump to the larger // Hide sound controls on iOS // It's not supported to change volume using JavaScript: // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html - &.ios &-volume, - &.ios [data-plyr='mute'], - &-audio.ios &-controls-right { + &--is-ios &__volume, + &--is-ios [data-plyr='mute'], + &--is-ios.plyr--audio &__controls--right { display: none; } // Center buttons so it looks less odd - &-audio.ios &-controls-left { + &--is-ios.plyr--audio &__controls--left { float: none; } // Audio specific styles // Position the progress within the container - &-audio .plyr-controls { + &--audio .plyr__controls { padding-top: ($control-spacing * 2); } - &-audio .plyr-progress { + &--audio .plyr__progress { bottom: auto; top: 0; background: $off-white; } // Full screen mode - &-fullscreen, - &.fullscreen-active { + &--fullscreen, + &--fullscreen-active { position: fixed; top: 0; left: 0; @@ -615,11 +621,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger video { height: 100%; } - .plyr-video-wrapper { + .plyr__video-wrapper { height: 100%; width: 100%; } - .plyr-controls { + .plyr__controls { position: absolute; bottom: 0; left: 0; @@ -627,23 +633,24 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // Hide controls when playing in full screen - &.fullscreen-hide-controls.playing { - .plyr-controls { + &--fullscreen--hide-controls&--fullscreen-active&--playing { + .plyr__controls { transform: translateY(100%) translateY($control-spacing / 2); transition: transform .3s .2s ease; } - &.plyr-hover .plyr-controls { + &.plyr--hover .plyr__controls { transform: translateY(0); } - .plyr-captions { + .plyr__captions { bottom: ($control-spacing / 2); transition: bottom .3s .2s ease; } } // Captions - .plyr-captions, - &.fullscreen-hide-controls.playing.plyr-hover .plyr-captions { + &--fullscreen .plyr__captions, + &--fullscreen-active .plyr__captions, + &--fullscreen--hide-controls&--fullscreen-active&--playing&--hover &__captions { top: auto; bottom: 90px; @@ -654,9 +661,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger } // Change icons on state change - &.fullscreen-active .icon-exit-fullscreen, - &.muted .plyr-controls .icon-muted, - &.captions-active .plyr-controls .icon-captions-on { + &--fullscreen-active .icon--exit-fullscreen, + &--muted .plyr__controls .icon--muted, + &--captions-active .plyr__controls .icon--captions-on { display: block; & + svg { @@ -669,8 +676,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger [data-plyr='fullscreen'] { display: none; } - &.captions-enabled [data-plyr='captions'], - &.fullscreen-enabled [data-plyr='fullscreen'] { + &--captions-enabled [data-plyr='captions'], + &--fullscreen-enabled [data-plyr='fullscreen'] { display: inline-block; } } diff --git a/src/sprite/icon-restart.svg b/src/sprite/icon-restart.svg old mode 100644 new mode 100755 index 1e393763..6cf89d8d --- a/src/sprite/icon-restart.svg +++ b/src/sprite/icon-restart.svg @@ -1,5 +1,9 @@ - - - Restart - - \ No newline at end of file + + + + + +