From 37840c384414401a914eb43aa7a93eb0e17ee68e Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 6 Sep 2016 23:48:09 +1000 Subject: [PATCH] Working on settings menu --- demo/dist/demo.js | 2 +- demo/src/js/main.js | 4 +- dist/plyr.css | 2 +- dist/plyr.js | 4 +- dist/plyr.svg | 2 +- src/js/plyr.js | 153 +++++++++++++++++------------------ src/less/plyr.less | 109 +++++++++++++++++++++++-- src/less/variables.less | 10 +-- src/sprite/plyr-settings.svg | 12 +++ 9 files changed, 200 insertions(+), 98 deletions(-) create mode 100644 src/sprite/plyr-settings.svg diff --git a/demo/dist/demo.js b/demo/dist/demo.js index fdb89c46..7db71d26 100644 --- a/demo/dist/demo.js +++ b/demo/dist/demo.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 i,s=arguments.length;for(i=0;s>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",s=e.Element[i],o=Object,n=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=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;o>s;s++)this.push(i[s]);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,s=t.length,o=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),o=!0);while(++i=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,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 +"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,s=arguments.length;for(i=0;s>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",s=e.Element[i],o=Object,n=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=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;o>s;s++)this.push(i[s]);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,s=t.length,o=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),o=!0);while(++i=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0},controls:["play-large","play","speed-up","progress","current-time","mute","volume","captions","settings","fullscreen"]});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,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/demo/src/js/main.js b/demo/src/js/main.js index 80dab906..158736ae 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -21,7 +21,7 @@ captions: { defaultActive: true }, - controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'] + controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'] }); plyr.loadSprite('dist/demo.svg'); @@ -95,7 +95,7 @@ // Set a new source function newSource(type, init) { // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video - if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) { + if(!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) { return; } diff --git a/dist/plyr.css b/dist/plyr.css index 943ee8d1..e7ecba6e 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.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-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000;border-radius:0!important}.plyr--fullscreen-active video{height:100%}.plyr--fullscreen-active .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-active .plyr__controls{position:absolute;bottom:0;left:0;right:0}.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)} \ No newline at end of file +.plyr input[type=range]:focus,.plyr:focus{outline:0}.plyr .plyr__video-embed iframe,.plyr__tooltip{pointer-events:none}@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{from{transform:translateY(10px);opacity:.5}to{transform:translateY(0);opacity:1}}.plyr{position:relative;max-width:100%;min-width:200px;font-family:Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;direction:ltr}.plyr,.plyr *,.plyr ::after,.plyr ::before{box-sizing:border-box}.plyr a,.plyr button,.plyr input,.plyr label{-ms-touch-action:manipulation;touch-action:manipulation}.plyr [aria-hidden=true]{display:none}.plyr audio,.plyr video{width:100%;height:auto;vertical-align:middle;border-radius:inherit}.plyr input[type=range]{display:block;height:20px;width:100%;margin:0;padding:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;background:0 0}.plyr input[type=range]::-webkit-slider-runnable-track{height:8px;background:0 0;border:0;border-radius:4px;-webkit-user-select:none;user-select:none}.plyr input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-4px;position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(52,63,74,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box}.plyr input[type=range]::-moz-range-track{height:8px;background:0 0;border:0;border-radius:4px;-moz-user-select:none;user-select:none}.plyr input[type=range]::-moz-range-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(52,63,74,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box}.plyr input[type=range]::-ms-track{height:8px;background:0 0;border:0;color:transparent}.plyr input[type=range]::-ms-fill-upper{height:8px;background:0 0;border:0;border-radius:4px;-ms-user-select:none;user-select:none}.plyr input[type=range]::-ms-fill-lower{height:8px;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#3498db}.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,transform .2s ease;box-shadow:0 1px 1px rgba(52,63,74,.15),0 0 0 1px rgba(52,63,74,.2);box-sizing:border-box;margin-top:0}.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline-offset:3px}.plyr input[type=range]:active::-webkit-slider-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--video input[type=range].tab-focus:focus{outline:rgba(255,255,255,.5) dotted 1px}.plyr--audio input[type=range].tab-focus:focus{outline:rgba(86,93,100,.5) dotted 1px}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;position:absolute!important;padding:0!important;border:0!important;height:1px!important;width:1px!important}.plyr__video-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(52,63,74,.85);-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__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:5px}.plyr__controls .plyr__menu:first-child,.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__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>button{margin-left:10px}.plyr__controls .plyr__menu+button,.plyr__controls>button+.plyr__menu,.plyr__controls>button+button{margin-left:5px}}.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(52,63,74,0),rgba(52,63,74,.7));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{background:#3498db;color:#fff}.plyr__play-large{display:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px;background:#3498db;border:4px solid currentColor;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;transition:all .3s ease}.plyr__play-large svg{position:relative;left:2px;width:20px;height:20px;display:block;fill:currentColor}.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__menu{position:relative}.plyr__menu button[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{position:absolute;bottom:100%;right:-5px;margin-bottom:10px;animation:plyr-popup .2s ease;background:rgba(52,63,74,.9);box-shadow:0 1px 0 rgba(0,0,0,.2);border-radius:4px;white-space:nowrap;text-align:left;color:#fff;font-size:14px}.plyr__menu__container ul{margin:0;padding:5px;list-style:none}.plyr__menu__container button{display:-ms-flexbox;display:flex;width:100%;padding:10px 30px 10px 12px;color:#fff;font-weight:600}.plyr__menu__container button::after{content:"";position:absolute;top:50%;transform:translateY(-50%);right:5px;border:5px solid transparent;border-left-color:rgba(255,255,255,.8)}.plyr__menu__container .plyr__menu__value{margin-left:auto;padding-left:25px;font-weight:400;color:rgba(255,255,255,.8)}.plyr__menu__container::after{content:"";position:absolute;top:100%;right:15px;height:0;width:0;border:6px solid transparent;border-top-color:rgba(52,63,74,.9)}.plyr__tooltip{position:absolute;z-index:2;bottom:100%;margin-bottom:10px;padding:5px 7.5px;opacity:0;background:rgba(52,63,74,.85);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(52,63,74,.85);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(52,63,74,.2) 25%,transparent 25%,transparent 50%,rgba(52,63,74,.2) 50%,rgba(52,63,74,.2) 75%,transparent 75%,transparent);color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(198,214,219,.66)}.plyr__time{display:inline-block;vertical-align:middle;font-size:14px}.plyr__time+.plyr__time{display:none}@media (min-width:768px){.plyr__time+.plyr__time{display:inline-block}}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}.plyr__volume{display:none}.plyr .plyr__volume{-ms-flex:1;flex:1;position:relative}.plyr .plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr .plyr__volume{display:block;max-width:60px}}@media (min-width:768px){.plyr .plyr__volume{max-width:100px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr--fullscreen-active{position:fixed;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:10000000;background:#000;border-radius:0!important}.plyr--fullscreen-active video{height:100%}.plyr--fullscreen-active .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-active .plyr__controls{position:absolute;bottom:0;left:0;right:0}.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)} \ No newline at end of file diff --git a/dist/plyr.js b/dist/plyr.js index bbeb7ae7..207201a3 100644 --- a/dist/plyr.js +++ b/dist/plyr.js @@ -1,2 +1,2 @@ -!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(e,document):"function"==typeof define&&define.amd?define([],function(){return t(e,document)}):e.plyr=t(e,document)}("undefined"!=typeof window?window:this,function(e,t){"use strict";function n(){var e,n,r,a=navigator.userAgent,s=navigator.appName,o=""+parseFloat(navigator.appVersion),i=parseInt(navigator.appVersion,10),l=!1,u=!1,c=!1,d=!1;return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(l=!0,s="IE",o="11"):-1!==(n=a.indexOf("MSIE"))?(l=!0,s="IE",o=a.substring(n+5)):-1!==(n=a.indexOf("Chrome"))?(c=!0,s="Chrome",o=a.substring(n+7)):-1!==(n=a.indexOf("Safari"))?(d=!0,s="Safari",o=a.substring(n+7),-1!==(n=a.indexOf("Version"))&&(o=a.substring(n+8))):-1!==(n=a.indexOf("Firefox"))?(u=!0,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,isIE:l,isFirefox:u,isChrome:c,isSafari:d,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 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;return r.appendChild(a),o?s.insertBefore(r,o):s.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 d(e,n,r){var a=t.createElement(e);c(a,r),u(n,a)}function p(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,a=r.matches||r.webkitMatchesSelector||r.mozMatchesSelector||r.msMatchesSelector||function(e){return-1!==[].indexOf.call(t.querySelectorAll(e),this)};return a.call(e,n)}function b(e,t,n,r,a){g(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])},a)}function v(e,t,n,r,a){var s=t.split(" ");if(P["boolean"](a)||(a=!1),e instanceof NodeList)for(var o=0;or;r++){var a=e[r];for(var s in a)a[s]&&a[s].constructor&&a[s].constructor===Object?(t[s]=t[s]||{},x(t[s],a[s])):t[s]=a[s]}return t}}function T(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit o moz ms khtml".split(" ");if(P.undefined(t.cancelFullScreen))for(var r=0,a=n.length;a>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(v,S){function C(e,t,n,r){h(e,t,n,x({},r,{plyr:We}))}function L(t,n){S.debug&&e.console&&(n=Array.prototype.slice.call(n),P.string(S.logPrefix)&&S.logPrefix.length&&n.unshift(S.logPrefix),console[t].apply(console,n))}function O(){return{url:S.iconUrl,absolute:0===S.iconUrl.indexOf("http")||Ye.browser.isIE}}function j(){var e=[],t=O(),n=(t.absolute?"":t.url)+"#"+S.iconPrefix;return s(S.controls,"play-large")&&e.push('"),e.push('
'),s(S.controls,"restart")&&e.push('"),s(S.controls,"rewind")&&e.push('"),s(S.controls,"play")&&e.push('",'"),s(S.controls,"fast-forward")&&e.push('"),s(S.controls,"progress")&&(e.push('','','','','',"0% "+S.i18n.buffered,""),S.tooltips.seek&&e.push('00:00'),e.push("")),s(S.controls,"current-time")&&e.push('',''+S.i18n.currentTime+"",'00:00',""),s(S.controls,"duration")&&e.push('',''+S.i18n.duration+"",'00:00',""),s(S.controls,"mute")&&e.push('"),s(S.controls,"volume")&&e.push('','",'','',""),s(S.controls,"captions")&&e.push('"),s(S.controls,"fullscreen")&&e.push('"),e.push("
"),e.join("")}function V(){if(Ye.supported.full&&("audio"!==Ye.type||S.fullscreen.allowAudio)&&S.fullscreen.enabled){var e=A.supportsFullScreen;e||S.fullscreen.fallback&&!B()?(Ue((e?"Native":"Fallback")+" fullscreen enabled"),m(Ye.container,S.classes.fullscreen.enabled,!0)):Ue("Fullscreen not supported and fallback disabled"),Ye.buttons&&Ye.buttons.fullscreen&&k(Ye.buttons.fullscreen,!1),X()}}function q(){if("video"===Ye.type){Y(S.selectors.captions)||Ye.videoContainer.insertAdjacentHTML("afterbegin",'
'),Ye.usingTextTracks=!1,Ye.media.textTracks&&(Ye.usingTextTracks=!0);for(var e,t="",n=Ye.media.childNodes,r=0;r=10||Ye.browser.isFirefox&&Ye.browser.version>=31)&&(Ue("Detected browser with known TextTrack issues - using manual fallback"),Ye.usingTextTracks=!1),Ye.usingTextTracks){Ue("TextTracks supported");for(var o=0;o ");for(var r=0;rYe.captions.length-1){Ye.subcount=Ye.captions.length-1;break}Ye.media.currentTime.toFixed(1)>=n(Ye.captions[Ye.subcount][0])&&Ye.media.currentTime.toFixed(1)<=r(Ye.captions[Ye.subcount][0])?(Ye.currentCaption=Ye.captions[Ye.subcount][1],R(Ye.currentCaption)):R()}}function H(){if(Ye.buttons.captions){m(Ye.container,S.classes.captions.enabled,!0);var e=Ye.storage.captionsEnabled;P["boolean"](e)||(e=S.captions.defaultActive),e&&(m(Ye.container,S.classes.captions.active,!0),k(Ye.buttons.captions,!0))}}function W(e){return Ye.container.querySelectorAll(e)}function Y(e){return W(e)[0]}function B(){try{return e.self!==e.top}catch(t){return!0}}function X(){function e(e){9===e.which&&Ye.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=W("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];g(Ye.container,"keydown",e)}function U(e,t){if(P.string(t))d(e,Ye.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)d(e,Ye.media,t[n])}function J(){if(S.loadSprite){var e=O();e.absolute?(Ue("AJAX loading absolute SVG sprite"+(Ye.browser.isIE?" (due to IE)":"")),_(e.url,"sprite-plyr")):Ue("Sprite will be used as external resource directly")}var n=S.html;Ue("Injecting custom controls"),n||(n=j()),n=o(n,"{seektime}",S.seekTime),n=o(n,"{id}",Math.floor(1e4*Math.random()));var r;if(P.string(S.selectors.controls.container)&&(r=t.querySelector(S.selectors.controls.container)),P.htmlElement(r)||(r=Ye.container),r.insertAdjacentHTML("beforeend",n),S.tooltips.controls)for(var a=W([S.selectors.controls.wrapper," ",S.selectors.labels," .",S.classes.hidden].join("")),s=a.length-1;s>=0;s--){var i=a[s];m(i,S.classes.hidden,!1),m(i,S.classes.tooltip,!0)}}function z(){try{return Ye.controls=Y(S.selectors.controls.wrapper),Ye.buttons={},Ye.buttons.seek=Y(S.selectors.buttons.seek),Ye.buttons.play=W(S.selectors.buttons.play),Ye.buttons.pause=Y(S.selectors.buttons.pause),Ye.buttons.restart=Y(S.selectors.buttons.restart),Ye.buttons.rewind=Y(S.selectors.buttons.rewind),Ye.buttons.forward=Y(S.selectors.buttons.forward),Ye.buttons.fullscreen=Y(S.selectors.buttons.fullscreen),Ye.buttons.mute=Y(S.selectors.buttons.mute),Ye.buttons.captions=Y(S.selectors.buttons.captions),Ye.progress={},Ye.progress.container=Y(S.selectors.progress.container),Ye.progress.buffer={},Ye.progress.buffer.bar=Y(S.selectors.progress.buffer),Ye.progress.buffer.text=Ye.progress.buffer.bar&&Ye.progress.buffer.bar.getElementsByTagName("span")[0],Ye.progress.played=Y(S.selectors.progress.played),Ye.progress.tooltip=Ye.progress.container&&Ye.progress.container.querySelector("."+S.classes.tooltip),Ye.volume={},Ye.volume.input=Y(S.selectors.volume.input),Ye.volume.display=Y(S.selectors.volume.display),Ye.duration=Y(S.selectors.duration),Ye.currentTime=Y(S.selectors.currentTime),Ye.seekTime=W(S.selectors.seekTime),!0}catch(e){return Je("It looks like there is a problem with your controls HTML"),G(!0),!1}}function $(){m(Ye.container,S.selectors.container.replace(".",""),Ye.supported.full)}function G(e){e&&s(S.types.html5,Ye.type)?Ye.media.setAttribute("controls",""):Ye.media.removeAttribute("controls")}function K(e){var t=S.i18n.play;if(P.string(S.title)&&S.title.length&&(t+=", "+S.title,Ye.container.setAttribute("aria-label",S.title)),Ye.supported.full&&Ye.buttons.play)for(var n=Ye.buttons.play.length-1;n>=0;n--)Ye.buttons.play[n].setAttribute("aria-label",t);P.htmlElement(e)&&e.setAttribute("title",S.i18n.frameTitle.replace("{title}",S.title))}function Q(){var t=null;Ye.storage={},M.supported&&S.storage.enabled&&(e.localStorage.removeItem("plyr-volume"),t=e.localStorage.getItem(S.storage.key),t&&(/^\d+(\.\d+)?$/.test(t)?Z({volume:parseFloat(t)}):Ye.storage=JSON.parse(t)))}function Z(t){M.supported&&S.storage.enabled&&(x(Ye.storage,t),e.localStorage.setItem(S.storage.key,JSON.stringify(Ye.storage)))}function ee(){if(!Ye.media)return void Je("No media element found!");if(Ye.supported.full&&(m(Ye.container,S.classes.type.replace("{0}",Ye.type),!0),s(S.types.embed,Ye.type)&&m(Ye.container,S.classes.type.replace("{0}","video"),!0),m(Ye.container,S.classes.stopped,S.autoplay),m(Ye.ontainer,S.classes.isIos,Ye.browser.isIos),m(Ye.container,S.classes.isTouch,Ye.browser.isTouch),"video"===Ye.type)){var e=t.createElement("div");e.setAttribute("class",S.classes.videoWrapper),i(Ye.media,e),Ye.videoContainer=e}s(S.types.embed,Ye.type)&&te()}function te(){for(var n=t.createElement("div"),r=Ye.embedId,s=Ye.type+"-"+Math.floor(1e4*Math.random()),o=W('[id^="'+Ye.type+'-"]'),i=o.length-1;i>=0;i--)l(o[i]);if(m(Ye.media,S.classes.videoWrapper,!0),m(Ye.media,S.classes.embedWrapper,!0),"youtube"===Ye.type)Ye.media.appendChild(n),n.setAttribute("id",s),P.object(e.YT)?re(r,n):(a(S.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){re(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Ye.type)if(Ye.supported.full?Ye.media.appendChild(n):n=Ye.media,n.setAttribute("id",s),P.object(e.Vimeo))ae(r,n);else{a(S.urls.vimeo.api);var u=e.setInterval(function(){P.object(e.Vimeo)&&(e.clearInterval(u),ae(r,n))},50)}else if("soundcloud"===Ye.type){var d=t.createElement("iframe");d.loaded=!1,g(d,"load",function(){d.loaded=!0}),c(d,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+r,id:s}),n.appendChild(d),Ye.media.appendChild(n),e.SC||a(S.urls.soundcloud.api);var p=e.setInterval(function(){e.SC&&d.loaded&&(e.clearInterval(p),se.call(d))},50)}}function ne(){Ye.supported.full&&(De(),He()),K(Y("iframe"))}function re(t,n){Ye.embed=new e.YT.Player(n.id,{videoId:t,playerVars:{autoplay:S.autoplay?1:0,controls:Ye.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:S.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onError:function(e){C(Ye.container,"error",!0,{code:e.data,embed:e.target})},onReady:function(t){var n=t.target;Ye.media.play=function(){n.playVideo(),Ye.media.paused=!1},Ye.media.pause=function(){n.pauseVideo(),Ye.media.paused=!0},Ye.media.stop=function(){n.stopVideo(),Ye.media.paused=!0},Ye.media.duration=n.getDuration(),Ye.media.paused=!0,Ye.media.currentTime=0,Ye.media.muted=n.isMuted(),S.title=n.getVideoData().title,Ye.supported.full&&Ye.media.querySelector("iframe").setAttribute("tabindex","-1"),ne(),C(Ye.media,"timeupdate"),C(Ye.media,"durationchange"),e.clearInterval(Be.buffering),Be.buffering=e.setInterval(function(){Ye.media.buffered=n.getVideoLoadedFraction(),(null===Ye.media.lastBuffered||Ye.media.lastBufferedt?t=0:t>r&&(t=r),Ae(t);try{Ye.media.currentTime=t.toFixed(4)}catch(a){}if(s(S.types.embed,Ye.type)){switch(Ye.type){case"youtube":Ye.embed.seekTo(t);break;case"vimeo":Ye.embed.setCurrentTime(t.toFixed(0));break;case"soundcloud":Ye.embed.seekTo(1e3*t)}n&&ie(),C(Ye.media,"timeupdate"),Ye.media.seeking=!0}Ue("Seeking to "+Ye.media.currentTime+" seconds"),D(t)}function pe(){var e=parseInt(S.duration),t=0;return null===Ye.media.duration||isNaN(Ye.media.duration)||(t=Ye.media.duration),isNaN(e)?t:e}function me(){m(Ye.container,S.classes.playing,!Ye.media.paused),m(Ye.container,S.classes.stopped,Ye.media.paused),Ne(Ye.media.paused)}function fe(){I={x:e.pageXOffset||0,y:e.pageYOffset||0}}function ye(){e.scrollTo(I.x,I.y)}function be(e){var n=A.supportsFullScreen;if(n){if(!e||e.type!==A.fullScreenEventName)return A.isFullScreen(Ye.container)?A.cancelFullScreen():(fe(),A.requestFullScreen(Ye.container)),void(Ye.isFullscreen=A.isFullScreen(Ye.container));Ye.isFullscreen=A.isFullScreen(Ye.container)}else Ye.isFullscreen=!Ye.isFullscreen,t.body.style.overflow=Ye.isFullscreen?"hidden":"";m(Ye.container,S.classes.fullscreen.active,Ye.isFullscreen),X(Ye.isFullscreen),Ye.buttons&&Ye.buttons.fullscreen&&k(Ye.buttons.fullscreen,Ye.isFullscreen),C(Ye.container,Ye.isFullscreen?"enterfullscreen":"exitfullscreen",!0),!Ye.isFullscreen&&n&&ye()}function ve(e){if(P["boolean"](e)||(e=!Ye.media.muted),k(Ye.buttons.mute,e),Ye.media.muted=e,0===Ye.media.volume&&ge(S.volume),s(S.types.embed,Ye.type)){switch(Ye.type){case"youtube":Ye.embed[Ye.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":Ye.embed.setVolume(Ye.media.muted?0:parseFloat(S.volume/S.volumeMax))}C(Ye.media,"volumechange")}}function ge(e){var t=S.volumeMax,n=S.volumeMin;if(P.undefined(e)&&(e=Ye.storage.volume),(null===e||isNaN(e))&&(e=S.volume),e>t&&(e=t),n>e&&(e=n),Ye.media.volume=parseFloat(e/t),Ye.volume.display&&(Ye.volume.display.value=e),s(S.types.embed,Ye.type)){switch(Ye.type){case"youtube":Ye.embed.setVolume(100*Ye.media.volume);break;case"vimeo":case"soundcloud":Ye.embed.setVolume(Ye.media.volume)}C(Ye.media,"volumechange")}0===e?Ye.media.muted=!0:Ye.media.muted&&e>0&&ve()}function he(e){var t=Ye.media.muted?0:Ye.media.volume*S.volumeMax;P.number(e)||(e=S.volumeStep),ge(t+e)}function ke(e){var t=Ye.media.muted?0:Ye.media.volume*S.volumeMax;P.number(e)||(e=S.volumeStep),ge(t-e)}function we(){var e=Ye.media.muted?0:Ye.media.volume*S.volumeMax;Ye.supported.full&&(Ye.volume.input&&(Ye.volume.input.value=e),Ye.volume.display&&(Ye.volume.display.value=e)),Z({volume:e}),m(Ye.container,S.classes.muted,0===e),Ye.supported.full&&Ye.buttons.mute&&k(Ye.buttons.mute,0===e)}function xe(e){Ye.supported.full&&Ye.buttons.captions&&(P["boolean"](e)||(e=-1===Ye.container.className.indexOf(S.classes.captions.active)),Ye.captionsEnabled=e,k(Ye.buttons.captions,Ye.captionsEnabled),m(Ye.container,S.classes.captions.active,Ye.captionsEnabled),C(Ye.container,Ye.captionsEnabled?"captionsenabled":"captionsdisabled",!0),Z({captionsEnabled:Ye.captionsEnabled}))}function Te(e){var t="waiting"===e.type;clearTimeout(Be.loading),Be.loading=setTimeout(function(){m(Ye.container,S.classes.loading,t),Ne(t)},t?250:0)}function Se(e){if(Ye.supported.full){var t=Ye.progress.played,n=0,r=pe();if(e)switch(e.type){case"timeupdate":case"seeking":if(Ye.controls.pressed)return;n=w(Ye.media.currentTime,r),"timeupdate"===e.type&&Ye.buttons.seek&&(Ye.buttons.seek.value=n);break;case"playing":case"progress":t=Ye.progress.buffer,n=function(){var e=Ye.media.buffered;return e&&e.length?w(e.end(0),r):P.number(e)?100*e:0}()}_e(t,n)}}function _e(e,t){if(Ye.supported.full){if(P.undefined(t)&&(t=0),P.undefined(e)){if(!Ye.progress||!Ye.progress.buffer)return;e=Ye.progress.buffer}P.htmlElement(e)?e.value=t:e&&(e.bar&&(e.bar.value=t),e.text&&(e.text.innerHTML=t))}}function Ee(e,t){if(t){isNaN(e)&&(e=0),Ye.secs=parseInt(e%60),Ye.mins=parseInt(e/60%60),Ye.hours=parseInt(e/60/60%60);var n=parseInt(pe()/60/60%60)>0;Ye.secs=("0"+Ye.secs).slice(-2),Ye.mins=("0"+Ye.mins).slice(-2),t.innerHTML=(n?Ye.hours+":":"")+Ye.mins+":"+Ye.secs}}function Ce(){if(Ye.supported.full){var e=pe()||0;!Ye.duration&&S.displayDuration&&Ye.media.paused&&Ee(e,Ye.currentTime),Ye.duration&&Ee(e,Ye.duration),Ie()}}function Fe(e){Ee(Ye.media.currentTime,Ye.currentTime),e&&"timeupdate"===e.type&&Ye.media.seeking||Se(e)}function Ae(e){P.number(e)||(e=0);var t=pe(),n=w(e,t);Ye.progress&&Ye.progress.played&&(Ye.progress.played.value=n),Ye.buttons&&Ye.buttons.seek&&(Ye.buttons.seek.value=n)}function Ie(e){var t=pe();if(S.tooltips.seek&&Ye.progress.container&&0!==t){var n=Ye.progress.container.getBoundingClientRect(),r=0,a=S.classes.tooltip+"--visible";if(e)r=100/n.width*(e.pageX-n.left);else{if(!f(Ye.progress.tooltip,a))return;r=Ye.progress.tooltip.style.left.replace("%","")}0>r?r=0:r>100&&(r=100),Ee(t/100*r,Ye.progress.tooltip),Ye.progress.tooltip.style.left=r+"%",e&&s(["mouseenter","mouseleave"],e.type)&&m(Ye.progress.tooltip,a,"mouseenter"===e.type)}}function Ne(t){if(S.hideControls&&"audio"!==Ye.type){var n=0,r=!1,a=t,o=f(Ye.container,S.classes.loading);if(P["boolean"](t)||(t&&t.type?(r="enterfullscreen"===t.type,a=s(["mousemove","touchstart","mouseenter","focus"],t.type),s(["mousemove","touchmove"],t.type)&&(n=2e3),"focus"===t.type&&(n=3e3)):a=f(Ye.container,S.classes.hideControls)),e.clearTimeout(Be.hover),a||Ye.media.paused||o){if(m(Ye.container,S.classes.hideControls,!1),Ye.media.paused||o)return;Ye.browser.isTouch&&(n=3e3)}a&&Ye.media.paused||(Be.hover=e.setTimeout(function(){(!Ye.controls.pressed&&!Ye.controls.hover||r)&&m(Ye.container,S.classes.hideControls,!0)},n))}}function Pe(e){if(!P.undefined(e))return void Me(e);var t;switch(Ye.type){case"youtube":t=Ye.embed.getVideoUrl();break;case"vimeo":Ye.embed.getVideoUrl.then(function(e){t=e});break;case"soundcloud":Ye.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=Ye.media.currentSrc}return t||""}function Me(e){function n(){if(Ye.embed=null,l(Ye.media),"video"===Ye.type&&Ye.videoContainer&&l(Ye.videoContainer),Ye.container&&Ye.container.removeAttribute("class"),"type"in e&&(Ye.type=e.type,"video"===Ye.type)){var n=e.sources[0];"type"in n&&s(S.types.embed,n.type)&&(Ye.type=n.type)}switch(Ye.supported=E(Ye.type),Ye.type){case"video":Ye.media=t.createElement("video");break;case"audio":Ye.media=t.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":Ye.media=t.createElement("div"),Ye.embedId=e.sources[0].src}u(Ye.container,Ye.media),P["boolean"](e.autoplay)&&(S.autoplay=e.autoplay),s(S.types.html5,Ye.type)&&(S.crossorigin&&Ye.media.setAttribute("crossorigin",""),S.autoplay&&Ye.media.setAttribute("autoplay",""),"poster"in e&&Ye.media.setAttribute("poster",e.poster),S.loop&&Ye.media.setAttribute("loop","")),m(Ye.container,S.classes.fullscreen.active,Ye.isFullscreen),m(Ye.container,S.classes.captions.active,Ye.captionsEnabled),$(),s(S.types.html5,Ye.type)&&U("source",e.sources),ee(),s(S.types.html5,Ye.type)&&("tracks"in e&&U("track",e.tracks),Ye.media.load()),(s(S.types.html5,Ye.type)||s(S.types.embed,Ye.type)&&!Ye.supported.full)&&(De(),He()),S.title=e.title,K()}return P.object(e)&&"sources"in e&&e.sources.length?(m(Ye.container,S.classes.ready,!1),ie(),Ae(),_e(),Ve(),void qe(n,!1)):void Je("Invalid source format")}function Le(e){"video"===Ye.type&&Ye.media.setAttribute("poster",e)}function Oe(){function n(){var e=le(),t=Ye.buttons[e?"play":"pause"],n=Ye.buttons[e?"pause":"play"];if(n=n&&n.length>1?n[n.length-1]:n[0]){var r=f(t,S.classes.tabFocus);setTimeout(function(){n.focus(),r&&(m(t,S.classes.tabFocus,!1),m(n,S.classes.tabFocus,!0))},100)}}function r(){var e=t.activeElement;return e=e&&e!==t.body?t.querySelector(":focus"):null}function a(e){return e.keyCode?e.keyCode:e.which}function o(e){for(var t in Ye.buttons){var n=Ye.buttons[t];if(P.nodeList(n))for(var r=0;r0)&&(t?ke(n):he(n)),(e.deltaY>0||e.deltaX<0)&&(t?he(n):ke(n))})}function je(){if(g(Ye.media,"timeupdate seeking",Fe),g(Ye.media,"timeupdate",D),g(Ye.media,"durationchange loadedmetadata",Ce),g(Ye.media,"ended",function(){"video"===Ye.type&&S.showPosterOnEnd&&("video"===Ye.type&&R(),de(),Ye.media.load())}),g(Ye.media,"progress playing",Se),g(Ye.media,"volumechange",we),g(Ye.media,"play pause ended",me),g(Ye.media,"waiting canplay seeked",Te),S.clickToPlay&&"audio"!==Ye.type){var e=Y("."+S.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",g(e,"click",function(){S.hideControls&&Ye.browser.isTouch&&!Ye.media.paused||(Ye.media.paused?oe():Ye.media.ended?(de(),oe()):ie())})}S.disableContextMenu&&g(Ye.media,"contextmenu",function(e){e.preventDefault()}),g(Ye.media,S.events.concat(["keyup","keydown"]).join(" "),function(e){C(Ye.container,e.type,!0)})}function Ve(){if(s(S.types.html5,Ye.type)){for(var e=Ye.media.querySelectorAll("source"),t=0;t=0;n--){var r=n>0?t.cloneNode(!0):t,s=e[n],a=s.parentNode,o=s.nextSibling;return r.appendChild(s),o?a.insertBefore(r,o):a.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 d(e,n,r){var s=t.createElement(e);c(s,r),u(n,s)}function p(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 a=t.split(" ");if(P["boolean"](s)||(s=!1),e instanceof NodeList)for(var o=0;or;r++){var s=e[r];for(var a in s)s[a]&&s[a].constructor&&s[a].constructor===Object?(t[a]=t[a]||{},x(t[a],s[a])):t[a]=s[a]}return t}}function T(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit o moz 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 _(v,_){function C(e,t,n,r){h(e,t,n,x({},r,{plyr:Be}))}function L(t,n){_.debug&&e.console&&(n=Array.prototype.slice.call(n),P.string(_.logPrefix)&&_.logPrefix.length&&n.unshift(_.logPrefix),console[t].apply(console,n))}function O(){return{url:_.iconUrl,absolute:0===_.iconUrl.indexOf("http")||Xe.browser.isIE}}function j(){var e=[],t=O(),n=(t.absolute?"":t.url)+"#"+_.iconPrefix;return a(_.controls,"play-large")&&e.push('"),e.push('
'),a(_.controls,"restart")&&e.push('"),a(_.controls,"rewind")&&e.push('"),a(_.controls,"play")&&e.push('",'"),a(_.controls,"fast-forward")&&e.push('"),a(_.controls,"progress")&&(e.push('','','','','',"0% "+_.i18n.buffered,""),_.tooltips.seek&&e.push('00:00'),e.push("")),a(_.controls,"current-time")&&e.push('',''+_.i18n.currentTime+"",'00:00',""),a(_.controls,"duration")&&e.push('',''+_.i18n.duration+"",'00:00',""),a(_.controls,"mute")&&e.push('"),a(_.controls,"volume")&&e.push('','",'','',""),a(_.controls,"captions")&&e.push('"),a(_.controls,"settings")&&e.push('
','",'","
"),a(_.controls,"fullscreen")&&e.push('"),e.push("
"),e.join("")}function q(){if(Xe.supported.full&&("audio"!==Xe.type||_.fullscreen.allowAudio)&&_.fullscreen.enabled){var e=A.supportsFullScreen;e||_.fullscreen.fallback&&!B()?(ze((e?"Native":"Fallback")+" fullscreen enabled"),m(Xe.container,_.classes.fullscreen.enabled,!0)):ze("Fullscreen not supported and fallback disabled"),Xe.buttons&&Xe.buttons.fullscreen&&k(Xe.buttons.fullscreen,!1),X()}}function V(){if("video"===Xe.type){Y(_.selectors.captions)||Xe.videoContainer.insertAdjacentHTML("afterbegin",'
'),Xe.usingTextTracks=!1,Xe.media.textTracks&&(Xe.usingTextTracks=!0);for(var e,t="",n=Xe.media.childNodes,r=0;r=10||Xe.browser.isFirefox&&Xe.browser.version>=31)&&(ze("Detected browser with known TextTrack issues - using manual fallback"),Xe.usingTextTracks=!1),Xe.usingTextTracks){ze("TextTracks supported");for(var o=0;o ");for(var r=0;rXe.captions.length-1){Xe.subcount=Xe.captions.length-1;break}Xe.media.currentTime.toFixed(1)>=n(Xe.captions[Xe.subcount][0])&&Xe.media.currentTime.toFixed(1)<=r(Xe.captions[Xe.subcount][0])?(Xe.currentCaption=Xe.captions[Xe.subcount][1],R(Xe.currentCaption)):R()}}function H(){if(Xe.buttons.captions){m(Xe.container,_.classes.captions.enabled,!0);var e=Xe.storage.captionsEnabled;P["boolean"](e)||(e=_.captions.defaultActive),e&&(m(Xe.container,_.classes.captions.active,!0),k(Xe.buttons.captions,!0))}}function W(e){return Xe.container.querySelectorAll(e)}function Y(e){return W(e)[0]}function B(){try{return e.self!==e.top}catch(t){return!0}}function X(){function e(e){9===e.which&&Xe.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=W("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];g(Xe.container,"keydown",e)}function U(e,t){if(P.string(t))d(e,Xe.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)d(e,Xe.media,t[n])}function J(){if(_.loadSprite){var e=O();e.absolute?(ze("AJAX loading absolute SVG sprite"+(Xe.browser.isIE?" (due to IE)":"")),S(e.url,"sprite-plyr")):ze("Sprite will be used as external resource directly")}var n=_.html;ze("Injecting custom controls"),n||(n=j()),n=o(n,"{seektime}",_.seekTime),n=o(n,"{speed}",1===_.currentSpeed?"Normal":_.currentSpeed.toFixed(1)+"x"),n=o(n,"{lang}","English"),n=o(n,"{id}",Math.floor(1e4*Math.random()));var r;if(P.string(_.selectors.controls.container)&&(r=t.querySelector(_.selectors.controls.container)),P.htmlElement(r)||(r=Xe.container),r.insertAdjacentHTML("beforeend",n),_.tooltips.controls)for(var s=W([_.selectors.controls.wrapper," ",_.selectors.labels," .",_.classes.hidden].join("")),a=s.length-1;a>=0;a--){var i=s[a];m(i,_.classes.hidden,!1),m(i,_.classes.tooltip,!0)}}function z(){try{return Xe.controls=Y(_.selectors.controls.wrapper),Xe.buttons={},Xe.buttons.seek=Y(_.selectors.buttons.seek),Xe.buttons.play=W(_.selectors.buttons.play),Xe.buttons.pause=Y(_.selectors.buttons.pause),Xe.buttons.restart=Y(_.selectors.buttons.restart),Xe.buttons.rewind=Y(_.selectors.buttons.rewind),Xe.buttons.forward=Y(_.selectors.buttons.forward),Xe.buttons.fullscreen=Y(_.selectors.buttons.fullscreen),Xe.buttons.settings=Y(_.selectors.buttons.settings),Xe.buttons.mute=Y(_.selectors.buttons.mute),Xe.buttons.captions=Y(_.selectors.buttons.captions),Xe.progress={},Xe.progress.container=Y(_.selectors.progress.container),Xe.progress.buffer={},Xe.progress.buffer.bar=Y(_.selectors.progress.buffer),Xe.progress.buffer.text=Xe.progress.buffer.bar&&Xe.progress.buffer.bar.getElementsByTagName("span")[0],Xe.progress.played=Y(_.selectors.progress.played),Xe.progress.tooltip=Xe.progress.container&&Xe.progress.container.querySelector("."+_.classes.tooltip),Xe.volume={},Xe.volume.input=Y(_.selectors.volume.input),Xe.volume.display=Y(_.selectors.volume.display),Xe.duration=Y(_.selectors.duration),Xe.currentTime=Y(_.selectors.currentTime),Xe.seekTime=W(_.selectors.seekTime),!0}catch(e){return $e("It looks like there is a problem with your controls HTML"),G(!0),!1}}function $(){m(Xe.container,_.selectors.container.replace(".",""),Xe.supported.full)}function G(e){e&&a(_.types.html5,Xe.type)?Xe.media.setAttribute("controls",""):Xe.media.removeAttribute("controls")}function K(e){var t=_.i18n.play;if(P.string(_.title)&&_.title.length&&(t+=", "+_.title,Xe.container.setAttribute("aria-label",_.title)),Xe.supported.full&&Xe.buttons.play)for(var n=Xe.buttons.play.length-1;n>=0;n--)Xe.buttons.play[n].setAttribute("aria-label",t);P.htmlElement(e)&&e.setAttribute("title",_.i18n.frameTitle.replace("{title}",_.title))}function Q(){var t=null;Xe.storage={},M.supported&&_.storage.enabled&&(e.localStorage.removeItem("plyr-volume"),t=e.localStorage.getItem(_.storage.key),t&&(/^\d+(\.\d+)?$/.test(t)?Z({volume:parseFloat(t)}):Xe.storage=JSON.parse(t)))}function Z(t){M.supported&&_.storage.enabled&&(x(Xe.storage,t),e.localStorage.setItem(_.storage.key,JSON.stringify(Xe.storage)))}function ee(){if(!Xe.media)return void $e("No media element found!");if(Xe.supported.full&&(m(Xe.container,_.classes.type.replace("{0}",Xe.type),!0),a(_.types.embed,Xe.type)&&m(Xe.container,_.classes.type.replace("{0}","video"),!0),m(Xe.container,_.classes.stopped,_.autoplay),m(Xe.ontainer,_.classes.isIos,Xe.browser.isIos),m(Xe.container,_.classes.isTouch,Xe.browser.isTouch),"video"===Xe.type)){var e=t.createElement("div");e.setAttribute("class",_.classes.videoWrapper),i(Xe.media,e),Xe.videoContainer=e}a(_.types.embed,Xe.type)&&te()}function te(){for(var n=t.createElement("div"),r=Xe.embedId,a=Xe.type+"-"+Math.floor(1e4*Math.random()),o=W('[id^="'+Xe.type+'-"]'),i=o.length-1;i>=0;i--)l(o[i]);if(m(Xe.media,_.classes.videoWrapper,!0),m(Xe.media,_.classes.embedWrapper,!0),"youtube"===Xe.type)Xe.media.appendChild(n),n.setAttribute("id",a),P.object(e.YT)?re(r,n):(s(_.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){re(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Xe.type)if(Xe.supported.full?Xe.media.appendChild(n):n=Xe.media,n.setAttribute("id",a),P.object(e.Vimeo))se(r,n);else{s(_.urls.vimeo.api);var u=e.setInterval(function(){P.object(e.Vimeo)&&(e.clearInterval(u),se(r,n))},50)}else if("soundcloud"===Xe.type){var d=t.createElement("iframe");d.loaded=!1,g(d,"load",function(){d.loaded=!0}),c(d,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+r,id:a}),n.appendChild(d),Xe.media.appendChild(n),e.SC||s(_.urls.soundcloud.api);var p=e.setInterval(function(){e.SC&&d.loaded&&(e.clearInterval(p),ae.call(d))},50)}}function ne(){Xe.supported.full&&(We(),Ye()),K(Y("iframe"))}function re(t,n){Xe.embed=new e.YT.Player(n.id,{videoId:t,playerVars:{autoplay:_.autoplay?1:0,controls:Xe.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:_.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onError:function(e){C(Xe.container,"error",!0,{code:e.data,embed:e.target})},onReady:function(t){var n=t.target;Xe.media.play=function(){n.playVideo(),Xe.media.paused=!1},Xe.media.pause=function(){n.pauseVideo(),Xe.media.paused=!0},Xe.media.stop=function(){n.stopVideo(),Xe.media.paused=!0},Xe.media.duration=n.getDuration(),Xe.media.paused=!0,Xe.media.currentTime=0,Xe.media.muted=n.isMuted(),_.title=n.getVideoData().title,Xe.supported.full&&Xe.media.querySelector("iframe").setAttribute("tabindex","-1"),ne(),C(Xe.media,"timeupdate"),C(Xe.media,"durationchange"),e.clearInterval(Ue.buffering),Ue.buffering=e.setInterval(function(){Xe.media.buffered=n.getVideoLoadedFraction(),(null===Xe.media.lastBuffered||Xe.media.lastBuffered=_.speeds.length&&(n=0),e=_.speeds[n]}else e=_.defaultSpeed}_.currentSpeed=e,Xe.media.playbackRate=e,Z({speed:e})}function pe(e){var t=0,n=Xe.media.paused,r=me();P.number(e)?t=e:P.object(e)&&a(["input","change"],e.type)&&(t=e.target.value/e.target.max*r),0>t?t=0:t>r&&(t=r),Ie(t);try{Xe.media.currentTime=t.toFixed(4)}catch(s){}if(a(_.types.embed,Xe.type)){switch(Xe.type){case"youtube":Xe.embed.seekTo(t);break;case"vimeo":Xe.embed.setCurrentTime(t.toFixed(0));break;case"soundcloud":Xe.embed.seekTo(1e3*t)}n&&ie(),C(Xe.media,"timeupdate"),Xe.media.seeking=!0}ze("Seeking to "+Xe.media.currentTime+" seconds"),D(t)}function me(){var e=parseInt(_.duration),t=0;return null===Xe.media.duration||isNaN(Xe.media.duration)||(t=Xe.media.duration),isNaN(e)?t:e}function fe(){m(Xe.container,_.classes.playing,!Xe.media.paused),m(Xe.container,_.classes.stopped,Xe.media.paused),Me(Xe.media.paused)}function ye(){I={x:e.pageXOffset||0,y:e.pageYOffset||0}}function be(){e.scrollTo(I.x,I.y)}function ve(e){var n=A.supportsFullScreen;if(n){if(!e||e.type!==A.fullScreenEventName)return A.isFullScreen(Xe.container)?A.cancelFullScreen():(ye(),A.requestFullScreen(Xe.container)),void(Xe.isFullscreen=A.isFullScreen(Xe.container));Xe.isFullscreen=A.isFullScreen(Xe.container)}else Xe.isFullscreen=!Xe.isFullscreen,t.body.style.overflow=Xe.isFullscreen?"hidden":"";m(Xe.container,_.classes.fullscreen.active,Xe.isFullscreen),X(Xe.isFullscreen),Xe.buttons&&Xe.buttons.fullscreen&&k(Xe.buttons.fullscreen,Xe.isFullscreen),C(Xe.container,Xe.isFullscreen?"enterfullscreen":"exitfullscreen",!0),!Xe.isFullscreen&&n&&be()}function ge(e){if(P["boolean"](e)||(e=!Xe.media.muted),k(Xe.buttons.mute,e),Xe.media.muted=e,0===Xe.media.volume&&he(_.volume),a(_.types.embed,Xe.type)){switch(Xe.type){case"youtube":Xe.embed[Xe.media.muted?"mute":"unMute"]();break;case"vimeo":case"soundcloud":Xe.embed.setVolume(Xe.media.muted?0:parseFloat(_.volume/_.volumeMax))}C(Xe.media,"volumechange")}}function he(e){var t=_.volumeMax,n=_.volumeMin;if(P.undefined(e)&&(e=Xe.storage.volume),(null===e||isNaN(e))&&(e=_.volume),e>t&&(e=t),n>e&&(e=n),Xe.media.volume=parseFloat(e/t),Xe.volume.display&&(Xe.volume.display.value=e),a(_.types.embed,Xe.type)){switch(Xe.type){case"youtube":Xe.embed.setVolume(100*Xe.media.volume);break;case"vimeo":case"soundcloud":Xe.embed.setVolume(Xe.media.volume)}C(Xe.media,"volumechange")}0===e?Xe.media.muted=!0:Xe.media.muted&&e>0&&ge()}function ke(e){var t=Xe.media.muted?0:Xe.media.volume*_.volumeMax;P.number(e)||(e=_.volumeStep),he(t+e)}function we(e){var t=Xe.media.muted?0:Xe.media.volume*_.volumeMax;P.number(e)||(e=_.volumeStep),he(t-e)}function xe(){var e=Xe.media.muted?0:Xe.media.volume*_.volumeMax;Xe.supported.full&&(Xe.volume.input&&(Xe.volume.input.value=e),Xe.volume.display&&(Xe.volume.display.value=e)),Z({volume:e}),m(Xe.container,_.classes.muted,0===e),Xe.supported.full&&Xe.buttons.mute&&k(Xe.buttons.mute,0===e)}function Te(e){Xe.supported.full&&Xe.buttons.captions&&(P["boolean"](e)||(e=-1===Xe.container.className.indexOf(_.classes.captions.active)),Xe.captionsEnabled=e,k(Xe.buttons.captions,Xe.captionsEnabled),m(Xe.container,_.classes.captions.active,Xe.captionsEnabled),C(Xe.container,Xe.captionsEnabled?"captionsenabled":"captionsdisabled",!0),Z({captionsEnabled:Xe.captionsEnabled}))}function _e(e){var t="waiting"===e.type;clearTimeout(Ue.loading),Ue.loading=setTimeout(function(){m(Xe.container,_.classes.loading,t),Me(t)},t?250:0)}function Se(e){if(Xe.supported.full){var t=Xe.progress.played,n=0,r=me();if(e)switch(e.type){case"timeupdate":case"seeking":if(Xe.controls.pressed)return;n=w(Xe.media.currentTime,r),"timeupdate"===e.type&&Xe.buttons.seek&&(Xe.buttons.seek.value=n);break;case"playing":case"progress":t=Xe.progress.buffer,n=function(){var e=Xe.media.buffered;return e&&e.length?w(e.end(0),r):P.number(e)?100*e:0}()}Ee(t,n)}}function Ee(e,t){if(Xe.supported.full){if(P.undefined(t)&&(t=0),P.undefined(e)){if(!Xe.progress||!Xe.progress.buffer)return;e=Xe.progress.buffer}P.htmlElement(e)?e.value=t:e&&(e.bar&&(e.bar.value=t),e.text&&(e.text.innerHTML=t))}}function Ce(e,t){if(t){isNaN(e)&&(e=0),Xe.secs=parseInt(e%60),Xe.mins=parseInt(e/60%60),Xe.hours=parseInt(e/60/60%60);var n=parseInt(me()/60/60%60)>0;Xe.secs=("0"+Xe.secs).slice(-2),Xe.mins=("0"+Xe.mins).slice(-2),t.innerHTML=(n?Xe.hours+":":"")+Xe.mins+":"+Xe.secs}}function Fe(){if(Xe.supported.full){var e=me()||0;!Xe.duration&&_.displayDuration&&Xe.media.paused&&Ce(e,Xe.currentTime),Xe.duration&&Ce(e,Xe.duration),Ne()}}function Ae(e){Ce(Xe.media.currentTime,Xe.currentTime),e&&"timeupdate"===e.type&&Xe.media.seeking||Se(e)}function Ie(e){P.number(e)||(e=0);var t=me(),n=w(e,t);Xe.progress&&Xe.progress.played&&(Xe.progress.played.value=n),Xe.buttons&&Xe.buttons.seek&&(Xe.buttons.seek.value=n)}function Ne(e){var t=me();if(_.tooltips.seek&&Xe.progress.container&&0!==t){var n=Xe.progress.container.getBoundingClientRect(),r=0,s=_.classes.tooltip+"--visible";if(e)r=100/n.width*(e.pageX-n.left);else{if(!f(Xe.progress.tooltip,s))return;r=Xe.progress.tooltip.style.left.replace("%","")}0>r?r=0:r>100&&(r=100),Ce(t/100*r,Xe.progress.tooltip),Xe.progress.tooltip.style.left=r+"%",e&&a(["mouseenter","mouseleave"],e.type)&&m(Xe.progress.tooltip,s,"mouseenter"===e.type)}}function Pe(e){P.undefined(e)&&(e=Xe.storage.speed||_.defaultSpeed),de(e)}function Me(t){if(_.hideControls&&"audio"!==Xe.type){var n=0,r=!1,s=t,o=f(Xe.container,_.classes.loading);if(P["boolean"](t)||(t&&t.type?(r="enterfullscreen"===t.type,s=a(["mousemove","touchstart","mouseenter","focus"],t.type),a(["mousemove","touchmove"],t.type)&&(n=2e3),"focus"===t.type&&(n=3e3)):s=f(Xe.container,_.classes.hideControls)),e.clearTimeout(Ue.hover),s||Xe.media.paused||o){if(m(Xe.container,_.classes.hideControls,!1),Xe.media.paused||o)return;Xe.browser.isTouch&&(n=3e3)}s&&Xe.media.paused||(Ue.hover=e.setTimeout(function(){(!Xe.controls.pressed&&!Xe.controls.hover||r)&&m(Xe.container,_.classes.hideControls,!0)},n))}}function Le(e){if(!P.undefined(e))return void Oe(e);var t;switch(Xe.type){case"youtube":t=Xe.embed.getVideoUrl();break;case"vimeo":Xe.embed.getVideoUrl.then(function(e){t=e});break;case"soundcloud":Xe.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=Xe.media.currentSrc}return t||""}function Oe(e){function n(){if(Xe.embed=null,l(Xe.media),"video"===Xe.type&&Xe.videoContainer&&l(Xe.videoContainer),Xe.container&&Xe.container.removeAttribute("class"),"type"in e&&(Xe.type=e.type,"video"===Xe.type)){var n=e.sources[0];"type"in n&&a(_.types.embed,n.type)&&(Xe.type=n.type)}switch(Xe.supported=E(Xe.type),Xe.type){case"video":Xe.media=t.createElement("video");break;case"audio":Xe.media=t.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":Xe.media=t.createElement("div"),Xe.embedId=e.sources[0].src}u(Xe.container,Xe.media),P["boolean"](e.autoplay)&&(_.autoplay=e.autoplay),a(_.types.html5,Xe.type)&&(_.crossorigin&&Xe.media.setAttribute("crossorigin",""),_.autoplay&&Xe.media.setAttribute("autoplay",""),"poster"in e&&Xe.media.setAttribute("poster",e.poster),_.loop&&Xe.media.setAttribute("loop","")),m(Xe.container,_.classes.fullscreen.active,Xe.isFullscreen),m(Xe.container,_.classes.captions.active,Xe.captionsEnabled),$(),a(_.types.html5,Xe.type)&&U("source",e.sources),ee(),a(_.types.html5,Xe.type)&&("tracks"in e&&U("track",e.tracks),Xe.media.load()),(a(_.types.html5,Xe.type)||a(_.types.embed,Xe.type)&&!Xe.supported.full)&&(We(),Ye()),_.title=e.title,K()}return P.object(e)&&"sources"in e&&e.sources.length?(m(Xe.container,_.classes.ready,!1),ie(),Ie(),Ee(),Re(),void De(n,!1)):void $e("Invalid source format")}function je(e){"video"===Xe.type&&Xe.media.setAttribute("poster",e)}function qe(){function n(){var e=le(),t=Xe.buttons[e?"play":"pause"],n=Xe.buttons[e?"pause":"play"];if(n=n&&n.length>1?n[n.length-1]:n[0]){var r=f(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;return e=e&&e!==t.body?t.querySelector(":focus"):null}function s(e){return e.keyCode?e.keyCode:e.which}function o(e){for(var t in Xe.buttons){var n=Xe.buttons[t];if(P.nodeList(n))for(var r=0;r0)&&(t?we(n):ke(n)),(e.deltaY>0||e.deltaX<0)&&(t?ke(n):we(n))})}function Ve(){if(g(Xe.media,"timeupdate seeking",Ae),g(Xe.media,"timeupdate",D),g(Xe.media,"durationchange loadedmetadata",Fe),g(Xe.media,"ended",function(){"video"===Xe.type&&_.showPosterOnEnd&&("video"===Xe.type&&R(),pe(),Xe.media.load())}),g(Xe.media,"progress playing",Se),g(Xe.media,"volumechange",xe),g(Xe.media,"play pause ended",fe),g(Xe.media,"waiting canplay seeked",_e),_.clickToPlay&&"audio"!==Xe.type){var e=Y("."+_.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",g(e,"click",function(){_.hideControls&&Xe.browser.isTouch&&!Xe.media.paused||(Xe.media.paused?oe():Xe.media.ended?(pe(),oe()):ie())})}_.disableContextMenu&&g(Xe.media,"contextmenu",function(e){e.preventDefault()}),g(Xe.media,_.events.concat(["keyup","keydown"]).join(" "),function(e){C(Xe.container,e.type,!0)})}function Re(){if(a(_.types.html5,Xe.type)){for(var e=Xe.media.querySelectorAll("source"),t=0;t \ No newline at end of file + \ No newline at end of file diff --git a/src/js/plyr.js b/src/js/plyr.js index 9a437383..53af4cda 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -41,12 +41,7 @@ volumeStep: 1, defaultSpeed: 1.0, currentSpeed: 1.0, - speeds: [ - 0.5, - 1.0, - 1.5, - 2.0 - ], + speeds: [ 0.5, 1.0, 1.5, 2.0 ], duration: null, displayDuration: true, loadSprite: true, @@ -84,7 +79,7 @@ mute: '[data-plyr="mute"]', captions: '[data-plyr="captions"]', fullscreen: '[data-plyr="fullscreen"]', - speedup: '[data-plyr="speed-up"]' + settings: '[data-plyr="settings"]' }, volume: { input: '[data-plyr="volume"]', @@ -137,7 +132,7 @@ enabled: true, key: 'plyr' }, - controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'], + controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'], i18n: { restart: 'Restart', rewind: 'Rewind {seektime} secs', @@ -153,7 +148,9 @@ toggleCaptions: 'Toggle Captions', toggleFullscreen: 'Toggle Fullscreen', frameTitle: 'Player for {title}', - speedup: 'Speed x{speed}' + captions: 'Captions', + settings: 'Settings', + speed: 'Speed' }, types: { embed: ['youtube', 'vimeo', 'soundcloud'], @@ -183,7 +180,7 @@ volume: null, captions: null, fullscreen: null, - speedup: null + speed: null }, // Events to watch on HTML5 media elements events: ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'emptied'], @@ -354,21 +351,6 @@ } } - // Unwrap an element - // http://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/ - /*function _unwrap(wrapper) { - // Get the element's parent node - var parent = wrapper.parentNode; - - // Move all children out of the element - while (wrapper.firstChild) { - parent.insertBefore(wrapper.firstChild, wrapper); - } - - // Remove the empty element - parent.removeChild(wrapper); - }*/ - // Remove an element function _remove(element) { if (!element) { @@ -452,7 +434,7 @@ } // Toggle event listener - function _toggleListener(element, events, callback, toggle, useCapture) { + function _toggleListener(elements, events, callback, toggle, useCapture) { var eventList = events.split(' '); // Whether the listener is a capturing listener or not @@ -462,10 +444,10 @@ } // 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) { - _toggleListener(element[x], arguments[1], arguments[2], arguments[3]); + if (elements instanceof NodeList) { + for (var x = 0; x < elements.length; x++) { + if (elements[x] instanceof Node) { + _toggleListener(elements[x], arguments[1], arguments[2], arguments[3]); } } return; @@ -473,7 +455,7 @@ // If a single node is passed, bind the event listener for (var i = 0; i < eventList.length; i++) { - element[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, useCapture); + elements[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, useCapture); } } @@ -484,13 +466,6 @@ } } - // Unbind event - /*function _off(element, events, callback, useCapture) { - if (element) { - _toggleListener(element, events, callback, false, useCapture); - } - }*/ - // Trigger event function _event(element, type, bubbles, properties) { // Bail if no element @@ -604,6 +579,9 @@ }, undefined: function(input) { return input !== null && typeof input === 'undefined'; + }, + empty: function(input) { + return input === null || this.undefined(input) || ((this.string(input) || this.array(input) || this.nodeList(input)) && input.length === 0) || (this.object(input) && Object.keys(input).length === 0); } }; @@ -813,22 +791,12 @@ ); } - // Speed-up button - if (_inArray(config.controls, 'speed-up')) { - html.push( - '' - ); - } - // Progress if (_inArray(config.controls, 'progress')) { // Create progress html.push('', - '', - '', + '', + '', '', '', '0% ' + config.i18n.buffered, @@ -878,8 +846,8 @@ if (_inArray(config.controls, 'volume')) { html.push( '', - '', - '', + '', + '', '', '' ); @@ -896,6 +864,34 @@ ); } + // Settings button + if (_inArray(config.controls, 'settings')) { + + + html.push( + '
', + '', + '', + '
' + ); + } + // Toggle fullscreen button if (_inArray(config.controls, 'fullscreen')) { html.push( @@ -1292,7 +1288,10 @@ html = _replaceAll(html, '{seektime}', config.seekTime); // Replace seek time instances - html = _replaceAll(html, '{speed}', config.currentSpeed); + html = _replaceAll(html, '{speed}', config.currentSpeed === 1 ? 'Normal' : config.currentSpeed.toFixed(1) + 'x'); + + // Replace current captions language + html = _replaceAll(html, '{lang}', 'English'); // Replace all id references with random numbers html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000))); @@ -1340,7 +1339,7 @@ plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind); plyr.buttons.forward = _getElement(config.selectors.buttons.forward); plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); - plyr.buttons.speedup = _getElement(config.selectors.buttons.speedup); + plyr.buttons.settings = _getElement(config.selectors.buttons.settings); // Inputs plyr.buttons.mute = _getElement(config.selectors.buttons.mute); @@ -1982,13 +1981,14 @@ } // Speed-up - function _speedup(speed) { + function _speed(speed) { if (!_is.array(config.speeds)) { _warn('Invalid speeds format'); return; } if (!_is.number(speed)) { var index = config.speeds.indexOf(config.currentSpeed); + if (index !== -1) { var nextIndex = index + 1; if (nextIndex >= config.speeds.length) { @@ -2000,12 +2000,12 @@ } } + // Store current speed config.currentSpeed = speed; + // Set HTML5 speed plyr.media.playbackRate = speed; - _updateSpeedupTooltip(speed); - // Save speed to localStorage _updateStorage({speed: speed}); } @@ -2578,31 +2578,13 @@ } // Set playback speed - function _setSpeedup(speed) { + function _setSpeed(speed) { // Load speed from storage or default value if (_is.undefined(speed)) { speed = plyr.storage.speed || config.defaultSpeed; } - _speedup(speed); - } - - // Update hover tooltip for playback speed changed - function _updateSpeedupTooltip(speed) { - if (!isNaN(speed)) { - speed = config.currentSpeed; - } - - var button = plyr.buttons.speedup; - var template = config.i18n.speedup; - - var elements= button.getElementsByClassName(config.classes.tooltip); - if (elements.length === 0){ - return; - } - - var tooltip = elements[0]; - tooltip.innerHTML = _replaceAll(template, '{speed}', speed); + _speed(speed); } // Show the player controls in fullscreen mode @@ -3068,7 +3050,7 @@ _proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward); // Speed-up - _proxyListener(plyr.buttons.speedup, 'click', config.listeners.speedup, _speedup); + _proxyListener(plyr.buttons.speed, 'click', config.listeners.speed, _speed); // Seek _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek); @@ -3092,6 +3074,18 @@ // Captions _on(plyr.buttons.captions, 'click', _toggleCaptions); + // Menus + _on(plyr.controls.querySelectorAll('[aria-haspopup="true"]'), 'click', function() { + var toggle = this, + target = document.querySelector('#' + toggle.getAttribute('aria-controls')), + show = (toggle.getAttribute('aria-expanded') === 'false'); + + console.log(target, toggle); + + toggle.setAttribute('aria-expanded', show); + target.setAttribute('aria-hidden', !show); + }); + // Seek tooltip _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip); @@ -3456,7 +3450,7 @@ _updateVolume(); // Set playback speed - _setSpeedup(); + _setSpeed(); // Reset time display _timeUpdate(); @@ -3488,6 +3482,7 @@ source: _source, poster: _updatePoster, setVolume: _setVolume, + setSpeed: _setSpeed, togglePlay: _togglePlay, toggleMute: _toggleMute, toggleCaptions: _toggleCaptions, diff --git a/src/less/plyr.less b/src/less/plyr.less index f70d135c..a3dd8e83 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -11,6 +11,16 @@ @keyframes plyr-progress { to { background-position: @plyr-progress-loading-size 0; } } +@keyframes plyr-popup { + from { + transform: translateY(10px); + opacity: .5; + } + to { + transform: translateY(0); + opacity: 1; + } +} // Styles // ------------------------------- @@ -40,6 +50,11 @@ } } + // ARIA + [aria-hidden='true'] { + display: none; + } + // Focus &:focus { outline: 0; @@ -268,7 +283,8 @@ // Spacing > button, .plyr__progress, - .plyr__time { + .plyr__time, + .plyr__menu { margin-left: (@plyr-control-spacing / 2); &:first-child { @@ -320,9 +336,16 @@ @media (min-width: @plyr-bp-screen-sm) { > button, .plyr__progress, - .plyr__time { + .plyr__time, + .plyr__menu { margin-left: @plyr-control-spacing; } + + > button + button, + .plyr__menu + button, + > button + .plyr__menu { + margin-left: (@plyr-control-spacing / 2); + } } } // Hide controls @@ -338,7 +361,7 @@ right: 0; bottom: 0; padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing; - background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%)); + background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%)); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; color: @plyr-video-control-color; @@ -442,6 +465,78 @@ display: inline-block; } +// Menus +// -------------------------------------------------------------- +.plyr__menu { + position: relative; + + // Hide tooltip + button[aria-expanded='true'] .plyr__tooltip { + display: none; + } + + // The actual menu container + &__container { + position: absolute; + bottom: 100%; + right: -5px; + margin-bottom: 10px; + animation: plyr-popup .2s ease; + background: fade(@plyr-video-controls-bg, 90%); + box-shadow: 0 1px 0 fade(#000, 20%); + border-radius: 4px; + white-space: nowrap; + text-align: left; + color: @plyr-video-control-color; + font-size: @plyr-font-size-small; + + ul { + margin: 0; + padding: 5px; + list-style: none; + } + + button { + display: flex; + width: 100%; + padding: 10px 30px 10px 12px; + color: @plyr-video-control-color; + font-weight: 600; + + // Arrow + &::after { + content: ""; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 5px; + border: 5px solid transparent; + border-left-color: fade(@plyr-video-control-color, 80%); + } + } + + // Option value + .plyr__menu__value { + margin-left: auto; + padding-left: 25px; + font-weight: 400; + color: fade(@plyr-video-control-color, 80%); + } + + // Arrow + &::after { + content: ""; + position: absolute; + top: 100%; + right: 15px; + height: 0; + width: 0; + border: 6px solid transparent; + border-top-color: fade(@plyr-video-controls-bg, 90%); + } + } +} + // Tooltips // -------------------------------------------------------------- .plyr__tooltip { @@ -492,7 +587,7 @@ } // First tooltip -.plyr__controls button:first-child .plyr__tooltip { +.plyr__controls > button:first-child .plyr__tooltip { left: 0; transform: translate(0, 10px) scale(.8); transform-origin: 0 100%; @@ -503,7 +598,7 @@ } // Last tooltip -.plyr__controls button:last-child .plyr__tooltip { +.plyr__controls > button:last-child .plyr__tooltip { right: 0; transform: translate(0, 10px) scale(.8); transform-origin: 100% 100%; @@ -515,8 +610,8 @@ } } -.plyr__controls button:first-child, -.plyr__controls button:last-child { +.plyr__controls > button:first-child, +.plyr__controls > button:last-child { &:hover .plyr__tooltip, &.tab-focus:focus .plyr__tooltip, .plyr__tooltip--visible { diff --git a/src/less/variables.less b/src/less/variables.less index fc9e895a..8a601571 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -17,7 +17,7 @@ @plyr-font-size-base: 16px; // Captions -@plyr-captions-bg: fade(#000, 70%); +@plyr-captions-bg: fade(#343f4a, 85%); @plyr-captions-color: #fff; @plyr-font-size-captions-base: @plyr-font-size-base; @plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5); @@ -27,7 +27,7 @@ @plyr-control-icon-size: 18px; @plyr-control-spacing: 10px; @plyr-control-padding: (@plyr-control-spacing * .7); -@plyr-video-controls-bg: #000; +@plyr-video-controls-bg: #343f4a; @plyr-video-control-color: #fff; @plyr-video-control-color-hover: #fff; @plyr-video-control-bg-hover: @plyr-color-main; @@ -38,7 +38,7 @@ @plyr-audio-control-bg-hover: @plyr-color-main; // Tooltips -@plyr-tooltip-bg: fade(#000, 70%); +@plyr-tooltip-bg: fade(#343f4a, 85%); @plyr-tooltip-color: #fff; @plyr-tooltip-padding: (@plyr-control-spacing / 2); @plyr-tooltip-arrow-size: 4px; @@ -46,7 +46,7 @@ // Progress @plyr-progress-loading-size: 25px; -@plyr-progress-loading-bg: fade(#000, 15%); +@plyr-progress-loading-bg: fade(#343f4a, 20%); @plyr-video-progress-bg: fade(#fff, 25%); @plyr-video-progress-buffered-bg: @plyr-video-progress-bg; @plyr-audio-progress-bg: fade(#C6D6DB, 66%); @@ -58,7 +58,7 @@ @plyr-range-thumb-width: floor(@plyr-range-track-height * 2); @plyr-range-thumb-bg: #fff; @plyr-range-thumb-border: 2px solid transparent; -@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#000, 15%); +@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(#343f4a, 20%); @plyr-range-thumb-active-border-color: #fff; @plyr-range-thumb-active-bg: @plyr-video-control-bg-hover; @plyr-range-thumb-active-scale: 1.25; diff --git a/src/sprite/plyr-settings.svg b/src/sprite/plyr-settings.svg new file mode 100644 index 00000000..e6fd0f75 --- /dev/null +++ b/src/sprite/plyr-settings.svg @@ -0,0 +1,12 @@ + + + +