diff --git a/demo/dist/demo.css b/demo/dist/demo.css index 35c501c7..302747cb 100644 --- a/demo/dist/demo.css +++ b/demo/dist/demo.css @@ -1 +1 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */a.logo,img,legend{border:0}a,h1,h2{color:#3498db}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}body,figure,li,ul{margin:0}[hidden],template{display:none}li,nav ul,ul{list-style:none;padding:0}legend,li,nav ul,ul{padding:0}.btn__bar,sub,sup{position:relative}.plyr--video::after,a svg,button svg,label svg{pointer-events:none}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0;text-decoration:none;border-bottom:1px dotted currentColor;transition:background .3s ease,color .3s ease,border .3s ease}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}.btn__bar,nav li{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:500}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:700}html{font-size:100%;height:100%;background:fixed #f2f5f7}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b;font-weight:500;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:10px}h1,h2{letter-spacing:-.025em;margin:0 0 10px;line-height:1.2;font-weight:700}h1{font-size:64px;font-size:4rem}p,small{margin:0 0 20px}small{padding:0 10px;font-size:14px;font-size:.875rem}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.color--vimeo{color:#19b7ed}.color--youtube{color:#cc181e}*,::after,::before{box-sizing:border-box}.btn__bar ul,nav li{display:inline-block}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}section{padding-bottom:20px}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}section{padding-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}.btn,.btn__count,.error main,video{vertical-align:middle}.btn .icon,a .icon{margin-right:10px}.btn:not(.btn-large) .icon{width:16px;height:16px}nav ul{margin:0;font-size:0}nav li{margin-top:10px;font-size:16px;font-size:1rem}nav li+li{margin-left:20px}.btn__bar{margin:0 auto 20px;max-width:1200px}.btn__bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#dbe3e8}.btn__bar ul{position:relative;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn__bar li{margin:0}.btn__bar li:first-child .btn{border-radius:4px 0 0 4px}.btn__bar li:last-child .btn{border-radius:0 4px 4px 0}.btn__bar li+li .btn{margin-left:-1px}.btn__bar li.active .btn{position:relative;z-index:1}.btn__bar li.active .btn .icon{color:inherit}.btn__bar li.active+li .btn:hover{z-index:0}.btn__bar .btn{position:relative;display:block;border-radius:0}.btn__bar .btn:focus,.btn__bar .btn:hover{z-index:1}@media (min-width:560px){.btn__bar{margin-bottom:40px}}.btn,.btn__count{display:inline-block;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700}.btn{padding:10px 12px;background:linear-gradient(#f8fafb,#e9eef1);border:1px solid #cbd0d3;box-shadow:0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .1s ease,color .1s ease;font-size:14px;font-size:.875rem}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn--large{padding:10px 20px;font-size:16px;font-size:1rem}.btn--primary,.btn__bar li.active .btn{background-image:linear-gradient(#3498db,#258cd1);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn--primary:focus,.btn--primary:hover{color:#fff;border-color:#196090}.btn--youtube .icon{color:#cc181e}.btn--vimeo .icon{color:#19b7ed}.btn--twitter .icon{color:#4BAAF4}.btn__count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn__count::before,.plyr--video::after{content:"";position:absolute}.btn__count::before{display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%}section{margin:0 auto 20px;max-width:1200px}video{max-width:100%}.plyr{margin:0 auto;border-radius:6px}.plyr--audio{max-width:520px}.plyr--video::after{top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block} \ No newline at end of file +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */a.logo,img,legend{border:0}a,h1,h2{color:#3498db}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,small,summary{display:block}body,figure,li,ul{margin:0}[hidden],template{display:none}li,nav ul,ul{list-style:none;padding:0}legend,li,nav ul,ul{padding:0}.btn__bar,sub,sup{position:relative}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a{background:0 0;text-decoration:none;border-bottom:1px dotted currentColor;transition:background .3s ease,color .3s ease,border .3s ease}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}.btn__bar,nav li{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-medium.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-medium.woff) format("woff");font-style:normal;font-weight:500}@font-face{font-family:Avenir;src:url(//cdn.plyr.io/fonts/avenir-bold.woff2) format("woff2"),url(//cdn.plyr.io/fonts/avenir-bold.woff) format("woff");font-style:normal;font-weight:700}html{font-size:100%;height:100%;background:fixed #f2f5f7}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b;font-weight:500;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding:10px}h1,h2{letter-spacing:-.025em;margin:0 0 10px;line-height:1.2;font-weight:700}h1{font-size:64px;font-size:4rem}p,small{margin:0 0 20px}small{padding:0 10px;font-size:14px;font-size:.875rem}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.color--vimeo{color:#19b7ed}.color--youtube{color:#cc181e}*,::after,::before{box-sizing:border-box}.btn__bar ul,nav li{display:inline-block}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}section{padding-bottom:20px}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}section{padding-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}.btn,.btn__count,.error main,video{vertical-align:middle}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}.btn:not(.btn-large) .icon{width:16px;height:16px}nav ul{margin:0;font-size:0}nav li{margin-top:10px;font-size:16px;font-size:1rem}nav li+li{margin-left:20px}.btn__bar{margin:0 auto 20px;max-width:1200px}.btn__bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#dbe3e8}.btn__bar ul{position:relative;z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn__bar li{margin:0}.btn__bar li:first-child .btn{border-radius:4px 0 0 4px}.btn__bar li:last-child .btn{border-radius:0 4px 4px 0}.btn__bar li+li .btn{margin-left:-1px}.btn__bar li.active .btn{position:relative;z-index:1}.btn__bar li.active .btn .icon{color:inherit}.btn__bar li.active+li .btn:hover{z-index:0}.btn__bar .btn{position:relative;display:block;border-radius:0}.btn__bar .btn:focus,.btn__bar .btn:hover{z-index:1}@media (min-width:560px){.btn__bar{margin-bottom:40px}}.btn,.btn__count{display:inline-block;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700}.btn{padding:10px 12px;background:linear-gradient(#f8fafb,#e9eef1);border:1px solid #cbd0d3;box-shadow:0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;transition:background .1s ease,color .1s ease;font-size:14px;font-size:.875rem}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn--large{padding:10px 20px;font-size:16px;font-size:1rem}.btn--primary,.btn__bar li.active .btn{background-image:linear-gradient(#3498db,#258cd1);background-color:#3498db;border-color:#217dbb;box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn--primary:focus,.btn--primary:hover{color:#fff;border-color:#196090}.btn--youtube .icon{color:#cc181e}.btn--vimeo .icon{color:#19b7ed}.btn--twitter .icon{color:#4BAAF4}.btn__count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn__count::before,.plyr__video-wrapper::after{content:"";position:absolute}.btn__count::before{display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%}section{margin:0 auto 20px;max-width:1200px}video{max-width:100%}.plyr{margin:0 auto;border-radius:6px}.plyr--audio{max-width:520px}.plyr__video-wrapper::after{pointer-events:none;top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block} \ No newline at end of file diff --git a/demo/src/js/main.js b/demo/src/js/main.js index f4abc7b7..bdd7febe 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -8,78 +8,78 @@ // General functions ;(function() { - document.body.addEventListener('ready', function(event) { console.log(event); }); + document.body.addEventListener('ready', function(event) { console.log(event); }); + + // Setup the player + var instances = plyr.setup({ + debug: true, + title: 'Video demo', + iconUrl: '../dist/plyr.svg', + tooltips: { + controls: true + }, + captions: { + defaultActive: true + } + }); + plyr.loadSprite('dist/demo.svg'); - // Setup the player - var instances = plyr.setup({ - debug: true, - title: 'Video demo', - iconUrl: '../dist/plyr.svg', - tooltips: { - controls: true - }, - captions: { - defaultActive: true - } - }); - plyr.loadSprite('dist/demo.svg'); + // Plyr returns an array regardless + var player = instances[0].plyr; - // Plyr returns an array regardless - var player = instances[0].plyr; + // Setup type toggle + var buttons = document.querySelectorAll('[data-source]'), + types = { + video: 'video', + audio: 'audio', + youtube: 'youtube', + vimeo: 'vimeo' + }, + currentType = window.location.hash.replace('#', ''), + historySupport = (window.history && window.history.pushState); - // Setup type toggle - var buttons = document.querySelectorAll('[data-source]'), - types = { - video: 'video', - audio: 'audio', - youtube: 'youtube', - vimeo: 'vimeo' - }, - currentType = window.location.hash.replace('#', ''), - historySupport = (window.history && window.history.pushState); + // Bind to each button + for (var i = buttons.length - 1; i >= 0; i--) { + buttons[i].addEventListener('click', function() { + var type = this.getAttribute('data-source'); - // Bind to each button - for (var i = buttons.length - 1; i >= 0; i--) { - buttons[i].addEventListener('click', function() { - var type = this.getAttribute('data-source'); + newSource(type); - newSource(type); + if (historySupport) { + history.pushState({ 'type': type }, '', '#' + type); + } + }); + } - if (historySupport) { - history.pushState({ 'type': type }, '', '#' + type); - } - }); - } + // List for backwards/forwards + window.addEventListener('popstate', function(event) { + if(event.state && 'type' in event.state) { + newSource(event.state.type); + } + }); - // List for backwards/forwards - window.addEventListener('popstate', function(event) { - if(event.state && 'type' in event.state) { - newSource(event.state.type); - } - }); + // On load + if(historySupport) { + var video = !currentType.length; - // On load - if(historySupport) { - var video = !currentType.length; + // If there's no current type set, assume video + if(video) { + currentType = types.video; + } - // If there's no current type set, assume video - if(video) { - currentType = types.video; - } + // Replace current history state + if(currentType in types) { + history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType)); + } - // Replace current history state - if(currentType in types) { - history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType)); - } + // If it's not video, load the source + if(currentType !== types.video) { + newSource(currentType, true); + } + } - // If it's not video, load the source - if(currentType !== types.video) { - newSource(currentType, true); - } - } - - // Toggle class on an element - function toggleClass(element, className, state) { + // Toggle class on an element + function toggleClass(element, className, state) { if (element) { if (element.classList) { element.classList[state ? 'add' : 'remove'](className); @@ -91,95 +91,95 @@ } } - // 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)) { - return; - } + // 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)) { + return; + } - switch(type) { - case types.video: - player.source({ - type: 'video', - title: 'View From A Blue Moon', - sources: [{ - src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', - type: 'video/mp4' - }, - { - src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm', - type: 'video/webm' - }], - poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg', - tracks: [{ - kind: 'captions', - label: 'English', - srclang:'en', - src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt', - default: true - }] - }); - break; + switch(type) { + case types.video: + player.source({ + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4', + type: 'video/mp4' + }, + { + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm', + type: 'video/webm' + }], + poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg', + tracks: [{ + kind: 'captions', + label: 'English', + srclang:'en', + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt', + default: true + }] + }); + break; - case types.audio: - player.source({ - type: 'audio', - title: 'Kishi Bashi – “It All Began With A Burst”', - sources: [{ - src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', - type: 'audio/mp3' - }, - { - src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', - type: 'audio/ogg' - }] - }); - break; + case types.audio: + player.source({ + type: 'audio', + title: 'Kishi Bashi – “It All Began With A Burst”', + sources: [{ + src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', + type: 'audio/mp3' + }, + { + src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg', + type: 'audio/ogg' + }] + }); + break; - case types.youtube: - player.source({ - type: 'video', - title: 'View From A Blue Moon', - sources: [{ - src: 'bTqVqk7FSmY', - type: 'youtube' - }] - }); - break; + case types.youtube: + player.source({ + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: 'bTqVqk7FSmY', + type: 'youtube' + }] + }); + break; - case types.vimeo: - player.source({ - type: 'video', - title: 'View From A Blue Moon', - sources: [{ - src: '143418951', - type: 'vimeo' - }] - }); - break; - } + case types.vimeo: + player.source({ + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: '143418951', + type: 'vimeo' + }] + }); + break; + } - // Set the current type for next time - currentType = type; + // Set the current type for next time + currentType = type; - // Remove active classes - for (var x = buttons.length - 1; x >= 0; x--) { - toggleClass(buttons[x].parentElement, 'active', false); - } + // Remove active classes + for (var x = buttons.length - 1; x >= 0; x--) { + toggleClass(buttons[x].parentElement, 'active', false); + } - // Set active on parent - toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true); - } + // Set active on parent + toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true); + } })(); // Google analytics // For demo site (http://[www.]plyr.io) only if(document.domain.indexOf('plyr.io') > -1) { - (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - ga('create', 'UA-40881672-11', 'auto'); - ga('send', 'pageview'); + (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-40881672-11', 'auto'); + ga('send', 'pageview'); } diff --git a/demo/src/less/components/examples.less b/demo/src/less/components/examples.less index 24bf1e9c..8649c023 100644 --- a/demo/src/less/components/examples.less +++ b/demo/src/less/components/examples.less @@ -21,7 +21,7 @@ video { .plyr--audio { max-width: @example-width-audio; } -.plyr--video::after { +.plyr__video-wrapper::after { content: ""; pointer-events: none; position: absolute; diff --git a/dist/plyr.css b/dist/plyr.css index 3b61e396..addb674d 100644 --- a/dist/plyr.css +++ b/dist/plyr.css @@ -1 +1 @@ -.plyr .plyr__video-embed iframe,.plyr__tooltip{pointer-events:none}@-webkit-keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-progress{to{background-position:25px 0}}.plyr{position:relative;max-width:100%;min-width: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,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),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,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),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,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),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;-webkit-transform:scale(1.25);transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--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%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;-webkit-transform:translateY(-40px);transform:translateY(-40px);transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-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)}.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{-webkit-transform:translateY(-15px);transform:translateY(-15px)}.plyr ::-webkit-media-controls{display:none}.plyr__controls{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-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;-webkit-flex-shrink:0;-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;box-shadow:0 1px 1px rgba(0,0,0,.05);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%;-webkit-transform:translate(-50%,-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;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,-webkit-transform .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;-webkit-transform:translateX(-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;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr__controls button:first-child .plyr__tooltip{left:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:0 100%;transform-origin:0 100%}.plyr__controls button:first-child .plyr__tooltip::before{left:16px}.plyr__controls button:last-child .plyr__tooltip{right:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.plyr__controls button:last-child .plyr__tooltip::before{left:auto;right:16px;-webkit-transform:translateX(50%);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{-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}.plyr__progress{position:relative;display:none;-webkit-flex:1;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-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{-webkit-animation:plyr-progress 1s linear infinite;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{-webkit-flex:1;-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%;-webkit-transform:translateY(-50%);transform:translateY(-50%)} \ No newline at end of file +.plyr .plyr__video-embed iframe,.plyr__tooltip{pointer-events:none}@-webkit-keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-progress{to{background-position:25px 0}}.plyr{position:relative;max-width:100%;min-width: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,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),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,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),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,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),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;-webkit-transform:scale(1.25);transform:scale(1.25)}.plyr input[type=range]:active::-moz-range-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr input[type=range]:active::-ms-thumb{background:#3498db;border-color:#fff;transform:scale(1.25)}.plyr--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%;-webkit-transform:translateY(-35.95%);transform:translateY(-35.95%)}.plyr video::-webkit-media-text-track-container{display:none}.plyr__captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;-webkit-transform:translateY(-40px);transform:translateY(-40px);transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-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)}.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{-webkit-transform:translateY(-15px);transform:translateY(-15px)}.plyr ::-webkit-media-controls{display:none}.plyr__controls{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-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;-webkit-flex-shrink:0;-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%;-webkit-transform:translate(-50%,-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;-webkit-transform:translate(-50%,10px) scale(.8);transform:translate(-50%,10px) scale(.8);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;transition:opacity .2s .1s ease,-webkit-transform .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease;transition:transform .2s .1s ease,opacity .2s .1s ease,-webkit-transform .2s .1s ease}.plyr__tooltip::before{content:'';position:absolute;width:0;height:0;left:50%;-webkit-transform:translateX(-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;-webkit-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.plyr button:hover .plyr__tooltip{z-index:3}.plyr__controls button:first-child .plyr__tooltip{left:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:0 100%;transform-origin:0 100%}.plyr__controls button:first-child .plyr__tooltip::before{left:16px}.plyr__controls button:last-child .plyr__tooltip{right:0;-webkit-transform:translate(0,10px) scale(.8);transform:translate(0,10px) scale(.8);-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.plyr__controls button:last-child .plyr__tooltip::before{left:auto;right:16px;-webkit-transform:translateX(50%);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{-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1)}.plyr__progress{position:relative;display:none;-webkit-flex:1;-ms-flex:1;flex:1}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress input[type=range]::-webkit-slider-runnable-track{background:0 0}.plyr__progress input[type=range]::-moz-range-track{background:0 0}.plyr__progress input[type=range]::-ms-fill-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{-webkit-animation:plyr-progress 1s linear infinite;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{-webkit-flex:1;-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%;-webkit-transform:translateY(-50%);transform:translateY(-50%)} \ No newline at end of file diff --git a/dist/plyr.js b/dist/plyr.js index 92dec1cb..385f55eb 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,a=navigator.userAgent,s=navigator.appName,o=""+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,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"))?(p=!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: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 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){for(var t=e.parentNode;e.firstChild;)t.insertBefore(e.firstChild,e);t.removeChild(e)}function u(e){e&&e.parentNode.removeChild(e)}function c(e,t){e.insertBefore(t,e.firstChild)}function p(e,t){for(var n in t)e.setAttribute(n,"boolean"==typeof t[n]&&t[n]?"":t[n])}function d(e,n,r){var a=t.createElement(e);p(a,r),c(n,a)}function A(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){e&&h(e,t,n,!0,r)}function v(e,t,n,r){e&&h(e,t,n,!1,r)}function g(e,t,n,r,a){b(e,t,function(t){n&&n.apply(e,[t]),r.apply(e,[t])},a)}function h(e,t,n,r,a){var s=t.split(" ");if("boolean"!=typeof 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]||{},T(t[s],a[s])):t[s]=a[s]}return t}}function E(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit moz o ms khtml".split(" ");if("undefined"!=typeof t.cancelFullScreen)e.supportsFullScreen=!0;else for(var r=0,a=n.length;a>r;r++){if(e.prefix=n[r],"undefined"!=typeof t[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}if("undefined"!=typeof t.msExitFullscreen&&t.msFullscreenEnabled){e.prefix="ms",e.supportsFullScreen=!0;break}}return e.supportsFullScreen&&(e.fullScreenEventName="ms"==e.prefix?"MSFullscreenChange":e.prefix+"fullscreenchange",e.isFullScreen=function(e){switch("undefined"==typeof e&&(e=t.body),this.prefix){case"":return t.fullscreenElement==e;case"moz":return t.mozFullScreenElement==e;default:return t[this.prefix+"FullscreenElement"]==e}},e.requestFullScreen=function(e){return"undefined"==typeof e&&(e=t.body),""===this.prefix?e.requestFullScreen():e[this.prefix+("ms"==this.prefix?"RequestFullscreen":"RequestFullScreen")]()},e.cancelFullScreen=function(){return""===this.prefix?t.cancelFullScreen():t[this.prefix+("ms"==this.prefix?"ExitFullscreen":"CancelFullScreen")]()},e.element=function(){return""===this.prefix?t.fullscreenElement:t[this.prefix+"FullscreenElement"]}),e}function _(){var t={supported:function(){if(!("localStorage"in e))return!1;try{e.localStorage.setItem("___test","OK");var t=e.localStorage.getItem("___test");return e.localStorage.removeItem("___test"),"OK"===t}catch(n){return!1}return!1}()};return t}function C(y,h){function T(){h.debug&&e.console&&console.log.apply(console,arguments)}function C(){h.debug&&e.console&&console.warn.apply(console,arguments)}function I(){return{url:h.iconUrl,absolute:0===h.iconUrl.indexOf("http")||Oe.browser.isIE}}function P(){var e=[],t=I(),n=(t.absolute?"":t.url)+"#"+h.iconPrefix;return s(h.controls,"play-large")&&e.push('"),e.push('
'),s(h.controls,"restart")&&e.push('"),s(h.controls,"rewind")&&e.push('"),s(h.controls,"play")&&e.push('",'"),s(h.controls,"fast-forward")&&e.push('"),s(h.controls,"progress")&&(e.push('','','','','',"0% "+h.i18n.buffered,""),h.tooltips.seek&&e.push('00:00'),e.push("")),s(h.controls,"current-time")&&e.push('',''+h.i18n.currentTime+"",'00:00',""),s(h.controls,"duration")&&e.push('',''+h.i18n.duration+"",'00:00',""),s(h.controls,"mute")&&e.push('"),s(h.controls,"volume")&&e.push('','",'','',""),s(h.controls,"captions")&&e.push('"),s(h.controls,"fullscreen")&&e.push('"),e.push("
"),e.join("")}function R(){if(Oe.supported.full&&("audio"!=Oe.type||h.fullscreen.allowAudio)&&h.fullscreen.enabled){var e=M.supportsFullScreen;e||h.fullscreen.fallback&&!W()?(T((e?"Native":"Fallback")+" fullscreen enabled"),m(Oe.container,h.classes.fullscreen.enabled,!0)):T("Fullscreen not supported and fallback disabled"),w(Oe.buttons.fullscreen,!1),Y()}}function L(){if("video"===Oe.type){G(h.selectors.captions)||Oe.videoContainer.insertAdjacentHTML("afterbegin",'
'),Oe.usingTextTracks=!1,Oe.media.textTracks&&(Oe.usingTextTracks=!0);for(var e,t="",n=Oe.media.childNodes,r=0;r=10||Oe.browser.isFirefox&&Oe.browser.version>=31)&&(T("Detected browser with known TextTrack issues - using manual fallback"),Oe.usingTextTracks=!1),Oe.usingTextTracks){T("TextTracks supported");for(var o=0;o ");for(var r=0;rOe.captions.length-1){Oe.subcount=Oe.captions.length-1;break}Oe.media.currentTime.toFixed(1)>=n(Oe.captions[Oe.subcount][0])&&Oe.media.currentTime.toFixed(1)<=r(Oe.captions[Oe.subcount][0])?(Oe.currentCaption=Oe.captions[Oe.subcount][1],B(Oe.currentCaption)):B()}}function H(){Oe.buttons.captions&&(m(Oe.container,h.classes.captions.enabled,!0),h.captions.defaultActive&&(m(Oe.container,h.classes.captions.active,!0),w(Oe.buttons.captions,!0)))}function V(e){return Oe.container.querySelectorAll(e)}function G(e){return V(e)[0]}function W(){try{return e.self!==e.top}catch(t){return!0}}function Y(){function e(e){9===e.which&&Oe.isFullscreen&&(e.target!==r||e.shiftKey?e.target===n&&e.shiftKey&&(e.preventDefault(),r.focus()):(e.preventDefault(),n.focus()))}var t=V("input:not([disabled]), button:not([disabled])"),n=t[0],r=t[t.length-1];b(Oe.container,"keydown",e)}function q(e,t){if("string"==typeof t)d(e,Oe.media,{src:t});else if(t.constructor===Array)for(var n=t.length-1;n>=0;n--)d(e,Oe.media,t[n])}function X(){if(h.loadSprite){var e=I();e.absolute?(T("AJAX loading absolute SVG sprite"+(Oe.browser.isIE?" (due to IE)":"")),S(e.url,"sprite-plyr")):T("Sprite will be used as external resource directly")}var n=h.html;T("Injecting custom controls"),n||(n=P()),n=o(n,"{seektime}",h.seekTime),n=o(n,"{id}",Math.floor(1e4*Math.random()));var r;if(null!==h.selectors.controls.container&&(r=h.selectors.controls.container,"string"==typeof selector&&(r=t.querySelector(r))),r instanceof HTMLElement||(r=Oe.container),r.insertAdjacentHTML("beforeend",n),h.tooltips.controls)for(var a=V([h.selectors.controls.wrapper," ",h.selectors.labels," .",h.classes.hidden].join("")),s=a.length-1;s>=0;s--){var i=a[s];m(i,h.classes.hidden,!1),m(i,h.classes.tooltip,!0)}}function z(){try{return Oe.controls=G(h.selectors.controls.wrapper),Oe.buttons={},Oe.buttons.seek=G(h.selectors.buttons.seek),Oe.buttons.play=V(h.selectors.buttons.play),Oe.buttons.pause=G(h.selectors.buttons.pause),Oe.buttons.restart=G(h.selectors.buttons.restart),Oe.buttons.rewind=G(h.selectors.buttons.rewind),Oe.buttons.forward=G(h.selectors.buttons.forward),Oe.buttons.fullscreen=G(h.selectors.buttons.fullscreen),Oe.buttons.mute=G(h.selectors.buttons.mute),Oe.buttons.captions=G(h.selectors.buttons.captions),Oe.progress={},Oe.progress.container=G(h.selectors.progress.container),Oe.progress.buffer={},Oe.progress.buffer.bar=G(h.selectors.progress.buffer),Oe.progress.buffer.text=Oe.progress.buffer.bar&&Oe.progress.buffer.bar.getElementsByTagName("span")[0],Oe.progress.played=G(h.selectors.progress.played),Oe.progress.tooltip=Oe.progress.container&&Oe.progress.container.querySelector("."+h.classes.tooltip),Oe.volume={},Oe.volume.input=G(h.selectors.volume.input),Oe.volume.display=G(h.selectors.volume.display),Oe.duration=G(h.selectors.duration),Oe.currentTime=G(h.selectors.currentTime),Oe.seekTime=V(h.selectors.seekTime),!0}catch(e){return C("It looks like there is a problem with your controls HTML"),Q(!0),!1}}function D(){m(Oe.container,h.selectors.container.replace(".",""),Oe.supported.full)}function Q(e){e&&s(h.types.html5,Oe.type)?Oe.media.setAttribute("controls",""):Oe.media.removeAttribute("controls")}function j(e){var t=h.i18n.play;if("undefined"!=typeof h.title&&h.title.length&&(t+=", "+h.title),Oe.supported.full&&Oe.buttons.play)for(var n=Oe.buttons.play.length-1;n>=0;n--)Oe.buttons.play[n].setAttribute("aria-label",t);e instanceof HTMLElement&&e.setAttribute("title",h.i18n.frameTitle.replace("{title}",h.title))}function U(){if(!Oe.media)return void C("No media element found!");if(Oe.supported.full&&(m(Oe.container,h.classes.type.replace("{0}",Oe.type),!0),s(h.types.embed,Oe.type)&&m(Oe.container,h.classes.type.replace("{0}","video"),!0),m(Oe.container,h.classes.stopped,h.autoplay),m(Oe.container,h.classes.isIos,Oe.browser.isIos),m(Oe.container,h.classes.isTouch,Oe.browser.isTouch),"video"===Oe.type)){var e=t.createElement("div");e.setAttribute("class",h.classes.videoWrapper),i(Oe.media,e),Oe.videoContainer=e}s(h.types.embed,Oe.type)&&(Z(),Oe.embedId=null)}function Z(){for(var n=t.createElement("div"),r=Oe.embedId,s=Oe.type+"-"+Math.floor(1e4*Math.random()),o=V('[id^="'+Oe.type+'-"]'),i=o.length-1;i>=0;i--)u(o[i]);if(m(Oe.media,h.classes.videoWrapper,!0),m(Oe.media,h.classes.embedWrapper,!0),"youtube"===Oe.type)Oe.media.appendChild(n),n.setAttribute("id",s),"object"==typeof YT?J(r,n):(a(h.urls.youtube.api),e.onYouTubeReadyCallbacks=e.onYouTubeReadyCallbacks||[],e.onYouTubeReadyCallbacks.push(function(){J(r,n)}),e.onYouTubeIframeAPIReady=function(){e.onYouTubeReadyCallbacks.forEach(function(e){e()})});else if("vimeo"===Oe.type){var l=t.createElement("iframe");l.loaded=!1,b(l,"load",function(){l.loaded=!0}),p(l,{src:"https://player.vimeo.com/video/"+r+"?player_id="+s+"&api=1&badge=0&byline=0&portrait=0&title=0",id:s,allowfullscreen:"",frameborder:0}),Oe.supported.full?(n.appendChild(l),Oe.media.appendChild(n)):Oe.media.appendChild(l),"$f"in e||a(h.urls.vimeo.api);var c=e.setInterval(function(){"$f"in e&&l.loaded&&(e.clearInterval(c),K.call(l))},50)}else if("soundcloud"===Oe.type){var d=t.createElement("iframe");d.loaded=!1,b(d,"load",function(){d.loaded=!0}),p(d,{src:"https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/"+r,id:s}),n.appendChild(d),Oe.media.appendChild(n),e.SC||a(h.urls.soundcloud.api);var A=e.setInterval(function(){e.SC&&d.loaded&&(e.clearInterval(A),ee.call(d))},50)}}function $(){Oe.container.plyr.embed=Oe.embed,Oe.supported.full&&Be(),j(G("iframe"))}function J(t,n){"timer"in Oe||(Oe.timer={}),Oe.embed=new YT.Player(n.id,{videoId:t,playerVars:{autoplay:h.autoplay?1:0,controls:Oe.supported.full?0:1,rel:0,showinfo:0,iv_load_policy:3,cc_load_policy:h.captions.defaultActive?1:0,cc_lang_pref:"en",wmode:"transparent",modestbranding:1,disablekb:1,origin:"*"},events:{onError:function(e){k(Oe.container,"error",!0,{code:e.data,embed:e.target})},onReady:function(t){var n=t.target;Oe.media.play=function(){n.playVideo(),Oe.media.paused=!1},Oe.media.pause=function(){n.pauseVideo(),Oe.media.paused=!0},Oe.media.stop=function(){n.stopVideo(),Oe.media.paused=!0},Oe.media.duration=n.getDuration(),Oe.media.paused=!0,Oe.media.currentTime=n.getCurrentTime(),Oe.media.muted=n.isMuted(),h.title=n.getVideoData().title,k(Oe.media,"timeupdate"),e.clearInterval(Oe.timer.buffering),Oe.timer.buffering=e.setInterval(function(){Oe.media.buffered=n.getVideoLoadedFraction(),k(Oe.media,"progress"),1===Oe.media.buffered&&(e.clearInterval(Oe.timer.buffering),k(Oe.media,"canplaythrough"))},200),$(),xe()},onStateChange:function(t){var n=t.target;switch(e.clearInterval(Oe.timer.playing),t.data){case 0:Oe.media.paused=!0,k(Oe.media,"ended");break;case 1:Oe.media.paused=!1,Oe.media.seeking=!1,k(Oe.media,"play"),k(Oe.media,"playing"),Oe.timer.playing=e.setInterval(function(){Oe.media.currentTime=n.getCurrentTime(),k(Oe.media,"timeupdate")},100);break;case 2:Oe.media.paused=!0,k(Oe.media,"pause")}k(Oe.container,"statechange",!1,{code:t.data})}}})}function K(){Oe.embed=$f(this),Oe.embed.addEvent("ready",function(){Oe.media.play=function(){Oe.embed.api("play"),Oe.media.paused=!1},Oe.media.pause=function(){Oe.embed.api("pause"),Oe.media.paused=!0},Oe.media.stop=function(){Oe.embed.api("stop"),Oe.media.paused=!0},Oe.media.paused=!0,Oe.media.currentTime=0,$(),Oe.embed.api("getCurrentTime",function(e){Oe.media.currentTime=e,k(Oe.media,"timeupdate")}),Oe.embed.api("getDuration",function(e){Oe.media.duration=e,xe()}),Oe.embed.addEvent("play",function(){Oe.media.paused=!1,k(Oe.media,"play"),k(Oe.media,"playing")}),Oe.embed.addEvent("pause",function(){Oe.media.paused=!0,k(Oe.media,"pause")}),Oe.embed.addEvent("playProgress",function(e){Oe.media.seeking=!1,Oe.media.currentTime=e.seconds,k(Oe.media,"timeupdate")}),Oe.embed.addEvent("loadProgress",function(e){Oe.media.buffered=e.percent,k(Oe.media,"progress"),1===parseInt(e.percent)&&k(Oe.media,"canplaythrough")}),Oe.embed.addEvent("finish",function(){Oe.media.paused=!0,k(Oe.media,"ended")}),h.autoplay&&Oe.embed.api("play")})}function ee(){Oe.embed=e.SC.Widget(this),Oe.embed.bind(e.SC.Widget.Events.READY,function(){Oe.media.play=function(){Oe.embed.play(),Oe.media.paused=!1},Oe.media.pause=function(){Oe.embed.pause(),Oe.media.paused=!0},Oe.media.stop=function(){Oe.embed.seekTo(0),Oe.embed.pause(),Oe.media.paused=!0},Oe.media.paused=!0,Oe.media.currentTime=0,$(),Oe.embed.getPosition(function(e){Oe.media.currentTime=e,k(Oe.media,"timeupdate")}),Oe.embed.getDuration(function(e){Oe.media.duration=e/1e3,xe()}),Oe.embed.bind(e.SC.Widget.Events.PLAY,function(){Oe.media.paused=!1,k(Oe.media,"play"),k(Oe.media,"playing")}),Oe.embed.bind(e.SC.Widget.Events.PAUSE,function(){Oe.media.paused=!0,k(Oe.media,"pause")}),Oe.embed.bind(e.SC.Widget.Events.PLAY_PROGRESS,function(e){Oe.media.seeking=!1,Oe.media.currentTime=e.currentPosition/1e3,k(Oe.media,"timeupdate")}),Oe.embed.bind(e.SC.Widget.Events.LOAD_PROGRESS,function(e){Oe.media.buffered=e.loadProgress,k(Oe.media,"progress"),1===parseInt(e.loadProgress)&&k(Oe.media,"canplaythrough")}),Oe.embed.bind(e.SC.Widget.Events.FINISH,function(){Oe.media.paused=!0,k(Oe.media,"ended")}),h.autoplay&&Oe.embed.play()})}function te(){"play"in Oe.media&&Oe.media.play()}function ne(){"pause"in Oe.media&&Oe.media.pause()}function re(e){e===!0?te():e===!1?ne():Oe.media[Oe.media.paused?"play":"pause"]()}function ae(e){"number"!=typeof e&&(e=h.seekTime),oe(Oe.media.currentTime-e)}function se(e){"number"!=typeof e&&(e=h.seekTime),oe(Oe.media.currentTime+e)}function oe(e){var t=0,n=Oe.media.paused,r=ie();"number"==typeof e?t=e:e.type&&s(["input","change"],e.type)&&(t=e.target.value/e.target.max*r),0>t?t=0:t>r&&(t=r),Ee(t);try{Oe.media.currentTime=t.toFixed(4)}catch(a){}if(s(h.types.embed,Oe.type)){switch(Oe.type){case"youtube":Oe.embed.seekTo(t);break;case"vimeo":Oe.embed.api("seekTo",t.toFixed(0));break;case"soundcloud":Oe.embed.seekTo(1e3*t)}n&&ne(),k(Oe.media,"timeupdate"),Oe.media.seeking=!0}T("Seeking to "+Oe.media.currentTime+" seconds"),O(t)}function ie(){var e=parseInt(h.duration),t=0;return null===Oe.media.duration||isNaN(Oe.media.duration)||(t=Oe.media.duration),isNaN(e)?t:e}function le(){m(Oe.container,h.classes.playing,!Oe.media.paused),m(Oe.container,h.classes.stopped,Oe.media.paused),Ce(Oe.media.paused)}function ue(){N={x:e.pageXOffset||0,y:e.pageYOffset||0}}function ce(){e.scrollTo(N.x,N.y)}function pe(e){var n=M.supportsFullScreen;e&&e.type===M.fullScreenEventName?Oe.isFullscreen=M.isFullScreen(Oe.container):n?(M.isFullScreen(Oe.container)?M.cancelFullScreen():(ue(),M.requestFullScreen(Oe.container)),Oe.isFullscreen=M.isFullScreen(Oe.container)):(Oe.isFullscreen=!Oe.isFullscreen,Oe.isFullscreen?(b(t,"keyup",de),t.body.style.overflow="hidden"):(v(t,"keyup",de),t.body.style.overflow="")),m(Oe.container,h.classes.fullscreen.active,Oe.isFullscreen),Oe.isFullscreen?Oe.container.setAttribute("tabindex","-1"):Oe.container.removeAttribute("tabindex"),Y(Oe.isFullscreen),w(Oe.buttons.fullscreen,Oe.isFullscreen),k(Oe.container,Oe.isFullscreen?"enterfullscreen":"exitfullscreen",!0),!Oe.isFullscreen&&n&&ce()}function de(e){27===(e.which||e.charCode||e.keyCode)&&Oe.isFullscreen&&pe()}function Ae(e){if("boolean"!=typeof e&&(e=!Oe.media.muted),w(Oe.buttons.mute,e),Oe.media.muted=e,0===Oe.media.volume&&me(h.volume),s(h.types.embed,Oe.type)){switch(Oe.type){case"youtube":Oe.embed[Oe.media.muted?"mute":"unMute"]();break;case"vimeo":Oe.embed.api("setVolume",Oe.media.muted?0:parseFloat(h.volume/h.volumeMax));break;case"soundcloud":Oe.embed.setVolume(Oe.media.muted?0:parseFloat(h.volume/h.volumeMax))}k(Oe.media,"volumechange")}}function me(t){var n=h.volumeMax,r=h.volumeMin;if("undefined"==typeof t&&(t=h.volume,h.storage.enabled&&_().supported&&(t=e.localStorage.getItem(h.storage.key),e.localStorage.removeItem("plyr-volume"))),(null===t||isNaN(t))&&(t=h.volume),t>n&&(t=n),r>t&&(t=r),Oe.media.volume=parseFloat(t/n),Oe.volume.display&&(Oe.volume.display.value=t),s(h.types.embed,Oe.type)){switch(Oe.type){case"youtube":Oe.embed.setVolume(100*Oe.media.volume);break;case"vimeo":Oe.embed.api("setVolume",Oe.media.volume);break;case"soundcloud":Oe.embed.setVolume(Oe.media.volume)}k(Oe.media,"volumechange")}Oe.media.muted&&t>0&&Ae()}function fe(){var e=Oe.media.muted?0:Oe.media.volume*h.volumeMax;me(e+h.volumeStep/5)}function ye(){var e=Oe.media.muted?0:Oe.media.volume*h.volumeMax;me(e-h.volumeStep/5)}function be(){var t=Oe.media.muted?0:Oe.media.volume*h.volumeMax;Oe.supported.full&&(Oe.volume.input&&(Oe.volume.input.value=t),Oe.volume.display&&(Oe.volume.display.value=t)),h.storage.enabled&&_().supported&&!isNaN(t)&&e.localStorage.setItem(h.storage.key,t),m(Oe.container,h.classes.muted,0===t),Oe.supported.full&&Oe.buttons.mute&&w(Oe.buttons.mute,0===t)}function ve(e){Oe.supported.full&&Oe.buttons.captions&&("boolean"!=typeof e&&(e=-1===Oe.container.className.indexOf(h.classes.captions.active)),Oe.captionsEnabled=e,w(Oe.buttons.captions,Oe.captionsEnabled),m(Oe.container,h.classes.captions.active,Oe.captionsEnabled),k(Oe.container,Oe.captionsEnabled?"captionsenabled":"captionsdisabled",!0))}function ge(e){var t="waiting"===e.type;clearTimeout(Oe.timers.loading),Oe.timers.loading=setTimeout(function(){m(Oe.container,h.classes.loading,t)},t?250:0)}function he(e){if(Oe.supported.full){var t=Oe.progress.played,n=0,r=ie();if(e)switch(e.type){case"timeupdate":case"seeking":if(Oe.controls.pressed)return;n=x(Oe.media.currentTime,r),"timeupdate"==e.type&&Oe.buttons.seek&&(Oe.buttons.seek.value=n);break;case"playing":case"progress":t=Oe.progress.buffer,n=function(){var e=Oe.media.buffered;return e&&e.length?x(e.end(0),r):"number"==typeof e?100*e:0}()}ke(t,n)}}function ke(e,t){if(Oe.supported.full){if("undefined"==typeof t&&(t=0),"undefined"==typeof e){if(!Oe.progress||!Oe.progress.buffer)return;e=Oe.progress.buffer}e instanceof HTMLElement?e.value=t:e&&(e.bar&&(e.bar.value=t),e.text&&(e.text.innerHTML=t))}}function we(e,t){if(t){isNaN(e)&&(e=0),Oe.secs=parseInt(e%60),Oe.mins=parseInt(e/60%60),Oe.hours=parseInt(e/60/60%60);var n=parseInt(ie()/60/60%60)>0;Oe.secs=("0"+Oe.secs).slice(-2),Oe.mins=("0"+Oe.mins).slice(-2),t.innerHTML=(n?Oe.hours+":":"")+Oe.mins+":"+Oe.secs}}function xe(){if(Oe.supported.full){var e=ie()||0;!Oe.duration&&h.displayDuration&&Oe.media.paused&&we(e,Oe.currentTime),Oe.duration&&we(e,Oe.duration),_e()}}function Te(e){we(Oe.media.currentTime,Oe.currentTime),e&&"timeupdate"==e.type&&Oe.media.seeking||he(e)}function Ee(e){"number"!=typeof e&&(e=0);var t=ie(),n=x(e,t);Oe.progress&&Oe.progress.played&&(Oe.progress.played.value=n),Oe.buttons&&Oe.buttons.seek&&(Oe.buttons.seek.value=n)}function _e(e){var t=ie();if(h.tooltips.seek&&Oe.progress.container&&0!==t){var n=Oe.progress.container.getBoundingClientRect(),r=0,a=h.classes.tooltip+"--visible";if(e)r=100/n.width*(e.pageX-n.left);else{if(!f(Oe.progress.tooltip,a))return;r=Oe.progress.tooltip.style.left.replace("%","")}0>r?r=0:r>100&&(r=100),we(t/100*r,Oe.progress.tooltip),Oe.progress.tooltip.style.left=r+"%",e&&s(["mouseenter","mouseleave"],e.type)&&m(Oe.progress.tooltip,a,"mouseenter"===e.type)}}function Ce(t){if(h.hideControls&&"audio"!==Oe.type){var n=0,r=!1,a=t;if("boolean"!=typeof 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(Oe.container,h.classes.hideControls)),e.clearTimeout(Oe.timers.hover),a||Oe.media.paused){if(m(Oe.container,h.classes.hideControls,!1),Oe.media.paused)return;Oe.browser.isTouch&&(n=3e3)}a&&Oe.media.paused||(Oe.timers.hover=e.setTimeout(function(){(!Oe.controls.pressed&&!Oe.controls.hover||r)&&m(Oe.container,h.classes.hideControls,!0)},n))}}function Se(e){if("undefined"!=typeof e)return void Fe(e);var t;switch(Oe.type){case"youtube":t=Oe.embed.getVideoUrl();break;case"vimeo":Oe.embed.api("getVideoUrl",function(e){t=e});break;case"soundcloud":Oe.embed.getCurrentSound(function(e){t=e.permalink_url});break;default:t=Oe.media.currentSrc}return t||""}function Fe(n){if(!("undefined"!=typeof n&&"sources"in n&&n.sources.length))return void C("Invalid source format");if(ne(),Ee(),ke(),Pe(),"youtube"===Oe.type?(Oe.embed.destroy(),e.clearInterval(Oe.timer.buffering),e.clearInterval(Oe.timer.playing)):"video"===Oe.type&&Oe.videoContainer&&u(Oe.videoContainer),Oe.embed=null,u(Oe.media),"type"in n&&(Oe.type=n.type,"video"===Oe.type)){var r=n.sources[0];"type"in r&&s(h.types.embed,r.type)&&(Oe.type=r.type)}switch(Oe.supported=F(Oe.type),Oe.type){case"video":Oe.media=t.createElement("video");break;case"audio":Oe.media=t.createElement("audio");break;case"youtube":case"vimeo":case"soundcloud":Oe.media=t.createElement("div"),Oe.embedId=n.sources[0].src}c(Oe.container,Oe.media),"undefined"!=typeof n.autoplay&&(h.autoplay=n.autoplay),s(h.types.html5,Oe.type)&&(h.crossorigin&&Oe.media.setAttribute("crossorigin",""),h.autoplay&&Oe.media.setAttribute("autoplay",""),"poster"in n&&Oe.media.setAttribute("poster",n.poster),h.loop&&Oe.media.setAttribute("loop","")),Oe.container.className=Oe.originalClassName,m(Oe.container,h.classes.fullscreen.active,Oe.isFullscreen),m(Oe.container,h.classes.captions.active,Oe.captionsEnabled),D(),s(h.types.html5,Oe.type)&&q("source",n.sources),U(),s(h.types.html5,Oe.type)?("tracks"in n&&q("track",n.tracks),Oe.media.load(),Be(),xe()):s(h.types.embed,Oe.type)&&!Oe.supported.full&&Be(),h.title=n.title,j(),Oe.container.plyr.media=Oe.media}function Ie(e){"video"===Oe.type&&Oe.media.setAttribute("poster",e)}function Me(){function n(){var e=Oe.media.paused;e?te():ne();var t=Oe.buttons[e?"play":"pause"],n=Oe.buttons[e?"pause":"play"];if(n=n&&n.length>1?n[n.length-1]:n[0]){var r=f(t,h.classes.tabFocus);setTimeout(function(){n.focus(),r&&(m(t,h.classes.tabFocus,!1),m(n,h.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 Oe.buttons){var r=Oe.buttons[n];if(r instanceof NodeList)for(var a=0;a0)&&(t?ye():fe()),(e.deltaY>0||e.deltaX<0)&&(t?fe():ye())})}function Ne(){if(b(Oe.media,"timeupdate seeking",Te),b(Oe.media,"timeupdate",O),b(Oe.media,"durationchange loadedmetadata",xe),b(Oe.media,"ended",function(){"video"===Oe.type&&B(),le(),oe(0),xe(),"video"===Oe.type&&h.showPosterOnEnd&&Oe.media.load()}),b(Oe.media,"progress playing",he),b(Oe.media,"volumechange",be),b(Oe.media,"play pause",le),b(Oe.media,"waiting canplay seeked",ge),h.clickToPlay&&"audio"!==Oe.type){var e=G("."+h.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",b(e,"click",function(){Oe.browser.isTouch&&!Oe.media.paused||(Oe.media.paused?te():Oe.media.ended?(oe(),te()):ne())})}h.disableContextMenu&&b(Oe.media,"contextmenu",function(e){e.preventDefault()}),b(Oe.media,h.events.join(" "),function(e){k(Oe.container,e.type,!0)})}function Pe(){if(s(h.types.html5,Oe.type)){for(var e=Oe.media.querySelectorAll("source"),t=0;t1)for(var c=0;c0)&&(t?ye():fe()),(e.deltaY>0||e.deltaX<0)&&(t?fe():ye())})}function Ne(){if(b(Oe.media,"timeupdate seeking",Te),b(Oe.media,"timeupdate",O),b(Oe.media,"durationchange loadedmetadata",xe),b(Oe.media,"ended",function(){"video"===Oe.type&&B(),le(),oe(0),xe(),"video"===Oe.type&&h.showPosterOnEnd&&Oe.media.load()}),b(Oe.media,"progress playing",he),b(Oe.media,"volumechange",be),b(Oe.media,"play pause",le),b(Oe.media,"waiting canplay seeked",ge),h.clickToPlay&&"audio"!==Oe.type){var e=G("."+h.classes.videoWrapper);if(!e)return;e.style.cursor="pointer",b(e,"click",function(){Oe.browser.isTouch&&!Oe.media.paused||(Oe.media.paused?te():Oe.media.ended?(oe(),te()):ne())})}h.disableContextMenu&&b(Oe.media,"contextmenu",function(e){e.preventDefault()}),b(Oe.media,h.events.join(" "),function(e){k(Oe.container,e.type,!0)})}function Pe(){if(s(h.types.html5,Oe.type)){for(var e=Oe.media.querySelectorAll("source"),t=0;t1)for(var c=0;c