From 92b9e3400bfaa6a2683ecd50e5e02c203759e860 Mon Sep 17 00:00:00 2001 From: Sam Date: Sat, 20 Aug 2016 23:39:18 +1000 Subject: [PATCH] Keyboard shortcuts --- changelog.md | 1 + dist/plyr.css | 2 +- dist/plyr.js | 4 +- src/js/plyr.js | 297 +++++++++++++++++++++++++--------------- src/less/plyr.less | 5 + src/less/variables.less | 2 +- src/scss/plyr.scss | 5 + src/scss/variables.scss | 2 +- 8 files changed, 204 insertions(+), 114 deletions(-) diff --git a/changelog.md b/changelog.md index e76ee513..68276840 100644 --- a/changelog.md +++ b/changelog.md @@ -25,6 +25,7 @@ And some other changes and bug fixes: - Sprite is only loaded once (fixes #259) - Fixes for Vimeo post message bugs on source change or destroy (fixes #318) - Save caption state in storage (fixes #311) +- Added keyboard shortcuts to the current focused player (with option to disable) (fixes #309) ## v1.8.12 - Vimeo keyboard focus fix (Fixes #317) diff --git a/dist/plyr.css b/dist/plyr.css index 5c6d0ac6..a06d70e9 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.plyr .plyr__video-embed iframe,.plyr__tooltip{pointer-events:none}@keyframes plyr-progress{to{background-position:25px 0}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:'San Francisco',-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;direction:ltr}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;background:0 0}.plyr input[type=range]::-webkit-slider-runnable-track{height:8px;background:0 0;border:0;border-radius:4px;-webkit-user-select:none;user-select:none}.plyr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:0 0;border:0;border-radius:4px;-moz-user-select:none;user-select:none}.plyr input[type=range]::-moz-range-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(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-upper{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none}.plyr input[type=range]::-ms-fill-lower{height:8px;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#3498db}.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(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-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--video input[type=range].tab-focus:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio input[type=range].tab-focus:focus{outline:rgba(86,93,100,.5) dotted 1px}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute!important;padding:0!important;border:0!important;height:1px!important;width:1px!important}.plyr__video-wrapper{position:relative;background:#000;border-radius:inherit;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.plyr__video-embed{padding-bottom:56.25%;height:0;overflow:hidden}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;transform:translateY(-35.95%)}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;transform:translateY(-40px);transition:transform .3s ease;color:#fff;font-size:16px;text-align:center;font-weight:400}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.7);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:150%}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--fullscreen-active .plyr__captions{font-size:32px}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}.plyr ::-webkit-media-controls{display:none}.plyr__controls{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;line-height:1;text-align:center}.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:5px}.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__time:first-child,.plyr__controls>button:first-child{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}.plyr__controls [data-plyr=pause]{margin-left:0}.plyr__controls button{position:relative;display:inline-block;-ms-flex-negative:0;flex-shrink:0;overflow:visible;vertical-align:middle;padding:7px;border:0;background:0 0;border-radius:3px;cursor:pointer;transition:background .3s ease,color .3s ease,opacity .3s ease;color:inherit}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor}.plyr__controls button:focus{outline:0}.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted{display:none}@media (min-width:480px){.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:10px}}.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none}.plyr--video .plyr__controls{position:absolute;left:0;right:0;bottom:0;padding:50px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff;transition:opacity .3s ease}.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__controls button:hover{background:#3498db;color:#fff}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;border:1px solid #dbe3e8;color:#565D64}.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__controls button:hover,.plyr__play-large{background:#3498db;color:#fff}.plyr__play-large{display:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);transition:all .3s ease}.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 .plyr__play-large{display:inline-block}.plyr--audio .plyr__play-large,.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__play-large{opacity:0;visibility:hidden}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr--captions-active .plyr__controls .icon--captions-on,.plyr--fullscreen-active .icon--exit-fullscreen,.plyr--muted .plyr__controls .icon--muted{display:block}.plyr [data-plyr=fullscreen],.plyr [data-plyr=captions],.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}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;opacity:0;background:rgba(0,0,0,.7);border-radius:3px;color:#fff;font-size:14px;line-height:1.3;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;transform:translateX(-50%);bottom:-4px;border-right:4px solid transparent;border-top:4px solid rgba(0,0,0,.7);border-left:4px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr__controls button:first-child .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls button:first-child .plyr__tooltip::before{left:16px}.plyr__controls button:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls button:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls button:first-child .plyr__tooltip--visible,.plyr__controls button:first-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:first-child:hover .plyr__tooltip,.plyr__controls button:last-child .plyr__tooltip--visible,.plyr__controls button:last-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr__progress{position:relative;display:none;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-upper{background:0 0}.plyr__progress .plyr__tooltip{left:0}.plyr .plyr__progress{display:inline-block}.plyr__progress--buffer,.plyr__progress--played,.plyr__volume--display{position:absolute;left:0;top:50%;width:100%;height:8px;margin:-4px 0 0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:100px}.plyr__progress--buffer::-webkit-progress-bar,.plyr__progress--played::-webkit-progress-bar,.plyr__volume--display::-webkit-progress-bar{background:0 0}.plyr__progress--buffer::-webkit-progress-value,.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-moz-progress-bar,.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-ms-fill,.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{border-radius:100px}.plyr__progress--played,.plyr__volume--display{z-index:1;color:#3498db;background:0 0;transition:none}.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{display:none}.plyr__progress--buffer::-webkit-progress-value{transition:width .2s ease}.plyr__progress--buffer::-moz-progress-bar{transition:width .2s ease}.plyr__progress--buffer::-ms-fill{transition:width .2s ease}.plyr--video .plyr__progress--buffer,.plyr--video .plyr__volume--display{background:rgba(255,255,255,.25)}.plyr--video .plyr__progress--buffer{color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display{background:rgba(198,214,219,.66)}.plyr--audio .plyr__progress--buffer{color:rgba(198,214,219,.66)}.plyr--loading .plyr__progress--buffer{animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-image:linear-gradient(-45deg,rgba(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--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(198,214,219,.66)}.plyr__time{display:inline-block;vertical-align:middle;font-size:14px}.plyr__time+.plyr__time{display:none}@media (min-width:768px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr__volume{display:none}.plyr .plyr__volume{-ms-flex:1;flex:1;position:relative}.plyr .plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr .plyr__volume{display:block;max-width:60px}}@media (min-width:768px){.plyr .plyr__volume{max-width:100px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr--fullscreen,.plyr--fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000;border-radius:0}.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-active.plyr--vimeo .plyr__video-wrapper,.plyr--fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)} \ No newline at end of file +.plyr input[type=range]:focus,.plyr:focus{outline:0}.plyr .plyr__video-embed iframe,.plyr__tooltip{pointer-events:none}@keyframes plyr-progress{to{background-position:25px 0}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;direction:ltr}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;background:0 0}.plyr input[type=range]::-webkit-slider-runnable-track{height:8px;background:0 0;border:0;border-radius:4px;-webkit-user-select:none;user-select:none}.plyr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:0 0;border:0;border-radius:4px;-moz-user-select:none;user-select:none}.plyr input[type=range]::-moz-range-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(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-upper{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none}.plyr input[type=range]::-ms-fill-lower{height:8px;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#3498db}.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box;margin-top:0}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--video input[type=range].tab-focus:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio input[type=range].tab-focus:focus{outline:rgba(86,93,100,.5) dotted 1px}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute!important;padding:0!important;border:0!important;height:1px!important;width:1px!important}.plyr__video-wrapper{position:relative;background:#000;border-radius:inherit;-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)}.plyr__video-embed{padding-bottom:56.25%;height:0;overflow:hidden}.plyr__video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.plyr__video-embed>div{position:relative;padding-bottom:200%;transform:translateY(-35.95%)}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;transform:translateY(-40px);transition:transform .3s ease;color:#fff;font-size:16px;text-align:center;font-weight:400}.plyr__captions span{border-radius:2px;padding:3px 10px;background:rgba(0,0,0,.7);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:150%}.plyr__captions span:empty{display:none}@media (min-width:768px){.plyr__captions{font-size:24px}}.plyr--captions-active .plyr__captions{display:block}.plyr--fullscreen-active .plyr__captions{font-size:32px}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}.plyr ::-webkit-media-controls{display:none}.plyr__controls{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;line-height:1;text-align:center}.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:5px}.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__time:first-child,.plyr__controls>button:first-child{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}.plyr__controls [data-plyr=pause]{margin-left:0}.plyr__controls button{position:relative;display:inline-block;-ms-flex-negative:0;flex-shrink:0;overflow:visible;vertical-align:middle;padding:7px;border:0;background:0 0;border-radius:3px;cursor:pointer;transition:background .3s ease,color .3s ease,opacity .3s ease;color:inherit}.plyr__controls button svg{width:18px;height:18px;display:block;fill:currentColor}.plyr__controls button:focus{outline:0}.plyr__controls .icon--captions-on,.plyr__controls .icon--exit-fullscreen,.plyr__controls .icon--muted{display:none}@media (min-width:480px){.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:10px}}.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none}.plyr--video .plyr__controls{position:absolute;left:0;right:0;bottom:0;padding:50px 10px 10px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;color:#fff;transition:opacity .3s ease}.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__controls button:hover{background:#3498db;color:#fff}.plyr--audio .plyr__controls{padding:10px;border-radius:inherit;background:#fff;border:1px solid #dbe3e8;color:#565D64}.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__controls button:hover,.plyr__play-large{background:#3498db;color:#fff}.plyr__play-large{display:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);transition:all .3s ease}.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 .plyr__play-large{display:inline-block}.plyr--audio .plyr__play-large,.plyr--playing .plyr__controls [data-plyr=play],.plyr__controls [data-plyr=pause]{display:none}.plyr--playing .plyr__play-large{opacity:0;visibility:hidden}.plyr--playing .plyr__controls [data-plyr=pause]{display:inline-block}.plyr--captions-active .plyr__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}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;opacity:0;background:rgba(0,0,0,.7);border-radius:3px;color:#fff;font-size:14px;line-height:1.3;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;transform:translateX(-50%);bottom:-4px;border-right:4px solid transparent;border-top:4px solid rgba(0,0,0,.7);border-left:4px solid transparent;z-index:2}.plyr button.tab-focus:focus .plyr__tooltip,.plyr button:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr__controls button:first-child .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls button:first-child .plyr__tooltip::before{left:16px}.plyr__controls button:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls button:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls button:first-child .plyr__tooltip--visible,.plyr__controls button:first-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:first-child:hover .plyr__tooltip,.plyr__controls button:last-child .plyr__tooltip--visible,.plyr__controls button:last-child.tab-focus:focus .plyr__tooltip,.plyr__controls button:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr__progress{position:relative;display:none;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-upper{background:0 0}.plyr__progress .plyr__tooltip{left:0}.plyr .plyr__progress{display:inline-block}.plyr__progress--buffer,.plyr__progress--played,.plyr__volume--display{position:absolute;left:0;top:50%;width:100%;height:8px;margin:-4px 0 0;padding:0;vertical-align:top;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:100px}.plyr__progress--buffer::-webkit-progress-bar,.plyr__progress--played::-webkit-progress-bar,.plyr__volume--display::-webkit-progress-bar{background:0 0}.plyr__progress--buffer::-webkit-progress-value,.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-moz-progress-bar,.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:8px}.plyr__progress--buffer::-ms-fill,.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{border-radius:100px}.plyr__progress--played,.plyr__volume--display{z-index:1;color:#3498db;background:0 0;transition:none}.plyr__progress--played::-webkit-progress-value,.plyr__volume--display::-webkit-progress-value{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-moz-progress-bar,.plyr__volume--display::-moz-progress-bar{min-width:8px;max-width:99%;border-top-right-radius:0;border-bottom-right-radius:0;transition:none}.plyr__progress--played::-ms-fill,.plyr__volume--display::-ms-fill{display:none}.plyr__progress--buffer::-webkit-progress-value{transition:width .2s ease}.plyr__progress--buffer::-moz-progress-bar{transition:width .2s ease}.plyr__progress--buffer::-ms-fill{transition:width .2s ease}.plyr--video .plyr__progress--buffer,.plyr--video .plyr__volume--display{background:rgba(255,255,255,.25)}.plyr--video .plyr__progress--buffer{color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display{background:rgba(198,214,219,.66)}.plyr--audio .plyr__progress--buffer{color:rgba(198,214,219,.66)}.plyr--loading .plyr__progress--buffer{animation:plyr-progress 1s linear infinite;background-size:25px 25px;background-repeat:repeat-x;background-image:linear-gradient(-45deg,rgba(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--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(198,214,219,.66)}.plyr__time{display:inline-block;vertical-align:middle;font-size:14px}.plyr__time+.plyr__time{display:none}@media (min-width:768px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr__volume{display:none}.plyr .plyr__volume{-ms-flex:1;flex:1;position:relative}.plyr .plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr .plyr__volume{display:block;max-width:60px}}@media (min-width:768px){.plyr .plyr__volume{max-width:100px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr--fullscreen,.plyr--fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000;border-radius:0}.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-active.plyr--vimeo .plyr__video-wrapper,.plyr--fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)} \ No newline at end of file diff --git a/dist/plyr.js b/dist/plyr.js index 6e713d47..1ebf35ac 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1,2 +1,2 @@ -!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define(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,s=navigator.userAgent,o=navigator.appName,a=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10),l=!1,u=!1,c=!1,p=!1;return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(l=!0,o="IE",a="11"):-1!==(n=s.indexOf("MSIE"))?(l=!0,o="IE",a=s.substring(n+5)):-1!==(n=s.indexOf("Chrome"))?(c=!0,o="Chrome",a=s.substring(n+7)):-1!==(n=s.indexOf("Safari"))?(p=!0,o="Safari",a=s.substring(n+7),-1!==(n=s.indexOf("Version"))&&(a=s.substring(n+8))):-1!==(n=s.indexOf("Firefox"))?(u=!0,o="Firefox",a=s.substring(n+8)):(e=s.lastIndexOf(" ")+1)<(n=s.lastIndexOf("/"))&&(o=s.substring(e,n),a=s.substring(n+1),o.toLowerCase()===o.toUpperCase()&&(o=navigator.appName)),-1!==(r=a.indexOf(";"))&&(a=a.substring(0,r)),-1!==(r=a.indexOf(" "))&&(a=a.substring(0,r)),i=parseInt(""+a,10),isNaN(i)&&(a=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10)),{name:o,version:i,isIE:l,isFirefox:u,isChrome:c,isSafari:p,isIos:/(iPad|iPhone|iPod)/g.test(navigator.platform),isTouch:"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 s(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 o(e,t){return Array.prototype.indexOf&&-1!==e.indexOf(t)}function a(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,s=e[n],o=s.parentNode,a=s.nextSibling;return r.appendChild(s),a?o.insertBefore(r,a):o.appendChild(r),r}}function l(e){e&&e.parentNode.removeChild(e)}function u(e,t){e.insertBefore(t,e.firstChild)}function c(e,t){for(var n in t)e.setAttribute(n,M["boolean"](t[n])&&t[n]?"":t[n])}function p(e,n,r){var s=t.createElement(e);c(s,r),u(n,s)}function d(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 f(e,t){return e?e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className):!1}function y(e,n){var r=Element.prototype,s=r.matches||r.webkitMatchesSelector||r.mozMatchesSelector||r.msMatchesSelector||function(e){return-1!==[].indexOf.call(t.querySelectorAll(e),this)};return s.call(e,n)}function b(e,t,n,r,s){g(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])},s)}function v(e,t,n,r,s){var o=t.split(" ");if(M["boolean"](s)||(s=!1),e instanceof NodeList)for(var a=0;ar;r++){var s=e[r];for(var o in s)s[o]&&s[o].constructor&&s[o].constructor===Object?(t[o]=t[o]||{},T(t[o],s[o])):t[o]=s[o]}return t}}function _(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit moz o ms khtml".split(" ");if(M.undefined(t.cancelFullScreen))for(var r=0,s=n.length;s>r;r++){if(e.prefix=n[r],!M.undefined(t[e.prefix+"CancelFullScreen"])){e.supportsFullScreen=!0;break}if(!M.undefined(t.msExitFullscreen)&&t.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}else e.supportsFullScreen=!0;return e.supportsFullScreen&&(e.fullScreenEventName="ms"===e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch(M.undefined(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 M.undefined(e)&&(e=t.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"===this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?t.cancelFullScreen():t[this.prefix+("ms"===this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?t.fullscreenElement:t[this.prefix+"FullscreenElement"]}),e}function S(y,v){function S(t,n){v.debug&&e.console&&(n=Array.prototype.slice.call(n),M.string(v.logPrefix)&&v.logPrefix.length&&n.unshift(v.logPrefix),console[t].apply(console,n))}function F(){return{url:v.iconUrl,absolute:0===v.iconUrl.indexOf("http")||Re.browser.isIE}}function A(){var e=[],t=F(),n=(t.absolute?"":t.url)+"#"+v.iconPrefix;return o(v.controls,"play-large")&&e.push('"),e.push('
'),o(v.controls,"restart")&&e.push('"),o(v.controls,"rewind")&&e.push('"),o(v.controls,"play")&&e.push('",'"),o(v.controls,"fast-forward")&&e.push('"),o(v.controls,"progress")&&(e.push('','','','','',"0% "+v.i18n.buffered,""),v.tooltips.seek&&e.push('00:00'),e.push("")),o(v.controls,"current-time")&&e.push('',''+v.i18n.currentTime+"",'00:00',""),o(v.controls,"duration")&&e.push('',''+v.i18n.duration+"",'00:00',""),o(v.controls,"mute")&&e.push('"),o(v.controls,"volume")&&e.push('','",'','',""),o(v.controls,"captions")&&e.push('"),o(v.controls,"fullscreen")&&e.push('"),e.push("
"),e.join("")}function P(){if(Re.supported.full&&("audio"!==Re.type||v.fullscreen.allowAudio)&&v.fullscreen.enabled){var e=I.supportsFullScreen;e||v.fullscreen.fallback&&!H()?(We((e?"Native":"Fallback")+" fullscreen enabled"),m(Re.container,v.classes.fullscreen.enabled,!0)):We("Fullscreen not supported and fallback disabled"),Re.buttons&&Re.buttons.fullscreen&&w(Re.buttons.fullscreen,!1),W()}}function O(){if("video"===Re.type){D(v.selectors.captions)||Re.videoContainer.insertAdjacentHTML("afterbegin",'
'),Re.usingTextTracks=!1,Re.media.textTracks&&(Re.usingTextTracks=!0);for(var e,t="",n=Re.media.childNodes,r=0;r=10||Re.browser.isFirefox&&Re.browser.version>=31)&&(We("Detected browser with known TextTrack issues - using manual fallback"),Re.usingTextTracks=!1),Re.usingTextTracks){We("TextTracks supported");for(var a=0;a ");for(var r=0;rRe.captions.length-1){Re.subcount=Re.captions.length-1;break}Re.media.currentTime.toFixed(1)>=n(Re.captions[Re.subcount][0])&&Re.media.currentTime.toFixed(1)<=r(Re.captions[Re.subcount][0])?(Re.currentCaption=Re.captions[Re.subcount][1],j(Re.currentCaption)):j()}}function q(){if(Re.buttons.captions){m(Re.container,v.classes.captions.enabled,!0);var e=Re.storage.captionsEnabled;M["boolean"](e)||(e=v.captions.defaultActive),e&&(m(Re.container,v.classes.captions.active,!0),w(Re.buttons.captions,!0))}}function R(e){return Re.container.querySelectorAll(e)}function D(e){return R(e)[0]}function H(){try{return e.self!==e.top}catch(t){return!0}}function W(){function e(e){9===e.which&&Re.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=R("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];g(Re.container,"keydown",e)}function Y(e,t){if(M.string(t))p(e,Re.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)p(e,Re.media,t[n])}function B(){if(v.loadSprite){var e=F();e.absolute?(We("AJAX loading absolute SVG sprite"+(Re.browser.isIE?" (due to IE)":"")),E(e.url,"sprite-plyr")):We("Sprite will be used as external resource directly")}var n=v.html;We("Injecting custom controls"),n||(n=A()),n=a(n,"{seektime}",v.seekTime),n=a(n,"{id}",Math.floor(1e4*Math.random()));var r;if(M.string(v.selectors.controls.container)&&(r=t.querySelector(v.selectors.controls.container)),M.htmlElement(r)||(r=Re.container),r.insertAdjacentHTML("beforeend",n),v.tooltips.controls)for(var s=R([v.selectors.controls.wrapper," ",v.selectors.labels," .",v.classes.hidden].join("")),o=s.length-1;o>=0;o--){var i=s[o];m(i,v.classes.hidden,!1),m(i,v.classes.tooltip,!0)}}function X(){try{return Re.controls=D(v.selectors.controls.wrapper),Re.buttons={},Re.buttons.seek=D(v.selectors.buttons.seek),Re.buttons.play=R(v.selectors.buttons.play),Re.buttons.pause=D(v.selectors.buttons.pause),Re.buttons.restart=D(v.selectors.buttons.restart),Re.buttons.rewind=D(v.selectors.buttons.rewind),Re.buttons.forward=D(v.selectors.buttons.forward),Re.buttons.fullscreen=D(v.selectors.buttons.fullscreen),Re.buttons.mute=D(v.selectors.buttons.mute),Re.buttons.captions=D(v.selectors.buttons.captions),Re.progress={},Re.progress.container=D(v.selectors.progress.container),Re.progress.buffer={},Re.progress.buffer.bar=D(v.selectors.progress.buffer),Re.progress.buffer.text=Re.progress.buffer.bar&&Re.progress.buffer.bar.getElementsByTagName("span")[0],Re.progress.played=D(v.selectors.progress.played),Re.progress.tooltip=Re.progress.container&&Re.progress.container.querySelector("."+v.classes.tooltip),Re.volume={},Re.volume.input=D(v.selectors.volume.input),Re.volume.display=D(v.selectors.volume.display),Re.duration=D(v.selectors.duration),Re.currentTime=D(v.selectors.currentTime),Re.seekTime=R(v.selectors.seekTime),!0}catch(e){return Ye("It looks like there is a problem with your controls HTML"),J(!0),!1}}function U(){m(Re.container,v.selectors.container.replace(".",""),Re.supported.full)}function J(e){e&&o(v.types.html5,Re.type)?Re.media.setAttribute("controls",""):Re.media.removeAttribute("controls")}function z(e){var t=v.i18n.play;if(!M.undefined(v.title)&&v.title.length&&(t+=", "+v.title),Re.supported.full&&Re.buttons.play)for(var n=Re.buttons.play.length-1;n>=0;n--)Re.buttons.play[n].setAttribute("aria-label",t);M.htmlElement(e)&&e.setAttribute("title",v.i18n.frameTitle.replace("{title}",v.title))}function $(){var t=null;Re.storage={},L.supported&&v.storage.enabled&&(e.localStorage.removeItem("plyr-volume"),t=e.localStorage.getItem(v.storage.key),t&&(/^\d+(\.\d+)?$/.test(t)?G({volume:parseFloat(t)}):Re.storage=JSON.parse(t)))}function G(t){L.supported&&v.storage.enabled&&(T(Re.storage,t),e.localStorage.setItem(v.storage.key,JSON.stringify(Re.storage)))}function K(){if(!Re.media)return void Ye("No media element found!");if(Re.supported.full&&(m(Re.container,v.classes.type.replace("{0}",Re.type),!0),o(v.types.embed,Re.type)&&m(Re.container,v.classes.type.replace("{0}","video"),!0),m(Re.container,v.classes.stopped,v.autoplay),m(Re.ontainer,v.classes.isIos,Re.browser.isIos),m(Re.container,v.classes.isTouch,Re.browser.isTouch),"video"===Re.type)){var e=t.createElement("div");e.setAttribute("class",v.classes.videoWrapper),i(Re.media,e),Re.videoContainer=e}o(v.types.embed,Re.type)&&Q()}function Q(){for(var n=t.createElement("div"),r=Re.embedId,o=Re.type+"-"+Math.floor(1e4*Math.random()),a=R('[id^="'+Re.type+'-"]'),i=a.length-1;i>=0;i--)l(a[i]);if(m(Re.media,v.classes.videoWrapper,!0),m(Re.media,v.classes.embedWrapper,!0),"youtube"===Re.type)Re.media.appendChild(n),n.setAttribute("id",o),M.object(e.YT)?ee(r,n):(s(v.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){ee(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Re.type)if(Re.supported.full?Re.media.appendChild(n):n=Re.media,n.setAttribute("id",o),M.object(e.Vimeo))te(r,n);else{s(v.urls.vimeo.api);var u=e.setInterval(function(){M.object(e.Vimeo)&&(e.clearInterval(u),te(r,n))},50)}else if("soundcloud"===Re.type){var p=t.createElement("iframe");p.loaded=!1,g(p,"load",function(){p.loaded=!0}),c(p,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+r,id:o}),n.appendChild(p),Re.media.appendChild(n),e.SC||s(v.urls.soundcloud.api);var d=e.setInterval(function(){e.SC&&p.loaded&&(e.clearInterval(d),ne.call(p))},50)}}function Z(){Re.supported.full&&qe(),z(D("iframe"))}function ee(t,n){Re.embed=new e.YT.Player(n.id,{videoId:t,playerVars:{autoplay:v.autoplay?1:0,controls:Re.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:v.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onError:function(e){k(n,"error",!0,{code:e.data,embed:e.target})},onReady:function(t){var n=t.target;Re.media.play=function(){n.playVideo(),Re.media.paused=!1},Re.media.pause=function(){n.pauseVideo(),Re.media.paused=!0},Re.media.stop=function(){n.stopVideo(),Re.media.paused=!0},Re.media.duration=n.getDuration(),Re.media.paused=!0,Re.media.currentTime=n.getCurrentTime(),Re.media.muted=n.isMuted(),v.title=n.getVideoData().title,Z(),k(Re.media,"timeupdate"),e.clearInterval(De.buffering),De.buffering=e.setInterval(function(){Re.media.buffered=n.getVideoLoadedFraction(),(null===Re.media.lastBuffered||Re.media.lastBufferedt?t=0:t>r&&(t=r),Ce(t);try{Re.media.currentTime=t.toFixed(4)}catch(s){}if(o(v.types.embed,Re.type)){switch(Re.type){case"youtube":Re.embed.seekTo(t);break;case"vimeo":Re.embed.setCurrentTime(t.toFixed(0));break;case"soundcloud":Re.embed.seekTo(1e3*t)}n&&se(),k(Re.media,"timeupdate"),Re.media.seeking=!0}We("Seeking to "+Re.media.currentTime+" seconds"),V(t)}function ue(){var e=parseInt(v.duration),t=0;return null===Re.media.duration||isNaN(Re.media.duration)||(t=Re.media.duration),isNaN(e)?t:e}function ce(){m(Re.container,v.classes.playing,!Re.media.paused),m(Re.container,v.classes.stopped,Re.media.paused),Ae(Re.media.paused)}function pe(){N={x:e.pageXOffset||0,y:e.pageYOffset||0}}function de(){e.scrollTo(N.x,N.y)}function me(e){var n=I.supportsFullScreen;e&&e.type===I.fullScreenEventName?Re.isFullscreen=I.isFullScreen(Re.container):n?(I.isFullScreen(Re.container)?I.cancelFullScreen():(pe(),I.requestFullScreen(Re.container)),Re.isFullscreen=I.isFullScreen(Re.container)):(Re.isFullscreen=!Re.isFullscreen,Re.isFullscreen?(g(t,"keyup",fe),t.body.style.overflow="hidden"):(h(t,"keyup",fe),t.body.style.overflow="")),m(Re.container,v.classes.fullscreen.active,Re.isFullscreen),Re.isFullscreen?Re.container.setAttribute("tabindex","-1"):Re.container.removeAttribute("tabindex"),W(Re.isFullscreen),Re.buttons&&Re.buttons.fullscreen&&w(Re.buttons.fullscreen,Re.isFullscreen),k(Re.container,Re.isFullscreen?"enterfullscreen":"exitfullscreen",!0),!Re.isFullscreen&&n&&de()}function fe(e){27===(e.which||e.charCode||e.keyCode)&&Re.isFullscreen&&me()}function ye(e){if(M["boolean"](e)||(e=!Re.media.muted),w(Re.buttons.mute,e),Re.media.muted=e,0===Re.media.volume&&be(v.volume),o(v.types.embed,Re.type)){switch(Re.type){case"youtube":Re.embed[Re.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":Re.embed.setVolume(Re.media.muted?0:parseFloat(v.volume/v.volumeMax))}k(Re.media,"volumechange")}}function be(e){var t=v.volumeMax,n=v.volumeMin;if(M.undefined(e)&&(e=Re.storage.volume),(null===e||isNaN(e))&&(e=v.volume),e>t&&(e=t),n>e&&(e=n),Re.media.volume=parseFloat(e/t),Re.volume.display&&(Re.volume.display.value=e),o(v.types.embed,Re.type)){switch(Re.type){case"youtube":Re.embed.setVolume(100*Re.media.volume);break;case"vimeo":case"soundcloud":Re.embed.setVolume(Re.media.volume)}k(Re.media,"volumechange")}Re.media.muted&&e>0&&ye()}function ve(){var e=Re.media.muted?0:Re.media.volume*v.volumeMax;be(e+v.volumeStep/5)}function ge(){var e=Re.media.muted?0:Re.media.volume*v.volumeMax;be(e-v.volumeStep/5)}function he(){var e=Re.media.muted?0:Re.media.volume*v.volumeMax;Re.supported.full&&(Re.volume.input&&(Re.volume.input.value=e),Re.volume.display&&(Re.volume.display.value=e)),G({volume:e}),m(Re.container,v.classes.muted,0===e),Re.supported.full&&Re.buttons.mute&&w(Re.buttons.mute,0===e)}function ke(e){Re.supported.full&&Re.buttons.captions&&(M["boolean"](e)||(e=-1===Re.container.className.indexOf(v.classes.captions.active)),Re.captionsEnabled=e,w(Re.buttons.captions,Re.captionsEnabled),m(Re.container,v.classes.captions.active,Re.captionsEnabled),k(Re.container,Re.captionsEnabled?"captionsenabled":"captionsdisabled",!0),G({captionsEnabled:Re.captionsEnabled}))}function we(e){var t="waiting"===e.type;clearTimeout(De.loading),De.loading=setTimeout(function(){m(Re.container,v.classes.loading,t)},t?250:0)}function xe(e){if(Re.supported.full){var t=Re.progress.played,n=0,r=ue();if(e)switch(e.type){case"timeupdate":case"seeking":if(Re.controls.pressed)return;n=x(Re.media.currentTime,r),"timeupdate"===e.type&&Re.buttons.seek&&(Re.buttons.seek.value=n);break;case"playing":case"progress":t=Re.progress.buffer,n=function(){var e=Re.media.buffered;return e&&e.length?x(e.end(0),r):M.number(e)?100*e:0}()}Te(t,n)}}function Te(e,t){if(Re.supported.full){if(M.undefined(t)&&(t=0),M.undefined(e)){if(!Re.progress||!Re.progress.buffer)return;e=Re.progress.buffer}M.htmlElement(e)?e.value=t:e&&(e.bar&&(e.bar.value=t),e.text&&(e.text.innerHTML=t))}}function _e(e,t){if(t){isNaN(e)&&(e=0),Re.secs=parseInt(e%60),Re.mins=parseInt(e/60%60),Re.hours=parseInt(e/60/60%60);var n=parseInt(ue()/60/60%60)>0;Re.secs=("0"+Re.secs).slice(-2),Re.mins=("0"+Re.mins).slice(-2),t.innerHTML=(n?Re.hours+":":"")+Re.mins+":"+Re.secs}}function Se(){if(Re.supported.full){var e=ue()||0;!Re.duration&&v.displayDuration&&Re.media.paused&&_e(e,Re.currentTime),Re.duration&&_e(e,Re.duration),Fe()}}function Ee(e){_e(Re.media.currentTime,Re.currentTime),e&&"timeupdate"===e.type&&Re.media.seeking||xe(e)}function Ce(e){M.number(e)||(e=0);var t=ue(),n=x(e,t);Re.progress&&Re.progress.played&&(Re.progress.played.value=n),Re.buttons&&Re.buttons.seek&&(Re.buttons.seek.value=n)}function Fe(e){var t=ue();if(v.tooltips.seek&&Re.progress.container&&0!==t){var n=Re.progress.container.getBoundingClientRect(),r=0,s=v.classes.tooltip+"--visible";if(e)r=100/n.width*(e.pageX-n.left);else{if(!f(Re.progress.tooltip,s))return;r=Re.progress.tooltip.style.left.replace("%","")}0>r?r=0:r>100&&(r=100),_e(t/100*r,Re.progress.tooltip),Re.progress.tooltip.style.left=r+"%",e&&o(["mouseenter","mouseleave"],e.type)&&m(Re.progress.tooltip,s,"mouseenter"===e.type)}}function Ae(t){if(v.hideControls&&"audio"!==Re.type&&f(Re.container,v.classes.ready)){var n=0,r=!1,s=t;if(M["boolean"](t)||(t&&t.type?(r="enterfullscreen"===t.type,s=o(["mousemove","touchstart","mouseenter","focus"],t.type),o(["mousemove","touchmove"],t.type)&&(n=2e3),"focus"===t.type&&(n=3e3)):s=f(Re.container,v.classes.hideControls)),e.clearTimeout(De.hover),s||Re.media.paused){if(m(Re.container,v.classes.hideControls,!1),Re.media.paused)return;Re.browser.isTouch&&(n=3e3)}s&&Re.media.paused||(De.hover=e.setTimeout(function(){(!Re.controls.pressed&&!Re.controls.hover||r)&&m(Re.container,v.classes.hideControls,!0)},n))}}function Ie(e){if(!M.undefined(e))return void Ne(e);var t;switch(Re.type){case"youtube":t=Re.embed.getVideoUrl();break;case"vimeo":Re.embed.getVideoUrl.then(function(e){t=e});break;case"soundcloud":Re.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=Re.media.currentSrc}return t||""}function Ne(e){function n(){if(Re.embed=null,"video"===Re.type&&Re.videoContainer&&l(Re.videoContainer),l(Re.media),Re.container&&Re.container.removeAttribute("class"),"type"in e&&(Re.type=e.type,"video"===Re.type)){var n=e.sources[0];"type"in n&&o(v.types.embed,n.type)&&(Re.type=n.type)}switch(Re.supported=C(Re.type),Re.type){case"video":Re.media=t.createElement("video");break;case"audio":Re.media=t.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":Re.media=t.createElement("div"),Re.embedId=e.sources[0].src}u(Re.container,Re.media),M["boolean"](e.autoplay)&&(v.autoplay=e.autoplay),o(v.types.html5,Re.type)&&(v.crossorigin&&Re.media.setAttribute("crossorigin",""),v.autoplay&&Re.media.setAttribute("autoplay",""),"poster"in e&&Re.media.setAttribute("poster",e.poster),v.loop&&Re.media.setAttribute("loop","")),m(Re.container,v.classes.fullscreen.active,Re.isFullscreen),m(Re.container,v.classes.captions.active,Re.captionsEnabled),U(),o(v.types.html5,Re.type)&&Y("source",e.sources),K(),o(v.types.html5,Re.type)?("tracks"in e&&Y("track",e.tracks),Re.media.load(),qe(),Se()):o(v.types.embed,Re.type)&&!Re.supported.full&&qe(),v.title=e.title,z()}return M.object(e)&&"sources"in e&&e.sources.length?(se(),Ce(),Te(),Oe(),void je(n,!1)):void Ye("Invalid source format")}function Pe(e){"video"===Re.type&&Re.media.setAttribute("poster",e)}function Me(){function n(){var e=Re.media.paused;e?re():se();var t=Re.buttons[e?"play":"pause"],n=Re.buttons[e?"pause":"play"];if(n=n&&n.length>1?n[n.length-1]:n[0]){var r=f(t,v.classes.tabFocus);setTimeout(function(){n.focus(),r&&(m(t,v.classes.tabFocus,!1),m(n,v.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 Re.buttons){var r=Re.buttons[n];if(M.nodeList(r))for(var s=0;s0)&&(t?ge():ve()),(e.deltaY>0||e.deltaX<0)&&(t?ve():ge())})}function Le(){if(g(Re.media,"timeupdate seeking",Ee),g(Re.media,"timeupdate",V),g(Re.media,"durationchange loadedmetadata",Se),g(Re.media,"ended",function(){"video"===Re.type&&j(),ce(),le(0),Se(),"video"===Re.type&&v.showPosterOnEnd&&Re.media.load()}),g(Re.media,"progress playing",xe),g(Re.media,"volumechange",he),g(Re.media,"play pause",ce),g(Re.media,"waiting canplay seeked",we),v.clickToPlay&&"audio"!==Re.type){ -var e=D("."+v.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",g(e,"click",function(){v.hideControls&&Re.browser.isTouch&&!Re.media.paused||(Re.media.paused?re():Re.media.ended?(le(),re()):se())})}v.disableContextMenu&&g(Re.media,"contextmenu",function(e){e.preventDefault()}),g(Re.media,v.events.join(" "),function(e){k(Re.container,e.type,!0)})}function Oe(){if(o(v.types.html5,Re.type)){for(var e=Re.media.querySelectorAll("source"),t=0;t=0;n--){var r=n>0?t.cloneNode(!0):t,s=e[n],o=s.parentNode,a=s.nextSibling;return r.appendChild(s),a?o.insertBefore(r,a):o.appendChild(r),r}}function l(e){e&&e.parentNode.removeChild(e)}function u(e,t){e.insertBefore(t,e.firstChild)}function c(e,t){for(var n in t)e.setAttribute(n,P["boolean"](t[n])&&t[n]?"":t[n])}function p(e,n,r){var s=t.createElement(e);c(s,r),u(n,s)}function d(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 f(e,t){return e?e.classList?e.classList.contains(t):new RegExp("(\\s|^)"+t+"(\\s|$)").test(e.className):!1}function y(e,n){var r=Element.prototype,s=r.matches||r.webkitMatchesSelector||r.mozMatchesSelector||r.msMatchesSelector||function(e){return-1!==[].indexOf.call(t.querySelectorAll(e),this)};return s.call(e,n)}function b(e,t,n,r,s){g(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])},s)}function v(e,t,n,r,s){var o=t.split(" ");if(P["boolean"](s)||(s=!1),e instanceof NodeList)for(var a=0;ar;r++){var s=e[r];for(var o in s)s[o]&&s[o].constructor&&s[o].constructor===Object?(t[o]=t[o]||{},T(t[o],s[o])):t[o]=s[o]}return t}}function x(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit moz o ms khtml".split(" ");if(P.undefined(t.cancelFullScreen))for(var r=0,s=n.length;s>r;r++){if(e.prefix=n[r],!P.undefined(t[e.prefix+"CancelFullScreen"])){e.supportsFullScreen=!0;break}if(!P.undefined(t.msExitFullscreen)&&t.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}else e.supportsFullScreen=!0;return e.supportsFullScreen&&(e.fullScreenEventName="ms"===e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch(P.undefined(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 P.undefined(e)&&(e=t.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"===this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?t.cancelFullScreen():t[this.prefix+("ms"===this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?t.fullscreenElement:t[this.prefix+"FullscreenElement"]}),e}function S(y,v){function S(t,n){v.debug&&e.console&&(n=Array.prototype.slice.call(n),P.string(v.logPrefix)&&v.logPrefix.length&&n.unshift(v.logPrefix),console[t].apply(console,n))}function C(){return{url:v.iconUrl,absolute:0===v.iconUrl.indexOf("http")||Re.browser.isIE}}function F(){var e=[],t=C(),n=(t.absolute?"":t.url)+"#"+v.iconPrefix;return o(v.controls,"play-large")&&e.push('"),e.push('
'),o(v.controls,"restart")&&e.push('"),o(v.controls,"rewind")&&e.push('"),o(v.controls,"play")&&e.push('",'"),o(v.controls,"fast-forward")&&e.push('"),o(v.controls,"progress")&&(e.push('','','','','',"0% "+v.i18n.buffered,""),v.tooltips.seek&&e.push('00:00'),e.push("")),o(v.controls,"current-time")&&e.push('',''+v.i18n.currentTime+"",'00:00',""),o(v.controls,"duration")&&e.push('',''+v.i18n.duration+"",'00:00',""),o(v.controls,"mute")&&e.push('"),o(v.controls,"volume")&&e.push('','",'','',""),o(v.controls,"captions")&&e.push('"),o(v.controls,"fullscreen")&&e.push('"),e.push("
"),e.join("")}function L(){if(Re.supported.full&&("audio"!==Re.type||v.fullscreen.allowAudio)&&v.fullscreen.enabled){var e=A.supportsFullScreen;e||v.fullscreen.fallback&&!H()?(We((e?"Native":"Fallback")+" fullscreen enabled"),m(Re.container,v.classes.fullscreen.enabled,!0)):We("Fullscreen not supported and fallback disabled"),Re.buttons&&Re.buttons.fullscreen&&k(Re.buttons.fullscreen,!1),W()}}function O(){if("video"===Re.type){D(v.selectors.captions)||Re.videoContainer.insertAdjacentHTML("afterbegin",'
'),Re.usingTextTracks=!1,Re.media.textTracks&&(Re.usingTextTracks=!0);for(var e,t="",n=Re.media.childNodes,r=0;r=10||Re.browser.isFirefox&&Re.browser.version>=31)&&(We("Detected browser with known TextTrack issues - using manual fallback"),Re.usingTextTracks=!1),Re.usingTextTracks){We("TextTracks supported");for(var a=0;a ");for(var r=0;rRe.captions.length-1){Re.subcount=Re.captions.length-1;break}Re.media.currentTime.toFixed(1)>=n(Re.captions[Re.subcount][0])&&Re.media.currentTime.toFixed(1)<=r(Re.captions[Re.subcount][0])?(Re.currentCaption=Re.captions[Re.subcount][1],j(Re.currentCaption)):j()}}function q(){if(Re.buttons.captions){m(Re.container,v.classes.captions.enabled,!0);var e=Re.storage.captionsEnabled;P["boolean"](e)||(e=v.captions.defaultActive),e&&(m(Re.container,v.classes.captions.active,!0),k(Re.buttons.captions,!0))}}function R(e){return Re.container.querySelectorAll(e)}function D(e){return R(e)[0]}function H(){try{return e.self!==e.top}catch(t){return!0}}function W(){function e(e){9===e.which&&Re.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=R("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];g(Re.container,"keydown",e)}function Y(e,t){if(P.string(t))p(e,Re.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)p(e,Re.media,t[n])}function B(){if(v.loadSprite){var e=C();e.absolute?(We("AJAX loading absolute SVG sprite"+(Re.browser.isIE?" (due to IE)":"")),_(e.url,"sprite-plyr")):We("Sprite will be used as external resource directly")}var n=v.html;We("Injecting custom controls"),n||(n=F()),n=a(n,"{seektime}",v.seekTime),n=a(n,"{id}",Math.floor(1e4*Math.random()));var r;if(P.string(v.selectors.controls.container)&&(r=t.querySelector(v.selectors.controls.container)),P.htmlElement(r)||(r=Re.container),r.insertAdjacentHTML("beforeend",n),v.tooltips.controls)for(var s=R([v.selectors.controls.wrapper," ",v.selectors.labels," .",v.classes.hidden].join("")),o=s.length-1;o>=0;o--){var i=s[o];m(i,v.classes.hidden,!1),m(i,v.classes.tooltip,!0)}}function X(){try{return Re.controls=D(v.selectors.controls.wrapper),Re.buttons={},Re.buttons.seek=D(v.selectors.buttons.seek),Re.buttons.play=R(v.selectors.buttons.play),Re.buttons.pause=D(v.selectors.buttons.pause),Re.buttons.restart=D(v.selectors.buttons.restart),Re.buttons.rewind=D(v.selectors.buttons.rewind),Re.buttons.forward=D(v.selectors.buttons.forward),Re.buttons.fullscreen=D(v.selectors.buttons.fullscreen),Re.buttons.mute=D(v.selectors.buttons.mute),Re.buttons.captions=D(v.selectors.buttons.captions),Re.progress={},Re.progress.container=D(v.selectors.progress.container),Re.progress.buffer={},Re.progress.buffer.bar=D(v.selectors.progress.buffer),Re.progress.buffer.text=Re.progress.buffer.bar&&Re.progress.buffer.bar.getElementsByTagName("span")[0],Re.progress.played=D(v.selectors.progress.played),Re.progress.tooltip=Re.progress.container&&Re.progress.container.querySelector("."+v.classes.tooltip),Re.volume={},Re.volume.input=D(v.selectors.volume.input),Re.volume.display=D(v.selectors.volume.display),Re.duration=D(v.selectors.duration),Re.currentTime=D(v.selectors.currentTime),Re.seekTime=R(v.selectors.seekTime),!0}catch(e){return Ye("It looks like there is a problem with your controls HTML"),J(!0),!1}}function U(){m(Re.container,v.selectors.container.replace(".",""),Re.supported.full)}function J(e){e&&o(v.types.html5,Re.type)?Re.media.setAttribute("controls",""):Re.media.removeAttribute("controls")}function z(e){var t=v.i18n.play;if(P.string(v.title)&&v.title.length&&(t+=", "+v.title,Re.container.setAttribute("aria-label",v.title)),Re.supported.full&&Re.buttons.play)for(var n=Re.buttons.play.length-1;n>=0;n--)Re.buttons.play[n].setAttribute("aria-label",t);P.htmlElement(e)&&e.setAttribute("title",v.i18n.frameTitle.replace("{title}",v.title))}function $(){var t=null;Re.storage={},M.supported&&v.storage.enabled&&(e.localStorage.removeItem("plyr-volume"),t=e.localStorage.getItem(v.storage.key),t&&(/^\d+(\.\d+)?$/.test(t)?G({volume:parseFloat(t)}):Re.storage=JSON.parse(t)))}function G(t){M.supported&&v.storage.enabled&&(T(Re.storage,t),e.localStorage.setItem(v.storage.key,JSON.stringify(Re.storage)))}function K(){if(!Re.media)return void Ye("No media element found!");if(Re.supported.full&&(m(Re.container,v.classes.type.replace("{0}",Re.type),!0),o(v.types.embed,Re.type)&&m(Re.container,v.classes.type.replace("{0}","video"),!0),m(Re.container,v.classes.stopped,v.autoplay),m(Re.ontainer,v.classes.isIos,Re.browser.isIos),m(Re.container,v.classes.isTouch,Re.browser.isTouch),"video"===Re.type)){var e=t.createElement("div");e.setAttribute("class",v.classes.videoWrapper),i(Re.media,e),Re.videoContainer=e}o(v.types.embed,Re.type)&&Q()}function Q(){for(var n=t.createElement("div"),r=Re.embedId,o=Re.type+"-"+Math.floor(1e4*Math.random()),a=R('[id^="'+Re.type+'-"]'),i=a.length-1;i>=0;i--)l(a[i]);if(m(Re.media,v.classes.videoWrapper,!0),m(Re.media,v.classes.embedWrapper,!0),"youtube"===Re.type)Re.media.appendChild(n),n.setAttribute("id",o),P.object(e.YT)?ee(r,n):(s(v.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){ee(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Re.type)if(Re.supported.full?Re.media.appendChild(n):n=Re.media,n.setAttribute("id",o),P.object(e.Vimeo))te(r,n);else{s(v.urls.vimeo.api);var u=e.setInterval(function(){P.object(e.Vimeo)&&(e.clearInterval(u),te(r,n))},50)}else if("soundcloud"===Re.type){var p=t.createElement("iframe");p.loaded=!1,g(p,"load",function(){p.loaded=!0}),c(p,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+r,id:o}),n.appendChild(p),Re.media.appendChild(n),e.SC||s(v.urls.soundcloud.api);var d=e.setInterval(function(){e.SC&&p.loaded&&(e.clearInterval(d),ne.call(p))},50)}}function Z(){Re.supported.full&&(Ve(),qe()),z(D("iframe"))}function ee(t,n){Re.embed=new e.YT.Player(n.id,{videoId:t,playerVars:{autoplay:v.autoplay?1:0,controls:Re.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:v.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onError:function(e){h(n,"error",!0,{code:e.data,embed:e.target})},onReady:function(t){var n=t.target;Re.media.play=function(){n.playVideo(),Re.media.paused=!1},Re.media.pause=function(){n.pauseVideo(),Re.media.paused=!0},Re.media.stop=function(){n.stopVideo(),Re.media.paused=!0},Re.media.duration=n.getDuration(),Re.media.paused=!0,Re.media.currentTime=n.getCurrentTime(),Re.media.muted=n.isMuted(),v.title=n.getVideoData().title,Re.supported.full&&Re.media.querySelector("iframe").setAttribute("tabindex","-1"),Z(),h(Re.media,"timeupdate"),e.clearInterval(De.buffering),De.buffering=e.setInterval(function(){Re.media.buffered=n.getVideoLoadedFraction(),(null===Re.media.lastBuffered||Re.media.lastBufferedt?t=0:t>r&&(t=r),Ee(t);try{Re.media.currentTime=t.toFixed(4)}catch(s){}if(o(v.types.embed,Re.type)){switch(Re.type){case"youtube":Re.embed.seekTo(t);break;case"vimeo":Re.embed.setCurrentTime(t.toFixed(0));break;case"soundcloud":Re.embed.seekTo(1e3*t)}n&&se(),h(Re.media,"timeupdate"),Re.media.seeking=!0}We("Seeking to "+Re.media.currentTime+" seconds"),V(t)}function ue(){var e=parseInt(v.duration),t=0;return null===Re.media.duration||isNaN(Re.media.duration)||(t=Re.media.duration),isNaN(e)?t:e}function ce(){m(Re.container,v.classes.playing,!Re.media.paused),m(Re.container,v.classes.stopped,Re.media.paused),Fe(Re.media.paused)}function pe(){I={x:e.pageXOffset||0,y:e.pageYOffset||0}}function de(){e.scrollTo(I.x,I.y)}function me(e){var n=A.supportsFullScreen;if(n){if(!e||e.type!==A.fullScreenEventName)return void(A.isFullScreen(Re.container)?A.cancelFullScreen():(pe(),A.requestFullScreen(Re.container)));Re.isFullscreen=A.isFullScreen(Re.container)}else Re.isFullscreen=!Re.isFullscreen,t.body.style.overflow=Re.isFullscreen?"hidden":"";m(Re.container,v.classes.fullscreen.active,Re.isFullscreen),W(Re.isFullscreen),Re.buttons&&Re.buttons.fullscreen&&k(Re.buttons.fullscreen,Re.isFullscreen),h(Re.container,Re.isFullscreen?"enterfullscreen":"exitfullscreen",!0),!Re.isFullscreen&&n&&de()}function fe(e){if(P["boolean"](e)||(e=!Re.media.muted),k(Re.buttons.mute,e),Re.media.muted=e,0===Re.media.volume&&ye(v.volume),o(v.types.embed,Re.type)){switch(Re.type){case"youtube":Re.embed[Re.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":Re.embed.setVolume(Re.media.muted?0:parseFloat(v.volume/v.volumeMax))}h(Re.media,"volumechange")}}function ye(e){var t=v.volumeMax,n=v.volumeMin;if(P.undefined(e)&&(e=Re.storage.volume),(null===e||isNaN(e))&&(e=v.volume),e>t&&(e=t),n>e&&(e=n),Re.media.volume=parseFloat(e/t),Re.volume.display&&(Re.volume.display.value=e),o(v.types.embed,Re.type)){switch(Re.type){case"youtube":Re.embed.setVolume(100*Re.media.volume);break;case"vimeo":case"soundcloud":Re.embed.setVolume(Re.media.volume)}h(Re.media,"volumechange")}Re.media.muted&&e>0&&fe()}function be(e){var t=Re.media.muted?0:Re.media.volume*v.volumeMax;P.number(e)||(e=v.volumeStep),ye(t+e)}function ve(e){var t=Re.media.muted?0:Re.media.volume*v.volumeMax;P.number(e)||(e=v.volumeStep),ye(t-e)}function ge(){var e=Re.media.muted?0:Re.media.volume*v.volumeMax;Re.supported.full&&(Re.volume.input&&(Re.volume.input.value=e),Re.volume.display&&(Re.volume.display.value=e)),G({volume:e}),m(Re.container,v.classes.muted,0===e),Re.supported.full&&Re.buttons.mute&&k(Re.buttons.mute,0===e)}function he(e){Re.supported.full&&Re.buttons.captions&&(P["boolean"](e)||(e=-1===Re.container.className.indexOf(v.classes.captions.active)),Re.captionsEnabled=e,k(Re.buttons.captions,Re.captionsEnabled),m(Re.container,v.classes.captions.active,Re.captionsEnabled),h(Re.container,Re.captionsEnabled?"captionsenabled":"captionsdisabled",!0),G({captionsEnabled:Re.captionsEnabled}))}function ke(e){var t="waiting"===e.type;clearTimeout(De.loading),De.loading=setTimeout(function(){m(Re.container,v.classes.loading,t)},t?250:0)}function we(e){if(Re.supported.full){var t=Re.progress.played,n=0,r=ue();if(e)switch(e.type){case"timeupdate":case"seeking":if(Re.controls.pressed)return;n=w(Re.media.currentTime,r),"timeupdate"===e.type&&Re.buttons.seek&&(Re.buttons.seek.value=n);break;case"playing":case"progress":t=Re.progress.buffer,n=function(){var e=Re.media.buffered;return e&&e.length?w(e.end(0),r):P.number(e)?100*e:0}()}Te(t,n)}}function Te(e,t){if(Re.supported.full){if(P.undefined(t)&&(t=0),P.undefined(e)){if(!Re.progress||!Re.progress.buffer)return;e=Re.progress.buffer}P.htmlElement(e)?e.value=t:e&&(e.bar&&(e.bar.value=t),e.text&&(e.text.innerHTML=t))}}function xe(e,t){if(t){isNaN(e)&&(e=0),Re.secs=parseInt(e%60),Re.mins=parseInt(e/60%60),Re.hours=parseInt(e/60/60%60);var n=parseInt(ue()/60/60%60)>0;Re.secs=("0"+Re.secs).slice(-2),Re.mins=("0"+Re.mins).slice(-2),t.innerHTML=(n?Re.hours+":":"")+Re.mins+":"+Re.secs}}function Se(){if(Re.supported.full){var e=ue()||0;!Re.duration&&v.displayDuration&&Re.media.paused&&xe(e,Re.currentTime),Re.duration&&xe(e,Re.duration),Ce()}}function _e(e){xe(Re.media.currentTime,Re.currentTime),e&&"timeupdate"===e.type&&Re.media.seeking||we(e)}function Ee(e){P.number(e)||(e=0);var t=ue(),n=w(e,t);Re.progress&&Re.progress.played&&(Re.progress.played.value=n),Re.buttons&&Re.buttons.seek&&(Re.buttons.seek.value=n)}function Ce(e){var t=ue();if(v.tooltips.seek&&Re.progress.container&&0!==t){var n=Re.progress.container.getBoundingClientRect(),r=0,s=v.classes.tooltip+"--visible";if(e)r=100/n.width*(e.pageX-n.left);else{if(!f(Re.progress.tooltip,s))return;r=Re.progress.tooltip.style.left.replace("%","")}0>r?r=0:r>100&&(r=100),xe(t/100*r,Re.progress.tooltip),Re.progress.tooltip.style.left=r+"%",e&&o(["mouseenter","mouseleave"],e.type)&&m(Re.progress.tooltip,s,"mouseenter"===e.type)}}function Fe(t){if(v.hideControls&&"audio"!==Re.type&&f(Re.container,v.classes.ready)){var n=0,r=!1,s=t;if(P["boolean"](t)||(t&&t.type?(r="enterfullscreen"===t.type,s=o(["mousemove","touchstart","mouseenter","focus"],t.type),o(["mousemove","touchmove"],t.type)&&(n=2e3),"focus"===t.type&&(n=3e3)):s=f(Re.container,v.classes.hideControls)),e.clearTimeout(De.hover),s||Re.media.paused){if(m(Re.container,v.classes.hideControls,!1),Re.media.paused)return;Re.browser.isTouch&&(n=3e3)}s&&Re.media.paused||(De.hover=e.setTimeout(function(){(!Re.controls.pressed&&!Re.controls.hover||r)&&m(Re.container,v.classes.hideControls,!0)},n))}}function Ae(e){if(!P.undefined(e))return void Ie(e);var t;switch(Re.type){case"youtube":t=Re.embed.getVideoUrl();break;case"vimeo":Re.embed.getVideoUrl.then(function(e){t=e});break;case"soundcloud":Re.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=Re.media.currentSrc}return t||""}function Ie(e){function n(){if(Re.embed=null,"video"===Re.type&&Re.videoContainer&&l(Re.videoContainer),l(Re.media),Re.container&&Re.container.removeAttribute("class"),"type"in e&&(Re.type=e.type,"video"===Re.type)){var n=e.sources[0];"type"in n&&o(v.types.embed,n.type)&&(Re.type=n.type)}switch(Re.supported=E(Re.type),Re.type){case"video":Re.media=t.createElement("video");break;case"audio":Re.media=t.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":Re.media=t.createElement("div"),Re.embedId=e.sources[0].src}u(Re.container,Re.media),P["boolean"](e.autoplay)&&(v.autoplay=e.autoplay),o(v.types.html5,Re.type)&&(v.crossorigin&&Re.media.setAttribute("crossorigin",""),v.autoplay&&Re.media.setAttribute("autoplay",""),"poster"in e&&Re.media.setAttribute("poster",e.poster),v.loop&&Re.media.setAttribute("loop","")),m(Re.container,v.classes.fullscreen.active,Re.isFullscreen),m(Re.container,v.classes.captions.active,Re.captionsEnabled),U(),o(v.types.html5,Re.type)&&Y("source",e.sources),K(),o(v.types.html5,Re.type)?("tracks"in e&&Y("track",e.tracks),Re.media.load(),Ve(),Se(),qe()):o(v.types.embed,Re.type)&&!Re.supported.full&&(Ve(),qe()),v.title=e.title,z()}return P.object(e)&&"sources"in e&&e.sources.length?(se(),Ee(),Te(),Le(),m(Re.container,v.classes.ready,!1),void Oe(n,!1)):void Ye("Invalid source format")}function Ne(e){"video"===Re.type&&Re.media.setAttribute("poster",e)}function Pe(){function n(){var e=oe(),t=Re.buttons[e?"play":"pause"],n=Re.buttons[e?"pause":"play"];if(n=n&&n.length>1?n[n.length-1]:n[0]){var r=f(t,v.classes.tabFocus);setTimeout(function(){n.focus(),r&&(m(t,v.classes.tabFocus,!1),m(n,v.classes.tabFocus,!0))},100)}}function r(){var e=t.activeElement;return e=e&&e!==t.body?t.querySelector(":focus"):null}function s(e){return e.keyCode?e.keyCode:e.which}function a(e){for(var t in Re.buttons){var n=Re.buttons[t];if(P.nodeList(n))for(var r=0;r0)&&(t?ve(n):be(n)),(e.deltaY>0||e.deltaX<0)&&(t?be(n):ve(n))})}function Me(){if(g(Re.media,"timeupdate seeking",_e),g(Re.media,"timeupdate",V), +g(Re.media,"durationchange loadedmetadata",Se),g(Re.media,"ended",function(){"video"===Re.type&&j(),ce(),le(0),Se(),"video"===Re.type&&v.showPosterOnEnd&&Re.media.load()}),g(Re.media,"progress playing",we),g(Re.media,"volumechange",ge),g(Re.media,"play pause",ce),g(Re.media,"waiting canplay seeked",ke),v.clickToPlay&&"audio"!==Re.type){var e=D("."+v.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",g(e,"click",function(){v.hideControls&&Re.browser.isTouch&&!Re.media.paused||(Re.media.paused?re():Re.media.ended?(le(),re()):se())})}v.disableContextMenu&&g(Re.media,"contextmenu",function(e){e.preventDefault()}),g(Re.media,v.events.join(" "),function(e){h(Re.container,e.type,!0)})}function Le(){if(o(v.types.html5,Re.type)){for(var e=Re.media.querySelectorAll("source"),t=0;t plyr.captions.length-1) { - plyr.subcount = plyr.captions.length-1; + if (plyr.subcount > plyr.captions.length - 1) { + plyr.subcount = plyr.captions.length - 1; break; } } @@ -1394,8 +1395,11 @@ var label = config.i18n.play; // If there's a media title set, use that for the label - if (!_is.undefined(config.title) && config.title.length) { + if (_is.string(config.title) && config.title.length) { label += ', ' + config.title; + + // Set container label + plyr.container.setAttribute('aria-label', config.title); } // If there's a play button, set label @@ -1614,9 +1618,10 @@ // When embeds are ready function _embedReady() { - // Setup the UI if full support + // Setup the UI and call ready if full support if (plyr.supported.full) { _setupInterface(); + _ready(); } // Set title @@ -1674,6 +1679,11 @@ // Set title config.title = instance.getVideoData().title; + // Set the tabindex + if (plyr.supported.full) { + plyr.media.querySelector('iframe').setAttribute('tabindex', '-1'); + } + // Update UI _embedReady(); @@ -1817,8 +1827,6 @@ if(_is.htmlElement(plyr.embed.element) && plyr.supported.full) { plyr.embed.element.setAttribute('tabindex', '-1'); } - - //console.log(plyr.embed); }); plyr.embed.on('play', function() { @@ -1950,18 +1958,21 @@ // Toggle playback function _togglePlay(toggle) { + // True toggle + if (!_is.boolean(toggle)) { + toggle = plyr.media.paused; + } + // Play - if (toggle === true) { + if (toggle) { _play(); } // Pause - else if (toggle === false) { + else { _pause(); } - // True toggle - else { - plyr.media[plyr.media.paused ? 'play' : 'pause'](); - } + + return toggle; } // Rewind @@ -2097,54 +2108,44 @@ // Check for native support var nativeSupport = fullscreen.supportsFullScreen; - // If it's a fullscreen change event, it's probably a native close - if (event && event.type === fullscreen.fullScreenEventName) { - plyr.isFullscreen = fullscreen.isFullScreen(plyr.container); - } - // If there's native support, use it - else if (nativeSupport) { - // Request fullscreen - if (!fullscreen.isFullScreen(plyr.container)) { - // Save scroll position - _saveScrollPosition(); - - // Request full screen - fullscreen.requestFullScreen(plyr.container); - } - // Bail from fullscreen - else { - fullscreen.cancelFullScreen(); + + if (nativeSupport) { + // If it's a fullscreen change event, update the UI + if (event && event.type === fullscreen.fullScreenEventName) { + plyr.isFullscreen = fullscreen.isFullScreen(plyr.container); } + // Else it's a user request to enter or exit + else { + // Request fullscreen + if (!fullscreen.isFullScreen(plyr.container)) { + // Save scroll position + _saveScrollPosition(); - // Check if we're actually full screen (it could fail) - plyr.isFullscreen = fullscreen.isFullScreen(plyr.container); + // Request full screen + fullscreen.requestFullScreen(plyr.container); + } + // Bail from fullscreen + else { + fullscreen.cancelFullScreen(); + } + + // Check if we're actually full screen (it could fail) + // plyr.isFullscreen = fullscreen.isFullScreen(plyr.container); + + return; + } } else { // Otherwise, it's a simple toggle plyr.isFullscreen = !plyr.isFullscreen; // Bind/unbind escape key - if (plyr.isFullscreen) { - _on(document, 'keyup', _handleEscapeFullscreen); - document.body.style.overflow = 'hidden'; - } - else { - _off(document, 'keyup', _handleEscapeFullscreen); - document.body.style.overflow = ''; - } + document.body.style.overflow = plyr.isFullscreen ? 'hidden' : ''; } // Set class hook _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen); - // Trap focus - if (plyr.isFullscreen) { - plyr.container.setAttribute('tabindex', '-1'); - } - else { - plyr.container.removeAttribute('tabindex'); - } - // Trap focus _focusTrap(plyr.isFullscreen); @@ -2162,14 +2163,6 @@ } } - // Bail from faux-fullscreen - function _handleEscapeFullscreen(event) { - // If it's a keypress and not escape, bail - if ((event.which || event.charCode || event.keyCode) === 27 && plyr.isFullscreen) { - _toggleFullscreen(); - } - } - // Mute function _toggleMute(muted) { // If the method is called without parameter, toggle based on current value @@ -2263,17 +2256,25 @@ } // Increase volume - function _increaseVolume() { + function _increaseVolume(step) { var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); - _setVolume(volume + (config.volumeStep / 5)); + if (!_is.number(step)) { + step = config.volumeStep; + } + + _setVolume(volume + step); } // Decrease volume - function _decreaseVolume() { + function _decreaseVolume(step) { var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); - _setVolume(volume - (config.volumeStep / 5)); + if (!_is.number(step)) { + step = config.volumeStep; + } + + _setVolume(volume - step); } // Update volume UI and storage @@ -2689,6 +2690,9 @@ // Cancel current network requests _cancelRequests(); + // Remove ready class hook + _toggleClass(plyr.container, config.classes.ready, false); + // Setup new source function setup() { // Remove embed object @@ -2794,10 +2798,14 @@ // Display duration if available _displayDuration(); + + // Call ready + _ready(); } - // If embed but not fully supported, setupInterface now + // If embed but not fully supported, setupInterface and call ready now else if (_inArray(config.types.embed, plyr.type) && !plyr.supported.full) { _setupInterface(); + _ready(); } // Set aria title and iframe title @@ -2823,16 +2831,8 @@ var inputEvent = (plyr.browser.isIE ? 'change' : 'input'); // Click play/pause helper - function _togglePlay() { - var play = plyr.media.paused; - - // Toggle playback - if (play) { - _play(); - } - else { - _pause(); - } + function togglePlay() { + var play = _togglePlay(); // Determine which buttons var trigger = plyr.buttons[play ? 'play' : 'pause'], @@ -2861,16 +2861,27 @@ } } - // Detect tab focus - function checkFocus() { + // Get the focused element + function getFocusElement() { var focused = document.activeElement; if (!focused || focused === document.body) { focused = null; } - else if (document.querySelector) { + else { focused = document.querySelector(':focus'); } + + return focused; + } + + // Get the key code for an event + function getKeyCode(event) { + return event.keyCode ? event.keyCode : event.which; + } + + // Detect tab focus + function checkTabFocus(focused) { for (var button in plyr.buttons) { var element = plyr.buttons[button]; @@ -2885,11 +2896,67 @@ } } + // Keyboard shortcuts + if (config.keyboardShorcuts) { + //var held = false; + + _on(plyr.container, 'keyup keydown', function(event) { + var code = getKeyCode(event), + down = event.type === 'keydown', + first = true, + timer; + + function handleKey() { + switch(code) { + // Space and K key + case 32: + case 75: if (first) { _togglePlay(); } break; + // Arrow up + case 38: _increaseVolume(); break; + // Arrow down + case 40: _decreaseVolume(); break; + // M key + case 77: if (first) { _toggleMute(); } break; + // Arrow forward + case 39: _forward(); break; + // Arrow back + case 37: _rewind(); break; + // F key + case 70: if (first) { _toggleFullscreen(); } break; + // C key + case 67: if (first) { _toggleCaptions(); } break; + } + + // Escape is handle natively when in full screen + // So we only need to worry about non native + if (!fullscreen.supportsFullScreen && plyr.isFullscreen && code === 27) { + _toggleFullscreen(); + } + + // First run completed + first = false; + } + + if (down) { + handleKey(); + + // If a key is held for 200ms, run again + // Handy for volume and skip + timer = setTimeout(handleKey, 200); + } + else { + clearTimeout(timer); + } + }); + } + + // Focus/tab management _on(window, 'keyup', function(event) { - var code = (event.keyCode ? event.keyCode : event.which); + var code = getKeyCode(event), + focused = getFocusElement(); if (code === 9) { - checkFocus(); + checkTabFocus(focused); } }); _on(document.body, 'click', function() { @@ -2904,10 +2971,10 @@ } // Play - _proxyListener(plyr.buttons.play, 'click', config.listeners.play, _togglePlay); + _proxyListener(plyr.buttons.play, 'click', config.listeners.play, togglePlay); // Pause - _proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, _togglePlay); + _proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, togglePlay); // Restart _proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, _seek); @@ -2968,25 +3035,26 @@ // Detect "natural" scroll - suppored on OS X Safari only // Other browsers on OS X will be inverted until support improves - var inverted = event.webkitDirectionInvertedFromDevice; + var inverted = event.webkitDirectionInvertedFromDevice, + step = (config.volumeStep / 5); // Scroll down (or up on natural) to decrease if (event.deltaY < 0 || event.deltaX > 0) { if (inverted) { - _decreaseVolume(); + _decreaseVolume(step); } else { - _increaseVolume(); + _increaseVolume(step); } } // Scroll up (or down on natural) to increase if (event.deltaY > 0 || event.deltaX < 0) { if (inverted) { - _increaseVolume(); + _increaseVolume(step); } else { - _decreaseVolume(); + _decreaseVolume(step); } } }); @@ -3231,6 +3299,9 @@ // Wrap media plyr.container = _wrap(media, document.createElement('div')); + // Allow focus to be captured + plyr.container.setAttribute('tabindex', 0); + // Add style hook _toggleStyleHook(); @@ -3252,16 +3323,21 @@ if (config.autoplay) { _play(); } + + // Call ready + _ready(); } - // If embed but not fully supported, setupInterface now (to avoid flash of controls) + // If embed but not fully supported, setupInterface (to avoid flash of controls) and call ready now else if (_inArray(config.types.embed, plyr.type) && !plyr.supported.full) { _setupInterface(); + _ready(); } // Successful setup plyr.init = true; } + // Setup the UI function _setupInterface() { // Don't setup interface if no support if (!plyr.supported.full) { @@ -3321,23 +3397,9 @@ // Display duration _displayDuration(); - - // Ready event - _triggerEvent(plyr.container, 'ready', true); - - // Class - _toggleClass(plyr.container, config.classes.ready, true); } - // Initialize instance - _init(); - - // If init failed, return an empty object - if (!plyr.init) { - return {}; - } - - return { + var api = { getOriginal: function() { return original; }, getContainer: function() { return plyr.container }, getEmbed: function() { return plyr.embed; }, @@ -3365,6 +3427,31 @@ destroy: _destroy, getCurrentTime: function() { return media.currentTime; } }; + + // Everything done + function _ready() { + // Ready event + _triggerEvent(plyr.container, 'ready', true); + + // Set class hook on media element + _toggleClass(plyr.media, defaults.classes.setup, true); + + // Set container class for ready + _toggleClass(plyr.container, config.classes.ready, true); + + // Store a refernce to instance + plyr.media.plyr = api; + } + + // Initialize instance + _init(); + + // If init failed, return null + if (!plyr.init) { + return null; + } + + return api; } // Load a sprite @@ -3544,14 +3631,6 @@ return; } - // Set plyr to false if setup failed - // Maybe we remove this and add a .get() function to get the instance - // If passed a media element or container? - media.plyr = instance; - - // Set class hook - _toggleClass(media, defaults.classes.setup, true); - // Listen for events if debugging if (config.debug) { var events = config.events.concat(['setup', 'ready', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']); diff --git a/src/less/plyr.less b/src/less/plyr.less index 162e8fd0..f69c33a1 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -40,6 +40,11 @@ } } + // Focus + &:focus { + outline: 0; + } + // Media elements video, audio { diff --git a/src/less/variables.less b/src/less/variables.less index 041eec20..fc9e895a 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -12,7 +12,7 @@ @plyr-color-main: #3498db; // Font -@plyr-font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; +@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; @plyr-font-size-small: 14px; @plyr-font-size-base: 16px; diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index b100e761..8935679d 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -40,6 +40,11 @@ } } + // Focus + &:focus { + outline: 0; + } + // Media elements video, audio { diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 7606c8d9..0bd31603 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -13,7 +13,7 @@ $plyr-sr-only-important: true !default; $plyr-color-main: #3498db !default; // Font sizes -$plyr-font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default; +$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default; $plyr-font-size-small: 14px !default; $plyr-font-size-base: 16px !default;