diff --git a/.gitignore b/.gitignore index 0356883a..e40f5511 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ node_modules .DS_Store aws.json docs/index.dev.html -*.mp4 \ No newline at end of file +*.mp4 +index-dev.html diff --git a/dist/plyr.css b/dist/plyr.css index d3a1f20b..d8a5c452 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.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 +.plyr__tooltip,.plyr__video-embed.plyr iframe{pointer-events:none}.plyr--playing .plyr__play-large,.plyr__tooltip{visibility:hidden;opacity:0}@-webkit-keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-progress{to{background-position:25px 0}}.plyr{position:relative;max-width:100%;min-width:290px;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif}.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;background:#000;border-radius:inherit}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr__video-embed{padding-bottom:56.25%;height:0;overflow:hidden;border-radius:inherit}.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 video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px 20px 80px;color:#fff;font-size:20px;text-align:center;font-weight:400}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.85)}.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 input[type=range]{display:block;height:16px;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:rgba(255,255,255,.25);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,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:rgba(255,255,255,.25);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,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15);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-lower,.plyr input[type=range]::-ms-fill-upper{height:8px;background:rgba(255,255,255,.25);border:0;border-radius:4px;-ms-user-select:none;user-select:none}.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,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15);box-sizing:border-box;margin-top:0}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]:focus{outline:0}.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline:rgba(255,255,255,.5) dotted 1px;outline-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498DB;border-color:#fff;-webkit-transform:scale(1.25);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__play-large{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:10px;background:#3498DB;border:4px solid #fff;border-radius:100%;color:#fff}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor}.plyr__play-large:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr__controls,.plyr__play-large{transition:visibility .3s ease,opacity .3s ease}.plyr__controls{position:absolute;left:0;right:0;bottom:0;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:50px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.25));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;line-height:1;text-align:center}.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls .plyr__volume[type=range],.plyr__controls>button{margin-left:10px}.plyr__controls .plyr__progress::first-child,.plyr__controls .plyr__time::first-child,.plyr__controls .plyr__volume[type=range]::first-child,.plyr__controls [data-plyr=mute],.plyr__controls>button::first-child{margin-left:0}.plyr__controls button{position:relative;display:inline-block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;vertical-align:middle;padding:5px 10px;border:0;background:0 0;border-radius:3px;cursor:pointer;color:#fff;transition:background .3s ease,color .3s ease,opacity .3s ease}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor}.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted,.plyr__controls [data-plyr=pause]{display:none}.plyr__controls button.tab-focus:focus,.plyr__controls button:hover{background:#3498DB;color:#fff}.plyr__controls button:focus{outline:0}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;background:#000;box-shadow:0 0 5px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.1);border-radius:3px;color:#fff;font-size:14px;line-height:1.3;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s .1s ease,visibility .3s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,visibility .3s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,visibility .3s 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:-6px;border-right:5px solid transparent;border-top:5px solid rgba(0,0,0,.2);border-left:5px solid transparent;z-index:1}.plyr__tooltip::before{bottom:-4px;border-right:4px solid transparent;border-top:4px solid #000;border-left:4px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip,.plyr__tooltip--visible{visibility:visible;opacity:1;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr__progress{position:relative;-webkit-flex:1;-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-lower,.plyr__progress input[type=range]::-ms-fill-upper{background:0 0}.plyr__progress--buffer[value],.plyr__progress--played[value]{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[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;border-radius:100px;min-width:8px}.plyr__progress--buffer[value]::-moz-progress-bar,.plyr__progress--played[value]::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer[value]::-ms-fill,.plyr__progress--played[value]::-ms-fill{border-radius:100px}.plyr__progress--played[value]{z-index:1;color:#3498DB;background:0 0}.plyr__progress--played[value]::-webkit-progress-value{background:currentColor;min-width:8px;border-top-right-radius:0;border-bottom-right-radius:0}.plyr__progress--played[value]::-moz-progress-bar{background:currentColor;min-width:8px;border-top-right-radius:0;border-bottom-right-radius:0}.plyr__progress--played[value]::-ms-fill{min-width:8px;border-top-right-radius:0;border-bottom-right-radius:0}.plyr__progress--buffer[value]{color:rgba(255,255,255,.25);background:rgba(255,255,255,.25)}.plyr__progress--buffer[value]::-webkit-progress-value{transition:width .2s ease}.plyr__progress--buffer[value]::-moz-progress-bar{transition:width .2s ease}.plyr__progress--buffer[value]::-ms-fill{transition:width .2s ease}.plyr__progress .plyr__tooltip{left:0}.plyr--loading .plyr__progress--buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-color:rgba(255,255,255,.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=pause],.plyr__time{display:inline-block}.plyr__time{vertical-align:middle;color:#fff;font-size:14px;line-height:.95}.plyr__time+.plyr__time{display:none}@media (min-width:560px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr__volume[type=range]{max-width:100px}.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:#fff}.plyr--fullscreen-active,.plyr.plyr--fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000}.plyr--fullscreen-active video,.plyr.plyr--fullscreen video{height:100%}.plyr--fullscreen-active .plyr__video-wrapper,.plyr.plyr--fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-active .plyr__controls,.plyr.plyr--fullscreen .plyr__controls{position:absolute;bottom:0;left:0;right:0}.plyr.plyr--hide-controls .plyr__controls{opacity:0;visibility:hidden}.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 716e82c6..d70a36d8 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1 +1,2 @@ -!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% "+N.i18n.played,"",'',"0% "+N.i18n.buffered,"","
",''];return i(N.controls,"restart")&&e.push('"),i(N.controls,"rewind")&&e.push('"),i(N.controls,"play")&&e.push('",'"),i(N.controls,"fast-forward")&&e.push('"),i(N.controls,"current-time")&&e.push('',''+N.i18n.currentTime+"",'00:00',""),i(N.controls,"duration")&&e.push('',''+N.i18n.duration+"",'00:00',""),e.push("",''),i(N.controls,"mute")&&e.push('"),i(N.controls,"volume")&&e.push('",''),i(N.controls,"captions")&&e.push('"),i(N.controls,"fullscreen")&&e.push('"),e.push("","
"),e.join("")}function r(t,n){N.debug&&e.console&&console[n?"warn":"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&&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){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function v(e,t){return e?e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className):!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 E(){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 S(F){function S(e){if(!Fe.usingTextTracks&&"video"===Fe.type&&Fe.supported.full&&(Fe.subcount=0,e="number"==typeof e?e:Fe.media.currentTime,Fe.captions[Fe.subcount])){for(;O(Fe.captions[Fe.subcount][0])Fe.captions.length-1){Fe.subcount=Fe.captions.length-1;break}if(Fe.media.currentTime.toFixed(1)>=L(Fe.captions[Fe.subcount][0])&&Fe.media.currentTime.toFixed(1)<=O(Fe.captions[Fe.subcount][0])){Fe.currentCaption=Fe.captions[Fe.subcount][1];var t=Fe.currentCaption.trim();Fe.captionsContainer.innerHTML!=t&&(Fe.captionsContainer.innerHTML="",Fe.captionsContainer.innerHTML=t)}else Fe.captionsContainer.innerHTML=""}}function M(){Fe.buttons.captions&&(b(Fe.container,N.classes.captions.enabled,!0),N.captions.defaultActive&&(b(Fe.container,N.classes.captions.active,!0),x(Fe.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 Fe.container.querySelectorAll(e)}function H(e){return q(e)[0]}function R(){try{return e.self!==e.top}catch(t){return!0}}function j(){function e(e){9===e.which&&Fe.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(Fe.container,"keydown",e)}function D(e,t){if("string"==typeof t)m(e,Fe.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)m(e,Fe.media,t[n])}function B(){var e=N.html;r("Injecting custom controls"),e||(e=n()),e=l(e,"{seektime}",N.seekTime),e=l(e,"{id}",Math.floor(1e4*Math.random()));var a;if(null!==N.selectors.controls.container&&(a=N.selectors.controls.container,"string"==typeof selector&&(a=t.querySelector(a))),a instanceof HTMLElement||(a=Fe.container),a.insertAdjacentHTML("beforeend",e),N.tooltips)for(var s=q(N.selectors.labels),o=s.length-1;o>=0;o--){var i=s[o];b(i,N.classes.hidden,!1),b(i,N.classes.tooltip,!0)}}function Y(){try{return Fe.controls=H(N.selectors.controls.wrapper),Fe.buttons={},Fe.buttons.seek=H(N.selectors.buttons.seek),Fe.buttons.play=H(N.selectors.buttons.play),Fe.buttons.pause=H(N.selectors.buttons.pause),Fe.buttons.restart=H(N.selectors.buttons.restart),Fe.buttons.rewind=H(N.selectors.buttons.rewind),Fe.buttons.forward=H(N.selectors.buttons.forward),Fe.buttons.fullscreen=H(N.selectors.buttons.fullscreen),Fe.buttons.volume=H(N.selectors.buttons.volume),Fe.buttons.mute=H(N.selectors.buttons.mute),Fe.buttons.captions=H(N.selectors.buttons.captions),Fe.checkboxes=q('[type="checkbox"]'),Fe.progress={},Fe.progress.container=H(N.selectors.progress.container),Fe.progress.buffer={},Fe.progress.buffer.bar=H(N.selectors.progress.buffer),Fe.progress.buffer.text=Fe.progress.buffer.bar&&Fe.progress.buffer.bar.getElementsByTagName("span")[0],Fe.progress.played={},Fe.progress.played.bar=H(N.selectors.progress.played),Fe.progress.played.text=Fe.progress.played.bar&&Fe.progress.played.bar.getElementsByTagName("span")[0],Fe.volume=H(N.selectors.buttons.volume),Fe.duration=H(N.selectors.duration),Fe.currentTime=H(N.selectors.currentTime),Fe.seekTime=q(N.selectors.seekTime),!0}catch(e){return r("It looks like there is a problem with your controls html",!0),$(!0),!1}}function W(){b(Fe.container,P.selectors.container.replace(".",""),Fe.supported.full)}function $(e){e?Fe.media.setAttribute("controls",""):Fe.media.removeAttribute("controls")}function z(e){var t=N.i18n.play;"undefined"!=typeof N.title&&N.title.length&&(t+=", "+N.title),Fe.supported.full&&Fe.buttons.play&&Fe.buttons.play.setAttribute("aria-label",t),e instanceof HTMLElement&&e.setAttribute("title",N.i18n.frameTitle.replace("{title}",N.title))}function K(){if(!Fe.media)return r("No audio or video element found",!0),!1;if(Fe.supported.full&&(b(Fe.container,N.classes.type.replace("{0}",Fe.type),!0),b(Fe.container,N.classes.stopped,N.autoplay),b(Fe.container,N.classes.isIos,Fe.browser.ios),b(Fe.container,N.classes.isTouch,Fe.browser.touch),"video"===Fe.type)){var e=t.createElement("div");e.setAttribute("class",N.classes.videoWrapper),u(Fe.media,e),Fe.videoContainer=e}i(N.types.embed,Fe.type)?(U(),Fe.embedId=null):N.autoplay&&ee()}function U(){for(var n=t.createElement("div"),r=Fe.embedId,a=Fe.type+"-"+Math.floor(1e4*Math.random()),s=q('[id^="'+Fe.type+'-"]'),i=s.length-1;i>=0;i--)p(s[i]);if(b(Fe.media,N.classes.videoWrapper,!0),b(Fe.media,N.classes.embedWrapper,!0),"youtube"===Fe.type)Fe.media.appendChild(n),n.setAttribute("id",a),"object"==typeof YT?J(r,n):(o(N.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){J(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Fe.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}),Fe.supported.full?(n.appendChild(l),Fe.media.appendChild(n)):Fe.media.appendChild(l),"$f"in e||o(N.urls.vimeo.api);var u=e.setInterval(function(){"$f"in e&&l.loaded&&(e.clearInterval(u),G.call(l))},50)}}function X(){_e(),z(H("iframe"))}function J(t,n){"timer"in Fe||(Fe.timer={}),Fe.embed=new YT.Player(n.id,{videoId:t,playerVars:{autoplay:0,controls:Fe.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:N.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onReady:function(t){var n=t.target;Fe.media.play=function(){n.playVideo(),Fe.media.paused=!1},Fe.media.pause=function(){n.pauseVideo(),Fe.media.paused=!0},Fe.media.stop=function(){n.stopVideo(),Fe.media.paused=!0},Fe.media.duration=n.getDuration(),Fe.media.paused=!0,Fe.media.currentTime=n.getCurrentTime(),Fe.media.muted=n.isMuted(),w(Fe.media,"timeupdate"),e.clearInterval(Fe.timer.buffering),Fe.timer.buffering=e.setInterval(function(){Fe.media.buffered=n.getVideoLoadedFraction(),w(Fe.media,"progress"),1===Fe.media.buffered&&e.clearInterval(Fe.timer.buffering)},200),X(),be()},onStateChange:function(t){var n=t.target;switch(e.clearInterval(Fe.timer.playing),t.data){case 0:Fe.media.paused=!0,w(Fe.media,"ended");break;case 1:Fe.media.paused=!1,Fe.media.seeking=!1,w(Fe.media,"play"),Fe.timer.playing=e.setInterval(function(){Fe.media.currentTime=n.getCurrentTime(),w(Fe.media,"timeupdate")},100);break;case 2:Fe.media.paused=!0,w(Fe.media,"pause")}}}})}function G(){Fe.embed=$f(this),Fe.embed.addEvent("ready",function(){Fe.media.play=function(){Fe.embed.api("play"),Fe.media.paused=!1},Fe.media.pause=function(){Fe.embed.api("pause"),Fe.media.paused=!0},Fe.media.stop=function(){Fe.embed.api("stop"),Fe.media.paused=!0},Fe.media.paused=!0,Fe.media.currentTime=0,X(),Fe.embed.api("getCurrentTime",function(e){Fe.media.currentTime=e,w(Fe.media,"timeupdate")}),Fe.embed.api("getDuration",function(e){Fe.media.duration=e,be()}),Fe.embed.addEvent("play",function(){Fe.media.paused=!1,w(Fe.media,"play")}),Fe.embed.addEvent("pause",function(){Fe.media.paused=!0,w(Fe.media,"pause")}),Fe.embed.addEvent("playProgress",function(e){Fe.media.seeking=!1,Fe.media.currentTime=e.seconds,w(Fe.media,"timeupdate")}),Fe.embed.addEvent("loadProgress",function(e){Fe.media.buffered=e.percent,w(Fe.media,"progress")}),Fe.embed.addEvent("finish",function(){Fe.media.paused=!0,w(Fe.media,"ended")})})}function Q(){if("video"===Fe.type){H(N.selectors.captions)||Fe.videoContainer.insertAdjacentHTML("afterbegin",'
'),Fe.captionsContainer=H(N.selectors.captions).querySelector("span"),Fe.usingTextTracks=!1,Fe.media.textTracks&&(Fe.usingTextTracks=!0);for(var e,t="",n=Fe.media.childNodes,a=0;a=10||"Firefox"===Fe.browser.name&&Fe.browser.version>=31||"Chrome"===Fe.browser.name&&Fe.browser.version>=43||"Safari"===Fe.browser.name&&Fe.browser.version>=7)&&(r("Detected unsupported browser for HTML5 captions - using fallback"),Fe.usingTextTracks=!1),Fe.usingTextTracks){r("TextTracks supported");for(var i=0;i=7){r("Safari 7+ detected; removing track from DOM"),s=Fe.media.getElementsByTagName("track");for(var c=0;ct?t=0:t>Fe.media.duration&&(t=Fe.media.duration);try{Fe.media.currentTime=t.toFixed(1)}catch(a){}if(i(N.types.embed,Fe.type)){switch(Fe.type){case"youtube":Fe.embed.seekTo(t);break;case"vimeo":Fe.embed.api("seekTo",t)}n&&te(),w(Fe.media,"timeupdate"),Fe.media.seeking=!0}r("Seeking to "+Fe.media.currentTime+" seconds"),S(t)}function oe(){b(Fe.container,N.classes.playing,!Fe.media.paused),b(Fe.container,N.classes.stopped,Fe.media.paused)}function ie(n){function r(){b(Fe.container,N.classes.hover,!0),e.clearTimeout(o),i||(o=e.setTimeout(function(){b(Fe.container,N.classes.hover,!1)},2e3))}function a(e){i="mouseenter"===e.type}var s=A.supportsFullScreen;n&&n.type===A.fullScreenEventName?Fe.isFullscreen=A.isFullScreen(Fe.container):s?(A.isFullScreen(Fe.container)?A.cancelFullScreen():A.requestFullScreen(Fe.container),Fe.isFullscreen=A.isFullScreen(Fe.container)):(Fe.isFullscreen=!Fe.isFullscreen,Fe.isFullscreen?(g(t,"keyup",le),t.body.style.overflow="hidden"):(h(t,"keyup",le),t.body.style.overflow="")),b(Fe.container,N.classes.fullscreen.active,Fe.isFullscreen),Fe.isFullscreen?Fe.container.setAttribute("tabindex","-1"):Fe.container.removeAttribute("tabindex"),j(Fe.isFullscreen),x(Fe.buttons.fullscreen,Fe.isFullscreen);var o,i=!1;N.fullscreen.hideControls&&(b(Fe.controls,N.classes.hover,!1),T(Fe.controls,"mouseenter mouseleave",a,Fe.isFullscreen),T(Fe.container,"mousemove",r,Fe.isFullscreen))}function le(e){27===(e.which||e.charCode||e.keyCode)&&Fe.isFullscreen&&ie()}function ue(e){if("boolean"!=typeof e&&(e=!Fe.media.muted),x(Fe.buttons.mute,e),Fe.media.muted=e,i(N.types.embed,Fe.type)){switch(Fe.type){case"youtube":Fe.embed[Fe.media.muted?"mute":"unMute"]();break;case"vimeo":Fe.embed.api("setVolume",Fe.media.muted?0:parseFloat(N.volume/10))}w(Fe.media,"volumechange")}}function ce(t){if("undefined"==typeof t&&(t=N.storage.enabled&&E().supported?e.localStorage[N.storage.key]||N.volume:N.volume),t>10&&(t=10),0>t&&(t=0),Fe.media.volume=parseFloat(t/10),N.volume=t,i(N.types.embed,Fe.type)){switch(Fe.type){case"youtube":Fe.embed.setVolume(100*Fe.media.volume);break;case"vimeo":Fe.embed.api("setVolume",Fe.media.volume)}w(Fe.media,"volumechange")}Fe.media.muted&&t>0&&ue()}function pe(){var t=Fe.media.muted?0:10*Fe.media.volume;Fe.supported.full&&Fe.volume&&(Fe.volume.value=t),N.storage.enabled&&E().supported&&e.localStorage.setItem(N.storage.key,t),b(Fe.container,N.classes.muted,0===t),Fe.supported.full&&Fe.buttons.mute&&x(Fe.buttons.mute,0===t)}function de(e){Fe.supported.full&&Fe.buttons.captions&&("boolean"!=typeof e&&(e=-1===Fe.container.className.indexOf(N.classes.captions.active)),Fe.captionsEnabled=e,x(Fe.buttons.captions,Fe.captionsEnabled),b(Fe.container,N.classes.captions.active,Fe.captionsEnabled))}function fe(e){var t="waiting"===e.type;clearTimeout(Fe.loadingTimer),Fe.loadingTimer=setTimeout(function(){b(Fe.container,N.classes.loading,t)},t?250:0)}function me(e){var t=Fe.progress.played.bar,n=Fe.progress.played.text,r=0;if(e)switch(e.type){case"timeupdate":case"seeking":r=_(Fe.media.currentTime,Fe.media.duration),"timeupdate"==e.type&&Fe.buttons.seek&&(Fe.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=Fe.progress.buffer.bar,n=Fe.progress.buffer.text,r=function(){var e=Fe.media.buffered;return e&&e.length?_(e.end(0),Fe.media.duration):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function ye(e,t){if(t){isNaN(e)&&(e=0),Fe.secs=parseInt(e%60),Fe.mins=parseInt(e/60%60),Fe.hours=parseInt(e/60/60%60);var n=parseInt(Fe.media.duration/60/60%60)>0;Fe.secs=("0"+Fe.secs).slice(-2),Fe.mins=("0"+Fe.mins).slice(-2),t.innerHTML=(n?Fe.hours+":":"")+Fe.mins+":"+Fe.secs}}function be(){if(Fe.supported.full){var e=Fe.media.duration||0;!Fe.duration&&N.displayDuration&&Fe.media.paused&&ye(e,Fe.currentTime),Fe.duration&&ye(e,Fe.duration)}}function ve(e){ye(Fe.media.currentTime,Fe.currentTime),e&&"timeupdate"==e.type&&Fe.media.seeking||me(e)}function ge(e){if("undefined"!=typeof e)return void he(e);var t;switch(Fe.type){case"youtube":t=Fe.embed.getVideoUrl();break;case"vimeo":Fe.embed.api("getVideoUrl",function(e){t=e});break;default:t=Fe.media.currentSrc}return t||""}function he(n){if(!("undefined"!=typeof n&&"sources"in n&&n.sources.length))return void r("Invalid source format",!0);if(te(),"youtube"===Fe.type?(Fe.embed.destroy(),e.clearInterval(Fe.timer.buffering),e.clearInterval(Fe.timer.playing)):"video"===Fe.type&&Fe.videoContainer&&p(Fe.videoContainer),p(Fe.media),"type"in n&&(Fe.type=n.type,"video"===Fe.type)){var a=n.sources[0];"type"in a&&i(N.types.embed,a.type)&&(Fe.type=a.type)}switch(Fe.supported=I.supported(Fe.type),Fe.type){case"video":Fe.media=t.createElement("video");break;case"audio":Fe.media=t.createElement("audio");break;case"youtube":case"vimeo":Fe.media=t.createElement("div"),Fe.embedId=n.sources[0].src}d(Fe.container,Fe.media),i(N.types.html5,Fe.type)&&(N.crossorigin&&Fe.media.setAttribute("crossorigin",""),N.autoplay&&Fe.media.setAttribute("autoplay",""),"poster"in n&&Fe.media.setAttribute("poster",n.poster),N.loop&&Fe.media.setAttribute("loop","")),Fe.container.className=Fe.originalClassName,b(Fe.container,N.classes.fullscreen.active,Fe.isFullscreen),b(Fe.container,N.classes.captions.active,Fe.captionsEnabled),W(),N.autoplay=n.autoplay||N.autoplay,i(N.types.html5,Fe.type)&&D("source",n.sources),K(),i(N.types.html5,Fe.type)&&("tracks"in n&&D("track",n.tracks),Fe.media.load(),be(),_e()),N.autoplay&&ee(),"title"in n&&(N.title=n.title,z())}function ke(e){"video"===Fe.type&&Fe.media.setAttribute("poster",e)}function Te(){function n(e){e?ee():te();var t=Fe.buttons[e?"play":"pause"],n=Fe.buttons[e?"pause":"play"];if(n){var r=v(t,N.classes.tabFocus);setTimeout(function(){n.focus(),r&&(b(t,N.classes.tabFocus,!1),b(n,N.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 Fe.buttons){var r=Fe.buttons[n];b(r,N.classes.tabFocus,r===e)}}var a="IE"==Fe.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("."+N.classes.tabFocus),N.classes.tabFocus,!1)});for(var s in Fe.buttons){var o=Fe.buttons[s];g(o,"blur",function(){b(o,"tab-focus",!1)})}k(Fe.buttons.play,"click",N.handlers.play,function(){n(!0)}),k(Fe.buttons.pause,"click",N.handlers.pause,function(){n()}),k(Fe.buttons.restart,"click",N.handlers.restart,se),k(Fe.buttons.rewind,"click",N.handlers.rewind,re),k(Fe.buttons.forward,"click",N.handlers.forward,ae),k(Fe.buttons.seek,a,N.handlers.seek,se),k(Fe.volume,a,N.handlers.volume,function(){ce(Fe.volume.value)}),k(Fe.buttons.mute,"click",N.handlers.mute,ue),k(Fe.buttons.fullscreen,"click",N.handlers.fullscreen,ie),A.supportsFullScreen&&g(t,A.fullScreenEventName,ie),g(Fe.media,"timeupdate seeking",ve),g(Fe.media,"timeupdate",S),g(Fe.media,"loadedmetadata",be),g(Fe.buttons.captions,"click",de),g(Fe.media,"ended",function(){"video"===Fe.type&&(Fe.captionsContainer.innerHTML=""),oe()}),g(Fe.media,"progress playing",me),g(Fe.media,"volumechange",pe),g(Fe.media,"play pause",oe),g(Fe.media,"waiting canplay seeked",fe),"video"===Fe.type&&N.click&&g(Fe.videoContainer,"click",function(){Fe.media.paused?ee():Fe.media.ended?(se(),ee()):te()})}function we(){if(!Fe.init)return null;if(Fe.container.setAttribute("class",y(N.selectors.container)),Fe.init=!1,p(H(N.selectors.controls.wrapper)),"youtube"===Fe.type)return void Fe.embed.destroy();"video"===Fe.type&&(p(H(N.selectors.captions)),c(Fe.videoContainer)),$(!0);var e=Fe.media.cloneNode(!0);Fe.media.parentNode.replaceChild(e,Fe.media)}function xe(){if(Fe.init)return null;A=C(),Fe.browser=a(),Fe.media=Fe.container.querySelectorAll("audio, video, div")[0],Fe.originalClassName=Fe.container.className;var e=Fe.media.tagName.toLowerCase();if("div"===e?(Fe.type=Fe.media.getAttribute("data-type"),Fe.embedId=Fe.media.getAttribute("data-video-id"),Fe.media.removeAttribute("data-type"),Fe.media.removeAttribute("data-video-id")):(Fe.type=e,N.crossorigin=null!==Fe.media.getAttribute("crossorigin"),N.autoplay=N.autoplay||null!==Fe.media.getAttribute("autoplay"),N.loop=N.loop||null!==Fe.media.getAttribute("loop")),Fe.supported=I.supported(Fe.type),W(),!Fe.supported.basic)return!1;if(r(Fe.browser.name+" "+Fe.browser.version),K(),i(N.types.html5,Fe.type)){if(!Fe.supported.full)return void(Fe.init=!0);_e(),z()}Fe.init=!0}function _e(){return Fe.supported.full?(q(N.selectors.controls.wrapper).length||B(),$(),void(Y()&&(Z(),Te(),Q(),ce(),pe(),ve(),oe()))):(r("No full support for this media type ("+Fe.type+")",!0),p(H(N.selectors.controls.wrapper)),void $(!0))}var Fe=this;return Fe.container=F,xe(),Fe.init?{media:Fe.media,play:ee,pause:te,restart:se,rewind:re,forward:ae,seek:se,source:ge,poster:ke,setVolume:ce,togglePlay:ne,toggleMute:ue,toggleCaptions:de,toggleFullscreen:ie,isFullscreen:function(){return Fe.isFullscreen||!1},support:function(e){return s(Fe,e)},destroy:we,restore:xe}:{}}var A,N,I={},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:"https://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js"},youtube:{api:"https://www.youtube.com/iframe_api"}}};return I.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}},I.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)),N=F(P,n),!N.enabled||!I.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 S(s);s.plyr=Object.keys(o).length?o:!1,"function"==typeof N.onSetup&&N.onSetup.apply(s.plyr)}r.push(s.plyr)}return r},I}); \ No newline at end of file +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define(null,function(){t(e,document)}):e.plyr=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(){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 r(e,t){var n=e.media;if("video"==e.type)switch(t){case"video/webm":return!(!n.canPlayType||!n.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/,""));case"video/mp4":return!(!n.canPlayType||!n.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/,""));case"video/ogg":return!(!n.canPlayType||!n.canPlayType('video/ogg; codecs="theora"').replace(/no/,""))}else if("audio"==e.type)switch(t){case"audio/mpeg":return!(!n.canPlayType||!n.canPlayType("audio/mpeg;").replace(/no/,""));case"audio/ogg":return!(!n.canPlayType||!n.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/,""));case"audio/wav":return!(!n.canPlayType||!n.canPlayType('audio/wav; codecs="1"').replace(/no/,""))}return!1}function a(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 s(e,t){return Array.prototype.indexOf&&-1!=e.indexOf(t)}function o(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function i(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,a=e[n],s=a.parentNode,o=a.nextSibling;r.appendChild(a),o?s.insertBefore(r,o):s.appendChild(r)}}function l(e){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function u(e){e&&e.parentNode.removeChild(e)}function c(e,t){e.insertBefore(t,e.firstChild)}function p(e,t){for(var n in t)e.setAttribute(n,"boolean"==typeof t[n]&&t[n]?"":t[n])}function d(e,n,r){var a=t.createElement(e);p(a,r),c(n,a)}function f(e){return e.replace(".","")}function m(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var r=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=r+(n?" "+t:"")}}function y(e,t){return e?e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className):!1}function b(e,t,n){var r;return function(){function a(){n||e.apply(s,o),r=null}var s=this,o=arguments;r?clearTimeout(r):n&&e.apply(s,o),r=setTimeout(a,t||100)}}function v(e,t,n){e&&k(e,t,n,!0)}function g(e,t,n){e&&k(e,t,n,!1)}function h(e,t,n,r){v(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])})}function k(e,t,n,r){var a=t.split(" ");if(e instanceof NodeList)for(var s=0;sr;r++){var a=e[r];for(var s in a)a[s]&&a[s].constructor&&a[s].constructor===Object?(t[s]=t[s]||{},_(t[s],a[s])):t[s]=a[s]}return t}}function F(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit moz o ms khtml".split(" ");if("undefined"!=typeof t.cancelFullScreen)e.supportsFullScreen=!0;else for(var r=0,a=n.length;a>r;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 C(){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(k,_){function E(t,n){_.debug&&e.console&&console[n?"warn":"log"](t)}function N(){var e=[];return s(_.controls,"play-large")&&e.push('"),e.push('
'),s(_.controls,"restart")&&e.push('"),s(_.controls,"rewind")&&e.push('"),s(_.controls,"play")&&e.push('",'"),s(_.controls,"fast-forward")&&e.push('"),s(_.controls,"progress")&&(e.push('','','','',"0% "+_.i18n.played,"",'',"0% "+_.i18n.buffered,""),_.tooltips.seek&&e.push('00:00'),e.push("")),s(_.controls,"current-time")&&e.push('',''+_.i18n.currentTime+"",'00:00',""),s(_.controls,"duration")&&e.push('',''+_.i18n.duration+"",'00:00',""),s(_.controls,"mute")&&e.push('"),s(_.controls,"volume")&&e.push('",''),s(_.controls,"captions")&&e.push('"),s(_.controls,"fullscreen")&&e.push('"),e.push("
"),e.join("")}function I(){if(Ee.supported.full&&("audio"!=Ee.type||_.fullscreen.allowAudio)&&_.fullscreen.enabled){var e=S.supportsFullScreen;e||_.fullscreen.fallback&&!R()?(E((e?"Native":"Fallback")+" fullscreen enabled"),m(Ee.container,_.classes.fullscreen.enabled,!0)):E("Fullscreen not supported and fallback disabled"),x(Ee.buttons.fullscreen,!1),j()}}function P(){if("video"===Ee.type){q(_.selectors.captions)||Ee.videoContainer.insertAdjacentHTML("afterbegin",'
'),Ee.usingTextTracks=!1,Ee.media.textTracks&&(Ee.usingTextTracks=!0);for(var e,t="",n=Ee.media.childNodes,r=0;r=10||"Firefox"===Ee.browser.name&&Ee.browser.version>=31)&&(E("Detected browser with known TextTrack issues - using manual fallback"),Ee.usingTextTracks=!1),Ee.usingTextTracks){E("TextTracks supported");for(var o=0;o ");for(var r=0;rEe.captions.length-1){Ee.subcount=Ee.captions.length-1;break}Ee.media.currentTime.toFixed(1)>=n(Ee.captions[Ee.subcount][0])&&Ee.media.currentTime.toFixed(1)<=r(Ee.captions[Ee.subcount][0])?(Ee.currentCaption=Ee.captions[Ee.subcount][1],M(Ee.currentCaption)):M()}}function O(){Ee.buttons.captions&&(m(Ee.container,_.classes.captions.enabled,!0),_.captions.defaultActive&&(m(Ee.container,_.classes.captions.active,!0),x(Ee.buttons.captions,!0)))}function V(e){return Ee.container.querySelectorAll(e)}function q(e){return V(e)[0]}function R(){try{return e.self!==e.top}catch(t){return!0}}function j(){function e(e){9===e.which&&Ee.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=V("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];v(Ee.container,"keydown",e)}function H(e,t){if("string"==typeof t)d(e,Ee.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)d(e,Ee.media,t[n])}function D(){var e=_.html;E("Injecting custom controls"),e||(e=N()),e=o(e,"{seektime}",_.seekTime),e=o(e,"{id}",Math.floor(1e4*Math.random()));var n;if(null!==_.selectors.controls.container&&(n=_.selectors.controls.container,"string"==typeof selector&&(n=t.querySelector(n))),n instanceof HTMLElement||(n=Ee.container),n.insertAdjacentHTML("beforeend",e),_.tooltips.controls)for(var r=V([_.selectors.controls.wrapper," ",_.selectors.labels," .",_.classes.hidden].join("")),a=r.length-1;a>=0;a--){var s=r[a];m(s,_.classes.hidden,!1),m(s,_.classes.tooltip,!0)}}function B(){try{return Ee.controls=q(_.selectors.controls.wrapper),Ee.buttons={},Ee.buttons.seek=q(_.selectors.buttons.seek),Ee.buttons.play=V(_.selectors.buttons.play),Ee.buttons.pause=q(_.selectors.buttons.pause),Ee.buttons.restart=q(_.selectors.buttons.restart),Ee.buttons.rewind=q(_.selectors.buttons.rewind),Ee.buttons.forward=q(_.selectors.buttons.forward),Ee.buttons.fullscreen=q(_.selectors.buttons.fullscreen),Ee.buttons.volume=q(_.selectors.buttons.volume),Ee.buttons.mute=q(_.selectors.buttons.mute),Ee.buttons.captions=q(_.selectors.buttons.captions),Ee.checkboxes=V('[type="checkbox"]'),Ee.progress={},Ee.progress.container=q(_.selectors.progress.container),Ee.progress.buffer={},Ee.progress.buffer.bar=q(_.selectors.progress.buffer),Ee.progress.buffer.text=Ee.progress.buffer.bar&&Ee.progress.buffer.bar.getElementsByTagName("span")[0],Ee.progress.played={},Ee.progress.played.bar=q(_.selectors.progress.played),Ee.progress.played.text=Ee.progress.played.bar&&Ee.progress.played.bar.getElementsByTagName("span")[0],Ee.progress.tooltip=Ee.progress.container&&Ee.progress.container.querySelector("."+_.classes.tooltip),Ee.volume=q(_.selectors.buttons.volume),Ee.duration=q(_.selectors.duration),Ee.currentTime=q(_.selectors.currentTime),Ee.seekTime=V(_.selectors.seekTime),!0}catch(e){return E("It looks like there is a problem with your controls html",!0),$(!0),!1}}function Y(){m(Ee.container,_.selectors.container.replace(".",""),Ee.supported.full)}function $(e){e?Ee.media.setAttribute("controls",""):Ee.media.removeAttribute("controls")}function W(e){var t=_.i18n.play;if("undefined"!=typeof _.title&&_.title.length&&(t+=", "+_.title),Ee.supported.full&&Ee.buttons.play)for(var n=Ee.buttons.play.length-1;n>=0;n--)Ee.buttons.play[n].setAttribute("aria-label",t);e instanceof HTMLElement&&e.setAttribute("title",_.i18n.frameTitle.replace("{title}",_.title))}function z(){if(!Ee.media)return E("No audio or video element found",!0),!1;if(Ee.supported.full&&(m(Ee.container,_.classes.type.replace("{0}",Ee.type),!0),m(Ee.container,_.classes.stopped,_.autoplay),m(Ee.container,_.classes.isIos,Ee.browser.ios),m(Ee.container,_.classes.isTouch,Ee.browser.touch),"video"===Ee.type)){var e=t.createElement("div");e.setAttribute("class",_.classes.videoWrapper),i(Ee.media,e),Ee.videoContainer=e}s(_.types.embed,Ee.type)&&(K(),Ee.embedId=null)}function K(){for(var n=t.createElement("div"),r=Ee.embedId,s=Ee.type+"-"+Math.floor(1e4*Math.random()),o=V('[id^="'+Ee.type+'-"]'),i=o.length-1;i>=0;i--)u(o[i]);if(m(Ee.media,_.classes.videoWrapper,!0),m(Ee.media,_.classes.embedWrapper,!0),"youtube"===Ee.type)Ee.media.appendChild(n),n.setAttribute("id",s),"object"==typeof YT?X(r,n):(a(_.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){X(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Ee.type){var l=t.createElement("iframe");l.loaded=!1,v(l,"load",function(){l.loaded=!0}),p(l,{src:"https://player.vimeo.com/video/"+r+"?player_id="+s+"&api=1&badge=0&byline=0&portrait=0&title=0",id:s,webkitallowfullscreen:"",mozallowfullscreen:"",allowfullscreen:"",frameborder:0}),Ee.supported.full?(n.appendChild(l),Ee.media.appendChild(n)):Ee.media.appendChild(l),"$f"in e||a(_.urls.vimeo.api);var c=e.setInterval(function(){"$f"in e&&l.loaded&&(e.clearInterval(c),J.call(l))},50)}}function U(){Ee.container.plyr.embed=Ee.embed,Ce(),W(q("iframe"))}function X(t,n){"timer"in Ee||(Ee.timer={}),Ee.embed=new YT.Player(n.id,{videoId:t,playerVars:{autoplay:_.autoplay?1:0,controls:Ee.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:{onReady:function(t){var n=t.target;Ee.media.play=function(){n.playVideo(),Ee.media.paused=!1},Ee.media.pause=function(){n.pauseVideo(),Ee.media.paused=!0},Ee.media.stop=function(){n.stopVideo(),Ee.media.paused=!0},Ee.media.duration=n.getDuration(),Ee.media.paused=!0,Ee.media.currentTime=n.getCurrentTime(),Ee.media.muted=n.isMuted(),_.title=n.getVideoData().title,w(Ee.media,"timeupdate"),e.clearInterval(Ee.timer.buffering),Ee.timer.buffering=e.setInterval(function(){Ee.media.buffered=n.getVideoLoadedFraction(),w(Ee.media,"progress"),1===Ee.media.buffered&&(e.clearInterval(Ee.timer.buffering),w(Ee.media,"canplaythrough"))},200),U(),me()},onStateChange:function(t){var n=t.target;switch(e.clearInterval(Ee.timer.playing),t.data){case 0:Ee.media.paused=!0,w(Ee.media,"ended");break;case 1:Ee.media.paused=!1,Ee.media.seeking=!1,w(Ee.media,"play"),w(Ee.media,"playing"),Ee.timer.playing=e.setInterval(function(){Ee.media.currentTime=n.getCurrentTime(),w(Ee.media,"timeupdate")},100);break;case 2:Ee.media.paused=!0,w(Ee.media,"pause")}}}})}function J(){Ee.embed=$f(this),Ee.embed.addEvent("ready",function(){Ee.media.play=function(){Ee.embed.api("play"),Ee.media.paused=!1},Ee.media.pause=function(){Ee.embed.api("pause"),Ee.media.paused=!0},Ee.media.stop=function(){Ee.embed.api("stop"),Ee.media.paused=!0},Ee.media.paused=!0,Ee.media.currentTime=0,U(),Ee.embed.api("getCurrentTime",function(e){Ee.media.currentTime=e,w(Ee.media,"timeupdate")}),Ee.embed.api("getDuration",function(e){Ee.media.duration=e,me()}),Ee.embed.addEvent("play",function(){Ee.media.paused=!1,w(Ee.media,"play"),w(Ee.media,"playing")}),Ee.embed.addEvent("pause",function(){Ee.media.paused=!0,w(Ee.media,"pause")}),Ee.embed.addEvent("playProgress",function(e){Ee.media.seeking=!1,Ee.media.currentTime=e.seconds,w(Ee.media,"timeupdate")}),Ee.embed.addEvent("loadProgress",function(e){Ee.media.buffered=e.percent,w(Ee.media,"progress"),1===parseInt(e.percent)&&w(Ee.media,"canplaythrough")}),Ee.embed.addEvent("finish",function(){Ee.media.paused=!0,w(Ee.media,"ended")}),_.autoplay&&Ee.embed.api("play")})}function G(){"play"in Ee.media&&Ee.media.play()}function Q(){"pause"in Ee.media&&Ee.media.pause()}function Z(e){e===!0?G():e===!1?Q():Ee.media[Ee.media.paused?"play":"pause"]()}function ee(e){"number"!=typeof e&&(e=_.seekTime),ne(Ee.media.currentTime-e)}function te(e){"number"!=typeof e&&(e=_.seekTime),ne(Ee.media.currentTime+e)}function ne(e){var t=0,n=Ee.media.paused,r=re();"number"==typeof e?t=e:"object"!=typeof e||"input"!==e.type&&"change"!==e.type||(t=e.target.value/e.target.max*r),0>t?t=0:t>r&&(t=r);try{Ee.media.currentTime=t.toFixed(1)}catch(a){}if(s(_.types.embed,Ee.type)){switch(Ee.type){case"youtube":Ee.embed.seekTo(t);break;case"vimeo":Ee.embed.api("seekTo",t.toFixed(0))}n&&Q(),w(Ee.media,"timeupdate"),Ee.media.seeking=!0}E("Seeking to "+Ee.media.currentTime+" seconds"),L(t)}function re(){var e=parseInt(_.duration);return isNaN(e)?Ee.media.duration:e}function ae(){m(Ee.container,_.classes.playing,!Ee.media.paused),m(Ee.container,_.classes.stopped,Ee.media.paused),ve(Ee.media.paused)}function se(e){var n=S.supportsFullScreen;e&&e.type===S.fullScreenEventName?Ee.isFullscreen=S.isFullScreen(Ee.container):n?(S.isFullScreen(Ee.container)?S.cancelFullScreen():S.requestFullScreen(Ee.container),Ee.isFullscreen=S.isFullScreen(Ee.container)):(Ee.isFullscreen=!Ee.isFullscreen,Ee.isFullscreen?(v(t,"keyup",oe),t.body.style.overflow="hidden"):(g(t,"keyup",oe),t.body.style.overflow="")),m(Ee.container,_.classes.fullscreen.active,Ee.isFullscreen),Ee.isFullscreen?Ee.container.setAttribute("tabindex","-1"):Ee.container.removeAttribute("tabindex"),j(Ee.isFullscreen),x(Ee.buttons.fullscreen,Ee.isFullscreen),ve(!1),w(Ee.container,Ee.isFullscreen?"enterfullscreen":"exitfullscreen")}function oe(e){27===(e.which||e.charCode||e.keyCode)&&Ee.isFullscreen&&se()}function ie(e){if("boolean"!=typeof e&&(e=!Ee.media.muted),x(Ee.buttons.mute,e),Ee.media.muted=e,s(_.types.embed,Ee.type)){switch(Ee.type){case"youtube":Ee.embed[Ee.media.muted?"mute":"unMute"]();break;case"vimeo":Ee.embed.api("setVolume",Ee.media.muted?0:parseFloat(_.volume/10))}w(Ee.media,"volumechange")}}function le(t){if("undefined"==typeof t&&(t=_.volume,_.storage.enabled&&C().supported&&(t=e.localStorage.getItem(_.storage.key),e.localStorage.removeItem("plyr-volume"))),(null===t||isNaN(t))&&(t=_.volume),t>10&&(t=10),0>t&&(t=0),Ee.media.volume=parseFloat(t/10),_.volume=t,s(_.types.embed,Ee.type)){switch(Ee.type){case"youtube":Ee.embed.setVolume(100*Ee.media.volume);break;case"vimeo":Ee.embed.api("setVolume",Ee.media.volume)}w(Ee.media,"volumechange")}Ee.media.muted&&t>0&&ie()}function ue(){var t=Ee.media.muted?0:10*Ee.media.volume;Ee.supported.full&&Ee.volume&&(Ee.volume.value=t),_.storage.enabled&&C().supported&&!isNaN(t)&&e.localStorage.setItem(_.storage.key,t),m(Ee.container,_.classes.muted,0===t),Ee.supported.full&&Ee.buttons.mute&&x(Ee.buttons.mute,0===t)}function ce(e){Ee.supported.full&&Ee.buttons.captions&&("boolean"!=typeof e&&(e=-1===Ee.container.className.indexOf(_.classes.captions.active)),Ee.captionsEnabled=e,x(Ee.buttons.captions,Ee.captionsEnabled),m(Ee.container,_.classes.captions.active,Ee.captionsEnabled),w(Ee.container,Ee.captionsEnabled?"captionsenabled":"captionsdisabled"))}function pe(e){var t="waiting"===e.type;clearTimeout(Ee.timers.loading),Ee.timers.loading=setTimeout(function(){m(Ee.container,_.classes.loading,t)},t?250:0)}function de(e){var t=Ee.progress.played.bar,n=Ee.progress.played.text,r=0,a=re();if(e)switch(e.type){case"timeupdate":case"seeking":r=T(Ee.media.currentTime,a),"timeupdate"==e.type&&Ee.buttons.seek&&(Ee.buttons.seek.value=r);break;case"change":case"input":r=e.target.value;break;case"playing":case"progress":t=Ee.progress.buffer.bar,n=Ee.progress.buffer.text,r=function(){var e=Ee.media.buffered;return e&&e.length?T(e.end(0),a):"number"==typeof e?100*e:0}()}t&&(t.value=r),n&&(n.innerHTML=r)}function fe(e,t){if(t){isNaN(e)&&(e=0),Ee.secs=parseInt(e%60),Ee.mins=parseInt(e/60%60),Ee.hours=parseInt(e/60/60%60);var n=parseInt(re()/60/60%60)>0;Ee.secs=("0"+Ee.secs).slice(-2),Ee.mins=("0"+Ee.mins).slice(-2),t.innerHTML=(n?Ee.hours+":":"")+Ee.mins+":"+Ee.secs}}function me(){if(Ee.supported.full){var e=re()||0;!Ee.duration&&_.displayDuration&&Ee.media.paused&&fe(e,Ee.currentTime),Ee.duration&&fe(e,Ee.duration),be()}}function ye(e){fe(Ee.media.currentTime,Ee.currentTime),e&&"timeupdate"==e.type&&Ee.media.seeking||de(e)}function be(e){if(_.tooltips.seek&&!Ee.browser.touch){var t=Ee.progress.container.getBoundingClientRect(),n=0,r=_.classes.tooltip+"--visible";if(e)n=100/t.width*(e.pageX-t.left);else{if(!y(Ee.progress.tooltip,r))return;n=Ee.progress.tooltip.style.left.replace("%","")}0>n?n=0:n>100&&(n=100),fe(re()/100*n,Ee.progress.tooltip),Ee.progress.tooltip.style.left=n+"%",e&&s(["mouseenter","mouseleave"],e.type)&&m(Ee.progress.tooltip,r,"mouseenter"===e.type)}}function ve(t){if(_.hideControls){var n=!1;"boolean"!=typeof t&&(t&&t.type?(n="mousemove"===t.type,t=s(["mousemove","mouseenter"],t.type)):t=!1),e.clearTimeout(Ee.timers.hover),t&&m(Ee.container,_.classes.hideControls,!1),t!==!1&&Ee.media.paused||(Ee.timers.hover=e.setTimeout(function(){Ee.controls.active||m(Ee.container,_.classes.hideControls,!0)},n?2e3:500))}}function ge(e){if("undefined"!=typeof e)return void he(e);var t;switch(Ee.type){case"youtube":t=Ee.embed.getVideoUrl();break;case"vimeo":Ee.embed.api("getVideoUrl",function(e){t=e});break;default:t=Ee.media.currentSrc}return t||""}function he(n){if(!("undefined"!=typeof n&&"sources"in n&&n.sources.length))return void E("Invalid source format",!0);if(Q(),"youtube"===Ee.type?(Ee.embed.destroy(),e.clearInterval(Ee.timer.buffering),e.clearInterval(Ee.timer.playing)):"video"===Ee.type&&Ee.videoContainer&&u(Ee.videoContainer),Ee.embed=null,Te(),u(Ee.media),"type"in n&&(Ee.type=n.type,"video"===Ee.type)){var r=n.sources[0];"type"in r&&s(_.types.embed,r.type)&&(Ee.type=r.type)}switch(Ee.supported=A.supported(Ee.type),Ee.type){case"video":Ee.media=t.createElement("video");break;case"audio":Ee.media=t.createElement("audio");break;case"youtube":case"vimeo":Ee.media=t.createElement("div"),Ee.embedId=n.sources[0].src}c(Ee.container,Ee.media),"undefined"!=typeof n.autoplay&&(_.autoplay=n.autoplay),s(_.types.html5,Ee.type)&&(_.crossorigin&&Ee.media.setAttribute("crossorigin",""),_.autoplay&&Ee.media.setAttribute("autoplay",""),"poster"in n&&Ee.media.setAttribute("poster",n.poster),_.loop&&Ee.media.setAttribute("loop","")),Ee.container.className=Ee.originalClassName,m(Ee.container,_.classes.fullscreen.active,Ee.isFullscreen),m(Ee.container,_.classes.captions.active,Ee.captionsEnabled),Y(),s(_.types.html5,Ee.type)&&H("source",n.sources),z(),s(_.types.html5,Ee.type)&&("tracks"in n&&H("track",n.tracks),Ee.media.load(),Ce(),me()),_.title=n.title,W(),Ee.container.plyr.media=Ee.media}function ke(e){"video"===Ee.type&&Ee.media.setAttribute("poster",e)}function we(){function n(){var e=Ee.media.paused;e?G():Q();var t=Ee.buttons[e?"play":"pause"],n=Ee.buttons[e?"pause":"play"];if(n){var r=y(t,_.classes.tabFocus);setTimeout(function(){n.focus(),r&&(m(t,_.classes.tabFocus,!1),m(n,_.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 Ee.buttons){var r=Ee.buttons[n];m(r,_.classes.tabFocus,r===e)}}var a="IE"==Ee.browser.name?"change":"input";v(e,"keyup",function(e){var t=e.keyCode?e.keyCode:e.which;9==t&&r()}),v(t.body,"click",function(){m(q("."+_.classes.tabFocus),_.classes.tabFocus,!1)});for(var s in Ee.buttons){var o=Ee.buttons[s];v(o,"blur",function(){m(o,"tab-focus",!1)})}h(Ee.buttons.play,"click",_.listeners.play,n),h(Ee.buttons.pause,"click",_.listeners.pause,n),h(Ee.buttons.restart,"click",_.listeners.restart,ne),h(Ee.buttons.rewind,"click",_.listeners.rewind,ee),h(Ee.buttons.forward,"click",_.listeners.forward,te),h(Ee.buttons.seek,a,_.listeners.seek,ne),h(Ee.volume,a,_.listeners.volume,function(){le(Ee.volume.value)}),h(Ee.buttons.mute,"click",_.listeners.mute,ie),h(Ee.buttons.fullscreen,"click",_.listeners.fullscreen,se),S.supportsFullScreen&&v(t,S.fullScreenEventName,se),v(Ee.buttons.captions,"click",ce),v(Ee.progress.container,"mouseenter mouseleave mousemove",be),_.hideControls&&(v(Ee.container,"mouseenter mouseleave",ve),v(Ee.container,"mousemove",b(ve,500,!0)),v(Ee.controls,"mouseenter mouseleave",function(e){Ee.controls.active="mouseenter"===e.type}))}function xe(){v(Ee.media,"timeupdate seeking",ye),v(Ee.media,"timeupdate",L),v(Ee.media,"durationchange loadedmetadata",me),v(Ee.media,"ended",function(){"video"===Ee.type&&M(),ae()}),v(Ee.media,"progress playing",de),v(Ee.media,"volumechange",ue),v(Ee.media,"play pause",ae),v(Ee.media,"waiting canplay seeked",pe),_.clickToPlay&&(Ee.videoContainer.style.cursor="pointer",v(Ee.media,"click",function(){Ee.media.paused?G():Ee.media.ended?(ne(),G()):Q()})),v(Ee.media,_.events.join(" "),function(e){w(Ee.container,e.type)})}function Te(){if(s(_.types.html5,Ee.type)){Ee.media.setAttribute("src","");for(var e=Ee.media.querySelectorAll("source"),t=0;tCaptions OffCaptions OnEnter FullscreenExit FullscreenFast ForwardMutedPausePlayRewindVolume \ No newline at end of file + \ No newline at end of file diff --git a/docs/dist/docs.css b/docs/dist/docs.css index a6f5a858..1de7278b 100644 --- a/docs/dist/docs.css +++ b/docs/dist/docs.css @@ -1 +1 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */a.logo,img,legend{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}[hidden],template{display:none}body,figure,li,ul{margin:0}body,h1,h2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}body,small{padding:0 10px}li,nav ul,ul{list-style:none;padding:0}legend,li,nav ul,ul{padding:0}.btn__bar,sub,sup{position:relative}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0;text-decoration:none;color:#3498db;border-bottom:1px dotted currentColor;transition:background .3s ease,color .3s ease,border .3s ease}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}.btn__bar,nav li{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}.btn__bar::before,.btn__count::before{content:"";top:50%}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:600}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{font-size:14px;font-size:.875rem}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.color--vimeo{color:#19b7ed}.color--youtube{color:#cc181e}*,::after,::before{box-sizing:border-box}.btn__bar ul,nav li{display:inline-block}html{height:100%;font-size:100%;background:linear-gradient(#fff,#f2f5f7) fixed}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}section{padding-bottom:20px}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}section{padding-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}.btn:not(.btn-large) .icon{width:16px;height:16px}nav ul{margin:0;font-size:0}nav li{margin-top:10px;font-size:16px;font-size:1rem}nav li+li{margin-left:20px}.btn__bar{margin:0 auto 20px;max-width:1200px}.btn__bar::before{position:absolute;left:0;right:0;height:1px;background:#dbe3e8}.btn__bar ul{position:relative;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn__bar li{margin:0}.btn__bar li:first-child .btn{border-radius:4px 0 0 4px}.btn__bar li:last-child .btn{border-radius:0 4px 4px 0}.btn__bar li+li .btn{margin-left:-1px}.btn__bar li.active .btn{position:relative;z-index:1}.btn__bar li.active .btn .icon{color:inherit}.btn__bar li.active+li .btn:hover{z-index:0}.btn__bar .btn{position:relative;display:block;border-radius:0}.btn__bar .btn:focus,.btn__bar .btn:hover{z-index:1}@media (min-width:560px){.btn__bar{margin-bottom:40px}}.btn,.btn__count{display:inline-block;vertical-align:middle;border-radius:4px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 12px;background:linear-gradient(#f8fafb,#e9eef1);border:1px solid #cbd0d3;box-shadow:0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .1s ease,color .1s ease;font-size:14px;font-size:.875rem}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn--large{padding:10px 20px;font-size:16px;font-size:1rem}.btn--primary,.btn__bar li.active .btn{background-image:linear-gradient(#3498db,#258cd1);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn--primary:focus,.btn--primary:hover{color:#fff;border-color:#196090}.btn--youtube .icon{color:#cc181e}.btn--vimeo .icon{color:#19b7ed}.btn--twitter .icon{color:#4BAAF4}.btn__count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn__count::before{position:absolute;display:block;width:8px;height:8px;left:1px;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}section{margin:0 auto 20px;max-width:1200px}.plyr__video-embed,video{border-radius:4px;max-width:100%;vertical-align:middle}.plyr__video-embed{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.plyr{margin:0 auto}.plyr__controls{border-radius:0 0 4px 4px}.plyr .plyr__video-embed,.plyr video{border-radius:4px 4px 0 0}.plyr--fullscreen,.plyr--fullscreen-active{max-width:none}.plyr--fullscreen .plyr-controls,.plyr--fullscreen iframe,.plyr--fullscreen video,.plyr--fullscreen-active .plyr-controls,.plyr--fullscreen-active iframe,.plyr--fullscreen-active video{border-radius:0}.plyr--fullscreen iframe,.plyr--fullscreen-active iframe{-webkit-mask-image:none}.plyr--audio{max-width:520px}.plyr--audio .plyr__controls{border-radius:4px}.plyr--audio .plyr__progress{border-radius:4px 4px 0 0;overflow:hidden}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block} \ No newline at end of file +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */a.logo,img,legend{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}body,small{padding:0 10px}body,figure,li,ul{margin:0}[hidden],template{display:none}li,nav ul,ul{list-style:none;padding:0}legend,li,nav ul,ul{padding:0}.btn__bar,sub,sup{position:relative}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0;text-decoration:none;color:#3498db;border-bottom:1px dotted currentColor;transition:background .3s ease,color .3s ease,border .3s ease}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}.btn__bar,nav li{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}.btn__bar::before,.btn__count::before{content:"";top:50%}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}html{font-size:100%;height:100%;background:linear-gradient(#fff,#f2f5f7) fixed}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b;font-weight:500}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:700}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{font-size:14px;font-size:.875rem}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.color--vimeo{color:#19b7ed}.color--youtube{color:#cc181e}*,::after,::before{box-sizing:border-box}.btn__bar ul,nav li{display:inline-block}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}section{padding-bottom:20px}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}section{padding-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}.btn:not(.btn-large) .icon{width:16px;height:16px}nav ul{margin:0;font-size:0}nav li{margin-top:10px;font-size:16px;font-size:1rem}nav li+li{margin-left:20px}.btn__bar{margin:0 auto 20px;max-width:1200px}.btn__bar::before{position:absolute;left:0;right:0;height:1px;background:#dbe3e8}.btn__bar ul{position:relative;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn__bar li{margin:0}.btn__bar li:first-child .btn{border-radius:4px 0 0 4px}.btn__bar li:last-child .btn{border-radius:0 4px 4px 0}.btn__bar li+li .btn{margin-left:-1px}.btn__bar li.active .btn{position:relative;z-index:1}.btn__bar li.active .btn .icon{color:inherit}.btn__bar li.active+li .btn:hover{z-index:0}.btn__bar .btn{position:relative;display:block;border-radius:0}.btn__bar .btn:focus,.btn__bar .btn:hover{z-index:1}@media (min-width:560px){.btn__bar{margin-bottom:40px}}.btn,.btn__count{display:inline-block;vertical-align:middle;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn{padding:10px 12px;background:linear-gradient(#f8fafb,#e9eef1);border:1px solid #cbd0d3;box-shadow:0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .1s ease,color .1s ease;font-size:14px;font-size:.875rem}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn--large{padding:10px 20px;font-size:16px;font-size:1rem}.btn--primary,.btn__bar li.active .btn{background-image:linear-gradient(#3498db,#258cd1);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn--primary:focus,.btn--primary:hover{color:#fff;border-color:#196090}.btn--youtube .icon{color:#cc181e}.btn--vimeo .icon{color:#19b7ed}.btn--twitter .icon{color:#4BAAF4}.btn__count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn__count::before{position:absolute;display:block;width:8px;height:8px;left:1px;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}section{margin:0 auto 20px;max-width:1200px}.plyr__video-embed,video{max-width:100%;vertical-align:middle}.plyr__video-embed{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.plyr{margin:0 auto;border-radius:4px}.plyr--fullscreen,.plyr--fullscreen-active{max-width:none}.plyr--fullscreen .plyr-controls,.plyr--fullscreen iframe,.plyr--fullscreen video,.plyr--fullscreen-active .plyr-controls,.plyr--fullscreen-active iframe,.plyr--fullscreen-active video{border-radius:0}.plyr--fullscreen iframe,.plyr--fullscreen-active iframe{-webkit-mask-image:none}.plyr--audio{max-width:520px}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block} \ No newline at end of file diff --git a/docs/dist/docs.js b/docs/dist/docs.js index 5ee05293..3cc174d5 100644 --- a/docs/dist/docs.js +++ b/docs/dist/docs.js @@ -1 +1 @@ -"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var n,s=arguments.length;for(n=0;s>n;n++)e=arguments[n],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:n.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",n="prototype",s=e.Element[n],i=Object,r=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},o=Array[n].indexOf||function(e){for(var t=0,n=this.length;n>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return o.call(e,t)},l=function(e){for(var t=r.call(e.getAttribute("class")||""),n=t?t.split(/\s+/):[],s=0,i=n.length;i>s;s++)this.push(n[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[n]=[],p=function(){return new l(this)};if(a[n]=Error[n],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,n=0,s=t.length,i=!1;do e=t[n]+"",-1===c(this,e)&&(this.push(e),i=!0);while(++n=0;r--)e(n[r].parentElement,"active",!1);e((event.target||event.srcElement).parentElement,"active",!0)}for(var n=document.querySelectorAll("[data-source]"),s=n.length-1;s>=0;s--)n[s].addEventListener("click",t)}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,n,s,i,r,o){e.GoogleAnalyticsObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,r=t.createElement(n),o=t.getElementsByTagName(n)[0],r.async=1,r.src=s,o.parentNode.insertBefore(r,o)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview")); \ No newline at end of file +"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,n=arguments.length;for(i=0;n>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",n=e.Element[i],s=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),s!==n.video&&t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview")); \ No newline at end of file diff --git a/docs/dist/docs.svg b/docs/dist/docs.svg index 6f09b44b..e69de29b 100644 --- a/docs/dist/docs.svg +++ b/docs/dist/docs.svg @@ -1 +0,0 @@ -Twitter \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index eee24458..66ea9adb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -118,10 +118,11 @@ - - - + + + + diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js index 34bb418f..11429122 100644 --- a/docs/src/js/docs.js +++ b/docs/src/js/docs.js @@ -2,7 +2,7 @@ // Docs example // ========================================================================== -/*global plyr, shr*/ +/*global plyr*/ // Setup the player plyr.setup('.js-media-player', { @@ -17,13 +17,6 @@ plyr.setup('.js-media-player', { } }); -// Setup shr -shr.setup({ - count: { - classname: 'btn__count' - } -}); - // General functions (function() { var buttons = document.querySelectorAll('[data-source]'); diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less index b4e5ddf1..05b5fb52 100644 --- a/docs/src/less/components/base.less +++ b/docs/src/less/components/base.less @@ -16,15 +16,9 @@ // Base html { height: 100%; - font-size: 100%; background: linear-gradient(#fff, @body-background) fixed; } body { - font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 1.5; - text-align: center; - color: @gray; - .font-smoothing(on); padding: 0 (@padding-base / 2); } diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less index 26c9fcd2..7970a861 100644 --- a/docs/src/less/components/buttons.less +++ b/docs/src/less/components/buttons.less @@ -92,7 +92,6 @@ nav { display: inline-block; vertical-align: middle; border-radius: @border-radius-base; - font-weight: 600; user-select: none; } diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less index 61d8d3bc..b57763fd 100644 --- a/docs/src/less/components/examples.less +++ b/docs/src/less/components/examples.less @@ -9,7 +9,6 @@ section { video, .plyr__video-embed { - border-radius: @border-radius-base; max-width: 100%; vertical-align: middle; } @@ -20,14 +19,8 @@ video, // Example players .plyr { margin: 0 auto; + border-radius: @border-radius-base; - &__controls { - border-radius: 0 0 @border-radius-base @border-radius-base; - } - video, - .plyr__video-embed { - border-radius: @border-radius-base @border-radius-base 0 0; - } &--fullscreen, &--fullscreen-active { max-width: none; @@ -45,13 +38,18 @@ video, .plyr--audio { max-width: @example-width-audio; - .plyr__controls { + /*.plyr__controls { border-radius: @border-radius-base; } .plyr__progress { border-radius: @border-radius-base @border-radius-base 0 0; - overflow: hidden; - } + + progress, + [type='range'] { + border-radius: @border-radius-base @border-radius-base 0 0; + overflow: hidden; + } + }*/ } // Style full supported player diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less index a040a022..d16a8865 100644 --- a/docs/src/less/components/type.less +++ b/docs/src/less/components/type.less @@ -2,6 +2,18 @@ // Typography // ========================================================================== +// Base +html { + font-size: 100%; +} +body { + font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 1.5; + text-align: center; + color: @gray; + font-weight: @font-weight-base; +} + // Headings h1, h2 { @@ -10,6 +22,7 @@ h2 { margin: 0 0 (@padding-base / 2); line-height: 1.2; .font-smoothing(); + font-weight: @font-weight-bold; } h1 { .font-size(@font-size-h1); diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less index 9442f17d..7372023c 100644 --- a/docs/src/less/lib/fontface.less +++ b/docs/src/less/lib/fontface.less @@ -2,17 +2,17 @@ // Fonts // ========================================================================== -@font-face { +/*@font-face { font-family: "Avenir"; src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); font-style: normal; - font-weight: 400; + font-weight: @font-weight-base; } @font-face { font-family: "Avenir"; src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); font-style: normal; - font-weight: 600; -} \ No newline at end of file + font-weight: @font-weight-bold; +}*/ \ No newline at end of file diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less index 78c812d3..4629d98d 100644 --- a/docs/src/less/variables.less +++ b/docs/src/less/variables.less @@ -22,6 +22,8 @@ @font-size-base: 16; @font-size-small: 14; @font-size-h1: 64; +@font-weight-base: 500; +@font-weight-bold: 700; // Elements @link-color: @blue; diff --git a/src/js/plyr.js b/src/js/plyr.js index 52f4b9d9..5c9e329e 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,32 +1,32 @@ // ========================================================================== // Plyr -// plyr.js v1.5.0 +// plyr.js v1.5.21 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ // ========================================================================== -(function(root, factory) { +;(function(root, factory) { 'use strict'; /*global define,module*/ - if (typeof define === 'function' && define.amd) { - // AMD - define(null, function() { factory(root, document) }); - } else if (typeof module === 'object') { + if (typeof module === 'object' && typeof module.exports === 'object') { // Node, CommonJS-like module.exports = factory(root, document); + } else if (typeof define === 'function' && define.amd) { + // AMD + define(null, function() { factory(root, document) }); } else { // Browser globals (root is window) root.plyr = factory(root, document); } -}(this, function(window, document) { +}(typeof window !== 'undefined' ? window : this, function(window, document) { 'use strict'; /*global YT,$f*/ // Globals - var fullscreen, config, api = {}; + var fullscreen, api = {}; // Default config var defaults = { @@ -36,17 +36,22 @@ loop: false, seekTime: 10, volume: 5, - click: true, - tooltips: false, + duration: null, displayDuration: true, iconPrefix: 'icon', + clickToPlay: true, + hideControls: true, + tooltips: { + controls: false, + seek: true + }, selectors: { container: '.plyr', controls: { container: null, wrapper: '.plyr__controls' }, - labels: '[data-plyr] .sr-only, label .sr-only', + labels: '[data-plyr]', buttons: { seek: '[data-plyr="seek"]', play: '[data-plyr="play"]', @@ -79,6 +84,7 @@ hover: 'plyr--hover', tooltip: 'plyr__tooltip', hidden: 'plyr__sr-only', + hideControls: 'plyr--hide-controls', isIos: 'plyr--is-ios', isTouch: 'plyr--is-touch', captions: { @@ -87,37 +93,23 @@ }, fullscreen: { enabled: 'plyr--fullscreen-enabled', - active: 'plyr--fullscreen-active', - hideControls: 'plyr--fullscreen--hide-controls' + active: 'plyr--fullscreen-active' }, 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: false }, fullscreen: { enabled: true, fallback: true, - hideControls: true, allowAudio: false }, storage: { enabled: true, - key: 'plyr_volume' + key: 'plyr' }, - controls: ['restart', 'rewind', 'play', 'fast-forward', 'current-time', 'duration', 'mute', 'volume', 'captions', 'fullscreen'], + controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'], i18n: { restart: 'Restart', rewind: 'Rewind {seektime} secs', @@ -138,160 +130,32 @@ embed: ['youtube', 'vimeo'], html5: ['video', 'audio'] }, + // URLs urls: { vimeo: { - api: 'https://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js', + api: 'https://cdn.plyr.io/froogaloop/1.0.1/plyr.froogaloop.js', }, youtube: { api: 'https://www.youtube.com/iframe_api' } - } + }, + // Custom control listeners + listeners: { + seek: null, + play: null, + pause: null, + restart: null, + rewind: null, + forward: null, + mute: null, + volume: null, + captions: null, + fullscreen: null + }, + // Events to watch on HTML5 media elements + events: ['ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'emptied'] }; - // Build the default HTML - function _buildControls() { - // Open and add the progress and seek elements - var html = [ - '
', - '
', - '', - '', - '', - '0% ' + config.i18n.played, - '', - '', - '0% ' + config.i18n.buffered, - '', - '
', - '']; - - // Restart button - if (_inArray(config.controls, 'restart')) { - html.push( - '' - ); - } - - // Rewind button - if (_inArray(config.controls, 'rewind')) { - html.push( - '' - ); - } - - // Play/pause button - if (_inArray(config.controls, 'play')) { - html.push( - '', - '' - ); - } - - // Fast forward button - if (_inArray(config.controls, 'fast-forward')) { - html.push( - '' - ); - } - - // Media current time display - if (_inArray(config.controls, 'current-time')) { - html.push( - '', - '' + config.i18n.currentTime + '', - '00:00', - '' - ); - } - - // Media duration display - if (_inArray(config.controls, 'duration')) { - html.push( - '', - '' + config.i18n.duration + '', - '00:00', - '' - ); - } - - // Close left controls - html.push( - '', - '' - ); - - // Toggle mute button - if (_inArray(config.controls, 'mute')) { - html.push( - '' - ); - } - - // Volume range control - if (_inArray(config.controls, 'volume')) { - html.push( - '', - '' - ); - } - - // Toggle captions button - if (_inArray(config.controls, 'captions')) { - html.push( - '' - ); - } - - // Toggle fullscreen button - if (_inArray(config.controls, 'fullscreen')) { - html.push( - '' - ); - } - - // Close everything - html.push( - '', - '
' - ); - - return html.join(''); - } - - // Debugging - function _log(text, warn) { - if (config.debug && window.console) { - console[(warn ? 'warn' : 'log')](text); - } - } - // Credits: http://paypal.github.io/accessible-html5-video-player/ // Unfortunately, due to mixed support, UA sniffing is required function _browserSniff() { @@ -526,39 +390,63 @@ return false; } + // Debounce + // deBouncer by hnldesign.nl + // based on code by Paul Irish and the original debouncing function from John Hann + // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ + function _debounce(func, threshold, execAsap) { + var timeout; + return function debounced () { + var obj = this, args = arguments; + function delayed () { + if (!execAsap) { + func.apply(obj, args); + } + timeout = null; + } + if (timeout) { + clearTimeout(timeout); + } + else if (execAsap) { + func.apply(obj, args); + } + timeout = setTimeout(delayed, threshold || 100); + }; + } + // Bind event function _on(element, events, callback) { if (element) { - _toggleHandler(element, events, callback, true); + _toggleListener(element, events, callback, true); } } // Unbind event function _off(element, events, callback) { if (element) { - _toggleHandler(element, events, callback, false); + _toggleListener(element, events, callback, false); } } // Bind along with custom handler - function _proxyHandler(element, eventName, userHandler, defaultHandler) { + function _proxyListener(element, eventName, userListener, defaultListener) { _on(element, eventName, function(event) { - if(userHandler) { - userHandler.apply(element, [event]); + if(userListener) { + userListener.apply(element, [event]); } - defaultHandler.apply(element, [event]); + defaultListener.apply(element, [event]); }); } - // Toggle event handler - function _toggleHandler(element, events, callback, toggle) { + // Toggle event listener + function _toggleListener(element, events, callback, toggle) { var eventList = events.split(' '); // If a nodelist is passed, call itself on each node if (element instanceof NodeList) { for (var x = 0; x < element.length; x++) { if (element[x] instanceof Node) { - _toggleHandler(element[x], arguments[1], arguments[2], arguments[3]); + _toggleListener(element[x], arguments[1], arguments[2], arguments[3]); } } return; @@ -571,23 +459,21 @@ } // Trigger event - function _triggerEvent(element, event) { + function _triggerEvent(element, eventName, properties) { // Bail if no element - if(!element || !event) { + if(!element || !eventName) { return; } - // Create faux event - var fauxEvent = document.createEvent('MouseEvents'); - - // Set the event type - fauxEvent.initEvent(event, true, true); + // create and dispatch the event + var event = new CustomEvent(eventName, properties); // Dispatch the event - element.dispatchEvent(fauxEvent); + element.dispatchEvent(event); } // Toggle aria-pressed state on a toggle button + // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles function _toggleState(target, state) { // Bail if no target if(!target) { @@ -611,19 +497,42 @@ return ((current / max) * 100).toFixed(2); } - // Deep extend/merge two Objects + // Deep extend/merge destination object with N more objects // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/ // Removed call to arguments.callee (used explicit function name instead) - function _extend(destination, source) { - for (var property in source) { - if (source[property] && source[property].constructor && source[property].constructor === Object) { - destination[property] = destination[property] || {}; - _extend(destination[property], source[property]); - } - else { - destination[property] = source[property]; + function _extend() { + // Get arguments + var objects = arguments; + + // Bail if nothing to merge + if(!objects.length) { + return; + } + + // Return first if specified but nothing to merge + if(objects.lenth == 1) { + return objects[0]; + } + + // First object is the destination + var destination = Array.prototype.shift.call(objects), + length = objects.length; + + // Loop through all objects to merge + for (var i = 0; i < length; i++) { + var source = objects[i]; + + for (var property in source) { + if (source[property] && source[property].constructor && source[property].constructor === Object) { + destination[property] = destination[property] || {}; + _extend(destination[property], source[property]); + } + else { + destination[property] = source[property]; + } } } + return destination; } @@ -732,13 +641,409 @@ } // Player instance - function Plyr(container) { + function Plyr(container, config) { var plyr = this; plyr.container = container; + plyr.timers = {}; + + // Log config options + _log(config); + + // Debugging + function _log(text, warn) { + if (config.debug && window.console) { + console[(warn ? 'warn' : 'log')](text); + } + } + + // Build the default HTML + function _buildControls() { + // Create html array + var html = []; + + // Larger overlaid play button + if (_inArray(config.controls, 'play-large')) { + html.push( + '' + ); + } + + html.push('
'); + + // Restart button + if (_inArray(config.controls, 'restart')) { + html.push( + '' + ); + } + + // Rewind button + if (_inArray(config.controls, 'rewind')) { + html.push( + '' + ); + } + + // Play Pause button + // TODO: This should be a toggle button really? + if (_inArray(config.controls, 'play')) { + html.push( + '', + '' + ); + } + + // Fast forward button + if (_inArray(config.controls, 'fast-forward')) { + html.push( + '' + ); + } + + // Progress + if (_inArray(config.controls, 'progress')) { + // Create progress + html.push('', + '', + '', + '', + '0% ' + config.i18n.played, + '', + '', + '0% ' + config.i18n.buffered, + ''); + + // Seek tooltip + if (config.tooltips.seek) { + html.push('00:00'); + } + + // Close + html.push(''); + } + + // Media current time display + if (_inArray(config.controls, 'current-time')) { + html.push( + '', + '' + config.i18n.currentTime + '', + '00:00', + '' + ); + } + + // Media duration display + if (_inArray(config.controls, 'duration')) { + html.push( + '', + '' + config.i18n.duration + '', + '00:00', + '' + ); + } + + // Toggle mute button + if (_inArray(config.controls, 'mute')) { + html.push( + '' + ); + } + + // Volume range control + if (_inArray(config.controls, 'volume')) { + html.push( + '', + '' + ); + } + + // Toggle captions button + if (_inArray(config.controls, 'captions')) { + html.push( + '' + ); + } + + // Toggle fullscreen button + if (_inArray(config.controls, 'fullscreen')) { + html.push( + '' + ); + } + + // Close everything + html.push('
'); + + return html.join(''); + } + + // Setup fullscreen + function _setupFullscreen() { + if (!plyr.supported.full) { + return; + } + + if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) { + // Check for native support + var nativeSupport = fullscreen.supportsFullScreen; + + if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) { + _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled'); + + // Add styling hook + _toggleClass(plyr.container, config.classes.fullscreen.enabled, true); + } + else { + _log('Fullscreen not supported and fallback disabled'); + } + + // Toggle state + _toggleState(plyr.buttons.fullscreen, false); + + // Setup focus trap + _focusTrap(); + } + } + + // Setup captions + function _setupCaptions() { + if (plyr.type !== 'video') { + return; + } + + // Inject the container + if (!_getElement(config.selectors.captions)) { + plyr.videoContainer.insertAdjacentHTML('afterbegin', '
'); + } + + // Determine if HTML5 textTracks is supported + plyr.usingTextTracks = false; + if (plyr.media.textTracks) { + plyr.usingTextTracks = true; + } + + // Get URL of caption file if exists + var captionSrc = '', + kind, + children = plyr.media.childNodes; + + for (var i = 0; i < children.length; i++) { + if (children[i].nodeName.toLowerCase() === 'track') { + kind = children[i].kind; + if (kind === 'captions' || kind === 'subtitles') { + captionSrc = children[i].getAttribute('src'); + } + } + } + + // Record if caption file exists or not + plyr.captionExists = true; + if (captionSrc === '') { + plyr.captionExists = false; + _log('No caption track found'); + } + else { + _log('Caption track found; URI: ' + captionSrc); + } + + // If no caption file exists, hide container for caption text + if (!plyr.captionExists) { + _toggleClass(plyr.container, config.classes.captions.enabled); + } + // If caption file exists, process captions + else { + // Turn off native caption rendering to avoid double captions + // This doesn't seem to work in Safari 7+, so the elements are removed from the dom below + var tracks = plyr.media.textTracks; + for (var x = 0; x < tracks.length; x++) { + tracks[x].mode = 'hidden'; + } + + // Enable UI + _showCaptions(plyr); + + // Disable unsupported browsers than report false positive + // Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1033144 + if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) || + (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31)) { + + // Debugging + _log('Detected browser with known TextTrack issues - using manual fallback'); + + // Set to false so skips to 'manual' captioning + plyr.usingTextTracks = false; + } + + // Rendering caption tracks + // Native support required - http://caniuse.com/webvtt + if (plyr.usingTextTracks) { + _log('TextTracks supported'); + + for (var y = 0; y < tracks.length; y++) { + var track = tracks[y]; + + if (track.kind === 'captions' || track.kind === 'subtitles') { + _on(track, 'cuechange', function() { + // Display a cue, if there is one + if (this.activeCues[0] && 'text' in this.activeCues[0]) { + _setCaption(this.activeCues[0].getCueAsHTML()); + } + else { + _setCaption(); + } + }); + } + } + } + // Caption tracks not natively supported + else { + _log('TextTracks not supported so rendering captions manually'); + + // Render captions from array at appropriate time + plyr.currentCaption = ''; + plyr.captions = []; + + if (captionSrc !== '') { + // Create XMLHttpRequest Object + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + var captions = [], + caption, + req = xhr.responseText; + + captions = req.split('\n\n'); + + for (var r = 0; r < captions.length; r++) { + caption = captions[r]; + plyr.captions[r] = []; + + // Get the parts of the captions + var parts = caption.split('\n'), + index = 0; + + // Incase caption numbers are added + if(parts[index].indexOf(":") === -1) { + index = 1; + } + + plyr.captions[r] = [parts[index], parts[index + 1]]; + } + + // Remove first element ('VTT') + plyr.captions.shift(); + + _log('Successfully loaded the caption file via AJAX'); + } + else { + _log('There was a problem loading the caption file via AJAX', true); + } + } + }; + + xhr.open('get', captionSrc, true); + + xhr.send(); + } + } + } + } + + // Set the current caption + function _setCaption(caption) { + var container = _getElement(config.selectors.captions), + content = document.createElement('span'); + + // Empty the container + container.innerHTML = ''; + + // Default to empty + if(typeof caption === 'undefined') { + caption = ''; + } + + // Set the span content + if(typeof caption === 'string') { + content.innerHTML = caption.trim(); + } + else { + content.appendChild(caption); + } + + // Set new caption text + container.appendChild(content); + + // Force redraw + var redraw = container.offsetHeight; + } // Captions functions // Seek the manual caption time and update UI function _seekManualCaptions(time) { + // Utilities for caption time codes + function _timecodeCommon(tc, pos) { + var tcpair = []; + tcpair = tc.split(' --> '); + for(var i = 0; i < tcpair.length; i++) { + // WebVTT allows for extra meta data after the timestamp line + // So get rid of this if it exists + tcpair[i] = tcpair[i].replace(/(\d+:\d+:\d+\.\d+).*/, "$1"); + } + return _subTcSecs(tcpair[pos]); + } + function _timecodeMin(tc) { + return _timecodeCommon(tc, 0); + } + function _timecodeMax(tc) { + return _timecodeCommon(tc, 1); + } + function _subTcSecs(tc) { + if (tc === null || tc === undefined) { + return 0; + } + else { + var tc1 = [], + tc2 = [], + seconds; + tc1 = tc.split(','); + tc2 = tc1[0].split(':'); + seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]); + return seconds; + } + } + // If it's not video, or we're using textTracks, bail. if (plyr.usingTextTracks || plyr.type !== 'video' || !plyr.supported.full) { return; @@ -770,21 +1075,11 @@ plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])) { plyr.currentCaption = plyr.captions[plyr.subcount][1]; - // Trim caption text - var content = plyr.currentCaption.trim(); - - // Render the caption (only if changed) - if (plyr.captionsContainer.innerHTML != content) { - // Empty caption - // Otherwise NVDA reads it twice - plyr.captionsContainer.innerHTML = ''; - - // Set new caption text - plyr.captionsContainer.innerHTML = content; - } + // Render the caption + _setCaption(plyr.currentCaption); } else { - plyr.captionsContainer.innerHTML = ''; + _setCaption(); } } @@ -803,32 +1098,6 @@ } } - // Utilities for caption time codes - function _timecodeMin(tc) { - var tcpair = []; - tcpair = tc.split(' --> '); - return _subTcSecs(tcpair[0]); - } - function _timecodeMax(tc) { - var tcpair = []; - tcpair = tc.split(' --> '); - return _subTcSecs(tcpair[1]); - } - function _subTcSecs(tc) { - if (tc === null || tc === undefined) { - return 0; - } - else { - var tc1 = [], - tc2 = [], - seconds; - tc1 = tc.split(','); - tc2 = tc1[0].split(':'); - seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]); - return seconds; - } - } - // Find all elements function _getElements(selector) { return plyr.container.querySelectorAll(selector); @@ -927,8 +1196,8 @@ container.insertAdjacentHTML('beforeend', html); // Setup tooltips - if (config.tooltips) { - var labels = _getElements(config.selectors.labels); + if (config.tooltips.controls) { + var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join('')); for (var i = labels.length - 1; i >= 0; i--) { var label = labels[i]; @@ -947,7 +1216,7 @@ // Buttons plyr.buttons = {}; plyr.buttons.seek = _getElement(config.selectors.buttons.seek); - plyr.buttons.play = _getElement(config.selectors.buttons.play); + plyr.buttons.play = _getElements(config.selectors.buttons.play); plyr.buttons.pause = _getElement(config.selectors.buttons.pause); plyr.buttons.restart = _getElement(config.selectors.buttons.restart); plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind); @@ -974,6 +1243,9 @@ plyr.progress.played.bar = _getElement(config.selectors.progress.played); plyr.progress.played.text = plyr.progress.played.bar && plyr.progress.played.bar.getElementsByTagName('span')[0]; + // Seek tooltip + plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip); + // Volume plyr.volume = _getElement(config.selectors.buttons.volume); @@ -988,7 +1260,7 @@ _log('It looks like there is a problem with your controls html', true); // Restore native video controls - _toggleControls(true); + _toggleNativeControls(true); return false; } @@ -996,11 +1268,11 @@ // Toggle style hook function _toggleStyleHook() { - _toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), plyr.supported.full); + _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full); } // Toggle native controls - function _toggleControls(toggle) { + function _toggleNativeControls(toggle) { if(toggle) { plyr.media.setAttribute('controls', ''); } @@ -1021,7 +1293,9 @@ // If there's a play button, set label if (plyr.supported.full && plyr.buttons.play) { - plyr.buttons.play.setAttribute('aria-label', label); + for (var i = plyr.buttons.play.length - 1; i >= 0; i--) { + plyr.buttons.play[i].setAttribute('aria-label', label); + } } // Set iframe title @@ -1073,12 +1347,6 @@ // Clean up plyr.embedId = null; } - else { - // Autoplay - if (config.autoplay) { - _play(); - } - } } // Setup YouTube/Vimeo @@ -1169,6 +1437,9 @@ // When embeds are ready function _embedReady() { + // Store reference to API + plyr.container.plyr.embed = plyr.embed; + // Setup the UI _setupInterface(); @@ -1189,7 +1460,7 @@ plyr.embed = new YT.Player(container.id, { videoId: videoId, playerVars: { - autoplay: 0, + autoplay: (config.autoplay ? 1 : 0), controls: (plyr.supported.full ? 0 : 1), rel: 0, showinfo: 0, @@ -1224,6 +1495,9 @@ plyr.media.currentTime = instance.getCurrentTime(); plyr.media.muted = instance.isMuted(); + // Set title + config.title = instance.getVideoData().title; + // Trigger timeupdate _triggerEvent(plyr.media, 'timeupdate'); @@ -1241,6 +1515,9 @@ // Bail if we're at 100% if (plyr.media.buffered === 1) { window.clearInterval(plyr.timer.buffering); + + // Trigger event + _triggerEvent(plyr.media, 'canplaythrough'); } }, 200); @@ -1274,6 +1551,7 @@ plyr.media.paused = false; plyr.media.seeking = false; _triggerEvent(plyr.media, 'play'); + _triggerEvent(plyr.media, 'playing'); // Poll to get playback progress plyr.timer.playing = window.setInterval(function() { @@ -1289,6 +1567,7 @@ case 2: plyr.media.paused = true; _triggerEvent(plyr.media, 'pause'); + break; } } } @@ -1339,6 +1618,7 @@ plyr.embed.addEvent('play', function() { plyr.media.paused = false; _triggerEvent(plyr.media, 'play'); + _triggerEvent(plyr.media, 'playing'); }); plyr.embed.addEvent('pause', function() { @@ -1355,6 +1635,11 @@ plyr.embed.addEvent('loadProgress', function(data) { plyr.media.buffered = data.percent; _triggerEvent(plyr.media, 'progress'); + + if(parseInt(data.percent) === 1) { + // Trigger event + _triggerEvent(plyr.media, 'canplaythrough'); + } }); plyr.embed.addEvent('finish', function() { @@ -1363,200 +1648,15 @@ }); // Always seek to 0 - //plyr.embed.api('seekTo', 0); + // plyr.embed.api('seekTo', 0); - // Prevent autoplay if needed (seek will play) - //if (!config.autoplay) { - // plyr.embed.api('pause'); - //} + // Autoplay + if (config.autoplay) { + plyr.embed.api('play'); + } }); } - // Setup captions - function _setupCaptions() { - if (plyr.type !== 'video') { - return; - } - - // Inject the container - if (!_getElement(config.selectors.captions)) { - plyr.videoContainer.insertAdjacentHTML('afterbegin', '
'); - } - - // Cache selector - plyr.captionsContainer = _getElement(config.selectors.captions).querySelector('span'); - - // Determine if HTML5 textTracks is supported - plyr.usingTextTracks = false; - if (plyr.media.textTracks) { - plyr.usingTextTracks = true; - } - - // Get URL of caption file if exists - var captionSrc = '', - kind, - children = plyr.media.childNodes; - - for (var i = 0; i < children.length; i++) { - if (children[i].nodeName.toLowerCase() === 'track') { - kind = children[i].kind; - if (kind === 'captions' || kind === 'subtitles') { - captionSrc = children[i].getAttribute('src'); - } - } - } - - // Record if caption file exists or not - plyr.captionExists = true; - if (captionSrc === '') { - plyr.captionExists = false; - _log('No caption track found'); - } - else { - _log('Caption track found; URI: ' + captionSrc); - } - - // If no caption file exists, hide container for caption text - if (!plyr.captionExists) { - _toggleClass(plyr.container, config.classes.captions.enabled); - } - // If caption file exists, process captions - else { - // Turn off native caption rendering to avoid double captions - // This doesn't seem to work in Safari 7+, so the elements are removed from the dom below - var tracks = plyr.media.textTracks; - for (var x = 0; x < tracks.length; x++) { - tracks[x].mode = 'hidden'; - } - - // Enable UI - _showCaptions(plyr); - - // Disable unsupported browsers than report false positive - if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) || - (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) || - (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) || - (plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) { - // Debugging - _log('Detected unsupported browser for HTML5 captions - using fallback'); - - // Set to false so skips to 'manual' captioning - plyr.usingTextTracks = false; - } - - // Rendering caption tracks - // Native support required - http://caniuse.com/webvtt - if (plyr.usingTextTracks) { - _log('TextTracks supported'); - - for (var y = 0; y < tracks.length; y++) { - var track = tracks[y]; - - if (track.kind === 'captions' || track.kind === 'subtitles') { - _on(track, 'cuechange', function() { - // Clear container - plyr.captionsContainer.innerHTML = ''; - - // Display a cue, if there is one - if (this.activeCues[0] && this.activeCues[0].hasOwnProperty('text')) { - plyr.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim()); - } - }); - } - } - } - // Caption tracks not natively supported - else { - _log('TextTracks not supported so rendering captions manually'); - - // Render captions from array at appropriate time - plyr.currentCaption = ''; - plyr.captions = []; - - if (captionSrc !== '') { - // Create XMLHttpRequest Object - var xhr = new XMLHttpRequest(); - - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - var records = [], - record, - req = xhr.responseText; - - records = req.split('\n\n'); - - for (var r = 0; r < records.length; r++) { - record = records[r]; - plyr.captions[r] = []; - plyr.captions[r] = record.split('\n'); - } - - // Remove first element ('VTT') - plyr.captions.shift(); - - _log('Successfully loaded the caption file via AJAX'); - } - else { - _log('There was a problem loading the caption file via AJAX', true); - } - } - }; - - xhr.open('get', captionSrc, true); - - xhr.send(); - } - } - - // If Safari 7+, removing track from DOM [see 'turn off native caption rendering' above] - if (plyr.browser.name === 'Safari' && plyr.browser.version >= 7) { - _log('Safari 7+ detected; removing track from DOM'); - - // Find all elements - tracks = plyr.media.getElementsByTagName('track'); - - // Loop through and remove one by one - for (var t = 0; t < tracks.length; t++) { - plyr.media.removeChild(tracks[t]); - } - } - } - } - - // Setup fullscreen - function _setupFullscreen() { - if (!plyr.supported.full) { - return; - } - - if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) { - // Check for native support - var nativeSupport = fullscreen.supportsFullScreen; - - if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) { - _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled'); - - // Add styling hook - _toggleClass(plyr.container, config.classes.fullscreen.enabled, true); - } - else { - _log('Fullscreen not supported and fallback disabled'); - } - - // 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); - } - } - } - // Play media function _play() { if('play' in plyr.media) { @@ -1609,7 +1709,8 @@ // The input parameter can be an event or a number function _seek(input) { var targetTime = 0, - paused = plyr.media.paused; + paused = plyr.media.paused, + duration = _getDuration(); // Explicit position if (typeof input === 'number') { @@ -1619,15 +1720,15 @@ else if (typeof input === 'object' && (input.type === 'input' || input.type === 'change')) { // It's the seek slider // Seek to the selected time - targetTime = ((input.target.value / input.target.max) * plyr.media.duration); + targetTime = ((input.target.value / input.target.max) * duration); } // Normalise targetTime if (targetTime < 0) { targetTime = 0; } - else if (targetTime > plyr.media.duration) { - targetTime = plyr.media.duration; + else if (targetTime > duration) { + targetTime = duration; } // Set the current time @@ -1646,7 +1747,8 @@ break; case 'vimeo': - plyr.embed.api('seekTo', targetTime); + // Round to nearest second for vimeo + plyr.embed.api('seekTo', targetTime.toFixed(0)); break; } @@ -1668,10 +1770,21 @@ _seekManualCaptions(targetTime); } + // Get the duration (or custom if set) + function _getDuration() { + // It should be a number, but parse it just incase + var duration = parseInt(config.duration); + + // If custom duration is funky, use regular duration + return (isNaN(duration) ? plyr.media.duration : duration); + } + // Check playing state function _checkPlaying() { _toggleClass(plyr.container, config.classes.playing, !plyr.media.paused); _toggleClass(plyr.container, config.classes.stopped, plyr.media.paused); + + _toggleControls(plyr.media.paused); } // Toggle fullscreen @@ -1729,40 +1842,11 @@ // Set button state _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen); - // Toggle controls visibility based on mouse movement and location - var hoverTimer, isMouseOver = false; + // Hide on entering full screen + _toggleControls(false); - // Show the player controls - function _showControls() { - // Set shown class - _toggleClass(plyr.container, config.classes.hover, true); - - // Clear timer every movement - window.clearTimeout(hoverTimer); - - // If the mouse is not over the controls, set a timeout to hide them - if (!isMouseOver) { - hoverTimer = window.setTimeout(function() { - _toggleClass(plyr.container, config.classes.hover, false); - }, 2000); - } - } - - // Check mouse is over the controls - function _setMouseOver (event) { - isMouseOver = (event.type === 'mouseenter'); - } - - if (config.fullscreen.hideControls) { - // Hide on entering full screen - _toggleClass(plyr.controls, config.classes.hover, false); - - // Keep an eye on the mouse location in relation to controls - _toggleHandler(plyr.controls, 'mouseenter mouseleave', _setMouseOver, plyr.isFullscreen); - - // Show the controls on mouse move - _toggleHandler(plyr.container, 'mousemove', _showControls, plyr.isFullscreen); - } + // Trigger an event + _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen'); } // Bail from faux-fullscreen @@ -1808,14 +1892,22 @@ function _setVolume(volume) { // Use default if no value specified if (typeof volume === 'undefined') { + volume = config.volume; + if (config.storage.enabled && _storage().supported) { - volume = window.localStorage[config.storage.key] || config.volume; - } - else { - volume = config.volume; + volume = window.localStorage.getItem(config.storage.key); + + // Clean up old volume + // https://github.com/Selz/plyr/issues/171 + window.localStorage.removeItem('plyr-volume'); } } + // Use config if all else fails + if(volume === null || isNaN(volume)) { + volume = config.volume; + } + // Maximum is 10 if (volume > 10) { volume = 10; @@ -1865,7 +1957,7 @@ } // Store the volume in storage - if (config.storage.enabled && _storage().supported) { + if (config.storage.enabled && _storage().supported && !isNaN(volume)) { window.localStorage.setItem(config.storage.key, volume); } @@ -1898,6 +1990,9 @@ // Add class hook _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); + + // Trigger an event + _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled'); } // Check if media is loading @@ -1905,10 +2000,10 @@ var loading = (event.type === 'waiting'); // Clear timer - clearTimeout(plyr.loadingTimer); + clearTimeout(plyr.timers.loading); // Timer to prevent flicker when seeking - plyr.loadingTimer = setTimeout(function() { + plyr.timers.loading = setTimeout(function() { _toggleClass(plyr.container, config.classes.loading, loading); }, (loading ? 250 : 0)); } @@ -1917,14 +2012,15 @@ function _updateProgress(event) { var progress = plyr.progress.played.bar, text = plyr.progress.played.text, - value = 0; + value = 0, + duration = _getDuration(); if (event) { switch (event.type) { // Video playing case 'timeupdate': case 'seeking': - value = _getPercentage(plyr.media.currentTime, plyr.media.duration); + value = _getPercentage(plyr.media.currentTime, duration); // Set seek range value only if it's a 'natural' time event if (event.type == 'timeupdate' && plyr.buttons.seek) { @@ -1950,7 +2046,7 @@ // HTML5 if (buffered && buffered.length) { - return _getPercentage(buffered.end(0), plyr.media.duration); + return _getPercentage(buffered.end(0), duration); } // YouTube returns between 0 and 1 else if (typeof buffered === 'number') { @@ -1988,7 +2084,7 @@ plyr.hours = parseInt(((time / 60) / 60) % 60); // Do we need to display hours? - var displayHours = (parseInt(((plyr.media.duration / 60) / 60) % 60) > 0); + var displayHours = (parseInt(((_getDuration() / 60) / 60) % 60) > 0); // Ensure it's two digits. For example, 03 rather than 3. plyr.secs = ('0' + plyr.secs).slice(-2); @@ -2004,7 +2100,8 @@ return; } - var duration = plyr.media.duration || 0; + // Determine duration + var duration = _getDuration() || 0; // If there's only one time display, display duration there if (!plyr.duration && config.displayDuration && plyr.media.paused) { @@ -2015,6 +2112,9 @@ if (plyr.duration) { _updateTimeDisplay(duration, plyr.duration); } + + // Update the tooltip (if visible) + _updateSeekTooltip(); } // Handle time change event @@ -2031,6 +2131,93 @@ _updateProgress(event); } + // Update hover tooltip for seeking + function _updateSeekTooltip(event) { + // Bail if setting not true + if (!config.tooltips.seek || plyr.browser.touch) { + return; + } + + // Calculate percentage + var clientRect = plyr.progress.container.getBoundingClientRect(), + percent = 0, + visible = config.classes.tooltip + '--visible'; + + // Determine percentage, if already visible + if (!event) { + if(_hasClass(plyr.progress.tooltip, visible)) { + percent = plyr.progress.tooltip.style.left.replace('%', ''); + } + else { + return; + } + } + else { + percent = ((100 / clientRect.width) * (event.pageX - clientRect.left)); + } + + // Set bounds + if (percent < 0) { + percent = 0; + } + else if (percent > 100) { + percent = 100; + } + + // Display the time a click would seek to + _updateTimeDisplay(((_getDuration() / 100) * percent), plyr.progress.tooltip); + + // Set position + plyr.progress.tooltip.style.left = percent + "%"; + + // Show/hide the tooltip + // If the event is a moues in/out and percentage is inside bounds + if(event && _inArray(['mouseenter', 'mouseleave'], event.type)) { + _toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter')); + } + } + + // Show the player controls in fullscreen mode + function _toggleControls(toggle) { + if (!config.hideControls) { + return; + } + var isMouseMove = false; + + // Default to false if no boolean + if(typeof toggle !== "boolean") { + if(toggle && toggle.type) { + isMouseMove = toggle.type === 'mousemove'; + + toggle = _inArray(['mousemove','mouseenter'], toggle.type); + } + else { + toggle = false; + } + } + + // Clear timer every movement + window.clearTimeout(plyr.timers.hover); + + // If the mouse is not over the controls, set a timeout to hide them + if(toggle) { + _toggleClass(plyr.container, config.classes.hideControls, false); + } + + // If toggle is false or if we're playing (regardless of toggle), then + // set the timer to hide the controls + if(toggle === false || !plyr.media.paused) { + plyr.timers.hover = window.setTimeout(function() { + // If the mouse is over the controls, bail + if(plyr.controls.active) { + return; + } + + _toggleClass(plyr.container, config.classes.hideControls, true); + }, isMouseMove ? 2000 : 500); + } + } + // Add common function to retrieve media source function _source(source) { // If not null or undefined, parse it @@ -2085,6 +2272,12 @@ _remove(plyr.videoContainer); } + // Remove embed object + plyr.embed = null; + + // Cancel current network requests + _cancelRequests(); + // Remove the old media _remove(plyr.media); @@ -2125,6 +2318,11 @@ // Inject the new element _prependChild(plyr.container, plyr.media); + // Autoplay the new source? + if (typeof source.autoplay !== 'undefined') { + config.autoplay = source.autoplay; + } + // Set attributes for audio video if (_inArray(config.types.html5, plyr.type)) { if (config.crossorigin) { @@ -2149,9 +2347,6 @@ _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); _toggleStyleHook(); - // Autoplay the new source? - config.autoplay = (source.autoplay || config.autoplay); - // Set new sources for html5 if (_inArray(config.types.html5, plyr.type)) { _insertChildElements('source', source.sources); @@ -2170,23 +2365,19 @@ // Load HTML5 sources plyr.media.load(); - // Display duration if available - _displayDuration(); - // Setup interface _setupInterface(); - } - // Play if autoplay attribute is present - if (config.autoplay) { - _play(); + // Display duration if available + _displayDuration(); } // Set aria title and iframe title - if ('title' in source) { - config.title = source.title; - _setTitle(); - } + config.title = source.title; + _setTitle(); + + // Reset media objects + plyr.container.plyr.media = plyr.media; } // Update poster @@ -2196,13 +2387,15 @@ } } - // Listen for events - function _listeners() { + // Listen for control events + function _controlListeners() { // IE doesn't support input event, so we fallback to change var inputEvent = (plyr.browser.name == 'IE' ? 'change' : 'input'); // Click play/pause helper - function _togglePlay(play) { + function _togglePlay() { + var play = plyr.media.paused; + // Toggle playback if (play) { _play(); @@ -2212,8 +2405,8 @@ } // Determine which buttons - var trigger = plyr.buttons[play ? "play" : "pause"], - target = plyr.buttons[play ? "pause" : "play"]; + var trigger = plyr.buttons[play ? 'play' : 'pause'], + target = plyr.buttons[play ? 'pause' : 'play']; // Setup focus and tab focus if(target) { @@ -2264,39 +2457,59 @@ } // Play - _proxyHandler(plyr.buttons.play, 'click', config.handlers.play, function() { _togglePlay(true); }); + _proxyListener(plyr.buttons.play, 'click', config.listeners.play, _togglePlay); // Pause - _proxyHandler(plyr.buttons.pause, 'click', config.handlers.pause, function() { _togglePlay(); }); + _proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, _togglePlay); // Restart - _proxyHandler(plyr.buttons.restart, 'click', config.handlers.restart, _seek); + _proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, _seek); // Rewind - _proxyHandler(plyr.buttons.rewind, 'click', config.handlers.rewind, _rewind); + _proxyListener(plyr.buttons.rewind, 'click', config.listeners.rewind, _rewind); // Fast forward - _proxyHandler(plyr.buttons.forward, 'click', config.handlers.forward, _forward); + _proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward); // Seek - _proxyHandler(plyr.buttons.seek, inputEvent, config.handlers.seek, _seek); + _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek); // Set volume - _proxyHandler(plyr.volume, inputEvent, config.handlers.volume, function() { + _proxyListener(plyr.volume, inputEvent, config.listeners.volume, function() { _setVolume(plyr.volume.value); }); // Mute - _proxyHandler(plyr.buttons.mute, 'click', config.handlers.mute, _toggleMute); + _proxyListener(plyr.buttons.mute, 'click', config.listeners.mute, _toggleMute); // Fullscreen - _proxyHandler(plyr.buttons.fullscreen, 'click', config.handlers.fullscreen, _toggleFullscreen); + _proxyListener(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, _toggleFullscreen); // Handle user exiting fullscreen by escaping etc if (fullscreen.supportsFullScreen) { _on(document, fullscreen.fullScreenEventName, _toggleFullscreen); } + // Captions + _on(plyr.buttons.captions, 'click', _toggleCaptions); + + // Seek tooltip + _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip); + + // Toggle controls visibility based on mouse movement + if (config.hideControls) { + _on(plyr.container, 'mouseenter mouseleave', _toggleControls); + _on(plyr.container, 'mousemove', _debounce(_toggleControls, 500, true)); + + // Watch for cursor over controls so they don't hide when trying to interact + _on(plyr.controls, 'mouseenter mouseleave', function(event) { + plyr.controls.active = (event.type === 'mouseenter'); + }); + } + } + + // Listen for media events + function _mediaListeners() { // Time change on media _on(plyr.media, 'timeupdate seeking', _timeUpdate); @@ -2304,16 +2517,13 @@ _on(plyr.media, 'timeupdate', _seekManualCaptions); // Display duration - _on(plyr.media, 'loadedmetadata', _displayDuration); - - // Captions - _on(plyr.buttons.captions, 'click', _toggleCaptions); + _on(plyr.media, 'durationchange loadedmetadata', _displayDuration); // Handle the media finishing _on(plyr.media, 'ended', function() { // Clear if (plyr.type === 'video') { - plyr.captionsContainer.innerHTML = ''; + _setCaption(); } // Reset UI @@ -2333,8 +2543,11 @@ _on(plyr.media, 'waiting canplay seeked', _checkLoading); // Click video - if (plyr.type === 'video' && config.click) { - _on(plyr.videoContainer, 'click', function() { + if (config.clickToPlay) { + // Set cursor + plyr.videoContainer.style.cursor = "pointer"; + + _on(plyr.media, 'click', function() { if (plyr.media.paused) { _play(); } @@ -2347,6 +2560,36 @@ } }); } + + // Proxy events to container + _on(plyr.media, config.events.join(' '), function(event) { + _triggerEvent(plyr.container, event.type); + }); + } + + // Cancel current network requests + // See https://github.com/Selz/plyr/issues/174 + function _cancelRequests() { + if(!_inArray(config.types.html5, plyr.type)) { + return; + } + + // Set empty src attribute + plyr.media.setAttribute('src', ''); + + // Remove child sources + var sources = plyr.media.querySelectorAll('source'); + for (var i = 0; i < sources.length; i++) { + _remove(sources[i]); + } + + // Load the new empty source + // This will cancel existing requests + // See https://github.com/Selz/plyr/issues/174 + plyr.media.load(); + + // Debugging + _log("Cancelled network requests for old media"); } // Destroy an instance @@ -2375,7 +2618,7 @@ // If video, we need to remove some more if (plyr.type === 'video') { - // Remove captions + // Remove captions container _remove(_getElement(config.selectors.captions)); // Remove video wrapper @@ -2383,7 +2626,7 @@ } // Restore native video controls - _toggleControls(true); + _toggleNativeControls(true); // Clone the media element to remove listeners // http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type @@ -2461,6 +2704,11 @@ // Set title on button and frame _setTitle(); + + // Autoplay + if (config.autoplay) { + _play(); + } } // Successful setup @@ -2470,38 +2718,44 @@ function _setupInterface() { // Don't setup interface if no support if (!plyr.supported.full) { - _log("No full support for this media type (" + plyr.type + ")", true); + _log('No full support for this media type (' + plyr.type + ')', true); // Remove controls _remove(_getElement(config.selectors.controls.wrapper)); // Restore native controls - _toggleControls(true); + _toggleNativeControls(true); // Bail return; } - // Inject custom controls - if (!_getElements(config.selectors.controls.wrapper).length) { + // Inject custom controls if not present + var controlsMissing = !_getElements(config.selectors.controls.wrapper).length; + if (controlsMissing) { // Inject custom controls _injectControls(); } - // Remove native controls - _toggleControls(); - // Find the elements if (!_findElements()) { return; } + // If the controls are injected, re-bind listeners for controls + if (controlsMissing) { + _controlListeners(); + } + + // Media element listeners + _mediaListeners(); + + // Remove native controls + _toggleNativeControls(); + // Setup fullscreen _setupFullscreen(); - // Listeners - _listeners(); - // Captions _setupCaptions(); @@ -2514,6 +2768,12 @@ // Update the UI _checkPlaying(); + + // Display duration + _displayDuration(); + + // Ready event + _triggerEvent(plyr.container, 'ready'); } // Initialize instance @@ -2608,32 +2868,35 @@ elements = document.querySelectorAll(defaults.selectors.container); } - // Extend the default options with user specified - config = _extend(defaults, options); - // Bail if disabled or no basic support // You may want to disable certain UAs etc - if (!config.enabled || !api.supported().basic || !elements.length) { + if (!api.supported().basic || !elements.length) { return false; } // Create a player instance for each element - for (var i = elements.length - 1; i >= 0; i--) { + for (var i = 0; i < elements.length; i++) { // Get the current element var element = elements[i]; // Setup a player instance and add to the element if (typeof element.plyr === 'undefined') { + // Create instance-specific config + var config = _extend(defaults, options, JSON.parse(element.getAttribute("data-plyr"))); + + // Bail if not enabled + if(!config.enabled) { + return; + } + // Create new instance - var instance = new Plyr(element); + var instance = new Plyr(element, config); // Set plyr to false if setup failed element.plyr = (Object.keys(instance).length ? instance : false); // Callback - if (typeof config.onSetup === 'function') { - config.onSetup.apply(element.plyr); - } + _triggerEvent(element, 'setup', { plyr: element.plyr }); } // Add to return array even if it's already setup @@ -2645,3 +2908,22 @@ return api; })); + +// Custom event polyfill +// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent +(function () { + if (typeof window.CustomEvent === 'function') { + return false; + } + + function CustomEvent (event, params) { + params = params || { bubbles: false, cancelable: false, detail: undefined }; + var evt = document.createEvent('CustomEvent'); + evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); + return evt; + } + + CustomEvent.prototype = window.Event.prototype; + + window.CustomEvent = CustomEvent; +})(); diff --git a/src/less/plyr.less b/src/less/plyr.less index fde725d7..50a530c9 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -7,129 +7,104 @@ // ------------------------------- // Colors -@blue: #3498DB; -@gray-dark: #343F4A; -@gray: #565D64; -@gray-light: #6B7D86; -@gray-lighter: #CBD0D3; -@off-white: #D6DADD; +@plyr-color-main: #3498DB; // Font sizes -@font-size-small: 14px; -@font-size-base: 16px; +@plyr-font-size-small: 14px; +@plyr-font-size-base: 16px; // Captions -@font-size-captions-base: ceil(@font-size-base * 1.25); -@font-size-captions-medium: ceil(@font-size-base * 1.5); -@font-size-captions-large: (@font-size-base * 2); +@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25); +@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5); +@plyr-font-size-captions-large: (@plyr-font-size-base * 2); // Controls -@control-spacing: 10px; -@controls-bg: #fff; -@control-bg-hover: @blue; -.contrast-control-color(@controls-bg); -.contrast-control-color-hover(@control-bg-hover); +@plyr-controls-bg: #000; +@plyr-control-color: #fff; +@plyr-control-color-hover: #fff; +@plyr-control-spacing: 10px; +@plyr-control-bg-hover: @plyr-color-main; +//.contrast-control-color(@plyr-controls-bg); +//.contrast-control-color-hover(@plyr-control-bg-hover); // Tooltips -@tooltip-bg: @controls-bg; -@tooltip-border-color: fade(@gray-dark, 10%); -@tooltip-border-width: 1px; -@tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color; -@tooltip-color: @control-color; -@tooltip-padding: @control-spacing; -@tooltip-arrow-size: 6px; -@tooltip-radius: 3px; +@plyr-tooltip-bg: @plyr-controls-bg; +@plyr-tooltip-border-color: fade(darken(@plyr-controls-bg, 75%), 10%); +@plyr-tooltip-arrow-border-color: fade(darken(@plyr-controls-bg, 75%), 20%); +@plyr-tooltip-border-width: 1px; +@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color; +@plyr-tooltip-color: @plyr-control-color; +@plyr-tooltip-padding: (@plyr-control-spacing / 2); +@plyr-tooltip-arrow-size: 4px; +@plyr-tooltip-radius: 3px; // Progress -@progress-bg: fade(@gray, 20%); -@progress-playing-bg: @blue; -@progress-buffered-bg: fade(@gray, 25%); -@progress-loading-size: 40px; -@progress-loading-bg: rgba(0,0,0, .15); +@plyr-progress-bg: fade(@plyr-control-color, 25%); +@plyr-progress-playing-bg: @plyr-color-main; +@plyr-progress-buffered-bg: fade(@plyr-control-color, 25%); +@plyr-progress-loading-size: 25px; +@plyr-progress-loading-bg: fade(#000, 15%); -// Volume -@volume-track-height: 6px; -@volume-track-bg: darken(@controls-bg, 10%); -@volume-thumb-height: (@volume-track-height * 2); -@volume-thumb-width: (@volume-track-height * 2); -@volume-thumb-bg: @control-color; -@volume-thumb-bg-focus: @control-bg-hover; +// Range sliders +@range-track-height: 8px; +@range-track-bg: fade(#fff, 25%); +@range-thumb-height: floor(@range-track-height * 2); +@range-thumb-width: floor(@range-track-height * 2); +@range-thumb-bg: #fff; +@range-thumb-border: 2px solid transparent; +@range-thumb-active-border-color: #fff; +@range-thumb-active-bg: @plyr-control-bg-hover; +@range-thumb-shadow: 0 1px 1px fade(@plyr-controls-bg, 15%); // Breakpoints -@bp-control-split: 560px; // When controls split into left/right -@bp-captions-large: 768px; // When captions jump to the larger font size +@plyr-bp-control-split: 560px; // When controls split into left/right +@plyr-bp-captions-large: 768px; // When captions jump to the larger font size // Animation // --------------------------------------- -@keyframes progress { - to { background-position: @progress-loading-size 0; } +@keyframes plyr-progress { + to { background-position: @plyr-progress-loading-size 0; } } // Mixins // ------------------------------- // Contrast -.contrast-control-color(@color: "") when (lightness(@color) >= 65%) { - @control-color: @gray-light; +/*.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) >= 65%) { + @plyr-control-color: @plyr-gray-light; } -.contrast-control-color(@color: "") when (lightness(@color) < 65%) { - @control-color: @gray-lighter; +.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) < 65%) { + @plyr-control-color: @plyr-gray-lighter; } -.contrast-control-color-hover(@color: "") when (lightness(@color) >= 65%) { - @control-color-hover: @gray; -} -.contrast-control-color-hover(@color: "") when (lightness(@color) < 65%) { - @control-color-hover: #fff; -} - -// Font smoothing -.font-smoothing(@mode: on) when (@mode = on) { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; -} -.font-smoothing(@mode: on) when (@mode = off) { - -moz-osx-font-smoothing: auto; - -webkit-font-smoothing: subpixel-antialiased; -} - -// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ -.clearfix() { - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } -} -// Tab focus styles -.tab-focus() { - outline: 1px dotted fade(@gray-dark, 80%); - outline-offset: 3px; +.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) >= 65%) { + @plyr-control-color-hover: @plyr-gray; } +.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) < 65%) { + @plyr-control-color-hover: #fff; +}*/ // styling -.volume-thumb() { - height: @volume-thumb-height; - width: @volume-thumb-width; - background: @volume-thumb-bg; +.range-track() { + height: @range-track-height; + background: @range-track-bg; border: 0; + border-radius: (@range-track-height / 2); + user-select: none; +} +.range-thumb() { + position: relative; + height: @range-thumb-height; + width: @range-thumb-width; + background: @range-thumb-bg; + border: @range-thumb-border; border-radius: 100%; - transition: background .3s ease; - cursor: ew-resize; + transition: background .2s ease, border .2s ease, transform .2s ease; + box-shadow: @range-thumb-shadow; + box-sizing: border-box; } -.volume-track() { - height: @volume-track-height; - background: @volume-track-bg; - border: 0; - border-radius: (@volume-track-height / 2); -} -.seek-thumb() { - background: transparent; - border: 0; - width: (@control-spacing * 4); - height: @control-spacing; - transform: translateX(-50%); -} -.seek-track() { - background: none; - border: 0; +.range-thumb-active() { + background: @range-thumb-active-bg; + border-color: @range-thumb-active-border-color; + transform: scale(1.25); } // Styles @@ -139,6 +114,7 @@ position: relative; max-width: 100%; min-width: 290px; + font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; // border-box everything // http://paulirish.com/2012/box-sizing-border-box-ftw/ @@ -168,12 +144,16 @@ // For video &__video-wrapper { position: relative; + background: #000; + border-radius: inherit; + //overflow: hidden; } video, audio { width: 100%; height: auto; vertical-align: middle; + border-radius: inherit; } // Container for embeds @@ -181,7 +161,7 @@ padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; - background: #000; + border-radius: inherit; iframe { position: absolute; @@ -199,79 +179,215 @@ padding-bottom: 200%; transform: translateY(-35.95%); } + + // To allow mouse events to be captured if full support + &.plyr iframe { + pointer-events: none; + } } // Captions + + // Hide default captions + video::-webkit-media-text-track-container { + display: none; + } &__captions { display: none; position: absolute; bottom: 0; left: 0; width: 100%; - padding: (@control-spacing * 2) (@control-spacing * 2) (@control-spacing * 3); + padding: (@plyr-control-spacing * 2) (@plyr-control-spacing * 2) (@plyr-control-spacing * 8); color: #fff; - font-size: @font-size-captions-base; + font-size: @plyr-font-size-captions-base; text-align: center; - .font-smoothing(); + font-weight: 400; span { border-radius: 2px; - padding: 3px 10px; - background: rgba(0,0,0, .9); + padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing; + background: fade(#000, 85%); } span:empty { display: none; } - @media (min-width: @bp-captions-large) { - font-size: @font-size-captions-medium; + @media (min-width: @plyr-bp-captions-large) { + font-size: @plyr-font-size-captions-medium; } } &--captions-active &__captions { display: block; } &--fullscreen-active &__captions { - font-size: @font-size-captions-large; + font-size: @plyr-font-size-captions-large; + } + + // Common + // Specificity is for bootstrap compatibility + input[type='range'] { + display: block; + height: @range-thumb-height; + width: 100%; + margin: 0; + padding: 0; + vertical-align: middle; + + appearance: none; + cursor: pointer; + border: none; + background: transparent; + + // Webkit + &::-webkit-slider-runnable-track { + .range-track(); + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -((@range-thumb-height - @range-track-height) / 2); + .range-thumb(); + } + + // Mozilla + &::-moz-range-track { + .range-track(); + } + &::-moz-range-thumb { + .range-thumb(); + } + &::-moz-focus-outer { + border: 0; + } + + // Microsoft + &::-ms-track { + height: @range-track-height; + background: transparent; + border: 0; + color: transparent; + } + &::-ms-fill-lower, + &::-ms-fill-upper { + .range-track(); + } + &::-ms-thumb { + .range-thumb(); + + // For some reason, Edge uses the -webkit margin above + margin-top: 0; + } + + &::-ms-tooltip { + display: none; + } + + // Focus styles + &:focus { + outline: 0; + } + &::-moz-focus-outer { + border: 0; + } + &.tab-focus:focus { + outline: 1px dotted fade(@plyr-control-color, 50%); + outline-offset: 3px; + } + + // Pressed styles + &:active { + &::-webkit-slider-thumb { + .range-thumb-active(); + } + &::-moz-range-thumb { + .range-thumb-active(); + } + &::-ms-thumb { + .range-thumb-active(); + } + } + } + + // Large play button + &__play-large { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: @plyr-control-spacing; + background: @plyr-control-bg-hover; + border: 4px solid @plyr-control-color; + border-radius: 100%; + color: @plyr-control-color; + + svg { + position: relative; + left: 2px; + width: 20px; + height: 20px; + display: block; + fill: currentColor; + } + + &:focus { + outline: 1px dotted fade(@plyr-control-color, 50%); + } + } + + // Shared + &__controls, + &__play-large { + transition: visibility .3s ease, opacity .3s ease; + } + &--playing &__play-large { + visibility: hidden; + opacity: 0; } // Playback controls &__controls { - .clearfix(); - .font-smoothing(); - position: relative; - padding: @control-spacing; - background: @controls-bg; + position: absolute; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing; + + background: linear-gradient(fade(@plyr-controls-bg, 0%), fade(@plyr-controls-bg, 25%)); + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + line-height: 1; text-align: center; - box-shadow: 0 1px 1px fade(@gray-dark, 20%); - // Layout - &--right { - display: block; - margin: @control-spacing auto 0; + // Spacing + > button, + .plyr__progress, + .plyr__time, + .plyr__volume[type="range"] { + margin-left: @plyr-control-spacing; + + &::first-child { + margin-left: 0; + } } - @media (min-width: @bp-control-split) { - &--left { - float: left; - } - &--right { - float: right; - margin-top: 0; - } + [data-plyr="mute"] { + margin-left: 0; } // Buttons button { + position: relative; display: inline-block; + flex-shrink: 0; vertical-align: middle; - margin: 0 2px; - padding: (@control-spacing / 2) @control-spacing; - overflow: hidden; + padding: (@plyr-control-spacing / 2) @plyr-control-spacing; border: 0; background: transparent; border-radius: 3px; cursor: pointer; - color: @control-color; + color: @plyr-control-color; transition: background .3s ease, color .3s ease, opacity .3s ease; svg { @@ -279,14 +395,13 @@ height: 18px; display: block; fill: currentColor; - transition: fill .3s ease; } // Hover and tab focus &.tab-focus:focus, &:hover { - background: @control-bg-hover; - color: @control-color-hover; + background: @plyr-control-bg-hover; + color: @plyr-control-color-hover; } // Default focus &:focus { @@ -300,53 +415,30 @@ .icon--captions-on { display: none; } - - // 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; - } - - // Media duration hidden on small screens - .plyr__time + .plyr__time { - display: none; - - @media (min-width: @bp-control-split) { - display: inline-block; - } - - // Add a slash in before - &::before { - content: '\2044'; - margin-right: @control-spacing; - } - } } // Tooltips &__tooltip { + visibility: hidden; position: absolute; z-index: 2; bottom: 100%; - margin-bottom: @tooltip-padding; - padding: @tooltip-padding (@tooltip-padding * 1.5); + margin-bottom: (@plyr-tooltip-padding * 2); + padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5); + pointer-events: none; opacity: 0; - background: @tooltip-bg; - box-shadow: @tooltip-shadow; - border-radius: @tooltip-radius; - color: @tooltip-color; - font-size: @font-size-small; - line-height: 1.5; - font-weight: 600; + background: @plyr-tooltip-bg; + box-shadow: @plyr-tooltip-shadow; + border-radius: @plyr-tooltip-radius; - transform: translate(-50%, (@tooltip-padding * 3)) scale(.8); + color: @plyr-tooltip-color; + font-size: @plyr-font-size-small; + line-height: 1.3; + + transform: translate(-50%, 10px) scale(.8); transform-origin: 50% 100%; - transition: transform .2s .1s ease, opacity .2s .1s ease; + transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease; // Arrows &::after, @@ -361,24 +453,26 @@ } // The border triangle &::after { - @border-arrow-size: (@tooltip-arrow-size + (@tooltip-border-width * 1)); - bottom: -(@border-arrow-size + @tooltip-border-width); - border-right: @border-arrow-size solid transparent; - border-top: @border-arrow-size solid @tooltip-border-color; - border-left: @border-arrow-size solid transparent; + @plyr-border-arrow-size: (@plyr-tooltip-arrow-size + (@plyr-tooltip-border-width * 1)); + bottom: -(@plyr-border-arrow-size + @plyr-tooltip-border-width); + border-right: @plyr-border-arrow-size solid transparent; + border-top: @plyr-border-arrow-size solid @plyr-tooltip-arrow-border-color; + border-left: @plyr-border-arrow-size solid transparent; z-index: 1; } // The background triangle &::before { - bottom: -@tooltip-arrow-size; - border-right: @tooltip-arrow-size solid transparent; - border-top: @tooltip-arrow-size solid @tooltip-bg; - border-left: @tooltip-arrow-size solid transparent; + bottom: -@plyr-tooltip-arrow-size; + border-right: @plyr-tooltip-arrow-size solid transparent; + border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg; + border-left: @plyr-tooltip-arrow-size solid transparent; z-index: 2; } } button:hover .plyr__tooltip, - button.tab-focus:focus .plyr__tooltip { + button.tab-focus:focus .plyr__tooltip, + &__tooltip--visible { + visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); } @@ -386,122 +480,116 @@ z-index: 3; } - // Common range styles - input[type='range'].tab-focus:focus { - .tab-focus(); - } - // Playback progress // element &__progress { - position: absolute; - bottom: 100%; - left: 0; - right: 0; - width: 100%; - height: @control-spacing; - background: @progress-bg; + position: relative; + flex: 1; - &--buffer[value], - &--played[value], - &--seek[type='range'] { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: @control-spacing; - margin: 0; - padding: 0; - vertical-align: top; + input[type="range"] { + position: relative; + z-index: 2; - -webkit-appearance: none; - -moz-appearance: none; - border: none; - background: transparent; - } - &--buffer[value], - &--played[value] { - &::-webkit-progress-bar { + &::-webkit-slider-runnable-track { background: transparent; } - - // Inherit from currentColor; - &::-webkit-progress-value { - background: currentColor; - } - &::-moz-progress-bar { - background: currentColor; - } - } - &--played[value] { - z-index: 2; - color: @progress-playing-bg; - } - &--buffer[value] { - color: @progress-buffered-bg; - } - - // Seek control - // element - // Specificity is for bootstrap compatibility - &--seek[type='range'] { - z-index: 4; - cursor: pointer; - outline: 0; - - // Webkit - &::-webkit-slider-runnable-track { - .seek-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - .seek-thumb(); - } - - // Mozilla &::-moz-range-track { - .seek-track(); - } - &::-moz-range-thumb { - -moz-appearance: none; - .seek-thumb(); - } - - // Microsoft - &::-ms-track { - color: transparent; - .seek-track(); + background: transparent; } &::-ms-fill-lower, &::-ms-fill-upper { - .seek-track(); - } - &::-ms-thumb { - .seek-thumb(); + background: transparent; } + } - &:focus { - outline: 0; + &--buffer[value], + &--played[value] { + position: absolute; + left: 0; + top: 50%; + width: 100%; + height: @range-track-height; + margin: -(@range-track-height / 2) 0 0; + padding: 0; + vertical-align: top; + appearance: none; + border: none; + border-radius: 100px; + + &::-webkit-progress-bar { + background: transparent; } - &::-moz-focus-outer { - border: 0; + &::-webkit-progress-value { + background: currentColor; + border-radius: 100px; + min-width: @range-track-height; } + &::-moz-progress-bar { + background: currentColor; + border-radius: 100px; + min-width: @range-track-height; + } + &::-ms-fill { + border-radius: 100px; + } + } + &--played[value] { + z-index: 1; + color: @plyr-progress-playing-bg; + background: transparent; + + &::-webkit-progress-value { + background: currentColor; + min-width: @range-track-height; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &::-moz-progress-bar { + background: currentColor; + min-width: @range-track-height; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &::-ms-fill { + min-width: @range-track-height; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + &--buffer[value] { + color: @plyr-progress-buffered-bg; + background: @range-track-bg; + + &::-webkit-progress-value { + transition: width .2s ease; + } + &::-moz-progress-bar { + transition: width .2s ease; + } + &::-ms-fill { + transition: width .2s ease; + } + } + + // Seek tooltip to show time + .plyr__tooltip { + left: 0; } } // Loading state &--loading .plyr__progress--buffer { - animation: progress 1s linear infinite; - background-size: @progress-loading-size @progress-loading-size; + animation: plyr-progress 1s linear infinite; + background-size: @plyr-progress-loading-size @plyr-progress-loading-size; background-repeat: repeat-x; - background-color: @progress-buffered-bg; + background-color: @plyr-progress-buffered-bg; background-image: linear-gradient( -45deg, - @progress-loading-bg 25%, + @plyr-progress-loading-bg 25%, transparent 25%, transparent 50%, - @progress-loading-bg 50%, - @progress-loading-bg 75%, + @plyr-progress-loading-bg 50%, + @plyr-progress-loading-bg 75%, transparent 75%, transparent); color: transparent; @@ -516,68 +604,35 @@ display: inline-block; } + // plyr time + &__time { + display: inline-block; + vertical-align: middle; + color: @plyr-control-color; + font-size: @plyr-font-size-small; + line-height: .95; + } + + // Media duration hidden on small screens + &__time + &__time { + display: none; + + @media (min-width: @plyr-bp-control-split) { + display: inline-block; + } + + // Add a slash in before + &::before { + content: '\2044'; + margin-right: @plyr-control-spacing; + } + } + // Volume control // element // Specificity is for bootstrap compatibility &__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; - cursor: pointer; - background: transparent; - border: none; - - // Webkit - &::-webkit-slider-runnable-track { - .volume-track(); - } - &::-webkit-slider-thumb { - -webkit-appearance: none; - margin-top: -((@volume-thumb-height - @volume-track-height) / 2); - .volume-thumb(); - } - - // Mozilla - &::-moz-range-track { - .volume-track(); - } - &::-moz-range-thumb { - .volume-thumb(); - } - - // Microsoft - &::-ms-track { - height: @volume-track-height; - background: transparent; - border-color: transparent; - border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0; - color: transparent; - } - &::-ms-fill-lower, - &::-ms-fill-upper { - .volume-track(); - } - &::-ms-thumb { - .volume-thumb(); - } - - &:focus { - outline: 0; - - &::-webkit-slider-thumb { - background: @volume-thumb-bg-focus; - } - &::-moz-range-thumb { - background: @volume-thumb-bg-focus; - } - &::-ms-thumb { - background: @volume-thumb-bg-focus; - } - } + max-width: 100px; } // Hide sound controls on iOS @@ -596,16 +651,16 @@ // Audio specific styles // Position the progress within the container &--audio .plyr__controls { - padding-top: (@control-spacing * 2); + padding-top: (@plyr-control-spacing * 2); } &--audio .plyr__progress { bottom: auto; top: 0; - background: @off-white; + background: #fff; } // Full screen mode - &--fullscreen, + &.plyr--fullscreen, &--fullscreen-active { position: fixed; top: 0; @@ -633,29 +688,10 @@ } // Hide controls when playing in full screen - &--fullscreen--hide-controls&--fullscreen-active&--playing { + &.plyr--hide-controls { .plyr__controls { - transform: translateY(100%) translateY(@control-spacing / 2); - transition: transform .3s .2s ease; - } - &.plyr--hover .plyr__controls { - transform: translateY(0); - } - .plyr__captions { - bottom: (@control-spacing / 2); - transition: bottom .3s .2s ease; - } - } - - // Captions - &--fullscreen .plyr__captions, - &--fullscreen-active .plyr__captions, - &--fullscreen--hide-controls&--fullscreen-active&--playing&--hover &__captions { - top: auto; - bottom: 90px; - - @media (min-width: @bp-control-split) { - bottom: 60px; + opacity: 0; + visibility: hidden; } } diff --git a/src/sprite/icon-fast-forward.svg b/src/sprite/icon-fast-forward.svg old mode 100755 new mode 100644 index 71d5d138..3ae96af6 --- a/src/sprite/icon-fast-forward.svg +++ b/src/sprite/icon-fast-forward.svg @@ -1,5 +1,7 @@ - - - Fast Forward - - + + + + + + diff --git a/src/sprite/icon-pause.svg b/src/sprite/icon-pause.svg index b4ba82e2..db51a807 100644 --- a/src/sprite/icon-pause.svg +++ b/src/sprite/icon-pause.svg @@ -1,8 +1,8 @@ - - - Pause - - - - - \ No newline at end of file + + + + + + + diff --git a/src/sprite/icon-play.svg b/src/sprite/icon-play.svg old mode 100755 new mode 100644 index f564b80f..069af73c --- a/src/sprite/icon-play.svg +++ b/src/sprite/icon-play.svg @@ -1,5 +1,7 @@ - - - Play - - + + + + + + diff --git a/src/sprite/icon-rewind.svg b/src/sprite/icon-rewind.svg index b7beaa34..fbc252d2 100644 --- a/src/sprite/icon-rewind.svg +++ b/src/sprite/icon-rewind.svg @@ -1,5 +1,7 @@ - - - Rewind - - \ No newline at end of file + + + + + +