diff options
| -rw-r--r-- | changelog.md | 12 | ||||
| -rw-r--r-- | demo/dist/demo.js | 2 | ||||
| -rw-r--r-- | demo/error.html | 37 | ||||
| -rw-r--r-- | demo/index.html | 167 | ||||
| -rw-r--r-- | demo/src/js/main.js | 176 | ||||
| -rw-r--r-- | demo/src/less/lib/fontface.less | 20 | ||||
| -rw-r--r-- | gulpfile.js | 14 | ||||
| -rw-r--r-- | package.json | 90 | ||||
| -rw-r--r-- | readme.md | 8 | ||||
| -rw-r--r-- | src/js/plyr.js | 1786 | ||||
| -rw-r--r-- | src/less/plyr.less | 88 | ||||
| -rw-r--r-- | src/scss/plyr.scss | 110 |
12 files changed, 1392 insertions, 1118 deletions
diff --git a/changelog.md b/changelog.md index 46547433..000423d0 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,17 @@ # Changelog +## v2.0.16 +- Fullscreen bug fix (fixes #664) + +## v2.0.15 +- Demo fix + +## v2.0.14 +- CDN URL updates. Sorry, still working on V3 as hard as I can... + +## v2.0.13 +- Repo moved and Vimeo demo fix + ## v2.0.12 - Ability to set custom `blankUrl` for source changes (https://github.com/sampotts/plyr/pull/504) - Ability to set caption button listener (https://github.com/sampotts/plyr/pull/468) diff --git a/demo/dist/demo.js b/demo/dist/demo.js index 5c035bd1..62799f2b 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,o=arguments.length;for(i=0;i<o;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=e.Element.prototype,i=Object,o=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")},s=Array.prototype.indexOf||function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},n=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},r=function(e,t){if(""===t)throw new n("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new n("INVALID_CHARACTER_ERR","String contains an invalid character");return s.call(e,t)},a=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,n=i.length;s<n;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},c=a.prototype=[],l=function(){return new a(this)};if(n.prototype=Error.prototype,c.item=function(e){return this[e]||null},c.contains=function(e){return e+="",-1!==r(this,e)},c.add=function(){var e,t=arguments,i=0,o=t.length,s=!1;do{e=t[i]+"",-1===r(this,e)&&(this.push(e),s=!0)}while(++i<o);s&&this._updateClassName()},c.remove=function(){var e,t,i=arguments,o=0,s=i.length,n=!1;do{for(e=i[o]+"",t=r(this,e);-1!==t;)this.splice(t,1),n=!0,t=r(this,e)}while(++o<s);n&&this._updateClassName()},c.toggle=function(e,t){e+="";var i=this.contains(e),o=i?!0!==t&&"remove":!1!==t&&"add";return o&&this[o](e),!0===t||!1===t?t:!i},c.toString=function(){return this.join(" ")},i.defineProperty){var u={get:l,enumerable:!0,configurable:!0};try{i.defineProperty(t,"classList",u)}catch(e){-2146823252===e.number&&(u.enumerable=!1,i.defineProperty(t,"classList",u))}}else i.prototype.__defineGetter__&&t.__defineGetter__("classList",l)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var o=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=o+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!==r)&&(r.length||t!==n.video)){switch(t){case n.video:o.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:!0}]});break;case n.audio:o.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 n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=t;for(var a=s.length-1;a>=0;a--)e(s[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 o=i[0],s=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=s.length-1;c>=0;c--)s[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,o,s,n,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src="//www.google-analytics.com/analytics.js",r.parentNode.insertBefore(n,r)}(window,document,"script",0,"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 t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var i,o=arguments.length;for(i=0;i<o;i++)t=arguments[i],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:i.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var e="classList",i="prototype",o=t.Element[i],s=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(t){for(var e=0,i=this.length;e<i;e++)if(e in this&&this[e]===t)return e;return-1},a=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},c=function(t,e){if(""===e)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(t,e)},l=function(t){for(var e=n.call(t.getAttribute("class")||""),i=e?e.split(/\s+/):[],o=0,s=i.length;o<s;o++)this.push(i[o]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(t){return this[t]||null},u.contains=function(t){return t+="",c(this,t)!==-1},u.add=function(){var t,e=arguments,i=0,o=e.length,s=!1;do t=e[i]+"",c(this,t)===-1&&(this.push(t),s=!0);while(++i<o);s&&this._updateClassName()},u.remove=function(){var t,e,i=arguments,o=0,s=i.length,n=!1;do for(t=i[o]+"",e=c(this,t);e!==-1;)this.splice(e,1),n=!0,e=c(this,t);while(++o<s);n&&this._updateClassName()},u.toggle=function(t,e){t+="";var i=this.contains(t),o=i?e!==!0&&"remove":e!==!1&&"add";return o&&this[o](t),e===!0||e===!1?e:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(o,e,p)}catch(h){h.number===-2146823252&&(p.enumerable=!1,s.defineProperty(o,e,p))}}else s[i].__defineGetter__&&o.__defineGetter__(e,d)}}(self)),function(){function t(t,e,i){if(t)if(t.classList)t.classList[i?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(/\s+/g," ").replace(" "+e+" ","");t.className=o+(i?" "+e:"")}}function e(e,i){if(e in n&&(i||e!==r)&&(r.length||e!==n.video)){switch(e){case n.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt","default":!0}]});break;case n.audio:o.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=e;for(var a=s.length-1;a>=0;a--)t(s[a].parentElement,"active",!1);t(document.querySelector('[data-source="'+e+'"]').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 o=i[0],s=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=s.length-1;c>=0;c--)s[c].addEventListener("click",function(){var t=this.getAttribute("data-source");e(t),a&&history.pushState({type:t},"","#"+t)});if(window.addEventListener("popstate",function(t){t.state&&"type"in t.state&&e(t.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&e(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,i,o,s,n,r){t.GoogleAnalyticsObject=s,t[s]=t[s]||function(){(t[s].q=t[s].q||[]).push(arguments)},t[s].l=1*new Date,n=e.createElement(i),r=e.getElementsByTagName(i)[0],n.async=1,n.src=o,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview")); diff --git a/demo/error.html b/demo/error.html index c9ba8c36..6dc22cb1 100644 --- a/demo/error.html +++ b/demo/error.html @@ -1,18 +1,25 @@ <!doctype html> <html lang="en" class="error"> - <head> - <meta charset="utf-8" /> - <title>Doh. Looks like something went wrong.</title> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <!-- Docs styles --> - <link rel="stylesheet" href="dist/demo.css"> - </head> - <body> - <main> - <h1>Doh.</h1> - <p>Looks like something went wrong.</p> - <a href="http://plyr.io" class="btn btn--primary">Back to plyr.io</a> - </main> - </body> -</html> +<head> + <meta charset="utf-8" /> + <title>Doh. Looks like something went wrong.</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <!-- Docs styles --> + <link rel="stylesheet" href="dist/demo.css"> + + <!-- Preload --> + <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2"> + <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2"> +</head> + +<body> + <main> + <h1>Doh.</h1> + <p>Looks like something went wrong.</p> + <a href="http://plyr.io" class="btn btn--primary">Back to plyr.io</a> + </main> +</body> + +</html>
\ No newline at end of file diff --git a/demo/index.html b/demo/index.html index b21fa6cc..b6941537 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,88 +1,103 @@ <!doctype html> <html lang="en"> - <head> - <meta charset="utf-8" /> - <title>Plyr - A simple HTML5 media player</title> - <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions."> - <meta name="author" content="Sam Potts"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <!-- Styles --> - <link rel="stylesheet" href="../dist/plyr.css"> +<head> + <meta charset="utf-8" /> + <title>Plyr - A simple HTML5 media player</title> + <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions."> + <meta name="author" content="Sam Potts"> + <meta name="viewport" content="width=device-width, initial-scale=1"> - <!-- Docs styles --> - <link rel="stylesheet" href="dist/demo.css"> - </head> - <body> - <header> - <h1>Plyr</h1> - <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p> - <nav> - <ul> - <li> - <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github"> - <svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub - </a> - </li> - <li> - <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter"> - <svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet - </a> - </li> - </ul> - </nav> - </header> + <!-- Styles --> + <link rel="stylesheet" href="../dist/plyr.css"> - <main role="main" id="main"> - <nav class="btn__bar"> - <ul> - <li class="active"> - <button type="button" class="btn" data-source="video">Video</button> - </li> - <li> - <button type="button" class="btn" data-source="audio">Audio</button> - </li> - <li> - <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button> - </li> - <li> - <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button> - </li> - </ul> - </nav> - <section> - <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin> - <!-- Video files --> - <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4"> - <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm"> + <!-- Docs styles --> + <link rel="stylesheet" href="dist/demo.css"> - <!-- Text track file --> - <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default> + <!-- Preload --> + <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2"> + <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2"> +</head> - <!-- Fallback for browsers that don't support the <video> element --> - <a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a> - </video> +<body> + <header> + <h1>Plyr</h1> + <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p> + <nav> + <ul> + <li> + <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github"> + <svg class="icon"> + <use xlink:href="#icon-github" /> + </svg>Download on GitHub + </a> + </li> + <li> + <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" + target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter"> + <svg class="icon"> + <use xlink:href="#icon-twitter" /> + </svg>Tweet + </a> + </li> + </ul> + </nav> + </header> - <ul> - <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> © Brainfarm</small></li> - <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi – “It All Began With A Burst”</a> © Kishi Bashi</small></li> - <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li> - <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li> - </ul> - </section> - </main> + <main role="main" id="main"> + <nav class="btn__bar"> + <ul> + <li class="active"> + <button type="button" class="btn" data-source="video">Video</button> + </li> + <li> + <button type="button" class="btn" data-source="audio">Audio</button> + </li> + <li> + <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button> + </li> + <li> + <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button> + </li> + </ul> + </nav> + <section> + <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin> + <!-- Video files --> + <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4"> + <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm"> - <!-- Plyr core script --> - <script src="../dist/plyr.js"></script> + <!-- Text track file --> + <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" + default> - <!-- Docs script --> - <script src="dist/demo.js"></script> + <!-- Fallback for browsers that don't support the <video> element --> + <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a> + </video> - <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) --> - <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script> + <ul> + <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> © Brainfarm</small></li> + <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi – “It All Began With A Burst”</a> © Kishi Bashi</small></li> + <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li> + <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li> + </ul> + </section> + </main> - <!-- Sharing libary (https://shr.one) --> - <script src="https://cdn.shr.one/1.0.1/shr.js"></script> - <script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script> - </body> -</html> + <!-- Plyr core script --> + <script src="../dist/plyr.js"></script> + + <!-- Docs script --> + <script src="dist/demo.js"></script> + + <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) --> + <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script> + + <!-- Sharing libary (https://shr.one) --> + <script src="https://cdn.shr.one/1.0.1/shr.js"></script> + <script> + if (window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); } + </script> +</body> + +</html>
\ No newline at end of file diff --git a/demo/src/js/main.js b/demo/src/js/main.js index e2926df5..7d732dcd 100644 --- a/demo/src/js/main.js +++ b/demo/src/js/main.js @@ -12,68 +12,68 @@ // Setup the player var instances = plyr.setup({ - debug: true, - title: 'Video demo', - iconUrl: '../dist/plyr.svg', + debug: true, + title: "Video demo", + iconUrl: "../dist/plyr.svg", tooltips: { - controls: true + controls: true }, captions: { - defaultActive: true + defaultActive: true } }); - plyr.loadSprite('dist/demo.svg'); + plyr.loadSprite("dist/demo.svg"); // Plyr returns an array regardless var player = instances[0]; // Setup type toggle - var buttons = document.querySelectorAll('[data-source]'), + var buttons = document.querySelectorAll("[data-source]"), types = { - video: 'video', - audio: 'audio', - youtube: 'youtube', - vimeo: 'vimeo' + video: "video", + audio: "audio", + youtube: "youtube", + vimeo: "vimeo" }, - currentType = window.location.hash.replace('#', ''), - historySupport = (window.history && window.history.pushState); + 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'); + buttons[i].addEventListener("click", function() { + var type = this.getAttribute("data-source"); newSource(type); if (historySupport) { - history.pushState({ 'type': type }, '', '#' + type); + history.pushState({ type: type }, "", "#" + type); } }); } // List for backwards/forwards - window.addEventListener('popstate', function(event) { - if(event.state && 'type' in event.state) { + window.addEventListener("popstate", function(event) { + if (event.state && "type" in event.state) { newSource(event.state.type); } }); // On load - if(historySupport) { + if (historySupport) { var video = !currentType.length; // If there's no current type set, assume video - if(video) { + if (video) { currentType = types.video; } // Replace current history state - if(currentType in types) { - history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType)); + if (currentType in types) { + history.replaceState({ type: currentType }, "", video ? "" : "#" + currentType); } // If it's not video, load the source - if(currentType !== types.video) { + if (currentType !== types.video) { newSource(currentType, true); } } @@ -82,11 +82,10 @@ function toggleClass(element, className, state) { if (element) { if (element.classList) { - element.classList[state ? 'add' : 'remove'](className); - } - else { - var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', ''); - element.className = name + (state ? ' ' + className : ''); + element.classList[state ? "add" : "remove"](className); + } else { + var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + className + " ", ""); + element.className = name + (state ? " " + className : ""); } } } @@ -94,68 +93,78 @@ // 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; } - switch(type) { + 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 - }] + type: "video", + title: "View From A Blue Moon", + sources: [ + { + src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4", + type: "video/mp4" + }, + { + src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm", + type: "video/webm" + } + ], + poster: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg", + tracks: [ + { + kind: "captions", + label: "English", + srclang: "en", + src: "https://cdn.plyr.io/static/demo/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' - }] + type: "audio", + title: "Kishi Bashi – “It All Began With A Burst”", + sources: [ + { + src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3", + type: "audio/mp3" + }, + { + src: "https://cdn.plyr.io/static/demo/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' - }] + 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: '147865858', - type: 'vimeo' - }] + type: "video", + title: "View From A Blue Moon", + sources: [ + { + src: "147865858", + type: "vimeo" + } + ] }); break; } @@ -165,21 +174,30 @@ // Remove active classes for (var x = buttons.length - 1; x >= 0; x--) { - toggleClass(buttons[x].parentElement, 'active', false); + toggleClass(buttons[x].parentElement, "active", false); } // Set active on parent - toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true); + 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'); +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"); } diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less index a7da5ad9..cdecc256 100644 --- a/demo/src/less/lib/fontface.less +++ b/demo/src/less/lib/fontface.less @@ -4,15 +4,17 @@ @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: @font-weight-base; + src: url("//cdn.plyr.io/static/fonts/avenir-medium.woff2") format("woff2"), + url("//cdn.plyr.io/static/fonts/avenir-medium.woff") format("woff"); + font-style: normal; + font-weight: @font-weight-base; + font-display: swap; } @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: @font-weight-bold; -}
\ No newline at end of file + src: url("//cdn.plyr.io/static/fonts/avenir-bold.woff2") format("woff2"), + url("//cdn.plyr.io/static/fonts/avenir-bold.woff") format("woff"); + font-style: normal; + font-weight: @font-weight-bold; + font-display: swap; +} diff --git a/gulpfile.js b/gulpfile.js index 923483e5..26b97238 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -77,20 +77,20 @@ function loadJSON(path) { // Create a file from a string // http://stackoverflow.com/questions/23230569/how-do-you-create-a-file-from-a-string-in-gulp function createFile(filename, string) { - var src = require('stream').Readable({ - objectMode: true + var src = require('stream').Readable({ + objectMode: true }); src._read = function () { - this.push(new gutil.File({ - cwd: "", - base: "", - path: filename, + this.push(new gutil.File({ + cwd: "", + base: "", + path: filename, contents: new Buffer(string), // stats also required for some functions // https://nodejs.org/api/fs.html#fs_class_fs_stats stat: { size: string.length - } + } })); this.push(null); } diff --git a/package.json b/package.json index fc2c9930..8a4d95d9 100644 --- a/package.json +++ b/package.json @@ -1,51 +1,43 @@ { - "name": "plyr", - "version": "2.0.13", - "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player", - "homepage": "http://plyr.io", - "main": "src/js/plyr.js", - "dependencies": {}, - "devDependencies": { - "gulp": "^3.9.1", - "gulp-autoprefixer": "^3.1.0", - "gulp-clean-css": "^2.0.6", - "gulp-concat": "^2.3.3", - "gulp-less": "^3.0.5", - "gulp-open": "^2.0.0", - "gulp-rename": "^1.2.0", - "gulp-replace": "^0.5.3", - "gulp-s3": "^0.3.0", - "gulp-sass": "^2.3.1", - "gulp-size": "^2.1.0", - "gulp-svgmin": "^1.2.2", - "gulp-svgstore": "^5.0.5", - "gulp-uglify": "^1.5.3", - "gulp-util": "^3.0.7", - "run-sequence": "^1.1.5", - "through2": "^2.0.1" - }, - "keywords": [ - "HTML5 Video", - "HTML5 Audio", - "Media Player", - "DASH", - "Shaka", - "WordPress", - "HLS" - ], - "repository": { - "type": "git", - "url": "git://github.com/sampotts/plyr.git" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/sampotts/plyr/issues" - }, - "directories": { - "doc": "readme.md" - }, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "Sam Potts <sam@potts.es>" + "name": "plyr", + "version": "2.0.16", + "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player", + "homepage": "http://plyr.io", + "main": "src/js/plyr.js", + "dependencies": {}, + "devDependencies": { + "gulp": "^3.9.1", + "gulp-autoprefixer": "^3.1.0", + "gulp-clean-css": "^2.0.6", + "gulp-concat": "^2.3.3", + "gulp-less": "^3.0.5", + "gulp-open": "^2.0.0", + "gulp-rename": "^1.2.0", + "gulp-replace": "^0.5.3", + "gulp-s3": "^0.3.0", + "gulp-sass": "^2.3.1", + "gulp-size": "^2.1.0", + "gulp-svgmin": "^1.2.2", + "gulp-svgstore": "^5.0.5", + "gulp-uglify": "^1.5.3", + "gulp-util": "^3.0.7", + "run-sequence": "^1.1.5", + "through2": "^2.0.1" + }, + "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"], + "repository": { + "type": "git", + "url": "git://github.com/sampotts/plyr.git" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/sampotts/plyr/issues" + }, + "directories": { + "doc": "readme.md" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Sam Potts <sam@potts.es>" } @@ -5,7 +5,7 @@ A simple, accessible and customizable HTML5, YouTube and Vimeo media player. [Checkout the demo](https://plyr.io) -[](https://plyr.io) +[](https://plyr.io) ## Why? We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. @@ -137,7 +137,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following: ```html -<script src="https://cdn.plyr.io/2.0.13/plyr.js"></script> +<script src="https://cdn.plyr.io/2.0.16/plyr.js"></script> ``` ### CSS @@ -150,11 +150,11 @@ Include the `plyr.css` stylsheet into your `<head>` If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following: ```html -<link rel="stylesheet" href="https://cdn.plyr.io/2.0.13/plyr.css"> +<link rel="stylesheet" href="https://cdn.plyr.io/2.0.16/plyr.css"> ``` ### SVG Sprite -The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.13/plyr.svg`. +The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.16/plyr.svg`. ## Advanced diff --git a/src/js/plyr.js b/src/js/plyr.js index 09d7ee7f..d9949722 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,192 +1,214 @@ // ========================================================================== // Plyr -// plyr.js v2.0.13 +// plyr.js v2.0.16 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== // Credits: http://paypal.github.io/accessible-html5-video-player/ // ========================================================================== -;(function(root, factory) { - 'use strict'; +(function(root, factory) { + "use strict"; /*global define,module*/ - if (typeof module === 'object' && typeof module.exports === 'object') { + if (typeof module === "object" && typeof module.exports === "object") { // Node, CommonJS-like module.exports = factory(root, document); - } else if (typeof define === 'function' && define.amd) { + } else if (typeof define === "function" && define.amd) { // AMD - define([], function () { return factory(root, document); }); + define([], function() { + return factory(root, document); + }); } else { // Browser globals (root is window) root.plyr = factory(root, document); } -}(typeof window !== 'undefined' ? window : this, function(window, document) { - 'use strict'; +})(typeof window !== "undefined" ? window : this, function(window, document) { + "use strict"; // Globals var fullscreen, - scroll = { x: 0, y: 0 }, - - // Default config - defaults = { - enabled: true, - debug: false, - autoplay: false, - loop: false, - seekTime: 10, - volume: 10, - volumeMin: 0, - volumeMax: 10, - volumeStep: 1, - duration: null, - displayDuration: true, - loadSprite: true, - iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/2.0.13/plyr.svg', - blankUrl: 'https://cdn.selz.com/plyr/blank.mp4', - clickToPlay: true, - hideControls: true, - showPosterOnEnd: false, - disableContextMenu: true, - keyboardShorcuts: { - focused: true, - global: false - }, - tooltips: { - controls: false, - seek: true - }, - selectors: { - html5: 'video, audio', - embed: '[data-type]', - editable: 'input, textarea, select, [contenteditable]', - container: '.plyr', - controls: { - container: null, - wrapper: '.plyr__controls' + scroll = { x: 0, y: 0 }, + // Default config + defaults = { + enabled: true, + debug: false, + autoplay: false, + loop: false, + seekTime: 10, + volume: 10, + volumeMin: 0, + volumeMax: 10, + volumeStep: 1, + duration: null, + displayDuration: true, + loadSprite: true, + iconPrefix: "plyr", + iconUrl: "https://cdn.plyr.io/2.0.16/plyr.svg", + blankUrl: "https://cdn.plyr.io/static/blank.mp4", + clickToPlay: true, + hideControls: true, + showPosterOnEnd: false, + disableContextMenu: true, + keyboardShorcuts: { + focused: true, + global: false }, - labels: '[data-plyr]', - buttons: { - seek: '[data-plyr="seek"]', - play: '[data-plyr="play"]', - pause: '[data-plyr="pause"]', - restart: '[data-plyr="restart"]', - rewind: '[data-plyr="rewind"]', - forward: '[data-plyr="fast-forward"]', - mute: '[data-plyr="mute"]', - captions: '[data-plyr="captions"]', - fullscreen: '[data-plyr="fullscreen"]' + tooltips: { + controls: false, + seek: true }, - volume: { - input: '[data-plyr="volume"]', - display: '.plyr__volume--display' + selectors: { + html5: "video, audio", + embed: "[data-type]", + editable: "input, textarea, select, [contenteditable]", + container: ".plyr", + controls: { + container: null, + wrapper: ".plyr__controls" + }, + labels: "[data-plyr]", + buttons: { + seek: '[data-plyr="seek"]', + play: '[data-plyr="play"]', + pause: '[data-plyr="pause"]', + restart: '[data-plyr="restart"]', + rewind: '[data-plyr="rewind"]', + forward: '[data-plyr="fast-forward"]', + mute: '[data-plyr="mute"]', + captions: '[data-plyr="captions"]', + fullscreen: '[data-plyr="fullscreen"]' + }, + volume: { + input: '[data-plyr="volume"]', + display: ".plyr__volume--display" + }, + progress: { + container: ".plyr__progress", + buffer: ".plyr__progress--buffer", + played: ".plyr__progress--played" + }, + captions: ".plyr__captions", + currentTime: ".plyr__time--current", + duration: ".plyr__time--duration" }, - progress: { - container: '.plyr__progress', - buffer: '.plyr__progress--buffer', - played: '.plyr__progress--played' + classes: { + setup: "plyr--setup", + ready: "plyr--ready", + videoWrapper: "plyr__video-wrapper", + embedWrapper: "plyr__video-embed", + type: "plyr--{0}", + stopped: "plyr--stopped", + playing: "plyr--playing", + muted: "plyr--muted", + loading: "plyr--loading", + hover: "plyr--hover", + tooltip: "plyr__tooltip", + hidden: "plyr__sr-only", + hideControls: "plyr--hide-controls", + isIos: "plyr--is-ios", + isTouch: "plyr--is-touch", + captions: { + enabled: "plyr--captions-enabled", + active: "plyr--captions-active" + }, + fullscreen: { + enabled: "plyr--fullscreen-enabled", + fallback: "plyr--fullscreen-fallback", + active: "plyr--fullscreen-active" + }, + tabFocus: "tab-focus" }, - captions: '.plyr__captions', - currentTime: '.plyr__time--current', - duration: '.plyr__time--duration' - }, - classes: { - setup: 'plyr--setup', - ready: 'plyr--ready', - videoWrapper: 'plyr__video-wrapper', - embedWrapper: 'plyr__video-embed', - type: 'plyr--{0}', - stopped: 'plyr--stopped', - playing: 'plyr--playing', - muted: 'plyr--muted', - loading: 'plyr--loading', - hover: 'plyr--hover', - tooltip: 'plyr__tooltip', - hidden: 'plyr__sr-only', - hideControls: 'plyr--hide-controls', - isIos: 'plyr--is-ios', - isTouch: 'plyr--is-touch', captions: { - enabled: 'plyr--captions-enabled', - active: 'plyr--captions-active' + defaultActive: false }, fullscreen: { - enabled: 'plyr--fullscreen-enabled', - active: 'plyr--fullscreen-active' + enabled: true, + fallback: true, + allowAudio: false }, - tabFocus: 'tab-focus' - }, - captions: { - defaultActive: false - }, - fullscreen: { - enabled: true, - fallback: true, - allowAudio: false - }, - storage: { - enabled: true, - key: 'plyr' - }, - controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'], - i18n: { - restart: 'Restart', - rewind: 'Rewind {seektime} secs', - play: 'Play', - pause: 'Pause', - forward: 'Forward {seektime} secs', - played: 'played', - buffered: 'buffered', - currentTime: 'Current time', - duration: 'Duration', - volume: 'Volume', - toggleMute: 'Toggle Mute', - toggleCaptions: 'Toggle Captions', - toggleFullscreen: 'Toggle Fullscreen', - frameTitle: 'Player for {title}' - }, - types: { - embed: ['youtube', 'vimeo', 'soundcloud'], - html5: ['video', 'audio'] - }, - // URLs - urls: { - vimeo: { - api: 'https://player.vimeo.com/api/player.js', + storage: { + enabled: true, + key: "plyr" }, - youtube: { - api: 'https://www.youtube.com/iframe_api' + controls: ["play-large", "play", "progress", "current-time", "mute", "volume", "captions", "fullscreen"], + i18n: { + restart: "Restart", + rewind: "Rewind {seektime} secs", + play: "Play", + pause: "Pause", + forward: "Forward {seektime} secs", + played: "played", + buffered: "buffered", + currentTime: "Current time", + duration: "Duration", + volume: "Volume", + toggleMute: "Toggle Mute", + toggleCaptions: "Toggle Captions", + toggleFullscreen: "Toggle Fullscreen", + frameTitle: "Player for {title}" }, - soundcloud: { - api: 'https://w.soundcloud.com/player/api.js' - } - }, - // Custom control listeners - listeners: { - seek: null, - play: null, - pause: null, - restart: null, - rewind: null, - forward: null, - mute: null, - volume: null, - captions: null, - fullscreen: null - }, - // Events to watch on HTML5 media elements - events: ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'seeked', 'emptied'], - // Logging - logPrefix: '[Plyr]' - }; + types: { + embed: ["youtube", "vimeo", "soundcloud"], + html5: ["video", "audio"] + }, + // URLs + urls: { + vimeo: { + api: "https://player.vimeo.com/api/player.js" + }, + youtube: { + api: "https://www.youtube.com/iframe_api" + }, + soundcloud: { + api: "https://w.soundcloud.com/player/api.js" + } + }, + // Custom control listeners + listeners: { + seek: null, + play: null, + pause: null, + restart: null, + rewind: null, + forward: null, + mute: null, + volume: null, + captions: null, + fullscreen: null + }, + // Events to watch on HTML5 media elements + events: [ + "ready", + "ended", + "progress", + "stalled", + "playing", + "waiting", + "canplay", + "canplaythrough", + "loadstart", + "loadeddata", + "loadedmetadata", + "timeupdate", + "volumechange", + "play", + "pause", + "error", + "seeking", + "seeked", + "emptied" + ], + // Logging + logPrefix: "[Plyr]" + }; // Credits: http://paypal.github.io/accessible-html5-video-player/ // Unfortunately, due to mixed support, UA sniffing is required function _browserSniff() { var ua = navigator.userAgent, name = navigator.appName, - fullVersion = '' + parseFloat(navigator.appVersion), + fullVersion = "" + parseFloat(navigator.appVersion), majorVersion = parseInt(navigator.appVersion, 10), nameOffset, verOffset, @@ -196,37 +218,37 @@ isChrome = false, isSafari = false; - if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) { + if (navigator.appVersion.indexOf("Windows NT") !== -1 && navigator.appVersion.indexOf("rv:11") !== -1) { // MSIE 11 isIE = true; - name = 'IE'; - fullVersion = '11'; - } else if ((verOffset = ua.indexOf('MSIE')) !== -1) { + name = "IE"; + fullVersion = "11"; + } else if ((verOffset = ua.indexOf("MSIE")) !== -1) { // MSIE isIE = true; - name = 'IE'; + name = "IE"; fullVersion = ua.substring(verOffset + 5); - } else if ((verOffset = ua.indexOf('Chrome')) !== -1) { + } else if ((verOffset = ua.indexOf("Chrome")) !== -1) { // Chrome isChrome = true; - name = 'Chrome'; + name = "Chrome"; fullVersion = ua.substring(verOffset + 7); - } else if ((verOffset = ua.indexOf('Safari')) !== -1) { + } else if ((verOffset = ua.indexOf("Safari")) !== -1) { // Safari isSafari = true; - name = 'Safari'; + name = "Safari"; fullVersion = ua.substring(verOffset + 7); - if ((verOffset = ua.indexOf('Version')) !== -1) { + if ((verOffset = ua.indexOf("Version")) !== -1) { fullVersion = ua.substring(verOffset + 8); } - } else if ((verOffset = ua.indexOf('Firefox')) !== -1) { + } else if ((verOffset = ua.indexOf("Firefox")) !== -1) { // Firefox isFirefox = true; - name = 'Firefox'; + name = "Firefox"; fullVersion = ua.substring(verOffset + 8); - } else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) { + } else if ((nameOffset = ua.lastIndexOf(" ") + 1) < (verOffset = ua.lastIndexOf("/"))) { // In most other browsers, 'name/version' is at the end of userAgent - name = ua.substring(nameOffset,verOffset); + name = ua.substring(nameOffset, verOffset); fullVersion = ua.substring(verOffset + 1); if (name.toLowerCase() === name.toUpperCase()) { @@ -235,31 +257,31 @@ } // Trim the fullVersion string at semicolon/space if present - if ((ix = fullVersion.indexOf(';')) !== -1) { + if ((ix = fullVersion.indexOf(";")) !== -1) { fullVersion = fullVersion.substring(0, ix); } - if ((ix = fullVersion.indexOf(' ')) !== -1) { + if ((ix = fullVersion.indexOf(" ")) !== -1) { fullVersion = fullVersion.substring(0, ix); } // Get major version - majorVersion = parseInt('' + fullVersion, 10); + majorVersion = parseInt("" + fullVersion, 10); if (isNaN(majorVersion)) { - fullVersion = '' + parseFloat(navigator.appVersion); + fullVersion = "" + parseFloat(navigator.appVersion); majorVersion = parseInt(navigator.appVersion, 10); } // Return data return { - name: name, - version: majorVersion, - isIE: isIE, - isFirefox: isFirefox, - isChrome: isChrome, - isSafari: isSafari, - isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform), - isIphone: /(iPhone|iPod)/g.test(navigator.userAgent), - isTouch: 'ontouchstart' in document.documentElement + name: name, + version: majorVersion, + isIE: isIE, + isFirefox: isFirefox, + isChrome: isChrome, + isSafari: isSafari, + isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform), + isIphone: /(iPhone|iPod)/g.test(navigator.userAgent), + isTouch: "ontouchstart" in document.documentElement }; } @@ -269,19 +291,30 @@ function _supportMime(plyr, mimeType) { var media = plyr.media; - if (plyr.type === 'video') { + if (plyr.type === "video") { // Check type switch (mimeType) { - case 'video/webm': return !!(media.canPlayType && media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, '')); - case 'video/mp4': return !!(media.canPlayType && media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '')); - case 'video/ogg': return !!(media.canPlayType && media.canPlayType('video/ogg; codecs="theora"').replace(/no/, '')); - } - } else if (plyr.type === 'audio') { + case "video/webm": + return !!( + media.canPlayType && media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, "") + ); + case "video/mp4": + return !!( + media.canPlayType && + media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, "") + ); + case "video/ogg": + return !!(media.canPlayType && media.canPlayType('video/ogg; codecs="theora"').replace(/no/, "")); + } + } else if (plyr.type === "audio") { // Check type switch (mimeType) { - case 'audio/mpeg': return !!(media.canPlayType && media.canPlayType('audio/mpeg;').replace(/no/, '')); - case 'audio/ogg': return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '')); - case 'audio/wav': return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, '')); + case "audio/mpeg": + return !!(media.canPlayType && media.canPlayType("audio/mpeg;").replace(/no/, "")); + case "audio/ogg": + return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, "")); + case "audio/wav": + return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, "")); } } @@ -295,20 +328,20 @@ return; } - var tag = document.createElement('script'); + var tag = document.createElement("script"); tag.src = source; - var firstScriptTag = document.getElementsByTagName('script')[0]; + var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); } // Element exists in an array function _inArray(haystack, needle) { - return Array.prototype.indexOf && (haystack.indexOf(needle) !== -1); + return Array.prototype.indexOf && haystack.indexOf(needle) !== -1; } // Replace all function _replaceAll(string, find, replace) { - return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace); + return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace); } // Wrap an element @@ -321,11 +354,11 @@ // Loops backwards to prevent having to clone the wrapper on the // first element (see `child` below). for (var i = elements.length - 1; i >= 0; i--) { - var child = (i > 0) ? wrapper.cloneNode(true) : wrapper; + var child = i > 0 ? wrapper.cloneNode(true) : wrapper; var element = elements[i]; // Cache the current parent and sibling. - var parent = element.parentNode; + var parent = element.parentNode; var sibling = element.nextSibling; // Wrap the element (is automatically removed from its current @@ -376,7 +409,7 @@ // Set attributes function _setAttributes(element, attributes) { for (var key in attributes) { - element.setAttribute(key, (_is.boolean(attributes[key]) && attributes[key]) ? '' : attributes[key]); + element.setAttribute(key, _is.boolean(attributes[key]) && attributes[key] ? "" : attributes[key]); } } @@ -394,17 +427,17 @@ // Get a classname from selector function _getClassname(selector) { - return selector.replace('.', ''); + return selector.replace(".", ""); } // Toggle class on an element function _toggleClass(element, className, state) { if (element) { if (element.classList) { - element.classList[state ? 'add' : 'remove'](className); + element.classList[state ? "add" : "remove"](className); } else { - var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', ''); - element.className = name + (state ? ' ' + className : ''); + var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + className + " ", ""); + element.className = name + (state ? " " + className : ""); } } } @@ -415,7 +448,7 @@ if (element.classList) { return element.classList.contains(className); } else { - return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className); + return new RegExp("(\\s|^)" + className + "(\\s|$)").test(element.className); } } return false; @@ -425,26 +458,44 @@ function _matches(element, selector) { var p = Element.prototype; - var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) { - return [].indexOf.call(document.querySelectorAll(s), this) !== -1; - }; + var f = + p.matches || + p.webkitMatchesSelector || + p.mozMatchesSelector || + p.msMatchesSelector || + function(s) { + return [].indexOf.call(document.querySelectorAll(s), this) !== -1; + }; return f.call(element, selector); } // Bind along with custom handler function _proxyListener(element, eventName, userListener, defaultListener, useCapture) { - _on(element, eventName, function(event) { - if (userListener) { - userListener.apply(element, [event]); - } - defaultListener.apply(element, [event]); - }, useCapture); + if(userListener) { + // Register this before defaultListener + _on( + element, + eventName, + function(event) { + userListener.apply(element, [event]); + }, + useCapture + ); + } + _on( + element, + eventName, + function(event) { + defaultListener.apply(element, [event]); + }, + useCapture + ); } // Toggle event listener function _toggleListener(element, events, callback, toggle, useCapture) { - var eventList = events.split(' '); + var eventList = events.split(" "); // Whether the listener is a capturing listener or not // Default to false @@ -464,7 +515,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); + element[toggle ? "addEventListener" : "removeEventListener"](eventList[i], callback, useCapture); } } @@ -476,11 +527,11 @@ } // Unbind event - /*function _off(element, events, callback, useCapture) { + function _off(element, events, callback, useCapture) { if (element) { _toggleListener(element, events, callback, false, useCapture); } - }*/ + } // Trigger event function _event(element, type, bubbles, properties) { @@ -496,8 +547,8 @@ // Create and dispatch the event var event = new CustomEvent(type, { - bubbles: bubbles, - detail: properties + bubbles: bubbles, + detail: properties }); // Dispatch the event @@ -513,10 +564,10 @@ } // Get state - state = (_is.boolean(state) ? state : !target.getAttribute('aria-pressed')); + state = _is.boolean(state) ? state : !target.getAttribute("aria-pressed"); // Set the attribute on target - target.setAttribute('aria-pressed', state); + target.setAttribute("aria-pressed", state); return state; } @@ -526,7 +577,7 @@ if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) { return 0; } - return ((current / max) * 100).toFixed(2); + return (current / max * 100).toFixed(2); } // Deep extend/merge destination object with N more objects @@ -548,7 +599,7 @@ // First object is the destination var destination = Array.prototype.shift.call(objects), - length = objects.length; + length = objects.length; // Loop through all objects to merge for (var i = 0; i < length; i++) { @@ -570,19 +621,26 @@ // Check variable types var _is = { object: function(input) { - return input !== null && typeof(input) === 'object'; + return input !== null && typeof input === "object"; }, array: function(input) { - return input !== null && (typeof(input) === 'object' && input.constructor === Array); + return input !== null && (typeof input === "object" && input.constructor === Array); }, number: function(input) { - return input !== null && (typeof(input) === 'number' && !isNaN(input - 0) || (typeof input === 'object' && input.constructor === Number)); + return ( + input !== null && + ((typeof input === "number" && !isNaN(input - 0)) || + (typeof input === "object" && input.constructor === Number)) + ); }, string: function(input) { - return input !== null && (typeof input === 'string' || (typeof input === 'object' && input.constructor === String)); + return ( + input !== null && + (typeof input === "string" || (typeof input === "object" && input.constructor === String)) + ); }, boolean: function(input) { - return input !== null && typeof input === 'boolean'; + return input !== null && typeof input === "boolean"; }, nodeList: function(input) { return input !== null && input instanceof NodeList; @@ -591,52 +649,54 @@ return input !== null && input instanceof HTMLElement; }, function: function(input) { - return input !== null && typeof input === 'function'; + return input !== null && typeof input === "function"; }, undefined: function(input) { - return input !== null && typeof input === 'undefined'; + return input !== null && typeof input === "undefined"; } }; // Parse YouTube ID from url function _parseYouTubeId(url) { var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; - return (url.match(regex)) ? RegExp.$2 : url; + return url.match(regex) ? RegExp.$2 : url; } - // Parse Vimeo ID from url - function _parseVimeoId(url) { + // Is this a Vimeo url link? + function _isVimeoUrl(url) { var regex = /^.*(vimeo.com\/|video\/)(\d+).*/; - return (url.match(regex)) ? RegExp.$2 : url; + return url.match(regex); } // Fullscreen API function _fullscreen() { var fullscreen = { supportsFullScreen: false, - isFullScreen: function() { return false; }, + isFullScreen: function() { + return false; + }, requestFullScreen: function() {}, cancelFullScreen: function() {}, - fullScreenEventName: '', + fullScreenEventName: "", element: null, - prefix: '' + prefix: "" }, - browserPrefixes = 'webkit o moz ms khtml'.split(' '); + browserPrefixes = "webkit o moz ms khtml".split(" "); // Check for native support if (!_is.undefined(document.cancelFullScreen)) { fullscreen.supportsFullScreen = true; } else { // Check for fullscreen support by vendor prefix - for (var i = 0, il = browserPrefixes.length; i < il; i++ ) { + for (var i = 0, il = browserPrefixes.length; i < il; i++) { fullscreen.prefix = browserPrefixes[i]; - if (!_is.undefined(document[fullscreen.prefix + 'CancelFullScreen'])) { + if (!_is.undefined(document[fullscreen.prefix + "CancelFullScreen"])) { fullscreen.supportsFullScreen = true; break; } else if (!_is.undefined(document.msExitFullscreen) && document.msFullscreenEnabled) { // Special case for MS (when isn't it?) - fullscreen.prefix = 'ms'; + fullscreen.prefix = "ms"; fullscreen.supportsFullScreen = true; break; } @@ -647,32 +707,37 @@ if (fullscreen.supportsFullScreen) { // Yet again Microsoft awesomeness, // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes - fullscreen.fullScreenEventName = (fullscreen.prefix === 'ms' ? 'MSFullscreenChange' : fullscreen.prefix + 'fullscreenchange'); + fullscreen.fullScreenEventName = + fullscreen.prefix === "ms" ? "MSFullscreenChange" : fullscreen.prefix + "fullscreenchange"; fullscreen.isFullScreen = function(element) { if (_is.undefined(element)) { element = document.body; } switch (this.prefix) { - case '': + case "": return document.fullscreenElement === element; - case 'moz': + case "moz": return document.mozFullScreenElement === element; default: - return document[this.prefix + 'FullscreenElement'] === element; + return document[this.prefix + "FullscreenElement"] === element; } }; fullscreen.requestFullScreen = function(element) { if (_is.undefined(element)) { element = document.body; } - return (this.prefix === '') ? element.requestFullScreen() : element[this.prefix + (this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')](); + return this.prefix === "" + ? element.requestFullScreen() + : element[this.prefix + (this.prefix === "ms" ? "RequestFullscreen" : "RequestFullScreen")](); }; fullscreen.cancelFullScreen = function() { - return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + (this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')](); + return this.prefix === "" + ? document.cancelFullScreen() + : document[this.prefix + (this.prefix === "ms" ? "ExitFullscreen" : "CancelFullScreen")](); }; fullscreen.element = function() { - return (this.prefix === '') ? document.fullscreenElement : document[this.prefix + 'FullscreenElement']; + return this.prefix === "" ? document.fullscreenElement : document[this.prefix + "FullscreenElement"]; }; } @@ -682,26 +747,21 @@ // Local storage var _storage = { supported: (function() { - if (!('localStorage' in window)) { - return false; - } - // Try to use it (it might be disabled, e.g. user is in private/porn mode) // see: https://github.com/sampotts/plyr/issues/131 try { // Add test item - window.localStorage.setItem('___test', 'OK'); + window.localStorage.setItem("___test", "OK"); // Get the test item - var result = window.localStorage.getItem('___test'); + var result = window.localStorage.getItem("___test"); // Clean up - window.localStorage.removeItem('___test'); + window.localStorage.removeItem("___test"); // Check if value matches - return (result === 'OK'); - } - catch (e) { + return result === "OK"; + } catch (e) { return false; } @@ -712,8 +772,8 @@ // Player instance function Plyr(media, config) { var plyr = this, - timers = {}, - api; + timers = {}, + api; // Set media plyr.media = media; @@ -721,9 +781,14 @@ // Trigger events, with plyr instance passed function _triggerEvent(element, type, bubbles, properties) { - _event(element, type, bubbles, _extend({}, properties, { - plyr: api - })); + _event( + element, + type, + bubbles, + _extend({}, properties, { + plyr: api + }) + ); } // Debugging @@ -738,94 +803,100 @@ console[type].apply(console, args); } } - var _log = function() { _console('log', arguments) }, - _warn = function() { _console('warn', arguments) }; + var _log = function() { + _console("log", arguments); + }, + _warn = function() { + _console("warn", arguments); + }; // Log config options - _log('Config', config); + _log("Config", config); // Get icon URL function _getIconUrl() { return { - url: config.iconUrl, - absolute: (config.iconUrl.indexOf("http") === 0) || plyr.browser.isIE + url: config.iconUrl, + absolute: config.iconUrl.indexOf("http") === 0 || plyr.browser.isIE }; } // Build the default HTML function _buildControls() { // Create html array - var html = [], - iconUrl = _getIconUrl(), - iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix; + var html = [], + iconUrl = _getIconUrl(), + iconPath = (!iconUrl.absolute ? iconUrl.url : "") + "#" + config.iconPrefix; // Larger overlaid play button - if (_inArray(config.controls, 'play-large')) { + if (_inArray(config.controls, "play-large")) { html.push( '<button type="button" data-plyr="play" class="plyr__play-large">', - '<svg><use xlink:href="' + iconPath + '-play" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.play + '</span>', - '</button>' + '<svg><use xlink:href="' + iconPath + '-play" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.play + "</span>", + "</button>" ); } html.push('<div class="plyr__controls">'); // Restart button - if (_inArray(config.controls, 'restart')) { + if (_inArray(config.controls, "restart")) { html.push( '<button type="button" data-plyr="restart">', - '<svg><use xlink:href="' + iconPath + '-restart" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.restart + '</span>', - '</button>' + '<svg><use xlink:href="' + iconPath + '-restart" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.restart + "</span>", + "</button>" ); } // Rewind button - if (_inArray(config.controls, 'rewind')) { + if (_inArray(config.controls, "rewind")) { html.push( '<button type="button" data-plyr="rewind">', - '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>', - '</button>' + '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.rewind + "</span>", + "</button>" ); } // Play Pause button // TODO: This should be a toggle button really? - if (_inArray(config.controls, 'play')) { + if (_inArray(config.controls, "play")) { html.push( '<button type="button" data-plyr="play">', - '<svg><use xlink:href="' + iconPath + '-play" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.play + '</span>', - '</button>', + '<svg><use xlink:href="' + iconPath + '-play" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.play + "</span>", + "</button>", '<button type="button" data-plyr="pause">', - '<svg><use xlink:href="' + iconPath + '-pause" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.pause + '</span>', - '</button>' + '<svg><use xlink:href="' + iconPath + '-pause" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.pause + "</span>", + "</button>" ); } // Fast forward button - if (_inArray(config.controls, 'fast-forward')) { + if (_inArray(config.controls, "fast-forward")) { html.push( '<button type="button" data-plyr="fast-forward">', - '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.forward + '</span>', - '</button>' + '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.forward + "</span>", + "</button>" ); } // Progress - if (_inArray(config.controls, 'progress')) { + if (_inArray(config.controls, "progress")) { // Create progress - html.push('<span class="plyr__progress">', + html.push( + '<span class="plyr__progress">', '<label for="seek{id}" class="plyr__sr-only">Seek</label>', '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">', '<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>', '<progress class="plyr__progress--buffer" max="100" value="0">', - '<span>0</span>% ' + config.i18n.buffered, - '</progress>'); + "<span>0</span>% " + config.i18n.buffered, + "</progress>" + ); // Seek tooltip if (config.tooltips.seek) { @@ -833,77 +904,87 @@ } // Close - html.push('</span>'); + html.push("</span>"); } // Media current time display - if (_inArray(config.controls, 'current-time')) { + if (_inArray(config.controls, "current-time")) { html.push( '<span class="plyr__time">', - '<span class="plyr__sr-only">' + config.i18n.currentTime + '</span>', - '<span class="plyr__time--current">00:00</span>', - '</span>' + '<span class="plyr__sr-only">' + config.i18n.currentTime + "</span>", + '<span class="plyr__time--current">00:00</span>', + "</span>" ); } // Media duration display - if (_inArray(config.controls, 'duration')) { + if (_inArray(config.controls, "duration")) { html.push( '<span class="plyr__time">', - '<span class="plyr__sr-only">' + config.i18n.duration + '</span>', - '<span class="plyr__time--duration">00:00</span>', - '</span>' + '<span class="plyr__sr-only">' + config.i18n.duration + "</span>", + '<span class="plyr__time--duration">00:00</span>', + "</span>" ); } // Toggle mute button - if (_inArray(config.controls, 'mute')) { + if (_inArray(config.controls, "mute")) { html.push( '<button type="button" data-plyr="mute">', - '<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>', - '<svg><use xlink:href="' + iconPath + '-volume" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>', - '</button>' + '<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>', + '<svg><use xlink:href="' + iconPath + '-volume" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.toggleMute + "</span>", + "</button>" ); } // Volume range control - if (_inArray(config.controls, 'volume')) { + if (_inArray(config.controls, "volume")) { html.push( '<span class="plyr__volume">', - '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>', - '<input id="volume{id}" class="plyr__volume--input" type="range" min="' + config.volumeMin + '" max="' + config.volumeMax + '" value="' + config.volume + '" data-plyr="volume">', - '<progress class="plyr__volume--display" max="' + config.volumeMax + '" value="' + config.volumeMin + '" role="presentation"></progress>', - '</span>' + '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + "</label>", + '<input id="volume{id}" class="plyr__volume--input" type="range" min="' + + config.volumeMin + + '" max="' + + config.volumeMax + + '" value="' + + config.volume + + '" data-plyr="volume">', + '<progress class="plyr__volume--display" max="' + + config.volumeMax + + '" value="' + + config.volumeMin + + '" role="presentation"></progress>', + "</span>" ); } // Toggle captions button - if (_inArray(config.controls, 'captions')) { + if (_inArray(config.controls, "captions")) { html.push( '<button type="button" data-plyr="captions">', - '<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>', - '<svg><use xlink:href="' + iconPath+ '-captions-off" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>', - '</button>' + '<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>', + '<svg><use xlink:href="' + iconPath + '-captions-off" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + "</span>", + "</button>" ); } // Toggle fullscreen button - if (_inArray(config.controls, 'fullscreen')) { + if (_inArray(config.controls, "fullscreen")) { html.push( '<button type="button" data-plyr="fullscreen">', - '<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>', - '<svg><use xlink:href="' + iconPath + '-enter-fullscreen" /></svg>', - '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>', - '</button>' + '<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>', + '<svg><use xlink:href="' + iconPath + '-enter-fullscreen" /></svg>', + '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + "</span>", + "</button>" ); } // Close everything - html.push('</div>'); + html.push("</div>"); - return html.join(''); + return html.join(""); } // Setup fullscreen @@ -912,17 +993,22 @@ return; } - if ((plyr.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) { + if ((plyr.type !== "audio" || config.fullscreen.allowAudio) && config.fullscreen.enabled) { // Check for native support var nativeSupport = fullscreen.supportsFullScreen; if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) { - _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled'); + _log((nativeSupport ? "Native" : "Fallback") + " fullscreen enabled"); + + // Add styling hook + if (!nativeSupport) { + _toggleClass(plyr.container, config.classes.fullscreen.fallback, true); + } // Add styling hook _toggleClass(plyr.container, config.classes.fullscreen.enabled, true); } else { - _log('Fullscreen not supported and fallback disabled'); + _log("Fullscreen not supported and fallback disabled"); } // Toggle state @@ -938,13 +1024,16 @@ // Setup captions function _setupCaptions() { // Bail if not HTML5 video - if (plyr.type !== 'video') { + if (plyr.type !== "video") { return; } // Inject the container if (!_getElement(config.selectors.captions)) { - plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"></div>'); + plyr.videoContainer.insertAdjacentHTML( + "afterbegin", + '<div class="' + _getClassname(config.selectors.captions) + '"></div>' + ); } // Determine if HTML5 textTracks is supported @@ -954,26 +1043,26 @@ } // Get URL of caption file if exists - var captionSrc = '', + var captionSrc = "", kind, children = plyr.media.childNodes; for (var i = 0; i < children.length; i++) { - if (children[i].nodeName.toLowerCase() === 'track') { + if (children[i].nodeName.toLowerCase() === "track") { kind = children[i].kind; - if (kind === 'captions' || kind === 'subtitles') { - captionSrc = children[i].getAttribute('src'); + if (kind === "captions" || kind === "subtitles") { + captionSrc = children[i].getAttribute("src"); } } } // Record if caption file exists or not plyr.captionExists = true; - if (captionSrc === '') { + if (captionSrc === "") { plyr.captionExists = false; - _log('No caption track found'); + _log("No caption track found"); } else { - _log('Caption track found; URI: ' + captionSrc); + _log("Caption track found; URI: " + captionSrc); } // If no caption file exists, hide container for caption text @@ -984,7 +1073,7 @@ // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below var tracks = plyr.media.textTracks; for (var x = 0; x < tracks.length; x++) { - tracks[x].mode = 'hidden'; + tracks[x].mode = "hidden"; } // Enable UI @@ -992,11 +1081,12 @@ // Disable unsupported browsers than report false positive // Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1033144 - if ((plyr.browser.isIE && plyr.browser.version >= 10) || - (plyr.browser.isFirefox && plyr.browser.version >= 31)) { - + if ( + (plyr.browser.isIE && plyr.browser.version >= 10) || + (plyr.browser.isFirefox && plyr.browser.version >= 31) + ) { // Debugging - _log('Detected browser with known TextTrack issues - using manual fallback'); + _log("Detected browser with known TextTrack issues - using manual fallback"); // Set to false so skips to 'manual' captioning plyr.usingTextTracks = false; @@ -1005,15 +1095,15 @@ // Rendering caption tracks // Native support required - http://caniuse.com/webvtt if (plyr.usingTextTracks) { - _log('TextTracks supported'); + _log("TextTracks supported"); for (var y = 0; y < tracks.length; y++) { var track = tracks[y]; - if (track.kind === 'captions' || track.kind === 'subtitles') { - _on(track, 'cuechange', function() { + if (track.kind === "captions" || track.kind === "subtitles") { + _on(track, "cuechange", function() { // Display a cue, if there is one - if (this.activeCues[0] && 'text' in this.activeCues[0]) { + if (this.activeCues[0] && "text" in this.activeCues[0]) { _setCaption(this.activeCues[0].getCueAsHTML()); } else { _setCaption(); @@ -1023,13 +1113,13 @@ } } else { // Caption tracks not natively supported - _log('TextTracks not supported so rendering captions manually'); + _log("TextTracks not supported so rendering captions manually"); // Render captions from array at appropriate time - plyr.currentCaption = ''; + plyr.currentCaption = ""; plyr.captions = []; - if (captionSrc !== '') { + if (captionSrc !== "") { // Create XMLHttpRequest Object var xhr = new XMLHttpRequest(); @@ -1042,16 +1132,16 @@ //According to webvtt spec, line terminator consists of one of the following // CRLF (U+000D U+000A), LF (U+000A) or CR (U+000D) - var lineSeparator = '\r\n'; - if(req.indexOf(lineSeparator+lineSeparator) === -1) { - if(req.indexOf('\r\r') !== -1){ - lineSeparator = '\r'; + var lineSeparator = "\r\n"; + if (req.indexOf(lineSeparator + lineSeparator) === -1) { + if (req.indexOf("\r\r") !== -1) { + lineSeparator = "\r"; } else { - lineSeparator = '\n'; + lineSeparator = "\n"; } } - captions = req.split(lineSeparator+lineSeparator); + captions = req.split(lineSeparator + lineSeparator); for (var r = 0; r < captions.length; r++) { caption = captions[r]; @@ -1072,14 +1162,14 @@ // Remove first element ('VTT') plyr.captions.shift(); - _log('Successfully loaded the caption file via AJAX'); + _log("Successfully loaded the caption file via AJAX"); } else { - _warn(config.logPrefix + 'There was a problem loading the caption file via AJAX'); + _warn(config.logPrefix + "There was a problem loading the caption file via AJAX"); } } }; - xhr.open('get', captionSrc, true); + xhr.open("get", captionSrc, true); xhr.send(); } @@ -1091,14 +1181,14 @@ function _setCaption(caption) { /* jshint unused:false */ var container = _getElement(config.selectors.captions), - content = document.createElement('span'); + content = document.createElement("span"); // Empty the container - container.innerHTML = ''; + container.innerHTML = ""; // Default to empty if (_is.undefined(caption)) { - caption = ''; + caption = ""; } // Set the span content @@ -1121,8 +1211,8 @@ // Utilities for caption time codes function _timecodeCommon(tc, pos) { var tcpair = []; - tcpair = tc.split(' --> '); - for(var i = 0; i < tcpair.length; i++) { + tcpair = tc.split(" --> "); + for (var i = 0; i < tcpair.length; i++) { // WebVTT allows for extra meta data after the timestamp line // So get rid of this if it exists tcpair[i] = tcpair[i].replace(/(\d+:\d+:\d+\.\d+).*/, "$1"); @@ -1142,15 +1232,15 @@ var tc1 = [], tc2 = [], seconds; - tc1 = tc.split(','); - tc2 = tc1[0].split(':'); - seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]); + tc1 = tc.split(","); + tc2 = tc1[0].split(":"); + seconds = Math.floor(tc2[0] * 60 * 60) + Math.floor(tc2[1] * 60) + Math.floor(tc2[2]); return seconds; } } // If it's not video, or we're using textTracks, bail. - if (plyr.usingTextTracks || plyr.type !== 'video' || !plyr.supported.full) { + if (plyr.usingTextTracks || plyr.type !== "video" || !plyr.supported.full) { return; } @@ -1176,9 +1266,11 @@ } // Check if the next caption is in the current time range - if (plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) && - plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])) { - plyr.currentCaption = plyr.captions[plyr.subcount][1]; + if ( + plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) && + plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0]) + ) { + plyr.currentCaption = plyr.captions[plyr.subcount][1]; // Render the caption _setCaption(plyr.currentCaption); @@ -1224,17 +1316,16 @@ function _inFrame() { try { return window.self !== window.top; - } - catch (e) { + } catch (e) { return true; } } // Trap focus inside container function _focusTrap() { - var tabbables = _getElements('input:not([disabled]), button:not([disabled])'), - first = tabbables[0], - last = tabbables[tabbables.length - 1]; + var tabbables = _getElements("input:not([disabled]), button:not([disabled])"), + first = tabbables[0], + last = tabbables[tabbables.length - 1]; function _checkFocus(event) { // If it is TAB @@ -1252,13 +1343,13 @@ } // Bind the handler - _on(plyr.container, 'keydown', _checkFocus); + _on(plyr.container, "keydown", _checkFocus); } // Add elements to HTML5 media (source, tracks, etc) function _insertChildElements(type, attributes) { if (_is.string(attributes)) { - _insertElement(type, plyr.media, { src: attributes }); + _insertElement(type, plyr.media, { src: attributes }); } else if (attributes.constructor === Array) { for (var i = attributes.length - 1; i >= 0; i--) { _insertElement(type, plyr.media, attributes[i]); @@ -1274,10 +1365,10 @@ // Only load external sprite using AJAX if (iconUrl.absolute) { - _log('AJAX loading absolute SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : '')); + _log("AJAX loading absolute SVG sprite" + (plyr.browser.isIE ? " (due to IE)" : "")); loadSprite(iconUrl.url, "sprite-plyr"); } else { - _log('Sprite will be used as external resource directly'); + _log("Sprite will be used as external resource directly"); } } @@ -1285,7 +1376,7 @@ var html = config.html; // Insert custom video controls - _log('Injecting custom controls'); + _log("Injecting custom controls"); // If no controls are specified, create default if (!html) { @@ -1293,10 +1384,10 @@ } // Replace seek time instances - html = _replaceAll(html, '{seektime}', config.seekTime); + html = _replaceAll(html, "{seektime}", config.seekTime); // Replace all id references with random numbers - html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000))); + html = _replaceAll(html, "{id}", Math.floor(Math.random() * 10000)); // Replace Title, if it exists if (config.title){ @@ -1313,15 +1404,19 @@ // Inject into the container by default if (!_is.htmlElement(target)) { - target = plyr.container + target = plyr.container; } // Inject controls HTML - target.insertAdjacentHTML('beforeend', html); + target.insertAdjacentHTML("beforeend", html); // Setup tooltips if (config.tooltips.controls) { - var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join('')); + var labels = _getElements( + [config.selectors.controls.wrapper, " ", config.selectors.labels, " .", config.classes.hidden].join( + "" + ) + ); for (var i = labels.length - 1; i >= 0; i--) { var label = labels[i]; @@ -1335,51 +1430,52 @@ // Find the UI controls and store references function _findElements() { try { - plyr.controls = _getElement(config.selectors.controls.wrapper); + plyr.controls = _getElement(config.selectors.controls.wrapper); // Buttons plyr.buttons = {}; - plyr.buttons.seek = _getElement(config.selectors.buttons.seek); - plyr.buttons.play = _getElements(config.selectors.buttons.play); - plyr.buttons.pause = _getElement(config.selectors.buttons.pause); - plyr.buttons.restart = _getElement(config.selectors.buttons.restart); - plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind); - plyr.buttons.forward = _getElement(config.selectors.buttons.forward); - plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); + plyr.buttons.seek = _getElement(config.selectors.buttons.seek); + plyr.buttons.play = _getElements(config.selectors.buttons.play); + plyr.buttons.pause = _getElement(config.selectors.buttons.pause); + plyr.buttons.restart = _getElement(config.selectors.buttons.restart); + plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind); + plyr.buttons.forward = _getElement(config.selectors.buttons.forward); + plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen); // Inputs - plyr.buttons.mute = _getElement(config.selectors.buttons.mute); - plyr.buttons.captions = _getElement(config.selectors.buttons.captions); + plyr.buttons.mute = _getElement(config.selectors.buttons.mute); + plyr.buttons.captions = _getElement(config.selectors.buttons.captions); // Progress plyr.progress = {}; - plyr.progress.container = _getElement(config.selectors.progress.container); + plyr.progress.container = _getElement(config.selectors.progress.container); // Progress - Buffering - plyr.progress.buffer = {}; - plyr.progress.buffer.bar = _getElement(config.selectors.progress.buffer); - plyr.progress.buffer.text = plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName('span')[0]; + plyr.progress.buffer = {}; + plyr.progress.buffer.bar = _getElement(config.selectors.progress.buffer); + plyr.progress.buffer.text = + plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName("span")[0]; // Progress - Played - plyr.progress.played = _getElement(config.selectors.progress.played); + plyr.progress.played = _getElement(config.selectors.progress.played); // Seek tooltip - plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip); + plyr.progress.tooltip = + plyr.progress.container && plyr.progress.container.querySelector("." + config.classes.tooltip); // Volume - plyr.volume = {}; - plyr.volume.input = _getElement(config.selectors.volume.input); - plyr.volume.display = _getElement(config.selectors.volume.display); + plyr.volume = {}; + plyr.volume.input = _getElement(config.selectors.volume.input); + plyr.volume.display = _getElement(config.selectors.volume.display); // Timing - plyr.duration = _getElement(config.selectors.duration); - plyr.currentTime = _getElement(config.selectors.currentTime); - plyr.seekTime = _getElements(config.selectors.seekTime); + plyr.duration = _getElement(config.selectors.duration); + plyr.currentTime = _getElement(config.selectors.currentTime); + plyr.seekTime = _getElements(config.selectors.seekTime); return true; - } - catch(e) { - _warn('It looks like there is a problem with your controls HTML'); + } catch (e) { + _warn("It looks like there is a problem with your controls HTML"); // Restore native video controls _toggleNativeControls(true); @@ -1390,15 +1486,15 @@ // Toggle style hook function _toggleStyleHook() { - _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full); + _toggleClass(plyr.container, config.selectors.container.replace(".", ""), plyr.supported.full); } // Toggle native controls function _toggleNativeControls(toggle) { if (toggle && _inArray(config.types.html5, plyr.type)) { - plyr.media.setAttribute('controls', ''); + plyr.media.setAttribute("controls", ""); } else { - plyr.media.removeAttribute('controls'); + plyr.media.removeAttribute("controls"); } } @@ -1409,23 +1505,23 @@ // If there's a media title set, use that for the label if (_is.string(config.title) && config.title.length) { - label += ', ' + config.title; + label += ", " + config.title; // Set container label - plyr.container.setAttribute('aria-label', config.title); + plyr.container.setAttribute("aria-label", config.title); } // If there's a play button, set label if (plyr.supported.full && plyr.buttons.play) { for (var i = plyr.buttons.play.length - 1; i >= 0; i--) { - plyr.buttons.play[i].setAttribute('aria-label', label); + plyr.buttons.play[i].setAttribute("aria-label", label); } } // Set iframe title // https://github.com/sampotts/plyr/issues/124 if (_is.htmlElement(iframe)) { - iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title)); + iframe.setAttribute("title", config.i18n.frameTitle.replace("{title}", config.title)); } } @@ -1441,7 +1537,7 @@ // Clean up old volume // https://github.com/sampotts/plyr/issues/171 - window.localStorage.removeItem('plyr-volume'); + window.localStorage.removeItem("plyr-volume"); // load value from the current key value = window.localStorage.getItem(config.storage.key); @@ -1453,7 +1549,7 @@ // If value is a number, it's probably volume from an older // version of plyr. See: https://github.com/sampotts/plyr/pull/313 // Update the key to be JSON - _updateStorage({volume: parseFloat(value)}); + _updateStorage({ volume: parseFloat(value) }); } else { // Assume it's JSON from this or a later version of plyr plyr.storage = JSON.parse(value); @@ -1478,18 +1574,18 @@ function _setupMedia() { // If there's no media, bail if (!plyr.media) { - _warn('No media element found!'); + _warn("No media element found!"); return; } if (plyr.supported.full) { // Add type class - _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true); + _toggleClass(plyr.container, config.classes.type.replace("{0}", plyr.type), true); // Add video class for embeds // This will require changes if audio embeds are added if (_inArray(config.types.embed, plyr.type)) { - _toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true); + _toggleClass(plyr.container, config.classes.type.replace("{0}", "video"), true); } // If there's no autoplay attribute, assume the video is stopped and add state class @@ -1502,10 +1598,10 @@ _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch); // Inject the player wrapper - if (plyr.type === 'video') { + if (plyr.type === "video") { // Create the wrapper div - var wrapper = document.createElement('div'); - wrapper.setAttribute('class', config.classes.videoWrapper); + var wrapper = document.createElement("div"); + wrapper.setAttribute("class", config.classes.videoWrapper); // Wrap the video in a container _wrap(plyr.media, wrapper); @@ -1523,18 +1619,26 @@ // Setup YouTube/Vimeo function _setupEmbed() { - var container = document.createElement('div'), + var container = document.createElement("div"), mediaId, - id = plyr.type + '-' + Math.floor(Math.random() * (10000)); + mediaUrl, + id = plyr.type + "-" + Math.floor(Math.random() * 10000); // Parse IDs from URLs if supplied switch (plyr.type) { - case 'youtube': + case "youtube": mediaId = _parseYouTubeId(plyr.embedId); break; - case 'vimeo': - mediaId = _parseVimeoId(plyr.embedId); + case "vimeo": + if (_isVimeoUrl(plyr.embedId)) { + mediaId = null; + mediaUrl = plyr.embedId; + } else { + mediaId = parseInt(plyr.embedId); + mediaUrl = null; + } + break; default: @@ -1551,12 +1655,12 @@ _toggleClass(plyr.media, config.classes.videoWrapper, true); _toggleClass(plyr.media, config.classes.embedWrapper, true); - if (plyr.type === 'youtube') { + if (plyr.type === "youtube") { // Create the YouTube container plyr.media.appendChild(container); // Set ID - container.setAttribute('id', id); + container.setAttribute("id", id); // Setup API if (_is.object(window.YT)) { @@ -1569,14 +1673,18 @@ window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || []; // Add to queue - window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container); }); + window.onYouTubeReadyCallbacks.push(function() { + _youTubeReady(mediaId, container); + }); // Set callback to process queue - window.onYouTubeIframeAPIReady = function () { - window.onYouTubeReadyCallbacks.forEach(function(callback) { callback(); }); + window.onYouTubeIframeAPIReady = function() { + window.onYouTubeReadyCallbacks.forEach(function(callback) { + callback(); + }); }; } - } else if (plyr.type === 'vimeo') { + } else if (plyr.type === "vimeo") { // Vimeo needs an extra div to hide controls on desktop (which has full support) if (plyr.supported.full) { plyr.media.appendChild(container); @@ -1585,7 +1693,7 @@ } // Set ID - container.setAttribute('id', id); + container.setAttribute("id", id); // Load the API if not already if (!_is.object(window.Vimeo)) { @@ -1595,24 +1703,26 @@ var vimeoTimer = window.setInterval(function() { if (_is.object(window.Vimeo)) { window.clearInterval(vimeoTimer); - _vimeoReady(mediaId, container); + _vimeoReady(mediaId, mediaUrl, container); } }, 50); } else { - _vimeoReady(mediaId, container); + _vimeoReady(mediaId, mediaUrl, container); } - } else if (plyr.type === 'soundcloud') { + } else if (plyr.type === "soundcloud") { // TODO: Currently unsupported and undocumented // Inject the iframe - var soundCloud = document.createElement('iframe'); + var soundCloud = document.createElement("iframe"); // Watch for iframe load soundCloud.loaded = false; - _on(soundCloud, 'load', function() { soundCloud.loaded = true; }); + _on(soundCloud, "load", function() { + soundCloud.loaded = true; + }); _setAttributes(soundCloud, { - 'src': 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId, - 'id': id + src: "https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/" + mediaId, + id: id }); container.appendChild(soundCloud); @@ -1642,7 +1752,7 @@ } // Set title - _setTitle(_getElement('iframe')); + _setTitle(_getElement("iframe")); } // Handle YouTube API ready @@ -1652,26 +1762,26 @@ plyr.embed = new window.YT.Player(container.id, { videoId: videoId, playerVars: { - autoplay: (config.autoplay ? 1 : 0), - controls: (plyr.supported.full ? 0 : 1), - rel: 0, - showinfo: 0, + autoplay: config.autoplay ? 1 : 0, + controls: plyr.supported.full ? 0 : 1, + rel: 0, + showinfo: 0, iv_load_policy: 3, - cc_load_policy: (config.captions.defaultActive ? 1 : 0), - cc_lang_pref: 'en', - wmode: 'transparent', + cc_load_policy: config.captions.defaultActive ? 1 : 0, + cc_lang_pref: "en", + wmode: "transparent", modestbranding: 1, - disablekb: 1, - origin: '*' // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45 + disablekb: 1, + origin: "*" // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45 }, events: { - 'onError': function(event) { - _triggerEvent(plyr.container, 'error', true, { - code: event.data, - embed: event.target + onError: function(event) { + _triggerEvent(plyr.container, "error", true, { + code: event.data, + embed: event.target }); }, - 'onReady': function(event) { + onReady: function(event) { // Get the instance var instance = event.target; @@ -1698,17 +1808,17 @@ // Set the tabindex if (plyr.supported.full) { - plyr.media.querySelector('iframe').setAttribute('tabindex', '-1'); + plyr.media.querySelector("iframe").setAttribute("tabindex", "-1"); } // Update UI _embedReady(); // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); + _triggerEvent(plyr.media, "timeupdate"); // Trigger timeupdate - _triggerEvent(plyr.media, 'durationchange'); + _triggerEvent(plyr.media, "durationchange"); // Reset timer window.clearInterval(timers.buffering); @@ -1720,7 +1830,7 @@ // Trigger progress only when we actually buffer something if (plyr.media.lastBuffered === null || plyr.media.lastBuffered < plyr.media.buffered) { - _triggerEvent(plyr.media, 'progress'); + _triggerEvent(plyr.media, "progress"); } // Set last buffer point @@ -1731,11 +1841,11 @@ window.clearInterval(timers.buffering); // Trigger event - _triggerEvent(plyr.media, 'canplaythrough'); + _triggerEvent(plyr.media, "canplaythrough"); } }, 200); }, - 'onStateChange': function(event) { + onStateChange: function(event) { // Get the instance var instance = event.target; @@ -1752,7 +1862,7 @@ switch (event.data) { case 0: plyr.media.paused = true; - _triggerEvent(plyr.media, 'ended'); + _triggerEvent(plyr.media, "ended"); break; case 1: @@ -1760,12 +1870,12 @@ // If we were seeking, fire seeked event if (plyr.media.seeking) { - _triggerEvent(plyr.media, 'seeked'); + _triggerEvent(plyr.media, "seeked"); } plyr.media.seeking = false; - _triggerEvent(plyr.media, 'play'); - _triggerEvent(plyr.media, 'playing'); + _triggerEvent(plyr.media, "play"); + _triggerEvent(plyr.media, "playing"); // Poll to get playback progress timers.playing = window.setInterval(function() { @@ -1773,7 +1883,7 @@ plyr.media.currentTime = instance.getCurrentTime(); // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); + _triggerEvent(plyr.media, "timeupdate"); }, 100); // Check duration again due to YouTube bug @@ -1781,18 +1891,18 @@ // https://code.google.com/p/gdata-issues/issues/detail?id=8690 if (plyr.media.duration !== instance.getDuration()) { plyr.media.duration = instance.getDuration(); - _triggerEvent(plyr.media, 'durationchange'); + _triggerEvent(plyr.media, "durationchange"); } break; case 2: plyr.media.paused = true; - _triggerEvent(plyr.media, 'pause'); + _triggerEvent(plyr.media, "pause"); break; } - _triggerEvent(plyr.container, 'statechange', false, { + _triggerEvent(plyr.container, "statechange", false, { code: event.data }); } @@ -1801,17 +1911,27 @@ } // Vimeo ready - function _vimeoReady(mediaId, container) { + function _vimeoReady(mediaId, mediaUrl, container) { // Setup instance // https://github.com/vimeo/player.js - plyr.embed = new window.Vimeo.Player(container, { - id: parseInt(mediaId), + + var vimeoOptions = { loop: config.loop, autoplay: config.autoplay, byline: false, portrait: false, title: false - }); + }; + + if (mediaId) { + vimeoOptions.id = mediaId; + } + + if (mediaUrl) { + vimeoOptions.url = mediaUrl; + } + + plyr.embed = new window.Vimeo.Player(container, vimeoOptions); // Create a faux HTML5 API using the Vimeo API plyr.media.play = function() { @@ -1837,14 +1957,14 @@ plyr.media.currentTime = value; // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); + _triggerEvent(plyr.media, "timeupdate"); }); plyr.embed.getDuration().then(function(value) { plyr.media.duration = value; // Trigger timeupdate - _triggerEvent(plyr.media, 'durationchange'); + _triggerEvent(plyr.media, "durationchange"); }); // TODO: Captions @@ -1852,50 +1972,50 @@ plyr.embed.enableTextTrack('en'); }*/ - plyr.embed.on('loaded', function() { + plyr.embed.on("loaded", function() { // Fix keyboard focus issues // https://github.com/sampotts/plyr/issues/317 if (_is.htmlElement(plyr.embed.element) && plyr.supported.full) { - plyr.embed.element.setAttribute('tabindex', '-1'); + plyr.embed.element.setAttribute("tabindex", "-1"); } }); - plyr.embed.on('play', function() { + plyr.embed.on("play", function() { plyr.media.paused = false; - _triggerEvent(plyr.media, 'play'); - _triggerEvent(plyr.media, 'playing'); + _triggerEvent(plyr.media, "play"); + _triggerEvent(plyr.media, "playing"); }); - plyr.embed.on('pause', function() { + plyr.embed.on("pause", function() { plyr.media.paused = true; - _triggerEvent(plyr.media, 'pause'); + _triggerEvent(plyr.media, "pause"); }); - plyr.embed.on('timeupdate', function(data) { + plyr.embed.on("timeupdate", function(data) { plyr.media.seeking = false; plyr.media.currentTime = data.seconds; - _triggerEvent(plyr.media, 'timeupdate'); + _triggerEvent(plyr.media, "timeupdate"); }); - plyr.embed.on('progress', function(data) { + plyr.embed.on("progress", function(data) { plyr.media.buffered = data.percent; - _triggerEvent(plyr.media, 'progress'); + _triggerEvent(plyr.media, "progress"); if (parseInt(data.percent) === 1) { // Trigger event - _triggerEvent(plyr.media, 'canplaythrough'); + _triggerEvent(plyr.media, "canplaythrough"); } }); - plyr.embed.on('seeked', function() { + plyr.embed.on("seeked", function() { plyr.media.seeking = false; - _triggerEvent(plyr.media, 'seeked'); - _triggerEvent(plyr.media, 'play'); + _triggerEvent(plyr.media, "seeked"); + _triggerEvent(plyr.media, "play"); }); - plyr.embed.on('ended', function() { + plyr.embed.on("ended", function() { plyr.media.paused = true; - _triggerEvent(plyr.media, 'ended'); + _triggerEvent(plyr.media, "ended"); }); } @@ -1925,7 +2045,7 @@ plyr.media.currentTime = 0; plyr.embed.getDuration(function(value) { - plyr.media.duration = value/1000; + plyr.media.duration = value / 1000; // Update UI _embedReady(); @@ -1935,53 +2055,53 @@ plyr.media.currentTime = value; // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); + _triggerEvent(plyr.media, "timeupdate"); }); plyr.embed.bind(window.SC.Widget.Events.PLAY, function() { plyr.media.paused = false; - _triggerEvent(plyr.media, 'play'); - _triggerEvent(plyr.media, 'playing'); + _triggerEvent(plyr.media, "play"); + _triggerEvent(plyr.media, "playing"); }); plyr.embed.bind(window.SC.Widget.Events.PAUSE, function() { plyr.media.paused = true; - _triggerEvent(plyr.media, 'pause'); + _triggerEvent(plyr.media, "pause"); }); plyr.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) { plyr.media.seeking = false; - plyr.media.currentTime = data.currentPosition/1000; - _triggerEvent(plyr.media, 'timeupdate'); + plyr.media.currentTime = data.currentPosition / 1000; + _triggerEvent(plyr.media, "timeupdate"); }); plyr.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) { plyr.media.buffered = data.loadProgress; - _triggerEvent(plyr.media, 'progress'); + _triggerEvent(plyr.media, "progress"); if (parseInt(data.loadProgress) === 1) { // Trigger event - _triggerEvent(plyr.media, 'canplaythrough'); + _triggerEvent(plyr.media, "canplaythrough"); } }); plyr.embed.bind(window.SC.Widget.Events.FINISH, function() { plyr.media.paused = true; - _triggerEvent(plyr.media, 'ended'); + _triggerEvent(plyr.media, "ended"); }); }); } // Play media function _play() { - if ('play' in plyr.media) { + if ("play" in plyr.media) { plyr.media.play(); } } // Pause media function _pause() { - if ('pause' in plyr.media) { + if ("pause" in plyr.media) { plyr.media.pause(); } } @@ -2023,16 +2143,16 @@ // Seek to time // The input parameter can be an event or a number function _seek(input) { - var targetTime = 0, - paused = plyr.media.paused, - duration = _getDuration(); + var targetTime = 0, + paused = plyr.media.paused, + duration = _getDuration(); if (_is.number(input)) { targetTime = input; - } else if (_is.object(input) && _inArray(['input', 'change'], input.type)) { + } else if (_is.object(input) && _inArray(["input", "change"], input.type)) { // It's the seek slider // Seek to the selected time - targetTime = ((input.target.value / input.target.max) * duration); + targetTime = input.target.value / input.target.max * duration; } // Normalise targetTime @@ -2049,22 +2169,21 @@ // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans try { plyr.media.currentTime = targetTime.toFixed(4); - } - catch(e) {} + } catch (e) {} // Embeds if (_inArray(config.types.embed, plyr.type)) { - switch(plyr.type) { - case 'youtube': + switch (plyr.type) { + case "youtube": plyr.embed.seekTo(targetTime); break; - case 'vimeo': + case "vimeo": // Round to nearest second for vimeo plyr.embed.setCurrentTime(targetTime.toFixed(0)); break; - case 'soundcloud': + case "soundcloud": plyr.embed.seekTo(targetTime * 1000); break; } @@ -2074,17 +2193,17 @@ } // Trigger timeupdate - _triggerEvent(plyr.media, 'timeupdate'); + _triggerEvent(plyr.media, "timeupdate"); // Set seeking flag plyr.media.seeking = true; // Trigger seeking - _triggerEvent(plyr.media, 'seeking'); + _triggerEvent(plyr.media, "seeking"); } // Logging - _log('Seeking to ' + plyr.media.currentTime + ' seconds'); + _log("Seeking to " + plyr.media.currentTime + " seconds"); // Special handling for 'manual' captions _seekManualCaptions(targetTime); @@ -2094,9 +2213,8 @@ function _getDuration() { // It should be a number, but parse it just incase var duration = parseInt(config.duration), - - // True duration - mediaDuration = 0; + // True duration + mediaDuration = 0; // Only if duration available if (plyr.media.duration !== null && !isNaN(plyr.media.duration)) { @@ -2104,7 +2222,7 @@ } // If custom duration is funky, use regular duration - return (isNaN(duration) ? mediaDuration : duration); + return isNaN(duration) ? mediaDuration : duration; } // Check playing state @@ -2161,7 +2279,7 @@ plyr.isFullscreen = !plyr.isFullscreen; // Bind/unbind escape key - document.body.style.overflow = plyr.isFullscreen ? 'hidden' : ''; + document.body.style.overflow = plyr.isFullscreen ? "hidden" : ""; } // Set class hook @@ -2176,7 +2294,7 @@ } // Trigger an event - _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true); + _triggerEvent(plyr.container, plyr.isFullscreen ? "enterfullscreen" : "exitfullscreen", true); // Restore scroll position if (!plyr.isFullscreen && nativeSupport) { @@ -2205,19 +2323,19 @@ // Embeds if (_inArray(config.types.embed, plyr.type)) { // YouTube - switch(plyr.type) { - case 'youtube': - plyr.embed[plyr.media.muted ? 'mute' : 'unMute'](); + switch (plyr.type) { + case "youtube": + plyr.embed[plyr.media.muted ? "mute" : "unMute"](); break; - case 'vimeo': - case 'soundcloud': + case "vimeo": + case "soundcloud": plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax)); break; } // Trigger volumechange for embeds - _triggerEvent(plyr.media, 'volumechange'); + _triggerEvent(plyr.media, "volumechange"); } } @@ -2255,19 +2373,19 @@ // Embeds if (_inArray(config.types.embed, plyr.type)) { - switch(plyr.type) { - case 'youtube': + switch (plyr.type) { + case "youtube": plyr.embed.setVolume(plyr.media.volume * 100); break; - case 'vimeo': - case 'soundcloud': + case "vimeo": + case "soundcloud": plyr.embed.setVolume(plyr.media.volume); break; } // Trigger volumechange for embeds - _triggerEvent(plyr.media, 'volumechange'); + _triggerEvent(plyr.media, "volumechange"); } // Toggle muted state @@ -2280,7 +2398,7 @@ // Increase volume function _increaseVolume(step) { - var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); + var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax; if (!_is.number(step)) { step = config.volumeStep; @@ -2291,7 +2409,7 @@ // Decrease volume function _decreaseVolume(step) { - var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); + var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax; if (!_is.number(step)) { step = config.volumeStep; @@ -2303,7 +2421,7 @@ // Update volume UI and storage function _updateVolume() { // Get the current volume - var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); + var volume = plyr.media.muted ? 0 : plyr.media.volume * config.volumeMax; // Update the <input type="range"> if present if (plyr.supported.full) { @@ -2316,14 +2434,14 @@ } // Update the volume in storage - _updateStorage({volume: volume}); + _updateStorage({ volume: volume }); // Toggle class if muted - _toggleClass(plyr.container, config.classes.muted, (volume === 0)); + _toggleClass(plyr.container, config.classes.muted, volume === 0); // Update checkbox for mute state if (plyr.supported.full && plyr.buttons.mute) { - _toggleState(plyr.buttons.mute, (volume === 0)); + _toggleState(plyr.buttons.mute, volume === 0); } } @@ -2336,7 +2454,7 @@ // If the method is called without parameter, toggle based on current value if (!_is.boolean(show)) { - show = (plyr.container.className.indexOf(config.classes.captions.active) === -1); + show = plyr.container.className.indexOf(config.classes.captions.active) === -1; } // Set global @@ -2349,15 +2467,15 @@ _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled); // Trigger an event - _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true); + _triggerEvent(plyr.container, plyr.captionsEnabled ? "captionsenabled" : "captionsdisabled", true); // Save captions state to localStorage - _updateStorage({captionsEnabled: plyr.captionsEnabled}); + _updateStorage({ captionsEnabled: plyr.captionsEnabled }); } // Check if media is loading function _checkLoading(event) { - var loading = (event.type === 'waiting'); + var loading = event.type === "waiting"; // Clear timer clearTimeout(timers.loading); @@ -2369,7 +2487,7 @@ // Show controls if loading, hide if done _toggleControls(loading); - }, (loading ? 250 : 0)); + }, loading ? 250 : 0); } // Update <progress> elements @@ -2378,15 +2496,15 @@ return; } - var progress = plyr.progress.played, - value = 0, - duration = _getDuration(); + var progress = plyr.progress.played, + value = 0, + duration = _getDuration(); if (event) { switch (event.type) { // Video playing - case 'timeupdate': - case 'seeking': + case "timeupdate": + case "seeking": if (plyr.controls.pressed) { return; } @@ -2394,17 +2512,17 @@ value = _getPercentage(plyr.media.currentTime, duration); // Set seek range value only if it's a 'natural' time event - if (event.type === 'timeupdate' && plyr.buttons.seek) { + if (event.type === "timeupdate" && plyr.buttons.seek) { plyr.buttons.seek.value = value; } break; // Check buffer status - case 'playing': - case 'progress': - progress = plyr.progress.buffer; - value = (function() { + case "playing": + case "progress": + progress = plyr.progress.buffer; + value = (function() { var buffered = plyr.media.buffered; if (buffered && buffered.length) { @@ -2412,7 +2530,7 @@ return _getPercentage(buffered.end(0), duration); } else if (_is.number(buffered)) { // YouTube returns between 0 and 1 - return (buffered * 100); + return buffered * 100; } return 0; @@ -2473,17 +2591,17 @@ plyr.secs = parseInt(time % 60); plyr.mins = parseInt((time / 60) % 60); - plyr.hours = parseInt(((time / 60) / 60) % 60); + plyr.hours = parseInt((time / 60 / 60) % 60); // Do we need to display hours? - var displayHours = (parseInt(((_getDuration() / 60) / 60) % 60) > 0); + var displayHours = parseInt((_getDuration() / 60 / 60) % 60) > 0; // Ensure it's two digits. For example, 03 rather than 3. - plyr.secs = ('0' + plyr.secs).slice(-2); - plyr.mins = ('0' + plyr.mins).slice(-2); + plyr.secs = ("0" + plyr.secs).slice(-2); + plyr.mins = ("0" + plyr.mins).slice(-2); // Render - element.innerHTML = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs; + element.innerHTML = (displayHours ? plyr.hours + ":" : "") + plyr.mins + ":" + plyr.secs; } // Show the duration on metadataloaded @@ -2515,7 +2633,7 @@ _updateTimeDisplay(plyr.media.currentTime, plyr.currentTime); // Ignore updates while seeking - if (event && event.type === 'timeupdate' && plyr.media.seeking) { + if (event && event.type === "timeupdate" && plyr.media.seeking) { return; } @@ -2530,8 +2648,8 @@ time = 0; } - var duration = _getDuration(), - value = _getPercentage(time, duration); + var duration = _getDuration(), + value = _getPercentage(time, duration); // Update progress if (plyr.progress && plyr.progress.played) { @@ -2554,19 +2672,19 @@ } // Calculate percentage - var clientRect = plyr.progress.container.getBoundingClientRect(), - percent = 0, - visible = config.classes.tooltip + '--visible'; + var clientRect = plyr.progress.container.getBoundingClientRect(), + percent = 0, + visible = config.classes.tooltip + "--visible"; // Determine percentage, if already visible if (!event) { if (_hasClass(plyr.progress.tooltip, visible)) { - percent = plyr.progress.tooltip.style.left.replace('%', ''); + percent = plyr.progress.tooltip.style.left.replace("%", ""); } else { return; } } else { - percent = ((100 / clientRect.width) * (event.pageX - clientRect.left)); + percent = 100 / clientRect.width * (event.pageX - clientRect.left); } // Set bounds @@ -2577,22 +2695,22 @@ } // Display the time a click would seek to - _updateTimeDisplay(((duration / 100) * percent), plyr.progress.tooltip); + _updateTimeDisplay(duration / 100 * percent, plyr.progress.tooltip); // Set position plyr.progress.tooltip.style.left = percent + "%"; // Show/hide the tooltip // If the event is a moues in/out and percentage is inside bounds - if (event && _inArray(['mouseenter', 'mouseleave'], event.type)) { - _toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter')); + if (event && _inArray(["mouseenter", "mouseleave"], event.type)) { + _toggleClass(plyr.progress.tooltip, visible, event.type === "mouseenter"); } } // Show the player controls in fullscreen mode function _toggleControls(toggle) { // Don't hide if config says not to, it's audio, or not ready or loading - if (!config.hideControls || plyr.type === 'audio') { + if (!config.hideControls || plyr.type === "audio") { return; } @@ -2605,18 +2723,18 @@ if (!_is.boolean(toggle)) { if (toggle && toggle.type) { // Is the enter fullscreen event - isEnterFullscreen = (toggle.type === 'enterfullscreen'); + isEnterFullscreen = toggle.type === "enterfullscreen"; // Whether to show controls - show = _inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type); + show = _inArray(["mousemove", "touchstart", "mouseenter", "focus"], toggle.type); // Delay hiding on move events - if (_inArray(['mousemove', 'touchmove'], toggle.type)) { + if (_inArray(["mousemove", "touchmove"], toggle.type)) { delay = 2000; } // Delay a little more for keyboard users - if (toggle.type === 'focus') { + if (toggle.type === "focus") { delay = 3000; } } else { @@ -2666,18 +2784,18 @@ // Return the current source var url; - switch(plyr.type) { - case 'youtube': + switch (plyr.type) { + case "youtube": url = plyr.embed.getVideoUrl(); break; - case 'vimeo': - plyr.embed.getVideoUrl.then(function (value) { + case "vimeo": + plyr.embed.getVideoUrl.then(function(value) { url = value; }); break; - case 'soundcloud': + case "soundcloud": plyr.embed.getCurrentSound(function(object) { url = object.permalink_url; }); @@ -2688,14 +2806,14 @@ break; } - return url || ''; + return url || ""; } // Update source // Sources are not checked for support so be careful function _updateSource(source) { - if (!_is.object(source) || !('sources' in source) || !source.sources.length) { - _warn('Invalid source format'); + if (!_is.object(source) || !("sources" in source) || !source.sources.length) { + _warn("Invalid source format"); return; } @@ -2723,24 +2841,24 @@ _remove(plyr.media); // Remove video container - if (plyr.type === 'video' && plyr.videoContainer) { + if (plyr.type === "video" && plyr.videoContainer) { _remove(plyr.videoContainer); } // Reset class name if (plyr.container) { - plyr.container.removeAttribute('class'); + plyr.container.removeAttribute("class"); } // Set the type - if ('type' in source) { + if ("type" in source) { plyr.type = source.type; // Get child type for video (it might be an embed) - if (plyr.type === 'video') { + if (plyr.type === "video") { var firstSource = source.sources[0]; - if ('type' in firstSource && _inArray(config.types.embed, firstSource.type)) { + if ("type" in firstSource && _inArray(config.types.embed, firstSource.type)) { plyr.type = firstSource.type; } } @@ -2750,19 +2868,19 @@ plyr.supported = supported(plyr.type); // Create new markup - switch(plyr.type) { - case 'video': - plyr.media = document.createElement('video'); + switch (plyr.type) { + case "video": + plyr.media = document.createElement("video"); break; - case 'audio': - plyr.media = document.createElement('audio'); + case "audio": + plyr.media = document.createElement("audio"); break; - case 'youtube': - case 'vimeo': - case 'soundcloud': - plyr.media = document.createElement('div'); + case "youtube": + case "vimeo": + case "soundcloud": + plyr.media = document.createElement("div"); plyr.embedId = source.sources[0].src; break; } @@ -2778,16 +2896,16 @@ // Set attributes for audio and video if (_inArray(config.types.html5, plyr.type)) { if (config.crossorigin) { - plyr.media.setAttribute('crossorigin', ''); + plyr.media.setAttribute("crossorigin", ""); } if (config.autoplay) { - plyr.media.setAttribute('autoplay', ''); + plyr.media.setAttribute("autoplay", ""); } - if ('poster' in source) { - plyr.media.setAttribute('poster', source.poster); + if ("poster" in source) { + plyr.media.setAttribute("poster", source.poster); } if (config.loop) { - plyr.media.setAttribute('loop', ''); + plyr.media.setAttribute("loop", ""); } } @@ -2798,7 +2916,7 @@ // Set new sources for html5 if (_inArray(config.types.html5, plyr.type)) { - _insertChildElements('source', source.sources); + _insertChildElements("source", source.sources); } // Set up from scratch @@ -2807,8 +2925,8 @@ // HTML5 stuff if (_inArray(config.types.html5, plyr.type)) { // Setup captions - if ('tracks' in source) { - _insertChildElements('track', source.tracks); + if ("tracks" in source) { + _insertChildElements("track", source.tracks); } // Load HTML5 sources @@ -2816,7 +2934,10 @@ } // If HTML5 or embed but not fully supported, setupInterface and call ready now - if (_inArray(config.types.html5, plyr.type) || (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)) { + if ( + _inArray(config.types.html5, plyr.type) || + (_inArray(config.types.embed, plyr.type) && !plyr.supported.full) + ) { // Setup interface _setupInterface(); @@ -2836,23 +2957,27 @@ // Update poster function _updatePoster(source) { - if (plyr.type === 'video') { - plyr.media.setAttribute('poster', source); + if (plyr.type === "video") { + plyr.media.setAttribute("poster", source); } } + function onBodyClick() { + _toggleClass(_getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false); + } + // Listen for control events function _controlListeners() { // IE doesn't support input event, so we fallback to change - var inputEvent = (plyr.browser.isIE ? 'change' : 'input'); + var inputEvent = plyr.browser.isIE ? "change" : "input"; // Click play/pause helper function togglePlay() { var play = _togglePlay(); // Determine which buttons - var trigger = plyr.buttons[play ? 'play' : 'pause'], - target = plyr.buttons[play ? 'pause' : 'play']; + var trigger = plyr.buttons[play ? "play" : "pause"], + target = plyr.buttons[play ? "pause" : "play"]; // Get the last play button to account for the large play button if (target && target.length > 1) { @@ -2883,7 +3008,7 @@ if (!focused || focused === document.body) { focused = null; } else { - focused = document.querySelector(':focus'); + focused = document.querySelector(":focus"); } return focused; @@ -2901,10 +3026,10 @@ if (_is.nodeList(element)) { for (var i = 0; i < element.length; i++) { - _toggleClass(element[i], config.classes.tabFocus, (element[i] === focused)); + _toggleClass(element[i], config.classes.tabFocus, element[i] === focused); } } else { - _toggleClass(element, config.classes.tabFocus, (element === focused)); + _toggleClass(element, config.classes.tabFocus, element === focused); } } } @@ -2915,29 +3040,33 @@ // Handle global presses if (config.keyboardShorcuts.global) { - _on(window, 'keydown keyup', function(event) { + _on(window, "keydown keyup", function(event) { var code = getKeyCode(event), - focused = getFocusElement(), - allowed = [48,49,50,51,52,53,54,56,57,75,77,70,67], - count = get().length; + focused = getFocusElement(), + allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67], + count = get().length; // Only handle global key press if there's only one player // and the key is in the allowed keys // and if the focused element is not editable (e.g. text input) // and any that accept key input http://webaim.org/techniques/keyboard/ - if (count === 1 && _inArray(allowed, code) && (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))) { + if ( + count === 1 && + _inArray(allowed, code) && + (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable)) + ) { handleKey(event); } }); } // Handle presses on focused - _on(plyr.container, 'keydown keyup', handleKey); + _on(plyr.container, "keydown keyup", handleKey); } function handleKey(event) { var code = getKeyCode(event), - pressed = event.type === 'keydown', + pressed = event.type === "keydown", held = pressed && code === last; // If the event is bubbled from the media element @@ -2957,14 +3086,14 @@ } // Divide the max duration into 10th's and times by the number value - _seek((duration / 10) * (code - 48)); + _seek(duration / 10 * (code - 48)); } // Handle the key on keydown // Reset on keyup if (pressed) { // Which keycodes should we prevent default - var preventDefault = [48,49,50,51,52,53,54,56,57,32,75,38,40,77,39,37,70,67]; + var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67]; // If the code is found prevent default (e.g. prevent scrolling for arrows) if (_inArray(preventDefault, code)) { @@ -2972,7 +3101,7 @@ event.stopPropagation(); } - switch(code) { + switch (code) { // 0-9 case 48: case 49: @@ -2983,24 +3112,50 @@ case 54: case 55: case 56: - case 57: if (!held) { seekByKey(); } break; + case 57: + if (!held) { + seekByKey(); + } + break; // Space and K key case 32: - case 75: if (!held) { _togglePlay(); } break; + case 75: + if (!held) { + _togglePlay(); + } + break; // Arrow up - case 38: _increaseVolume(); break; + case 38: + _increaseVolume(); + break; // Arrow down - case 40: _decreaseVolume(); break; + case 40: + _decreaseVolume(); + break; // M key - case 77: if (!held) { _toggleMute() } break; + case 77: + if (!held) { + _toggleMute(); + } + break; // Arrow forward - case 39: _forward(); break; + case 39: + _forward(); + break; // Arrow back - case 37: _rewind(); break; + case 37: + _rewind(); + break; // F key - case 70: _toggleFullscreen(); break; + case 70: + _toggleFullscreen(); + break; // C key - case 67: if (!held) { _toggleCaptions(); } break; + case 67: + if (!held) { + _toggleCaptions(); + } + break; } // Escape is handle natively when in full screen @@ -3017,7 +3172,7 @@ } // Focus/tab management - _on(window, 'keyup', function(event) { + _on(window, "keyup", function(event) { var code = getKeyCode(event), focused = getFocusElement(); @@ -3025,31 +3180,29 @@ checkTabFocus(focused); } }); - _on(document.body, 'click', function() { - _toggleClass(_getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false); - }); + _on(document.body, "click", onBodyClick); for (var button in plyr.buttons) { var element = plyr.buttons[button]; - _on(element, 'blur', function() { - _toggleClass(element, 'tab-focus', false); + _on(element, "blur", function() { + _toggleClass(element, "tab-focus", false); }); } // Play - _proxyListener(plyr.buttons.play, 'click', config.listeners.play, togglePlay); + _proxyListener(plyr.buttons.play, "click", config.listeners.play, togglePlay); // Pause - _proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, togglePlay); + _proxyListener(plyr.buttons.pause, "click", config.listeners.pause, togglePlay); // Restart - _proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, _seek); + _proxyListener(plyr.buttons.restart, "click", config.listeners.restart, _seek); // Rewind - _proxyListener(plyr.buttons.rewind, 'click', config.listeners.rewind, _rewind); + _proxyListener(plyr.buttons.rewind, "click", config.listeners.rewind, _rewind); // Fast forward - _proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward); + _proxyListener(plyr.buttons.forward, "click", config.listeners.forward, _forward); // Seek _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek); @@ -3060,10 +3213,10 @@ }); // Mute - _proxyListener(plyr.buttons.mute, 'click', config.listeners.mute, _toggleMute); + _proxyListener(plyr.buttons.mute, "click", config.listeners.mute, _toggleMute); // Fullscreen - _proxyListener(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, _toggleFullscreen); + _proxyListener(plyr.buttons.fullscreen, "click", config.listeners.fullscreen, _toggleFullscreen); // Handle user exiting fullscreen by escaping etc if (fullscreen.supportsFullScreen) { @@ -3071,38 +3224,42 @@ } // Captions - _proxyListener(plyr.buttons.captions, 'click', config.listeners.captions, _toggleCaptions); + _proxyListener(plyr.buttons.captions, "click", config.listeners.captions, _toggleCaptions); // Seek tooltip - _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip); + _on(plyr.progress.container, "mouseenter mouseleave mousemove", _updateSeekTooltip); // Toggle controls visibility based on mouse movement if (config.hideControls) { // Toggle controls on mouse events and entering fullscreen - _on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', _toggleControls); + _on( + plyr.container, + "mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen", + _toggleControls + ); // Watch for cursor over controls so they don't hide when trying to interact - _on(plyr.controls, 'mouseenter mouseleave', function(event) { - plyr.controls.hover = event.type === 'mouseenter'; + _on(plyr.controls, "mouseenter mouseleave", function(event) { + plyr.controls.hover = event.type === "mouseenter"; }); - // Watch for cursor over controls so they don't hide when trying to interact - _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) { - plyr.controls.pressed = _inArray(['mousedown', 'touchstart'], event.type); + // Watch for cursor over controls so they don't hide when trying to interact + _on(plyr.controls, "mousedown mouseup touchstart touchend touchcancel", function(event) { + plyr.controls.pressed = _inArray(["mousedown", "touchstart"], event.type); }); // Focus in/out on controls - _on(plyr.controls, 'focus blur', _toggleControls, true); + _on(plyr.controls, "focus blur", _toggleControls, true); } // Adjust volume on scroll - _on(plyr.volume.input, 'wheel', function(event) { + _on(plyr.volume.input, "wheel", function(event) { event.preventDefault(); // Detect "natural" scroll - suppored on OS X Safari only // Other browsers on OS X will be inverted until support improves var inverted = event.webkitDirectionInvertedFromDevice, - step = (config.volumeStep / 5); + step = config.volumeStep / 5; // Scroll down (or up on natural) to decrease if (event.deltaY < 0 || event.deltaX > 0) { @@ -3127,20 +3284,20 @@ // Listen for media events function _mediaListeners() { // Time change on media - _on(plyr.media, 'timeupdate seeking', _timeUpdate); + _on(plyr.media, "timeupdate seeking", _timeUpdate); // Update manual captions - _on(plyr.media, 'timeupdate', _seekManualCaptions); + _on(plyr.media, "timeupdate", _seekManualCaptions); // Display duration - _on(plyr.media, 'durationchange loadedmetadata', _displayDuration); + _on(plyr.media, "durationchange loadedmetadata", _displayDuration); // Handle the media finishing - _on(plyr.media, 'ended', function() { + _on(plyr.media, "ended", function() { // Show poster on end - if (plyr.type === 'video' && config.showPosterOnEnd) { + if (plyr.type === "video" && config.showPosterOnEnd) { // Clear - if (plyr.type === 'video') { + if (plyr.type === "video") { _setCaption(); } @@ -3153,21 +3310,21 @@ }); // Check for buffer progress - _on(plyr.media, 'progress playing', _updateProgress); + _on(plyr.media, "progress playing", _updateProgress); // Handle native mute - _on(plyr.media, 'volumechange', _updateVolume); + _on(plyr.media, "volumechange", _updateVolume); // Handle native play/pause - _on(plyr.media, 'play pause ended', _checkPlaying); + _on(plyr.media, "play pause ended", _checkPlaying); // Loading - _on(plyr.media, 'waiting canplay seeked', _checkLoading); + _on(plyr.media, "waiting canplay seeked", _checkLoading); // Click video - if (config.clickToPlay && plyr.type !== 'audio') { + if (config.clickToPlay && plyr.type !== "audio") { // Re-fetch the wrapper - var wrapper = _getElement('.' + config.classes.videoWrapper); + var wrapper = _getElement("." + config.classes.videoWrapper); // Bail if there's no wrapper (this should never happen) if (!wrapper) { @@ -3178,7 +3335,7 @@ wrapper.style.cursor = "pointer"; // On click play, pause ore restart - _on(wrapper, 'click', function() { + _on(wrapper, "click", function() { // Touch devices will just show controls (if we're hiding controls) if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) { return; @@ -3197,12 +3354,14 @@ // Disable right click if (config.disableContextMenu) { - _on(plyr.media, 'contextmenu', function(event) { event.preventDefault(); }); + _on(plyr.media, "contextmenu", function(event) { + event.preventDefault(); + }); } // Proxy events to container // Bubble up key events for Edge - _on(plyr.media, config.events.concat(['keyup', 'keydown']).join(' '), function(event) { + _on(plyr.media, config.events.concat(["keyup", "keydown"]).join(" "), function(event) { _triggerEvent(plyr.container, event.type, true); }); } @@ -3215,7 +3374,7 @@ } // Remove child sources - var sources = plyr.media.querySelectorAll('source'); + var sources = plyr.media.querySelectorAll("source"); for (var i = 0; i < sources.length; i++) { _remove(sources[i]); } @@ -3223,7 +3382,7 @@ // Set blank video src attribute // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection - plyr.media.setAttribute('src', config.blankUrl); + plyr.media.setAttribute("src", config.blankUrl); // Load the new empty source // This will cancel existing requests @@ -3231,7 +3390,7 @@ plyr.media.load(); // Debugging - _log('Cancelled network requests'); + _log("Cancelled network requests"); } // Destroy an instance @@ -3245,7 +3404,7 @@ // Type specific stuff switch (plyr.type) { - case 'youtube': + case "youtube": // Clear timers window.clearInterval(timers.buffering); window.clearInterval(timers.playing); @@ -3258,7 +3417,7 @@ break; - case 'vimeo': + case "vimeo": // Destroy Vimeo API // then clean up (wait, to prevent postmessage errors) plyr.embed.unload().then(cleanUp); @@ -3268,8 +3427,8 @@ break; - case 'video': - case 'audio': + case "video": + case "audio": // Restore native video controls _toggleNativeControls(true); @@ -3303,11 +3462,17 @@ // Replace the container with the original element provided plyr.container.parentNode.replaceChild(original, plyr.container); + // Free container in order for GC to remove it and prevent memory leaks due to added events + plyr.container = null; + // Allow overflow (set on fullscreen) - document.body.style.overflow = ''; + document.body.style.overflow = ""; + + //remove events + _off(document.body, 'click', onBodyClick); // Event - _triggerEvent(original, 'destroyed', true); + _triggerEvent(original, "destroyed", true); } } @@ -3335,18 +3500,18 @@ // Set media type based on tag or data attribute // Supported: video, audio, vimeo, youtube var tagName = media.tagName.toLowerCase(); - if (tagName === 'div') { - plyr.type = media.getAttribute('data-type'); - plyr.embedId = media.getAttribute('data-video-id'); + if (tagName === "div") { + plyr.type = media.getAttribute("data-type"); + plyr.embedId = media.getAttribute("data-video-id"); // Clean up - media.removeAttribute('data-type'); - media.removeAttribute('data-video-id'); + media.removeAttribute("data-type"); + media.removeAttribute("data-video-id"); } else { - plyr.type = tagName; - config.crossorigin = (media.getAttribute('crossorigin') !== null); - config.autoplay = (config.autoplay || (media.getAttribute('autoplay') !== null)); - config.loop = (config.loop || (media.getAttribute('loop') !== null)); + plyr.type = tagName; + config.crossorigin = media.getAttribute("crossorigin") !== null; + config.autoplay = config.autoplay || media.getAttribute("autoplay") !== null; + config.loop = config.loop || media.getAttribute("loop") !== null; } // Check for support @@ -3358,23 +3523,26 @@ } // Wrap media - plyr.container = _wrap(media, document.createElement('div')); + plyr.container = _wrap(media, document.createElement("div")); // Allow focus to be captured - plyr.container.setAttribute('tabindex', 0); + plyr.container.setAttribute("tabindex", 0); // Add style hook _toggleStyleHook(); // Debug info - _log('' + plyr.browser.name + ' ' + plyr.browser.version); + _log("" + plyr.browser.name + " " + plyr.browser.version); // Setup media _setupMedia(); // Setup interface // If embed but not fully supported, setupInterface (to avoid flash of controls) and call ready now - if (_inArray(config.types.html5, plyr.type) || (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)) { + if ( + _inArray(config.types.html5, plyr.type) || + (_inArray(config.types.embed, plyr.type) && !plyr.supported.full) + ) { // Setup UI _setupInterface(); @@ -3393,7 +3561,7 @@ function _setupInterface() { // Don't setup interface if no support if (!plyr.supported.full) { - _warn('Basic support only', plyr.type); + _warn("Basic support only", plyr.type); // Remove controls _remove(_getElement(config.selectors.controls.wrapper)); @@ -3449,44 +3617,76 @@ } api = { - getOriginal: function() { return original; }, - getContainer: function() { return plyr.container }, - getEmbed: function() { return plyr.embed; }, - getMedia: function() { return plyr.media; }, - getType: function() { return plyr.type; }, - getDuration: _getDuration, - getCurrentTime: function() { return plyr.media.currentTime; }, - getVolume: function() { return plyr.media.volume; }, - isMuted: function() { return plyr.media.muted; }, - isReady: function() { return _hasClass(plyr.container, config.classes.ready); }, - isLoading: function() { return _hasClass(plyr.container, config.classes.loading); }, - isPaused: function() { return plyr.media.paused; }, - on: function(event, callback) { _on(plyr.container, event, callback); return this; }, - play: _play, - pause: _pause, - stop: function() { _pause(); _seek(); }, - restart: _seek, - rewind: _rewind, - forward: _forward, - seek: _seek, - source: _source, - poster: _updatePoster, - setVolume: _setVolume, - togglePlay: _togglePlay, - toggleMute: _toggleMute, - toggleCaptions: _toggleCaptions, - toggleFullscreen: _toggleFullscreen, - toggleControls: _toggleControls, - isFullscreen: function() { return plyr.isFullscreen || false; }, - support: function(mimeType) { return _supportMime(plyr, mimeType); }, - destroy: _destroy + getOriginal: function() { + return original; + }, + getContainer: function() { + return plyr.container; + }, + getEmbed: function() { + return plyr.embed; + }, + getMedia: function() { + return plyr.media; + }, + getType: function() { + return plyr.type; + }, + getDuration: _getDuration, + getCurrentTime: function() { + return plyr.media.currentTime; + }, + getVolume: function() { + return plyr.media.volume; + }, + isMuted: function() { + return plyr.media.muted; + }, + isReady: function() { + return _hasClass(plyr.container, config.classes.ready); + }, + isLoading: function() { + return _hasClass(plyr.container, config.classes.loading); + }, + isPaused: function() { + return plyr.media.paused; + }, + on: function(event, callback) { + _on(plyr.container, event, callback); + return this; + }, + play: _play, + pause: _pause, + stop: function() { + _pause(); + _seek(); + }, + restart: _seek, + rewind: _rewind, + forward: _forward, + seek: _seek, + source: _source, + poster: _updatePoster, + setVolume: _setVolume, + togglePlay: _togglePlay, + toggleMute: _toggleMute, + toggleCaptions: _toggleCaptions, + toggleFullscreen: _toggleFullscreen, + toggleControls: _toggleControls, + isFullscreen: function() { + return plyr.isFullscreen || false; + }, + support: function(mimeType) { + return _supportMime(plyr, mimeType); + }, + destroy: _destroy }; // Everything done function _ready() { // Ready event at end of execution stack window.setTimeout(function() { - _triggerEvent(plyr.media, 'ready'); + _triggerEvent(plyr.media, "ready"); }, 0); // Set class hook on media element @@ -3520,21 +3720,21 @@ var x = new XMLHttpRequest(); // If the id is set and sprite exists, bail - if (_is.string(id) && _is.htmlElement(document.querySelector('#' + id))) { + if (_is.string(id) && _is.htmlElement(document.querySelector("#" + id))) { return; } // Create placeholder (to prevent loading twice) - var container = document.createElement('div'); - container.setAttribute('hidden', ''); + var container = document.createElement("div"); + container.setAttribute("hidden", ""); if (_is.string(id)) { - container.setAttribute('id', id); + container.setAttribute("id", id); } document.body.insertBefore(container, document.body.childNodes[0]); // Check for CORS support - if ('withCredentials' in x) { - x.open('GET', url, true); + if ("withCredentials" in x) { + x.open("GET", url, true); } else { return; } @@ -3542,43 +3742,43 @@ // Inject hidden div with sprite on load x.onload = function() { container.innerHTML = x.responseText; - } + }; x.send(); } // Check for support function supported(type) { - var browser = _browserSniff(), - isOldIE = (browser.isIE && browser.version <= 9), - isIos = browser.isIos, - isIphone = browser.isIphone, - audioSupport = !!document.createElement('audio').canPlayType, - videoSupport = !!document.createElement('video').canPlayType, - basic = false, - full = false; + var browser = _browserSniff(), + isOldIE = browser.isIE && browser.version <= 9, + isIos = browser.isIos, + isIphone = browser.isIphone, + audioSupport = !!document.createElement("audio").canPlayType, + videoSupport = !!document.createElement("video").canPlayType, + basic = false, + full = false; switch (type) { - case 'video': + case "video": basic = videoSupport; - full = (basic && (!isOldIE && !isIphone)); + full = basic && (!isOldIE && !isIphone); break; - case 'audio': + case "audio": basic = audioSupport; - full = (basic && !isOldIE); + full = basic && !isOldIE; break; // Vimeo does not seem to be supported on iOS via API // Issue raised https://github.com/vimeo/player.js/issues/87 - case 'vimeo': + case "vimeo": basic = true; - full = (!isOldIE && !isIos); + full = !isOldIE && !isIos; break; - case 'youtube': + case "youtube": basic = true; - full = (!isOldIE && !isIos); + full = !isOldIE && !isIos; // YouTube seems to work on iOS 10+ on iPad if (isIos && !isIphone && browser.version >= 10) { @@ -3587,37 +3787,37 @@ break; - case 'soundcloud': + case "soundcloud": basic = true; - full = (!isOldIE && !isIphone); + full = !isOldIE && !isIphone; break; default: - basic = (audioSupport && videoSupport); - full = (basic && !isOldIE); + basic = audioSupport && videoSupport; + full = basic && !isOldIE; } return { - basic: basic, - full: full + basic: basic, + full: full }; } // Setup function function setup(targets, options) { // Get the players - var players = [], - instances = [], - selector = [defaults.selectors.html5, defaults.selectors.embed].join(','); + var players = [], + instances = [], + selector = [defaults.selectors.html5, defaults.selectors.embed].join(","); // Select the elements if (_is.string(targets)) { // String selector passed targets = document.querySelectorAll(targets); - } else if (_is.htmlElement(targets)) { + } else if (_is.htmlElement(targets)) { // Single HTMLElement passed targets = [targets]; - } else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets)) { + } else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets)) { // No selector passed, possibly options as first argument // If options are the first argument if (_is.undefined(options) && _is.object(targets)) { @@ -3646,9 +3846,9 @@ // Always wrap in a <div> for styling //container: _wrap(media, document.createElement('div')), // Could be a container or the media itself - target: target, + target: target, // This should be the <video>, <audio> or <div> (YouTube/Vimeo) - media: media + media: media }); } } @@ -3673,9 +3873,9 @@ // Create a player instance for each element players.forEach(function(player) { - var element = player.target, - media = player.media, - match = false; + var element = player.target, + media = player.media, + match = false; // The target element can also be the media element if (media === element) { @@ -3687,8 +3887,9 @@ var data = {}; // Try parsing data attribute config - try { data = JSON.parse(element.getAttribute('data-plyr')); } - catch(e) { } + try { + data = JSON.parse(element.getAttribute("data-plyr")); + } catch (e) {} var config = _extend({}, defaults, options, data); @@ -3707,15 +3908,22 @@ // Listen for events if debugging if (config.debug) { - var events = config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']); - - _on(instance.getContainer(), events.join(' '), function(event) { - console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr); + var events = config.events.concat([ + "setup", + "statechange", + "enterfullscreen", + "exitfullscreen", + "captionsenabled", + "captionsdisabled" + ]); + + _on(instance.getContainer(), events.join(" "), function(event) { + console.log([config.logPrefix, "event:", event.type].join(" "), event.detail.plyr); }); } // Callback - _event(instance.getContainer(), 'setup', true, { + _event(instance.getContainer(), "setup", true, { plyr: instance }); @@ -3738,7 +3946,7 @@ // If we have a HTML element if (_is.htmlElement(container)) { - var elements = container.querySelectorAll('.' + defaults.classes.setup), + var elements = container.querySelectorAll("." + defaults.classes.setup), instances = []; Array.prototype.slice.call(elements).forEach(function(element) { @@ -3754,23 +3962,23 @@ } return { - setup: setup, - supported: supported, + setup: setup, + supported: supported, loadSprite: loadSprite, - get: get + get: get }; -})); +}); // Custom event polyfill // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent -(function () { - if (typeof window.CustomEvent === 'function') { +(function() { + if (typeof window.CustomEvent === "function") { return; } function CustomEvent(event, params) { params = params || { bubbles: false, cancelable: false, detail: undefined }; - var evt = document.createEvent('CustomEvent'); + var evt = document.createEvent("CustomEvent"); evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); return evt; } diff --git a/src/less/plyr.less b/src/less/plyr.less index c9e3d7c3..3b1c21b6 100644 --- a/src/less/plyr.less +++ b/src/less/plyr.less @@ -9,7 +9,9 @@ // Animation // --------------------------------------- @keyframes plyr-progress { - to { background-position: @plyr-progress-loading-size 0; } + to { + background-position: @plyr-progress-loading-size 0; + } } // Styles @@ -35,7 +37,10 @@ & when (@plyr-touch-action = true) { // Fix 300ms delay - a, button, input, label { + a, + button, + input, + label { touch-action: manipulation; } } @@ -56,7 +61,7 @@ // Range inputs // Specificity is for bootstrap compatibility - input[type='range'] { + input[type="range"] { display: block; height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale); width: 100%; @@ -137,12 +142,12 @@ } // Video range inputs -.plyr--video input[type='range'].tab-focus:focus { +.plyr--video input[type="range"].tab-focus:focus { outline: 1px dotted fade(@plyr-video-control-color, 50%); } // Audio range inputs -.plyr--audio input[type='range'].tab-focus:focus { +.plyr--audio input[type="range"].tab-focus:focus { outline: 1px dotted fade(@plyr-audio-control-color, 50%); } @@ -221,7 +226,7 @@ width: 100%; padding: (@plyr-control-spacing * 2); transform: translateY(-(@plyr-control-spacing * 4)); - transition: transform .3s ease; + transition: transform 0.3s ease; color: @plyr-captions-color; font-size: @plyr-font-size-captions-base; text-align: center; @@ -268,6 +273,11 @@ align-items: center; line-height: 1; text-align: center; + pointer-events: none; + + & > * { + pointer-events: all; + } // Spacing > button, @@ -298,7 +308,7 @@ background: transparent; border-radius: 3px; cursor: pointer; - transition: background .3s ease, color .3s ease, opacity .3s ease; + transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease; color: inherit; svg { @@ -347,7 +357,7 @@ border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; color: @plyr-video-control-color; - transition: opacity .3s ease; + transition: opacity 0.3s ease; button { // Hover and tab focus @@ -391,7 +401,7 @@ border-radius: 100%; box-shadow: 0 1px 1px fade(#000, 15%); color: @plyr-video-control-color; - transition: all .3s ease; + transition: all 0.3s ease; svg { position: relative; @@ -418,11 +428,11 @@ } // States -.plyr__controls [data-plyr='pause'], -.plyr--playing .plyr__controls [data-plyr='play'] { +.plyr__controls [data-plyr="pause"], +.plyr--playing .plyr__controls [data-plyr="play"] { display: none; } -.plyr--playing .plyr__controls [data-plyr='pause'] { +.plyr--playing .plyr__controls [data-plyr="pause"] { display: inline-block; } @@ -438,12 +448,12 @@ } // Some options are hidden by default -.plyr [data-plyr='captions'], -.plyr [data-plyr='fullscreen'] { +.plyr [data-plyr="captions"], +.plyr [data-plyr="fullscreen"] { display: none; } -.plyr--captions-enabled [data-plyr='captions'], -.plyr--fullscreen-enabled [data-plyr='fullscreen'] { +.plyr--captions-enabled [data-plyr="captions"], +.plyr--fullscreen-enabled [data-plyr="fullscreen"] { display: inline-block; } @@ -465,13 +475,13 @@ font-size: @plyr-font-size-small; line-height: 1.3; - transform: translate(-50%, 10px) scale(.8); + transform: translate(-50%, 10px) scale(0.8); transform-origin: 50% 100%; - transition: transform .2s .1s ease, opacity .2s .1s ease; + transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; &::before { // Arrows - content: ''; + content: ""; position: absolute; width: 0; height: 0; @@ -499,7 +509,7 @@ // First tooltip .plyr__controls button:first-child .plyr__tooltip { left: 0; - transform: translate(0, 10px) scale(.8); + transform: translate(0, 10px) scale(0.8); transform-origin: 0 100%; &::before { @@ -510,7 +520,7 @@ // Last tooltip .plyr__controls button:last-child .plyr__tooltip { right: 0; - transform: translate(0, 10px) scale(.8); + transform: translate(0, 10px) scale(0.8); transform-origin: 100% 100%; &::before { @@ -529,7 +539,6 @@ } } - // Playback progress // -------------------------------------------------------------- // <progress> element @@ -621,13 +630,13 @@ } .plyr__progress--buffer { &::-webkit-progress-value { - transition: width .2s ease; + transition: width 0.2s ease; } &::-moz-progress-bar { - transition: width .2s ease; + transition: width 0.2s ease; } &::-ms-fill { - transition: width .2s ease; + transition: width 0.2s ease; } } .plyr--video .plyr__progress--buffer, @@ -658,7 +667,8 @@ @plyr-progress-loading-bg 50%, @plyr-progress-loading-bg 75%, transparent 75%, - transparent); + transparent + ); color: transparent; } .plyr--video.plyr--loading .plyr__progress--buffer { @@ -685,7 +695,7 @@ // Add a slash in before &::before { - content: '\2044'; + content: "\2044"; margin-right: @plyr-control-spacing; } } @@ -716,21 +726,15 @@ // It's not supported to change volume using JavaScript: // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .plyr--is-ios .plyr__volume, -.plyr--is-ios [data-plyr='mute'] { +.plyr--is-ios [data-plyr="mute"] { display: none !important; } // 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 !important; @@ -745,12 +749,6 @@ // Revert overflow change overflow: visible; } - .plyr__controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - } // Vimeo requires some different styling &.plyr--vimeo .plyr__video-wrapper { @@ -759,3 +757,13 @@ transform: translateY(-50%); } } + +// Fallback for unsupported browsers +.plyr--fullscreen-fallback.plyr--fullscreen-active { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10000000; +} diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 91a5d1b2..11488ae4 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -9,7 +9,9 @@ // Animation // --------------------------------------- @keyframes plyr-progress { - to { background-position: $plyr-progress-loading-size 0; } + to { + background-position: $plyr-progress-loading-size 0; + } } // Styles @@ -34,10 +36,13 @@ } @if $plyr-touch-action == true { - // Fix 300ms delay - a, button, input, label { - touch-action: manipulation; - } + // Fix 300ms delay + a, + button, + input, + label { + touch-action: manipulation; + } } // Focus @@ -56,7 +61,7 @@ // Range inputs // Specificity is for bootstrap compatibility - input[type='range'] { + input[type="range"] { display: block; height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale); width: 100%; @@ -137,13 +142,13 @@ } // Video range inputs -.plyr--video input[type='range'].tab-focus:focus { - outline: 1px dotted transparentize($plyr-video-control-color, .5); +.plyr--video input[type="range"].tab-focus:focus { + outline: 1px dotted transparentize($plyr-video-control-color, 0.5); } // Audio range inputs -.plyr--audio input[type='range'].tab-focus:focus { - outline: 1px dotted transparentize($plyr-audio-control-color, .5); +.plyr--audio input[type="range"].tab-focus:focus { + outline: 1px dotted transparentize($plyr-audio-control-color, 0.5); } // Screen reader only elements @@ -220,7 +225,7 @@ width: 100%; padding: ($plyr-control-spacing * 2); transform: translateY(-($plyr-control-spacing * 6)); - transition: transform .3s ease; + transition: transform 0.3s ease; color: $plyr-captions-color; font-size: $plyr-font-size-captions-base; text-align: center; @@ -267,7 +272,12 @@ align-items: center; line-height: 1; text-align: center; - + pointer-events: none; + + & > * { + pointer-events: all; + } + // Spacing > button, .plyr__progress, @@ -292,12 +302,12 @@ flex-shrink: 0; overflow: visible; // IE11 vertical-align: middle; - padding: ($plyr-control-spacing * .7); + padding: ($plyr-control-spacing * 0.7); border: 0; background: transparent; border-radius: 3px; cursor: pointer; - transition: background .3s ease, color .3s ease, opacity .3s ease; + transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease; color: inherit; svg { @@ -341,11 +351,14 @@ right: 0; bottom: 0; padding: ($plyr-control-spacing * 5) $plyr-control-spacing $plyr-control-spacing; - background: linear-gradient(transparentize($plyr-video-controls-bg, 1), transparentize($plyr-video-controls-bg, .5)); + background: linear-gradient( + transparentize($plyr-video-controls-bg, 1), + transparentize($plyr-video-controls-bg, 0.5) + ); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; color: $plyr-video-control-color; - transition: opacity .3s ease; + transition: opacity 0.3s ease; button { // Hover and tab focus @@ -387,9 +400,9 @@ background: $plyr-video-control-bg-hover; border: 4px solid currentColor; border-radius: 100%; - box-shadow: 0 1px 1px transparentize(#000, .85); + box-shadow: 0 1px 1px transparentize(#000, 0.85); color: $plyr-video-control-color; - transition: all .3s ease; + transition: all 0.3s ease; svg { position: relative; @@ -401,7 +414,7 @@ } &:focus { - outline: 1px dotted transparentize($plyr-video-control-color, .5); + outline: 1px dotted transparentize($plyr-video-control-color, 0.5); } } .plyr .plyr__play-large { @@ -416,11 +429,11 @@ } // States -.plyr__controls [data-plyr='pause'], -.plyr--playing .plyr__controls [data-plyr='play'] { +.plyr__controls [data-plyr="pause"], +.plyr--playing .plyr__controls [data-plyr="play"] { display: none; } -.plyr--playing .plyr__controls [data-plyr='pause'] { +.plyr--playing .plyr__controls [data-plyr="pause"] { display: inline-block; } @@ -436,12 +449,12 @@ } // Some options are hidden by default -.plyr [data-plyr='captions'], -.plyr [data-plyr='fullscreen'] { +.plyr [data-plyr="captions"], +.plyr [data-plyr="fullscreen"] { display: none; } -.plyr--captions-enabled [data-plyr='captions'], -.plyr--fullscreen-enabled [data-plyr='fullscreen'] { +.plyr--captions-enabled [data-plyr="captions"], +.plyr--fullscreen-enabled [data-plyr="fullscreen"] { display: inline-block; } @@ -463,13 +476,13 @@ font-size: $plyr-font-size-small; line-height: 1.3; - transform: translate(-50%, 10px) scale(.8); + transform: translate(-50%, 10px) scale(0.8); transform-origin: 50% 100%; - transition: transform .2s .1s ease, opacity .2s .1s ease; + transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease; &::before { // Arrows - content: ''; + content: ""; position: absolute; width: 0; height: 0; @@ -497,7 +510,7 @@ // First tooltip .plyr__controls button:first-child .plyr__tooltip { left: 0; - transform: translate(0, 10px) scale(.8); + transform: translate(0, 10px) scale(0.8); transform-origin: 0 100%; &::before { @@ -508,7 +521,7 @@ // Last tooltip .plyr__controls button:last-child .plyr__tooltip { right: 0; - transform: translate(0, 10px) scale(.8); + transform: translate(0, 10px) scale(0.8); transform-origin: 100% 100%; &::before { @@ -618,13 +631,13 @@ } .plyr__progress--buffer { &::-webkit-progress-value { - transition: width .2s ease; + transition: width 0.2s ease; } &::-moz-progress-bar { - transition: width .2s ease; + transition: width 0.2s ease; } &::-ms-fill { - transition: width .2s ease; + transition: width 0.2s ease; } } .plyr--video .plyr__progress--buffer, @@ -655,7 +668,8 @@ $plyr-progress-loading-bg 50%, $plyr-progress-loading-bg 75%, transparent 75%, - transparent); + transparent + ); color: transparent; } .plyr--video.plyr--loading .plyr__progress--buffer { @@ -682,7 +696,7 @@ // Add a slash in before &::before { - content: '\2044'; + content: "\2044"; margin-right: $plyr-control-spacing; } } @@ -713,21 +727,15 @@ // It's not supported to change volume using JavaScript: // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .plyr--is-ios .plyr__volume, -.plyr--is-ios [data-plyr='mute'] { +.plyr--is-ios [data-plyr="mute"] { display: none !important; } // 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 !important; @@ -742,12 +750,6 @@ // Revert overflow change overflow: visible; } - .plyr__controls { - position: absolute; - bottom: 0; - left: 0; - right: 0; - } // Vimeo requires some different styling &.plyr--vimeo .plyr__video-wrapper { @@ -756,3 +758,13 @@ transform: translateY(-50%); } } + +// Fallback for unsupported browsers +.plyr--fullscreen-fallback.plyr--fullscreen-active { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10000000; +} |