Final tweaks for v1.5 and IE9
This commit is contained in:
Sam Potts
parent
aed7db34ea
commit
891abd1d4a
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 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]=[],p=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 d={get:p,enumerable:!0,configurable:!0};try{s.defineProperty(i,t,d)}catch(m){-2146823252===m.number&&(d.enumerable=!1,s.defineProperty(i,t,d))}}else s[n].__defineGetter__&&i.__defineGetter__(t,p)}}(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:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case"vimeo":i.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}for(var s=t.length-1;s>=0;s--)t[s].parentElement.classList.remove("active");event.target.parentElement.classList.add("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"));
|
||||
"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,s=arguments.length;for(n=0;s>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",s=e.Element[n],i=Object,r=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},o=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 o.call(e,t)},l=function(e){for(var t=r.call(e.getAttribute("class")||""),n=t?t.split(/\s+/):[],s=0,i=n.length;i>s;s++)this.push(n[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[n]=[],p=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,s=t.length,i=!1;do e=t[n]+"",-1===c(this,e)&&(this.push(e),i=!0);while(++n<s);i&&this._updateClassName()},u.remove=function(){var e,t,n=arguments,s=0,i=n.length,r=!1;do for(e=n[s]+"",t=c(this,e);-1!==t;)this.splice(t,1),r=!0,t=c(this,e);while(++s<i);r&&this._updateClassName()},u.toggle=function(e,t){e+="";var n=this.contains(e),s=n?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!n},u.toString=function(){return this.join(" ")},i.defineProperty){var d={get:p,enumerable:!0,configurable:!0};try{i.defineProperty(s,t,d)}catch(m){-2146823252===m.number&&(d.enumerable=!1,i.defineProperty(s,t,d))}}else i[n].__defineGetter__&&s.__defineGetter__(t,p)}}(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(e,t,n){if(e)if(e.classList)e.classList[n?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(n?" "+t:"")}}function t(){var t=this,s=t.getAttribute("data-source"),i=document.querySelector(".js-media-player").plyr;switch(s){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:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case"vimeo":i.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}for(var r=n.length-1;r>=0;r--)e(n[r].parentElement,"active",!1);e((event.target||event.srcElement).parentElement,"active",!0)}for(var n=document.querySelectorAll("[data-source]"),s=n.length-1;s>=0;s--)n[s].addEventListener("click",t)}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,n,s,i,r,o){e.GoogleAnalyticsObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,r=t.createElement(n),o=t.getElementsByTagName(n)[0],r.async=1,r.src=s,o.parentNode.insertBefore(r,o)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
@ -83,17 +83,34 @@
|
||||
'dist/docs.svg'
|
||||
]
|
||||
.forEach(function(u) {
|
||||
var x = new XMLHttpRequest(), b = document.body;
|
||||
var x = new XMLHttpRequest(),
|
||||
b = document.body;
|
||||
|
||||
// Check for CORS support
|
||||
// If you're loading from same domain, you can remove the whole if/else statement
|
||||
// XHR for Chrome/Firefox/Opera/Safari
|
||||
if ('withCredentials' in x) { x.open('GET', u, true); }
|
||||
// XDomainRequest for older IE
|
||||
else if (typeof XDomainRequest != 'undefined') { x = new XDomainRequest(); x.open('GET', u); }
|
||||
// XHR for Chrome/Firefox/Opera/Safari/IE10+
|
||||
if ('withCredentials' in x) {
|
||||
x.open('GET', u, true);
|
||||
}
|
||||
// XDomainRequest for IE8 & IE9
|
||||
else if (typeof XDomainRequest == 'function') {
|
||||
x = new XDomainRequest();
|
||||
x.open('GET', u);
|
||||
}
|
||||
else { return; }
|
||||
|
||||
// Inject hidden div with sprite on load
|
||||
x.onload = function() {
|
||||
var c = document.createElement('div');
|
||||
c.setAttribute('hidden', '');
|
||||
c.innerHTML = x.responseText;
|
||||
b.insertBefore(c, b.childNodes[0]);
|
||||
}
|
||||
|
||||
// Timeout for IE9
|
||||
setTimeout(function () {
|
||||
x.send();
|
||||
x.onload = function() { var c = document.createElement('div'); c.setAttribute('hidden', ''); c.innerHTML = x.responseText; b.insertBefore(c, b.childNodes[0]); }
|
||||
}, 0);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
@ -33,6 +33,18 @@ shr.setup({
|
||||
buttons[i].addEventListener('click', newSource);
|
||||
}
|
||||
|
||||
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 : '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set a new source
|
||||
function newSource() {
|
||||
var trigger = this,
|
||||
@ -102,10 +114,10 @@ shr.setup({
|
||||
}
|
||||
|
||||
for (var x = buttons.length - 1; x >= 0; x--) {
|
||||
buttons[x].parentElement.classList.remove('active');
|
||||
toggleClass(buttons[x].parentElement, 'active', false);
|
||||
}
|
||||
|
||||
event.target.parentElement.classList.add('active');
|
||||
toggleClass((event.target || event.srcElement).parentElement, 'active', true);
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
@ -2,6 +2,11 @@
|
||||
// Examples
|
||||
// ==========================================================================
|
||||
|
||||
section {
|
||||
margin: 0 auto @padding-base;
|
||||
max-width: @example-width-video;
|
||||
}
|
||||
|
||||
video,
|
||||
.plyr__video-embed {
|
||||
border-radius: @border-radius-base;
|
||||
@ -14,8 +19,7 @@ video,
|
||||
|
||||
// Example players
|
||||
.plyr {
|
||||
margin: 0 auto @padding-base;
|
||||
max-width: @example-width-video;
|
||||
margin: 0 auto;
|
||||
|
||||
&__controls {
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
@ -53,6 +57,7 @@ video,
|
||||
// Style full supported player
|
||||
.plyr__cite {
|
||||
display: none;
|
||||
margin-top: @padding-base;
|
||||
|
||||
.icon {
|
||||
margin-right: (@padding-base / 4);
|
||||
|
||||
16
readme.md
16
readme.md
@ -82,15 +82,15 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
|
||||
(function(d, p){
|
||||
var a = new XMLHttpRequest(),
|
||||
b = d.body;
|
||||
a.open("GET", p, true);
|
||||
a.open('GET', p, true);
|
||||
a.send();
|
||||
a.onload = function(){
|
||||
var c = d.createElement("div");
|
||||
c.style.display = "none";
|
||||
a.onload = function() {
|
||||
var c = d.createElement('div');
|
||||
c.setAttribute('hidden', '');
|
||||
c.innerHTML = a.responseText;
|
||||
b.insertBefore(c, b.childNodes[0]);
|
||||
}
|
||||
})(document, "dist/sprite.svg");
|
||||
};
|
||||
})(document, 'path/to/sprite.svg');
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -604,7 +604,7 @@ Some more details on the object parameters
|
||||
The `plyr` object on the player element also contains a `media` property which is a reference to the `<audio>` or `<video>` element within the player which you can use to listen for events. Here's an example:
|
||||
|
||||
```javascript
|
||||
var media = document.querySelector(".plyr").plyr.media;
|
||||
var media = document.querySelector(".js-plyr").plyr.media;
|
||||
|
||||
media.addEventListener("playing", function() {
|
||||
console.log("playing");
|
||||
@ -624,7 +624,7 @@ 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(".js-plyr").plyr.media.addEventListener("play", function() {
|
||||
console.log("play");
|
||||
});
|
||||
```
|
||||
|
||||
@ -503,15 +503,26 @@
|
||||
// Toggle class on an element
|
||||
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 : '');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Has class name
|
||||
function _hasClass(element, className) {
|
||||
if (element) {
|
||||
if (element.classList) {
|
||||
return element.classList.contains(className);
|
||||
}
|
||||
else {
|
||||
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
@ -977,7 +988,7 @@
|
||||
_log('It looks like there is a problem with your controls html', true);
|
||||
|
||||
// Restore native video controls
|
||||
plyr.media.setAttribute('controls', '');
|
||||
_toggleControls(true);
|
||||
|
||||
return false;
|
||||
}
|
||||
@ -988,6 +999,16 @@
|
||||
_toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), plyr.supported.full);
|
||||
}
|
||||
|
||||
// Toggle native controls
|
||||
function _toggleControls(toggle) {
|
||||
if(toggle) {
|
||||
plyr.media.setAttribute('controls', '');
|
||||
}
|
||||
else {
|
||||
plyr.media.removeAttribute('controls');
|
||||
}
|
||||
}
|
||||
|
||||
// Setup aria attribute for play and iframe title
|
||||
function _setTitle(iframe) {
|
||||
// Find the current text
|
||||
@ -1019,9 +1040,6 @@
|
||||
}
|
||||
|
||||
if (plyr.supported.full) {
|
||||
// Remove native video controls
|
||||
plyr.media.removeAttribute('controls');
|
||||
|
||||
// Add type class
|
||||
_toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
|
||||
|
||||
@ -2365,7 +2383,7 @@
|
||||
}
|
||||
|
||||
// Restore native video controls
|
||||
plyr.media.setAttribute('controls', '');
|
||||
_toggleControls(true);
|
||||
|
||||
// Clone the media element to remove listeners
|
||||
// http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type
|
||||
@ -2457,6 +2475,10 @@
|
||||
// Remove controls
|
||||
_remove(_getElement(config.selectors.controls.wrapper));
|
||||
|
||||
// Restore native controls
|
||||
_toggleControls(true);
|
||||
|
||||
// Bail
|
||||
return;
|
||||
}
|
||||
|
||||
@ -2466,6 +2488,9 @@
|
||||
_injectControls();
|
||||
}
|
||||
|
||||
// Remove native controls
|
||||
_toggleControls();
|
||||
|
||||
// Find the elements
|
||||
if (!_findElements()) {
|
||||
return;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user