Work on v1.5
See changelog.md
This commit is contained in:
Sam Potts
parent
592bcc8d7e
commit
9b09c9c7a0
11
changelog.md
11
changelog.md
@ -1,9 +1,14 @@
|
||||
# Changelog
|
||||
|
||||
# v1.5.0
|
||||
- *Beta* Vimeo support (please report bugs)
|
||||
- New options for initialization (see docs)
|
||||
-
|
||||
- *Beta* Vimeo support (please report bugs) (fixes #8)
|
||||
- New options for initialization (you can now pass a selector, HTMLElement or NodeList) (fixes #118)
|
||||
- Switched to BEM methodology (you will need to change CSS and probably HTML)
|
||||
- Decoupled CSS and JS hooks (fixes #129)
|
||||
- Custom controls container (fixes #98)
|
||||
- Fix for private/incognito mode local storage bug (fixes #131)
|
||||
- UMD module setup (fixes #121)
|
||||
- Specify iframe title for Vimeo and YouTube (fixes #124)
|
||||
|
||||
## v1.3.5
|
||||
- Fixed bug with API use on basic supported browsers
|
||||
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/docs.css
vendored
2
docs/dist/docs.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/docs.js
vendored
2
docs/dist/docs.js
vendored
@ -1 +1 @@
|
||||
"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 n,s=arguments.length;for(n=0;s>n;n++)t=arguments[n],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:n.call(this,t)}}t=null}():!function(t){"use strict";if("Element"in t){var e="classList",n="prototype",s=t.Element[n],i=Object,o=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[n].indexOf||function(t){for(var e=0,n=this.length;n>e;e++)if(e in this&&this[e]===t)return e;return-1},c=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},a=function(t,e){if(""===e)throw new c("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new c("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(t,e)},l=function(t){for(var e=o.call(t.getAttribute("class")||""),n=e?e.split(/\s+/):[],s=0,i=n.length;i>s;s++)this.push(n[s]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[n]=[],p=function(){return new l(this)};if(c[n]=Error[n],u.item=function(t){return this[t]||null},u.contains=function(t){return t+="",-1!==a(this,t)},u.add=function(){var t,e=arguments,n=0,s=e.length,i=!1;do t=e[n]+"",-1===a(this,t)&&(this.push(t),i=!0);while(++n<s);i&&this._updateClassName()},u.remove=function(){var t,e,n=arguments,s=0,i=n.length,o=!1;do for(t=n[s]+"",e=a(this,t);-1!==e;)this.splice(e,1),o=!0,e=a(this,t);while(++s<i);o&&this._updateClassName()},u.toggle=function(t,e){t+="";var n=this.contains(t),s=n?e!==!0&&"remove":e!==!1&&"add";return s&&this[s](t),e===!0||e===!1?e:!n},u.toString=function(){return this.join(" ")},i.defineProperty){var d={get:p,enumerable:!0,configurable:!0};try{i.defineProperty(s,e,d)}catch(m){-2146823252===m.number&&(d.enumerable=!1,i.defineProperty(s,e,d))}}else i[n].__defineGetter__&&s.__defineGetter__(e,p)}}(self)),plyr.setup({debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0},onSetup:function(){console.log("✓ Setup done")}}),shr.setup({count:{classname:"btn-count"}}),function(){function t(){var t=this,n=t.getAttribute("data-source"),s=document.querySelector(".plyr").plyr;switch(n){case"video":s.source({type:"video",title:"Bug Buck Bunny",sources:[{src:"https://cdn.selz.com/plyr/1.0/movie.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.0/movie.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.0/poster.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.0/example_captions_en.vtt","default":!0}]});break;case"audio":s.source({type:"audio",title:"96 by Logistics",sources:[{src:"https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg",type:"audio/ogg"}]});break;case"youtube":s.source({type:"youtube",title:"Enovato interview of Dan Cederholm for Made By",sources:"Au87oAJ2jeE"});break;case"vimeo":s.source({type:"vimeo",title:"View from a blue moon",sources:"143418951"})}for(var i=e.length-1;i>=0;i--)e[i].classList.remove("active");event.target.classList.add("active")}for(var e=document.querySelectorAll("[data-source]"),n=e.length-1;n>=0;n--)e[n].addEventListener("click",t)}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,n,s,i,o,r){t.GoogleAnalyticsObject=i,t[i]=t[i]||function(){(t[i].q=t[i].q||[]).push(arguments)},t[i].l=1*new Date,o=e.createElement(n),r=e.getElementsByTagName(n)[0],o.async=1,o.src=s,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var n,i=arguments.length;for(n=0;i>n;n++)e=arguments[n],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var n=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:n.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",n="prototype",i=e.Element[n],s=Object,o=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[n].indexOf||function(e){for(var t=0,n=this.length;n>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),n=t?t.split(/\s+/):[],i=0,s=n.length;s>i;i++)this.push(n[i]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[n]=[],d=function(){return new l(this)};if(a[n]=Error[n],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,n=0,i=t.length,s=!1;do e=t[n]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++n<i);s&&this._updateClassName()},u.remove=function(){var e,t,n=arguments,i=0,s=n.length,o=!1;do for(e=n[i]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++i<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var n=this.contains(e),i=n?t!==!0&&"remove":t!==!1&&"add";return i&&this[i](e),t===!0||t===!1?t:!n},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(i,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(i,t,p))}}else s[n].__defineGetter__&&i.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0},onSetup:function(){console.log("✓ Setup done")}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(){var e=this,n=e.getAttribute("data-source"),i=document.querySelector(".js-media-player").plyr;switch(n){case"video":i.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.0/example_captions_en.vtt","default":!0}]});break;case"audio":i.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"youtube":i.source({type:"youtube",title:"View From A Blue Moon",sources:"bTqVqk7FSmY"});break;case"vimeo":i.source({type:"vimeo",title:"View From A Blue Moon",sources:"143418951"})}for(var s=t.length-1;s>=0;s--)t[s].classList.remove("btn--active");event.target.classList.add("btn--active")}for(var t=document.querySelectorAll("[data-source]"),n=t.length-1;n>=0;n--)t[n].addEventListener("click",e)}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,n,i,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(n),r=t.getElementsByTagName(n)[0],o.async=1,o.src=i,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
@ -13,20 +13,20 @@
|
||||
<!-- Docs styles -->
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/docs.css">
|
||||
</head>
|
||||
<body>
|
||||
<<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> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary" data-shr-network="github">
|
||||
<svg class="icon"><use xlink:href="#shr-github"/></svg>Download on GitHub
|
||||
<a href="https://github.com/selz/plyr" target="_blank" class="btn 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-twitter" data-shr-network="twitter">
|
||||
<svg class="icon"><use xlink:href="#shr-twitter"/></svg>Tweet
|
||||
<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--twitter" data-shr-network="twitter">
|
||||
<svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -34,44 +34,42 @@
|
||||
</header>
|
||||
|
||||
<main role="main" id="main">
|
||||
<nav class="btn-bar nav-panel">
|
||||
<nav class="btn__bar">
|
||||
<ul>
|
||||
<li>
|
||||
<button type="button" class="btn active" data-source="video">Video</button>
|
||||
<button type="button" class="btn btn--active" data-source="video">Video</button>
|
||||
</li>
|
||||
<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>
|
||||
<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>
|
||||
<button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo <sup>BETA</sup></button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="plyr">
|
||||
<video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
|
||||
<div class="js-media-player">
|
||||
<video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
|
||||
<!-- Video files -->
|
||||
<source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
|
||||
<source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
|
||||
<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">
|
||||
|
||||
|
||||
<!-- Text track file -->
|
||||
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>
|
||||
|
||||
|
||||
<!-- Fallback for browsers that don't support the <video> element -->
|
||||
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li class="cite cite-video"><small><a href="https://www.bigbuckbunny.org" target="_blank">Big Buck Bunny</a> © Copyright 2008, Blender Foundation</small></li>
|
||||
<li class="cite cite-audio"><small><a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">96 by Logistics</a> © Copyright, Hospital Records</small></li>
|
||||
<li class="cite cite-youtube"><small><a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Envato's "Made By" interview of Dan Cederholm</a> on <span class="color-youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small>
|
||||
<li class="cite cite-vimeo"><small><a href="https://vimeo.com/87701971" target="_blank">Yosemite HD II</a> on <span class="color-vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small>
|
||||
<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 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>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
/*global plyr, shr*/
|
||||
|
||||
// Setup the player
|
||||
plyr.setup({
|
||||
plyr.setup('.js-media-player', {
|
||||
debug: true,
|
||||
title: 'Video demo',
|
||||
tooltips: true,
|
||||
@ -20,7 +20,7 @@ plyr.setup({
|
||||
// Setup shr
|
||||
shr.setup({
|
||||
count: {
|
||||
classname: 'btn-count'
|
||||
classname: 'btn__count'
|
||||
}
|
||||
});
|
||||
|
||||
@ -37,22 +37,22 @@ shr.setup({
|
||||
function newSource() {
|
||||
var trigger = this,
|
||||
type = trigger.getAttribute('data-source'),
|
||||
player = document.querySelector('.plyr').plyr;
|
||||
player = document.querySelector('.js-media-player').plyr;
|
||||
|
||||
switch(type) {
|
||||
case 'video':
|
||||
player.source({
|
||||
type: 'video',
|
||||
title: 'Bug Buck Bunny',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.0/movie.mp4',
|
||||
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.0/movie.webm',
|
||||
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.0/poster.jpg',
|
||||
poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
|
||||
tracks: [{
|
||||
kind: 'captions',
|
||||
label: 'English',
|
||||
@ -66,13 +66,13 @@ shr.setup({
|
||||
case 'audio':
|
||||
player.source({
|
||||
type: 'audio',
|
||||
title: '96 by Logistics',
|
||||
title: 'Kishi Bashi – “It All Began With A Burst”',
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
|
||||
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.0/logistics-96-sample.ogg',
|
||||
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
|
||||
type: 'audio/ogg'
|
||||
}]
|
||||
});
|
||||
@ -81,25 +81,25 @@ shr.setup({
|
||||
case 'youtube':
|
||||
player.source({
|
||||
type: 'youtube',
|
||||
title: 'Enovato interview of Dan Cederholm for Made By',
|
||||
sources: 'Au87oAJ2jeE'
|
||||
title: 'View From A Blue Moon',
|
||||
sources: 'bTqVqk7FSmY'
|
||||
});
|
||||
break;
|
||||
|
||||
case 'vimeo':
|
||||
player.source({
|
||||
type: 'vimeo',
|
||||
title: 'View from a blue moon',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: '143418951'
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
for (var x = buttons.length - 1; x >= 0; x--) {
|
||||
buttons[x].classList.remove('active');
|
||||
buttons[x].classList.remove('btn--active');
|
||||
}
|
||||
|
||||
event.target.classList.add('active');
|
||||
event.target.classList.add('btn--active');
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ nav {
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.btn-bar {
|
||||
.btn__bar {
|
||||
position: relative;
|
||||
margin: 0 auto @padding-base;
|
||||
max-width: @example-width-video;
|
||||
@ -60,10 +60,8 @@ nav {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
}
|
||||
.active {
|
||||
&:extend(.btn-primary);
|
||||
}
|
||||
.btn.active {
|
||||
.btn--active {
|
||||
&:extend(.btn--primary);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@ -80,7 +78,7 @@ nav {
|
||||
|
||||
// Shared
|
||||
.btn,
|
||||
.btn-count {
|
||||
.btn__count {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: @border-radius-base;
|
||||
@ -91,12 +89,12 @@ nav {
|
||||
// Buttons
|
||||
.btn {
|
||||
padding: (@padding-base / 2) @padding-base;
|
||||
background: @body-background;
|
||||
background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%));
|
||||
border: 1px solid @gray-light;
|
||||
box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, .05);
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
color: @gray;
|
||||
transition: background .3s ease, border .3s ease, color .3s ease;
|
||||
transition: background .1s ease, color .1s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@ -104,18 +102,18 @@ nav {
|
||||
color: @gray;
|
||||
outline: 0;
|
||||
}
|
||||
&-youtube .icon {
|
||||
&--youtube .icon {
|
||||
color: @color-youtube;
|
||||
}
|
||||
&-vimeo .icon {
|
||||
&--vimeo .icon {
|
||||
color: @color-vimeo;
|
||||
}
|
||||
&-twitter .icon {
|
||||
&--twitter .icon {
|
||||
color: @color-twitter;
|
||||
}
|
||||
}
|
||||
.btn-primary {
|
||||
background-image: linear-gradient(@link-color, darken(@link-color, 3%));
|
||||
.btn--primary {
|
||||
background-image: linear-gradient(@link-color, darken(@link-color, 5%));
|
||||
background-color: @link-color;
|
||||
border-color: darken(@link-color, 10%);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, .15);
|
||||
@ -128,13 +126,13 @@ nav {
|
||||
border-color: darken(@link-color, 20%);
|
||||
}
|
||||
}
|
||||
.btn-small {
|
||||
.btn--small {
|
||||
padding-top: ceil(@padding-base / 3);
|
||||
padding-bottom: ceil(@padding-base / 3);
|
||||
}
|
||||
|
||||
// Count bubble
|
||||
.btn-count {
|
||||
.btn__count {
|
||||
position: relative;
|
||||
margin-left: (@padding-base / 2);
|
||||
padding: (@padding-base / 2) (@padding-base * .75);
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
// ==========================================================================
|
||||
|
||||
video,
|
||||
.plyr-video-embed {
|
||||
.plyr__video-embed {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.plyr-video-embed {
|
||||
.plyr__video-embed {
|
||||
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
@ -15,15 +15,15 @@ video,
|
||||
margin: 0 auto @padding-base;
|
||||
max-width: @example-width-video;
|
||||
|
||||
&-controls {
|
||||
&__controls {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
}
|
||||
video,
|
||||
.plyr-video-embed {
|
||||
.plyr__video-embed {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
}
|
||||
&-fullscreen,
|
||||
&.fullscreen-active {
|
||||
&--fullscreen,
|
||||
&--fullscreen-active {
|
||||
max-width: none;
|
||||
|
||||
.plyr-controls,
|
||||
@ -36,20 +36,20 @@ video,
|
||||
}
|
||||
}
|
||||
}
|
||||
.plyr-audio {
|
||||
.plyr--audio {
|
||||
max-width: @example-width-audio;
|
||||
|
||||
.plyr-controls {
|
||||
.plyr__controls {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
.plyr-progress {
|
||||
.plyr__progress {
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Style full supported player
|
||||
.cite {
|
||||
.plyr__cite {
|
||||
display: none;
|
||||
|
||||
.icon {
|
||||
@ -57,9 +57,9 @@ video,
|
||||
}
|
||||
}
|
||||
|
||||
.plyr-video ~ ul .cite-video,
|
||||
.plyr-audio ~ ul .cite-audio,
|
||||
.plyr-youtube ~ ul .cite-youtube,
|
||||
.plyr-vimeo ~ ul .cite-vimeo {
|
||||
.plyr--video ~ ul .plyr__cite--video,
|
||||
.plyr--audio ~ ul .plyr__cite--audio,
|
||||
.plyr--youtube ~ ul .plyr__cite--youtube,
|
||||
.plyr--vimeo ~ ul .plyr__cite--vimeo {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Panels
|
||||
// ==========================================================================
|
||||
|
||||
// Panels
|
||||
.panel {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
animation: fade-in .3s ease;
|
||||
}
|
||||
}
|
||||
@ -26,7 +26,13 @@ small {
|
||||
padding: 0 (@padding-base / 2);
|
||||
.font-size(14);
|
||||
}
|
||||
ul
|
||||
sup {
|
||||
vertical-align: 2px;
|
||||
.font-size(9);
|
||||
}
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@ -53,9 +59,9 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.color-vimeo {
|
||||
.color--vimeo {
|
||||
color: @color-vimeo;
|
||||
}
|
||||
.color-youtube {
|
||||
.color--youtube {
|
||||
color: @color-youtube;
|
||||
}
|
||||
|
||||
@ -22,6 +22,5 @@
|
||||
@import "components/base.less";
|
||||
@import "components/icons.less";
|
||||
@import "components/buttons.less";
|
||||
@import "components/panels.less";
|
||||
@import "components/error.less";
|
||||
@import "components/examples.less";
|
||||
|
||||
95
readme.md
95
readme.md
@ -1,12 +1,12 @@
|
||||
# Plyr
|
||||
A simple, accessible HTML5 media player.
|
||||
A simple, accessible HTML5 media player.
|
||||
|
||||
Checkout the [demo](http://plyr.io).
|
||||
|
||||
[](http://plyr.io)
|
||||
|
||||
## Why?
|
||||
We wanted a lightweight, accessible and customisable media player that just 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.
|
||||
We wanted a lightweight, accessible and customizable media player that just 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.
|
||||
|
||||
## Features
|
||||
- **Accessible** - full support for VTT captions and screen readers.
|
||||
@ -15,19 +15,18 @@ We wanted a lightweight, accessible and customisable media player that just supp
|
||||
- **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
|
||||
- **Responsive** - as you'd expect these days.
|
||||
- **Audio & Video** - support for both formats.
|
||||
- **[Embedded Video](#embeds)** - support for YouTube (Vimeo soon).
|
||||
- **[Embedded Video](#embeds)** - support for YouTube and Vimeo (beta).
|
||||
- **[API](#api)** - toggle playback, volume, seeking, and more.
|
||||
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes.
|
||||
- **i18n support** - support for internationalization of controls.
|
||||
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
|
||||
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
|
||||
|
||||
Oh and yes, it works with Bootstrap.
|
||||
Oh and yes, it works with Bootstrap.
|
||||
|
||||
## Changelog
|
||||
Check out the [changelog](changelog.md).
|
||||
Check out the [changelog](changelog.md) to see what's been new with Plyr.
|
||||
|
||||
## Planned Development
|
||||
- Vimeo support
|
||||
- Playback speed
|
||||
- Playlists
|
||||
- Multiple language captions (with selection)
|
||||
@ -38,7 +37,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
|
||||
|
||||
## Implementation
|
||||
|
||||
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
|
||||
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
|
||||
|
||||
**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.3.7/plyr.js` to `https://cdn.plyr.io/1.3.7/plyr.js`
|
||||
|
||||
@ -56,7 +55,7 @@ ember addon:install ember-cli-plyr
|
||||
```
|
||||
More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub](https://github.com/louisrudner/ember-cli-plyr)
|
||||
|
||||
### CDN
|
||||
### CDN
|
||||
If you want to use our CDN, you can use the following:
|
||||
|
||||
```html
|
||||
@ -66,13 +65,15 @@ If you want to use our CDN, you can use the following:
|
||||
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.7/sprite.svg`.
|
||||
|
||||
### CSS
|
||||
If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
|
||||
### CSS & Styling
|
||||
If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="dist/plyr.css">
|
||||
```
|
||||
|
||||
The default setup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options. Check out the source for more on this.
|
||||
|
||||
### SVG
|
||||
The SVG sprite for the controls icons is loaded in by AJAX to help with performance. This is best added before the closing `</body>`, before any other scripts.
|
||||
|
||||
@ -92,25 +93,29 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
|
||||
})(document, "dist/sprite.svg");
|
||||
</script>
|
||||
```
|
||||
|
||||
If you're using the `<base>` tag on your site, you may need to use something like this:
|
||||
[https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2](svgfixer.js)
|
||||
|
||||
More info on SVG sprites here:
|
||||
[http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/)
|
||||
and the AJAX technique here:
|
||||
[http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/)
|
||||
and the AJAX technique here:
|
||||
[http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/)
|
||||
|
||||
### HTML
|
||||
The only extra markup that's needed to use plyr is a `<div>` wrapper. Replace the source, poster and captions with urls for your media.
|
||||
```html
|
||||
<div class="plyr">
|
||||
<video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
|
||||
<video poster="/path/to/poster.jpg" controls>
|
||||
<!-- Video files -->
|
||||
<source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
|
||||
<source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
|
||||
|
||||
<source src="/path/to/video.mp4" type="video/mp4">
|
||||
<source src="/path/to/video.webm" type="video/webm">
|
||||
|
||||
<!-- Text track file -->
|
||||
<track kind="captions" label="English captions" src="https://cdn.selz.com/plyr/1.0/movie_captions_en.vtt" srclang="en" default>
|
||||
|
||||
<track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default>
|
||||
|
||||
<!-- Fallback for browsers that don't support the <video> element -->
|
||||
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
|
||||
<a href="/path/to/movie.mp4">Download</a>
|
||||
</video>
|
||||
</div>
|
||||
```
|
||||
@ -120,14 +125,14 @@ And the same for `<audio>`
|
||||
<div class="plyr">
|
||||
<audio controls>
|
||||
<!-- Audio files -->
|
||||
<source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
|
||||
<source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
|
||||
|
||||
<source src="/path/to/audio.mp3" type="audio/mp3">
|
||||
<source src="/path/to/audio.ogg" type="audio/ogg">
|
||||
|
||||
<!-- Fallback for browsers that don't support the <audio> element -->
|
||||
<a href="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
|
||||
<a href="/path/to/audio.mp3">Download</a>
|
||||
</audio>
|
||||
</div>
|
||||
```
|
||||
```
|
||||
|
||||
For YouTube, Plyr uses the standard YouTube API markup (an empty `<div>`):
|
||||
|
||||
@ -138,7 +143,7 @@ For YouTube, Plyr uses the standard YouTube API markup (an empty `<div>`):
|
||||
```
|
||||
|
||||
#### Cross Origin (CORS)
|
||||
You'll notice the `crossorigin` attribute on the example `<video>` and `<audio>` elements. This is because the media is loaded from another domain. If your media is hosted on another domain, you may need to add this attribute.
|
||||
You'll notice the `crossorigin` attribute on the example `<video>` and `<audio>` elements. This is because the media is loaded from another domain. If your media is hosted on another domain, you may need to add this attribute.
|
||||
|
||||
More info on CORS here:
|
||||
[https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
|
||||
@ -154,9 +159,9 @@ Here's an example of a default setup:
|
||||
<script>plyr.setup();</script>
|
||||
```
|
||||
|
||||
This will look for all elements with the `plyr` classname and setup plyr on each element found. You can specify other options, including a different selector hook below.
|
||||
This will look for all elements with the specified container classname (default is `plyr`) and setup plyr on each element found. You can specify other options, including a different selector hook below. The container classname will be added to the specified element(s) if it is not already present (for the CSS).
|
||||
|
||||
You can initialise the player a few other ways:
|
||||
You can initialize the player a few other ways:
|
||||
|
||||
Passing a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList):
|
||||
```javascript
|
||||
@ -196,7 +201,7 @@ Options must be passed as an object to the `setup()` method as above.
|
||||
<td><code>enabled</code></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Completely disable Plyr. This would allow you to do a User Agent check or similar to programatically enable or disable Plyr for a certain UA. Example below.</td>
|
||||
<td>Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>html</code></td>
|
||||
@ -214,7 +219,7 @@ Options must be passed as an object to the `setup()` method as above.
|
||||
<td><code>i18n</code></td>
|
||||
<td>Object</td>
|
||||
<td><code><a href="controls.md">See controls.md</a></code></td>
|
||||
<td>Used for internationalisation (i18n) of the tooltips/labels within the buttons.</td>
|
||||
<td>Used for internationalization (i18n) of the tooltips/labels within the buttons.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>iconPrefix</code></td>
|
||||
@ -339,7 +344,7 @@ Options must be passed as an object to the `setup()` method as above.
|
||||
## API
|
||||
|
||||
#### Fetching the plyr instance
|
||||
A `plyr` object is added to any element that Plyr is initialised on. You can then control the player by accessing methods in the `plyr` object.
|
||||
A `plyr` object is added to any element that Plyr is initialized on. You can then control the player by accessing methods in the `plyr` object.
|
||||
|
||||
There are two ways to access the instance, firstly you re-query the element container you used for setup (e.g. `.js-plyr`) like so:
|
||||
|
||||
@ -442,14 +447,14 @@ Here's a list of the methods supported:
|
||||
<td>Array</td>
|
||||
<td>
|
||||
Set the media source.
|
||||
<br><br>
|
||||
<br><br>
|
||||
<strong>string</strong><br>
|
||||
<code>.source("/path/to/video.mp4")</code><br>
|
||||
This will set the <code>src</code> attribute on the <code>video</code> or <code>audio</code> element.
|
||||
<br><br>
|
||||
<strong>array</strong><br>
|
||||
<code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
|
||||
This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
|
||||
This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
|
||||
<br><br>
|
||||
<strong>YouTube</strong><br>
|
||||
Currently this API method only accepts a YouTube ID when used with a YouTube player. I will add URL support soon, along with being able to swap between types (e.g. YouTube to Audio or Video and vice versa.)
|
||||
@ -475,7 +480,7 @@ Here's a list of the methods supported:
|
||||
|
||||
#### .source() method
|
||||
|
||||
This allows changing the plyr source and type on the fly.
|
||||
This allows changing the plyr source and type on the fly.
|
||||
|
||||
Video example:
|
||||
|
||||
@ -483,7 +488,7 @@ Video example:
|
||||
player.source({
|
||||
type: 'video',
|
||||
title: 'Bug Buck Bunny',
|
||||
sources: [{
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.0/movie.mp4',
|
||||
type: 'video/mp4'
|
||||
},
|
||||
@ -508,7 +513,7 @@ Audio example:
|
||||
player.source({
|
||||
type: 'audio',
|
||||
title: '96 by Logistics',
|
||||
sources: [{
|
||||
sources: [{
|
||||
src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
|
||||
type: 'audio/mp3'
|
||||
},
|
||||
@ -586,7 +591,7 @@ The `plyr` object on the player element also contains a `media` property which i
|
||||
```javascript
|
||||
var media = document.querySelector(".plyr").plyr.media;
|
||||
|
||||
media.addEventListener("playing", function() {
|
||||
media.addEventListener("playing", function() {
|
||||
console.log("playing");
|
||||
});
|
||||
```
|
||||
@ -604,14 +609,14 @@ Currently only YouTube is supported. Vimeo will be coming soon. Some HTML5 media
|
||||
Due to the way the YouTube API works, the `timeupdate` and `progress` events are triggered by polling every 200ms so the event may trigger without an actual value change. Buffering progress is `media.buffered` in the `plyr` object. It is a a number between 0 and 1 that specifies the percentage of the video that the player shows as buffered.
|
||||
|
||||
```javascript
|
||||
document.querySelector(".plyr").plyr.media.addEventListener("play", function() {
|
||||
document.querySelector(".plyr").plyr.media.addEventListener("play", function() {
|
||||
console.log("play");
|
||||
});
|
||||
```
|
||||
```
|
||||
|
||||
The `.source()` API method can also be used but the video id must be passed as the argument.
|
||||
The `.source()` API method can also be used but the video id must be passed as the argument.
|
||||
|
||||
Currently caption control is not supported but I will work on this.
|
||||
Currently caption control is not supported but I will work on this.
|
||||
|
||||
## Fullscreen
|
||||
|
||||
@ -648,7 +653,7 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt
|
||||
|
||||
³ IE10 has no native fullscreen support, fallback can be used (see options)
|
||||
|
||||
The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:
|
||||
The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:
|
||||
|
||||
```javascript
|
||||
enabled: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
|
||||
@ -658,13 +663,13 @@ If a User Agent is disabled but supports `<video>` and `<audio>` natively, it wi
|
||||
Any unsupported browsers will display links to download the media if the correct html is used.
|
||||
|
||||
### Checking for support
|
||||
There's an API method for checking support. You can call `plyr.supported()` and optionally pass a type to it, e.g. `plyr.supported("video")`. It will return an object with two keys; `basic` meaning there's basic support for that media type (or both if no type is passed) and `full` meaning there's full support for plyr.
|
||||
There's an API method for checking support. You can call `plyr.supported()` and optionally pass a type to it, e.g. `plyr.supported("video")`. It will return an object with two keys; `basic` meaning there's basic support for that media type (or both if no type is passed) and `full` meaning there's full support for plyr.
|
||||
|
||||
## Issues
|
||||
If you find anything weird with Plyr, please let us know using the GitHub issues tracker.
|
||||
|
||||
## Author
|
||||
Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/Selz/plyr/graphs/contributors)
|
||||
Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/Selz/plyr/graphs/contributors)
|
||||
|
||||
## Mentions
|
||||
- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
|
||||
@ -679,7 +684,7 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
|
||||
## Used by
|
||||
- [Selz.com](https://selz.com)
|
||||
|
||||
Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
|
||||
Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
|
||||
|
||||
## Useful links and credits
|
||||
Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from:
|
||||
|
||||
232
src/js/plyr.js
232
src/js/plyr.js
@ -7,25 +7,26 @@
|
||||
// Credits: http://paypal.github.io/accessible-html5-video-player/
|
||||
// ==========================================================================
|
||||
|
||||
(function (root, factory) {
|
||||
(function(root, factory) {
|
||||
'use strict';
|
||||
/*global define,module*/
|
||||
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(null, factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
} else if (typeof module === 'object') {
|
||||
// Node, CommonJS-like
|
||||
module.exports = factory();
|
||||
} else {
|
||||
// Browser globals (root is window)
|
||||
root.plyr = factory();
|
||||
}
|
||||
}(this, function () {
|
||||
var api = {};
|
||||
|
||||
}(this, function() {
|
||||
'use strict';
|
||||
/*global YT,$f*/
|
||||
|
||||
// Globals
|
||||
var fullscreen, config;
|
||||
var fullscreen, config, api = {};
|
||||
|
||||
// Default config
|
||||
var defaults = {
|
||||
@ -41,7 +42,10 @@
|
||||
iconPrefix: 'icon',
|
||||
selectors: {
|
||||
container: '.plyr',
|
||||
controls: '.plyr-controls',
|
||||
controls: {
|
||||
container: null,
|
||||
wrapper: '.plyr__controls'
|
||||
},
|
||||
labels: '[data-plyr] .sr-only, label .sr-only',
|
||||
buttons: {
|
||||
seek: '[data-plyr="seek"]',
|
||||
@ -56,33 +60,35 @@
|
||||
fullscreen: '[data-plyr="fullscreen"]'
|
||||
},
|
||||
progress: {
|
||||
container: '.plyr-progress',
|
||||
buffer: '.plyr-progress-buffer',
|
||||
played: '.plyr-progress-played'
|
||||
container: '.plyr__progress',
|
||||
buffer: '.plyr__progress--buffer',
|
||||
played: '.plyr__progress--played'
|
||||
},
|
||||
captions: '.plyr-captions',
|
||||
currentTime: '.plyr-current-time',
|
||||
duration: '.plyr-duration'
|
||||
captions: '.plyr__captions',
|
||||
currentTime: '.plyr__time--current',
|
||||
duration: '.plyr__time--duration'
|
||||
},
|
||||
classes: {
|
||||
videoWrapper: 'plyr-video-wrapper',
|
||||
embedWrapper: 'plyr-video-embed',
|
||||
type: 'plyr-{0}',
|
||||
stopped: 'stopped',
|
||||
playing: 'playing',
|
||||
muted: 'muted',
|
||||
loading: 'loading',
|
||||
tooltip: 'plyr-tooltip',
|
||||
hidden: 'sr-only',
|
||||
hover: 'plyr-hover',
|
||||
videoWrapper: 'plyr__video-wrapper',
|
||||
embedWrapper: 'plyr__video-embed',
|
||||
type: 'plyr--{0}',
|
||||
stopped: 'plyr--stopped',
|
||||
playing: 'plyr--playing',
|
||||
muted: 'plyr--muted',
|
||||
loading: 'plyr--loading',
|
||||
hover: 'plyr--hover',
|
||||
tooltip: 'plyr__tooltip',
|
||||
hidden: 'plyr__sr-only',
|
||||
isIos: 'plyr--is-ios',
|
||||
isTouch: 'plyr--is-touch',
|
||||
captions: {
|
||||
enabled: 'captions-enabled',
|
||||
active: 'captions-active'
|
||||
enabled: 'plyr--captions-enabled',
|
||||
active: 'plyr--captions-active'
|
||||
},
|
||||
fullscreen: {
|
||||
enabled: 'fullscreen-enabled',
|
||||
active: 'fullscreen-active',
|
||||
hideControls: 'fullscreen-hide-controls'
|
||||
enabled: 'plyr--fullscreen-enabled',
|
||||
active: 'plyr--fullscreen-active',
|
||||
hideControls: 'plyr--fullscreen--hide-controls'
|
||||
}
|
||||
},
|
||||
captions: {
|
||||
@ -112,10 +118,11 @@
|
||||
volume: 'Volume',
|
||||
toggleMute: 'Toggle Mute',
|
||||
toggleCaptions: 'Toggle Captions',
|
||||
toggleFullscreen: 'Toggle Fullscreen'
|
||||
toggleFullscreen: 'Toggle Fullscreen',
|
||||
frameTitle: 'Player for {title}'
|
||||
},
|
||||
types: {
|
||||
embed: ['youtube','vimeo'],
|
||||
embed: ['youtube', 'vimeo'],
|
||||
html5: ['video', 'audio']
|
||||
},
|
||||
urls: {
|
||||
@ -132,25 +139,25 @@
|
||||
function _buildControls() {
|
||||
// Open and add the progress and seek elements
|
||||
var html = [
|
||||
'<div class="plyr-controls">',
|
||||
'<div class="plyr-progress">',
|
||||
'<label for="seek{id}" class="sr-only">Seek</label>',
|
||||
'<input id="seek{id}" class="plyr-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-plyr="seek">',
|
||||
'<progress class="plyr-progress-played" max="100" value="0">',
|
||||
'<div class="plyr__controls">',
|
||||
'<div 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.5" value="0" data-plyr="seek">',
|
||||
'<progress class="plyr__progress--played" max="100" value="0">',
|
||||
'<span>0</span>% ' + config.i18n.played,
|
||||
'</progress>',
|
||||
'<progress class="plyr-progress-buffer" max="100" value="0">',
|
||||
'<progress class="plyr__progress--buffer" max="100" value="0">',
|
||||
'<span>0</span>% ' + config.i18n.buffered,
|
||||
'</progress>',
|
||||
'</div>',
|
||||
'<span class="plyr-controls-left">'];
|
||||
'<span class="plyr__controls--left">'];
|
||||
|
||||
// Restart button
|
||||
if (_inArray(config.controls, 'restart')) {
|
||||
html.push(
|
||||
'<button type="button" data-plyr="restart">',
|
||||
'<svg><use xlink:href="#' + config.iconPrefix + '-restart" /></svg>',
|
||||
'<span class="sr-only">' + config.i18n.restart + '</span>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.restart + '</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
@ -160,7 +167,7 @@
|
||||
html.push(
|
||||
'<button type="button" data-plyr="rewind">',
|
||||
'<svg><use xlink:href="#' + config.iconPrefix + '-rewind" /></svg>',
|
||||
'<span class="sr-only">' + config.i18n.rewind + '</span>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.rewind + '</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
@ -170,11 +177,11 @@
|
||||
html.push(
|
||||
'<button type="button" data-plyr="play">',
|
||||
'<svg><use xlink:href="#' + config.iconPrefix + '-play" /></svg>',
|
||||
'<span class="sr-only">' + config.i18n.play + '</span>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.play + '</span>',
|
||||
'</button>',
|
||||
'<button type="button" data-plyr="pause">',
|
||||
'<svg><use xlink:href="#' + config.iconPrefix + '-pause" /></svg>',
|
||||
'<span class="sr-only">' + config.i18n.pause + '</span>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.pause + '</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
@ -184,7 +191,7 @@
|
||||
html.push(
|
||||
'<button type="button" data-plyr="fast-forward">',
|
||||
'<svg><use xlink:href="#' + config.iconPrefix + '-fast-forward" /></svg>',
|
||||
'<span class="sr-only">' + config.i18n.forward + '</span>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.forward + '</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
@ -192,9 +199,9 @@
|
||||
// Media current time display
|
||||
if (_inArray(config.controls, 'current-time')) {
|
||||
html.push(
|
||||
'<span class="plyr-time">',
|
||||
'<span class="sr-only">' + config.i18n.currentTime + '</span>',
|
||||
'<span class="plyr-current-time">00:00</span>',
|
||||
'<span class="plyr__time">',
|
||||
'<span class="plyr__sr-only">' + config.i18n.currentTime + '</span>',
|
||||
'<span class="plyr__time--current">00:00</span>',
|
||||
'</span>'
|
||||
);
|
||||
}
|
||||
@ -202,9 +209,9 @@
|
||||
// Media duration display
|
||||
if (_inArray(config.controls, 'duration')) {
|
||||
html.push(
|
||||
'<span class="plyr-time">',
|
||||
'<span class="sr-only">' + config.i18n.duration + '</span>',
|
||||
'<span class="plyr-duration">00:00</span>',
|
||||
'<span class="plyr__time">',
|
||||
'<span class="plyr__sr-only">' + config.i18n.duration + '</span>',
|
||||
'<span class="plyr__time--duration">00:00</span>',
|
||||
'</span>'
|
||||
);
|
||||
}
|
||||
@ -212,16 +219,16 @@
|
||||
// Close left controls
|
||||
html.push(
|
||||
'</span>',
|
||||
'<span class="plyr-controls-right">'
|
||||
'<span class="plyr__controls--right">'
|
||||
);
|
||||
|
||||
// Toggle mute button
|
||||
if (_inArray(config.controls, 'mute')) {
|
||||
html.push(
|
||||
'<button type="button" data-plyr="mute">',
|
||||
'<svg class="icon-muted"><use xlink:href="#' + config.iconPrefix + '-muted" /></svg>',
|
||||
'<svg class="icon--muted"><use xlink:href="#' + config.iconPrefix + '-muted" /></svg>',
|
||||
'<svg><use xlink:href="#' + config.iconPrefix + '-volume" /></svg>',
|
||||
'<span class="sr-only">' + config.i18n.toggleMute + '</span>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
@ -229,8 +236,8 @@
|
||||
// Volume range control
|
||||
if (_inArray(config.controls, 'volume')) {
|
||||
html.push(
|
||||
'<label for="volume{id}" class="sr-only">' + config.i18n.volume + '</label>',
|
||||
'<input id="volume{id}" class="plyr-volume" type="range" min="0" max="10" value="5" data-plyr="volume">'
|
||||
'<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
|
||||
'<input id="volume{id}" class="plyr__volume" type="range" min="0" max="10" value="5" data-plyr="volume">'
|
||||
);
|
||||
}
|
||||
|
||||
@ -238,9 +245,9 @@
|
||||
if (_inArray(config.controls, 'captions')) {
|
||||
html.push(
|
||||
'<button type="button" data-plyr="captions">',
|
||||
'<svg class="icon-captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on" /></svg>',
|
||||
'<svg class="icon--captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on" /></svg>',
|
||||
'<svg><use xlink:href="#' + config.iconPrefix + '-captions-off" /></svg>',
|
||||
'<span class="sr-only">' + config.i18n.toggleCaptions + '</span>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
@ -249,9 +256,9 @@
|
||||
if (_inArray(config.controls, 'fullscreen')) {
|
||||
html.push(
|
||||
'<button type="button" data-plyr="fullscreen">',
|
||||
'<svg class="icon-exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen" /></svg>',
|
||||
'<svg class="icon--exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen" /></svg>',
|
||||
'<svg><use xlink:href="#' + config.iconPrefix + '-enter-fullscreen" /></svg>',
|
||||
'<span class="sr-only">' + config.i18n.toggleFullscreen + '</span>',
|
||||
'<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
@ -338,7 +345,8 @@
|
||||
return {
|
||||
name: name,
|
||||
version: majorVersion,
|
||||
ios: /(iPad|iPhone|iPod)/g.test(navigator.platform)
|
||||
ios: /(iPad|iPhone|iPod)/g.test(navigator.platform),
|
||||
touch: 'ontouchstart' in document.documentElement
|
||||
};
|
||||
}
|
||||
|
||||
@ -477,14 +485,14 @@
|
||||
}
|
||||
|
||||
// Toggle class on an element
|
||||
function _toggleClass(element, name, state) {
|
||||
function _toggleClass(element, className, state) {
|
||||
if (element) {
|
||||
if (element.classList) {
|
||||
element.classList[state ? 'add' : 'remove'](name);
|
||||
element.classList[state ? 'add' : 'remove'](className);
|
||||
}
|
||||
else {
|
||||
var className = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + name + ' ', '');
|
||||
element.className = className + (state ? ' ' + name : '');
|
||||
var current = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
|
||||
element.className = current + (state ? ' ' + className : '');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -645,12 +653,30 @@
|
||||
function _storage() {
|
||||
var storage = {
|
||||
supported: (function() {
|
||||
try {
|
||||
return 'localStorage' in window && window.localStorage !== null;
|
||||
}
|
||||
catch(e) {
|
||||
return false;
|
||||
}
|
||||
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/Selz/plyr/issues/131
|
||||
try {
|
||||
// Add test item
|
||||
window.localStorage.setItem('___test', 'OK');
|
||||
|
||||
// Get the test item
|
||||
var result = window.localStorage.getItem('___test');
|
||||
|
||||
// Clean up
|
||||
window.localStorage.removeItem('___test');
|
||||
|
||||
// Check if value matches
|
||||
return (result === 'OK');
|
||||
}
|
||||
catch (e) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
})()
|
||||
};
|
||||
return storage;
|
||||
@ -793,8 +819,25 @@
|
||||
// Replace all id references with random numbers
|
||||
html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000)));
|
||||
|
||||
// Inject into the container
|
||||
plyr.container.insertAdjacentHTML('beforeend', html);
|
||||
// Controls container
|
||||
var container;
|
||||
|
||||
// Inject to custom location
|
||||
if (config.selectors.controls.container !== null) {
|
||||
container = config.selectors.controls.container;
|
||||
|
||||
if(typeof selector === 'string') {
|
||||
container = document.querySelector(container);
|
||||
}
|
||||
}
|
||||
|
||||
// Inject into the container by default
|
||||
if (!(container instanceof HTMLElement)) {
|
||||
container = plyr.container
|
||||
}
|
||||
|
||||
// Inject controls HTML
|
||||
container.insertAdjacentHTML('beforeend', html);
|
||||
|
||||
// Setup tooltips
|
||||
if (config.tooltips) {
|
||||
@ -812,7 +855,7 @@
|
||||
// Find the UI controls and store references
|
||||
function _findElements() {
|
||||
try {
|
||||
plyr.controls = _getElement(config.selectors.controls);
|
||||
plyr.controls = _getElement(config.selectors.controls.wrapper);
|
||||
|
||||
// Buttons
|
||||
plyr.buttons = {};
|
||||
@ -863,13 +906,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Setup aria attribute for play
|
||||
function _setupPlayAria() {
|
||||
// If there's no play button, bail
|
||||
if (!plyr.buttons.play) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Setup aria attribute for play and iframe title
|
||||
function _setTitle(iframe) {
|
||||
// Find the current text
|
||||
var label = plyr.buttons.play.innerText || config.i18n.play;
|
||||
|
||||
@ -878,7 +916,16 @@
|
||||
label += ', ' + config.title;
|
||||
}
|
||||
|
||||
plyr.buttons.play.setAttribute('aria-label', label);
|
||||
// If there's no play button, bail
|
||||
if (plyr.buttons.play) {
|
||||
plyr.buttons.play.setAttribute('aria-label', label);
|
||||
}
|
||||
|
||||
// Set iframe title
|
||||
// https://github.com/Selz/plyr/issues/124
|
||||
if (iframe instanceof HTMLElement) {
|
||||
iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title));
|
||||
}
|
||||
}
|
||||
|
||||
// Setup media
|
||||
@ -900,9 +947,10 @@
|
||||
_toggleClass(plyr.container, config.classes.stopped, config.autoplay);
|
||||
|
||||
// Add iOS class
|
||||
if (plyr.browser.ios) {
|
||||
_toggleClass(plyr.container, 'ios', true);
|
||||
}
|
||||
_toggleClass(plyr.container, config.classes.isIos, plyr.browser.ios);
|
||||
|
||||
// Add touch class
|
||||
_toggleClass(plyr.container, config.classes.isTouch, plyr.browser.touch);
|
||||
|
||||
// Inject the player wrapper
|
||||
if (plyr.type === 'video') {
|
||||
@ -1013,11 +1061,14 @@
|
||||
// Inject and update UI
|
||||
if (plyr.supported.full) {
|
||||
// Only setup controls once
|
||||
if (!plyr.container.querySelectorAll(config.selectors.controls).length) {
|
||||
if (!plyr.container.querySelectorAll(config.selectors.controls.wrapper).length) {
|
||||
_setupInterface();
|
||||
}
|
||||
}
|
||||
|
||||
// Set title
|
||||
_setTitle(_getElement('iframe'));
|
||||
|
||||
// Set the volume
|
||||
_setVolume();
|
||||
_updateVolume();
|
||||
@ -1966,7 +2017,7 @@
|
||||
|
||||
if ('title' in source) {
|
||||
config.title = source.title;
|
||||
_setupPlayAria();
|
||||
_setTitle();
|
||||
}
|
||||
}
|
||||
|
||||
@ -2120,7 +2171,7 @@
|
||||
plyr.init = false;
|
||||
|
||||
// Remove controls
|
||||
_remove(_getElement(config.selectors.controls));
|
||||
_remove(_getElement(config.selectors.controls.wrapper));
|
||||
|
||||
// YouTube
|
||||
if (plyr.type === 'youtube') {
|
||||
@ -2162,6 +2213,9 @@
|
||||
// Get the media element
|
||||
plyr.media = plyr.container.querySelectorAll('audio, video, div')[0];
|
||||
|
||||
// Add style hook
|
||||
_toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), true);
|
||||
|
||||
// Get original classname
|
||||
plyr.originalClassName = plyr.container.className;
|
||||
|
||||
@ -2177,7 +2231,7 @@
|
||||
plyr.media.removeAttribute('data-video-id');
|
||||
}
|
||||
else {
|
||||
plyr.type = tagName;
|
||||
plyr.type = tagName;
|
||||
config.crossorigin = (plyr.media.getAttribute('crossorigin') !== null);
|
||||
config.autoplay = (config.autoplay || (plyr.media.getAttribute('autoplay') !== null));
|
||||
config.loop = (config.loop || (plyr.media.getAttribute('loop') !== null));
|
||||
@ -2216,8 +2270,8 @@
|
||||
_displayDuration();
|
||||
}
|
||||
|
||||
// Set up aria-label for Play button with the title option
|
||||
_setupPlayAria();
|
||||
// Set title on button and frame
|
||||
_setTitle();
|
||||
}
|
||||
|
||||
// Successful setup
|
||||
@ -2322,7 +2376,7 @@
|
||||
// Expose setup function
|
||||
api.setup = function(elements, options) {
|
||||
// Get the players
|
||||
var instances = [], elements = [];
|
||||
var instances = [];
|
||||
|
||||
// Select the elements
|
||||
// Assume elements is a NodeList by default
|
||||
|
||||
@ -141,18 +141,6 @@
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Screen reader only
|
||||
// -------------------------------
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Styles
|
||||
// -------------------------------
|
||||
// Base
|
||||
@ -170,8 +158,19 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Screen reader only elements
|
||||
&__sr-only {
|
||||
position: absolute !important;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// For video
|
||||
&-video-wrapper {
|
||||
&__video-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
video,
|
||||
@ -181,8 +180,8 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// For embeds
|
||||
&-video-embed {
|
||||
// Container for embeds
|
||||
&__video-embed {
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
@ -207,7 +206,7 @@
|
||||
}
|
||||
|
||||
// Captions
|
||||
&-captions {
|
||||
&__captions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -232,15 +231,15 @@
|
||||
font-size: @font-size-captions-medium;
|
||||
}
|
||||
}
|
||||
&.captions-active &-captions {
|
||||
&--captions-active &__captions {
|
||||
display: block;
|
||||
}
|
||||
&.fullscreen-active &-captions {
|
||||
&--fullscreen-active &__captions {
|
||||
font-size: @font-size-captions-large;
|
||||
}
|
||||
|
||||
// Playback controls
|
||||
&-controls {
|
||||
&__controls {
|
||||
.clearfix();
|
||||
.font-smoothing();
|
||||
position: relative;
|
||||
@ -251,15 +250,15 @@
|
||||
box-shadow: 0 1px 1px rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .2);
|
||||
|
||||
// Layout
|
||||
&-right {
|
||||
&--right {
|
||||
display: block;
|
||||
margin: @control-spacing auto 0;
|
||||
}
|
||||
@media (min-width: @bp-control-split) {
|
||||
&-left {
|
||||
&--left {
|
||||
float: left;
|
||||
}
|
||||
&-right {
|
||||
&--right {
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -300,14 +299,14 @@
|
||||
}
|
||||
|
||||
// Hide toggle icons by default
|
||||
.icon-exit-fullscreen,
|
||||
.icon-muted,
|
||||
.icon-captions-on {
|
||||
.icon--exit-fullscreen,
|
||||
.icon--muted,
|
||||
.icon--captions-on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// plyr time
|
||||
.plyr-time {
|
||||
.plyr__time {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: @control-spacing;
|
||||
@ -318,7 +317,7 @@
|
||||
}
|
||||
|
||||
// Media duration hidden on small screens
|
||||
.plyr-time + .plyr-time {
|
||||
.plyr__time + .plyr__time {
|
||||
display: none;
|
||||
|
||||
@media (min-width: @bp-control-split) {
|
||||
@ -334,7 +333,7 @@
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
&-tooltip {
|
||||
&__tooltip {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 100%;
|
||||
@ -383,18 +382,18 @@
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
button:hover .plyr-tooltip,
|
||||
button.tab-focus:focus .plyr-tooltip {
|
||||
button:hover .plyr__tooltip,
|
||||
button.tab-focus:focus .plyr__tooltip {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
button:hover .plyr-tooltip {
|
||||
button:hover .plyr__tooltip {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// Playback progress
|
||||
// <progress> element
|
||||
&-progress {
|
||||
&__progress {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
@ -403,9 +402,9 @@
|
||||
height: @control-spacing;
|
||||
background: @progress-bg;
|
||||
|
||||
&-buffer[value],
|
||||
&-played[value],
|
||||
&-seek[type='range'] {
|
||||
&--buffer[value],
|
||||
&--played[value],
|
||||
&--seek[type='range'] {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -420,8 +419,8 @@
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
&-buffer[value],
|
||||
&-played[value] {
|
||||
&--buffer[value],
|
||||
&--played[value] {
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
@ -434,18 +433,18 @@
|
||||
background: currentColor;
|
||||
}
|
||||
}
|
||||
&-played[value] {
|
||||
&--played[value] {
|
||||
z-index: 2;
|
||||
color: @progress-playing-bg;
|
||||
}
|
||||
&-buffer[value] {
|
||||
&--buffer[value] {
|
||||
color: @progress-buffered-bg;
|
||||
}
|
||||
|
||||
// Seek control
|
||||
// <input[type='range']> element
|
||||
// Specificity is for bootstrap compatibility
|
||||
&-seek[type='range'] {
|
||||
&--seek[type='range'] {
|
||||
z-index: 4;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
@ -491,7 +490,7 @@
|
||||
}
|
||||
|
||||
// Loading state
|
||||
&.loading .plyr-progress-buffer {
|
||||
&--loading .plyr__progress--buffer {
|
||||
animation: progress 1s linear infinite;
|
||||
background-size: @progress-loading-size @progress-loading-size;
|
||||
background-repeat: repeat-x;
|
||||
@ -509,18 +508,18 @@
|
||||
}
|
||||
|
||||
// States
|
||||
&-controls [data-plyr='pause'],
|
||||
&.playing .plyr-controls [data-plyr='play'] {
|
||||
&__controls [data-plyr='pause'],
|
||||
&--playing .plyr__controls [data-plyr='play'] {
|
||||
display: none;
|
||||
}
|
||||
&.playing .plyr-controls [data-plyr='pause'] {
|
||||
&--playing .plyr__controls [data-plyr='pause'] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Volume control
|
||||
// <input[type='range']> element
|
||||
// Specificity is for bootstrap compatibility
|
||||
&-volume[type='range'] {
|
||||
&__volume[type='range'] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-appearance: none;
|
||||
@ -588,30 +587,30 @@
|
||||
// Hide sound controls on iOS
|
||||
// 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
|
||||
&.ios &-volume,
|
||||
&.ios [data-plyr='mute'],
|
||||
&-audio.ios &-controls-right {
|
||||
&--is-ios &-volume,
|
||||
&--is-ios [data-plyr='mute'],
|
||||
&--is-ios.plyr--audio &__controls--right {
|
||||
display: none;
|
||||
}
|
||||
// Center buttons so it looks less odd
|
||||
&-audio.ios &-controls-left {
|
||||
&--is-ios.plyr--audio &__controls--left {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Audio specific styles
|
||||
// Position the progress within the container
|
||||
&-audio .plyr-controls {
|
||||
&--audio .plyr__controls {
|
||||
padding-top: (@control-spacing * 2);
|
||||
}
|
||||
&-audio .plyr-progress {
|
||||
&--audio .plyr__progress {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
background: @off-white;
|
||||
}
|
||||
|
||||
// Full screen mode
|
||||
&-fullscreen,
|
||||
&.fullscreen-active {
|
||||
&--fullscreen,
|
||||
&--fullscreen-active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -637,23 +636,23 @@
|
||||
}
|
||||
|
||||
// Hide controls when playing in full screen
|
||||
&.fullscreen-hide-controls.playing {
|
||||
.plyr-controls {
|
||||
&--fullscreen--hide-controls.plyr--playing {
|
||||
.plyr__controls {
|
||||
transform: translateY(100%) translateY(@control-spacing / 2);
|
||||
transition: transform .3s .2s ease;
|
||||
}
|
||||
&.plyr-hover .plyr-controls {
|
||||
&.plyr--hover .plyr__controls {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.plyr-captions {
|
||||
.plyr__captions {
|
||||
bottom: (@control-spacing / 2);
|
||||
transition: bottom .3s .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Captions
|
||||
.plyr-captions,
|
||||
&.fullscreen-hide-controls.playing.plyr-hover .plyr-captions {
|
||||
.plyr__captions,
|
||||
&--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__captions {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
|
||||
@ -664,9 +663,9 @@
|
||||
}
|
||||
|
||||
// Change icons on state change
|
||||
&.fullscreen-active .icon-exit-fullscreen,
|
||||
&.muted .plyr-controls .icon-muted,
|
||||
&.captions-active .plyr-controls .icon-captions-on {
|
||||
&--fullscreen-active .icon--exit-fullscreen,
|
||||
&--muted .plyr__controls .icon--muted,
|
||||
&--captions-active .plyr__controls .icon--captions-on {
|
||||
display: block;
|
||||
|
||||
& + svg {
|
||||
@ -679,8 +678,8 @@
|
||||
[data-plyr='fullscreen'] {
|
||||
display: none;
|
||||
}
|
||||
&.captions-enabled [data-plyr='captions'],
|
||||
&.fullscreen-enabled [data-plyr='fullscreen'] {
|
||||
&--captions-enabled [data-plyr='captions'],
|
||||
&--fullscreen-enabled [data-plyr='fullscreen'] {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user