ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

iOS fix (Fixes #166), Edge Progress Tip (Fixes #160), SASS fix (Fixes #158)

Browse Source
This commit is contained in:
Sam Potts
2016-02-13 22:18:42 +11:00
parent a8cea7b5c9
commit ce51344269
10 changed files with 57 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -5,3 +5,4 @@ node_modules
aws.json aws.json
docs/index.dev.html docs/index.dev.html
*.mp4 *.mp4
notes.txt

3
controls.md
View File

@ -56,6 +56,7 @@ var controls = ["<div class='plyr__controls'>",
"<progress class='plyr__progress--buffer' max='100' value='0'>", "<progress class='plyr__progress--buffer' max='100' value='0'>",
"<span>0</span>% buffered", "<span>0</span>% buffered",
"</progress>", "</progress>",
"<span class='plyr__tooltip'>--:--</span>",
"</div>", "</div>",
"<span class='plyr__controls--left'>", "<span class='plyr__controls--left'>",
"<button type='button' data-plyr='restart'>", "<button type='button' data-plyr='restart'>",
@ -84,7 +85,7 @@ var controls = ["<div class='plyr__controls'>",
"</span>", "</span>",
"<span class='plyr__time'>", "<span class='plyr__time'>",
"<span class='plyr__sr-only'>Duration</span>", "<span class='plyr__sr-only'>Duration</span>",
"<span class='plyr__duration'>00:00</span>", "<span class='plyr__duration'>--:--</span>",
"</span>", "</span>",
"</span>", "</span>",
"<span class='plyr__controls--right'>", "<span class='plyr__controls--right'>",

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/docs.js vendored
View File

@ -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,n=arguments.length;for(i=0;n>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",n=e.Element[i],s=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i<n);s&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,n=0,s=i.length,o=!1;do for(e=i[n]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++n<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),n=i?t!==!0&&"remove":t!==!1&&"add";return n&&this[n](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(n,t,p))}}else s[i].__defineGetter__&&n.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var n=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=n+(i?" "+t:"")}}function t(t,o){if(!(t in n)||!o&&t==s||!s.length&&t==n.video)return void console.warn("Unregonized type.");var r=document.querySelector(".js-media-player").plyr;switch(t){case n.video:r.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.vtt","default":!0}]});break;case n.audio:r.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",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:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),a||t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,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(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,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 i,n=arguments.length;for(i=0;n>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",n=e.Element[i],s=Object,o=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i<n);s&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,n=0,s=i.length,o=!1;do for(e=i[n]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++n<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),n=i?t!==!0&&"remove":t!==!1&&"add";return n&&this[n](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(n,t,p))}}else s[i].__defineGetter__&&n.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0},duration:100}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var n=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=n+(i?" "+t:"")}}function t(t,o){if(t in n&&(o||t!=s)&&(s.length||t!=n.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case n.video:r.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.vtt","default":!0}]});break;case n.audio:r.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",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:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),s!==n.video&&t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,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(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

12
docs/src/js/docs.js
View File

@ -13,7 +13,8 @@ plyr.setup('.js-media-player', {
}, },
captions: { captions: {
defaultActive: true defaultActive: true
} },
duration: 100
}); });
// Setup shr // Setup shr
@ -58,13 +59,19 @@ shr.setup({
// On load // On load
if(historySupport) { if(historySupport) {
var video = !currentType.length; var video = !currentType.length;
// If there's no current type set, assume video
if(video) { if(video) {
currentType = types.video; currentType = types.video;
} }
// Replace current history state
if(currentType in types) { if(currentType in types) {
history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType)); history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
} }
if(!video) {
// If it's not video, load the source
if(currentType !== types.video) {
newSource(currentType, true); newSource(currentType, true);
} }
} }
@ -86,7 +93,6 @@ shr.setup({
function newSource(type, init) { 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 // 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)) {
console.warn('Unregonized type.');
return; return;
} }

10
readme.md
View File

@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
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.5.9/plyr.js` to `https://cdn.plyr.io/1.5.9/plyr.js` **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.5.10/plyr.js` to `https://cdn.plyr.io/1.5.10/plyr.js`
### Node Package Manager (NPM) ### Node Package Manager (NPM)
Using NPM, you can grab Plyr: Using NPM, you can grab Plyr:
@ -69,11 +69,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
If you want to use our CDN, you can use the following: If you want to use our CDN, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.5.9/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.5.10/plyr.css">
<script src="https://cdn.plyr.io/1.5.9/plyr.js"></script> <script src="https://cdn.plyr.io/1.5.10/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.9/sprite.svg`. You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.10/sprite.svg`.
### CSS & Styling ### 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. 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.
@ -170,7 +170,7 @@ More info on CORS here:
Here's an example of a default setup: Here's an example of a default setup:
```html ```html
<script src="https://cdn.plyr.io/1.5.9/plyr.js"></script> <script src="https://cdn.plyr.io/1.5.10/plyr.js"></script>
<script>plyr.setup();</script> <script>plyr.setup();</script>
``` ```

21
src/js/plyr.js
View File

@ -172,7 +172,7 @@
// Seek tooltip // Seek tooltip
if (config.tooltips.seek) { if (config.tooltips.seek) {
html.push('<span class="plyr__tooltip">0:00</span>'); html.push('<span class="plyr__tooltip">--:--</span>');
} }
// Close progress // Close progress
@ -238,7 +238,7 @@
html.push( html.push(
'<span class="plyr__time">', '<span class="plyr__time">',
'<span class="plyr__sr-only">' + config.i18n.duration + '</span>', '<span class="plyr__sr-only">' + config.i18n.duration + '</span>',
'<span class="plyr__time--duration">00:00</span>', '<span class="plyr__time--duration">--:--</span>',
'</span>' '</span>'
); );
} }
@ -746,7 +746,7 @@
// Player instance // Player instance
function Plyr(container) { function Plyr(container) {
var plyr = this; var plyr = this;
plyr.container = container, plyr.container = container;
plyr.timers = {}; plyr.timers = {};
// Captions functions // Captions functions
@ -1816,14 +1816,18 @@
function _setVolume(volume) { function _setVolume(volume) {
// Use default if no value specified // Use default if no value specified
if (typeof volume === 'undefined') { if (typeof volume === 'undefined') {
if (config.storage.enabled && _storage().supported) {
volume = window.localStorage[config.storage.key] || config.volume;
}
else {
volume = config.volume; volume = config.volume;
if (config.storage.enabled && _storage().supported) {
volume = window.localStorage.getItem(config.storage.key);
} }
} }
// Use config if all else fails
if(isNaN(volume)) {
volume = config.volume;
}
// Maximum is 10 // Maximum is 10
if (volume > 10) { if (volume > 10) {
volume = 10; volume = 10;
@ -1873,7 +1877,7 @@
} }
// Store the volume in storage // Store the volume in storage
if (config.storage.enabled && _storage().supported) { if (config.storage.enabled && _storage().supported && !isNaN(volume)) {
window.localStorage.setItem(config.storage.key, volume); window.localStorage.setItem(config.storage.key, volume);
} }
@ -2015,6 +2019,7 @@
return; return;
} }
// Determine duration
var duration = plyr.media.duration || 0; var duration = plyr.media.duration || 0;
// If there's only one time display, display duration there // If there's only one time display, display duration there

13
src/less/plyr.less
View File

@ -181,7 +181,6 @@
height: 100%; height: 100%;
border: 0; border: 0;
user-select: none; user-select: none;
pointer-events: none; // To allow mouse events to be captured
} }
// Vimeo hack // Vimeo hack
@ -190,6 +189,11 @@
padding-bottom: 200%; padding-bottom: 200%;
transform: translateY(-35.95%); transform: translateY(-35.95%);
} }
// To allow mouse events to be captured if full support
&.plyr iframe {
pointer-events: none;
}
} }
// Captions // Captions
@ -387,10 +391,15 @@
} }
// Common range styles // Common range styles
input[type='range'].tab-focus:focus { input[type='range'] {
&::-ms-tooltip {
display: none;
}
&.tab-focus:focus {
outline: 1px dotted fade(@plyr-gray-dark, 80%); outline: 1px dotted fade(@plyr-gray-dark, 80%);
outline-offset: 3px; outline-offset: 3px;
} }
}
// Playback progress // Playback progress
// <progress> element // <progress> element

16
src/sass/plyr.scss
View File

@ -27,21 +27,19 @@ $plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
$plyr-control-spacing: 10px !default; $plyr-control-spacing: 10px !default;
$plyr-controls-bg: #fff !default; $plyr-controls-bg: #fff !default;
$plyr-control-bg-hover: $plyr-blue !default; $plyr-control-bg-hover: $plyr-blue !default;
$plyr-control-color: null !default;
$plyr-control-color-hover: null !default;
// Contrast // Contrast
@if lightness($plyr-controls-bg) >= 65% { @if lightness($plyr-controls-bg) >= 65% {
$plyr-control-color: $plyr-gray-light; $plyr-control-color: $plyr-gray-light !default;
} }
@else { @else {
$plyr-control-color: $plyr-gray-lighter; $plyr-control-color: $plyr-gray-lighter !default;
} }
@if lightness($plyr-control-bg-hover) >= 65% { @if lightness($plyr-control-bg-hover) >= 65% {
$plyr-control-color-hover: $plyr-gray; $plyr-control-color-hover: $plyr-gray !default;
} }
@else { @else {
$plyr-control-color-hover: #fff; $plyr-control-color-hover: #fff !default;
} }
// Tooltips // Tooltips
@ -182,7 +180,6 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
height: 100%; height: 100%;
border: 0; border: 0;
user-select: none; user-select: none;
pointer-events: none; // To allow mouse events to be captured
} }
// Vimeo hack // Vimeo hack
@ -191,6 +188,11 @@ $plyr-bp-captions-large: 768px !default; // When captions jump to the la
padding-bottom: 200%; padding-bottom: 200%;
transform: translateY(-35.95%); transform: translateY(-35.95%);
} }
// To allow mouse events to be captured if full support
&.plyr iframe {
pointer-events: none;
}
} }
// Captions // Captions