Froogaloop fixes (custom version), docs sprite, source api changes

This commit is contained in:
Sam Potts 2016-01-13 23:12:16 +11:00
parent c449fc0867
commit bc67d969cb
12 changed files with 132 additions and 101 deletions

2
dist/plyr.css vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

2
docs/dist/docs.css vendored

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 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 &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"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"));
"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 &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"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"));

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -13,7 +13,7 @@
<!-- 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>
@ -36,8 +36,8 @@
<main role="main" id="main">
<nav class="btn__bar">
<ul>
<li>
<button type="button" class="btn btn--active" data-source="video">Video</button>
<li class="active">
<button type="button" class="btn" data-source="video">Video</button>
</li>
<li>
<button type="button" class="btn" data-source="audio">Audio</button>
@ -79,42 +79,23 @@
<script>
(function() {
[
"https://cdn.shr.one/0.1.9/sprite.svg",
"https://cdn.plyr.io/1.3.7/sprite.svg"
'https://cdn.plyr.io/1.3.7/sprite.svg',
'https://cdn.plyr.io/1.3.7/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 if statement
// 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);
}
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);
}
else {
return;
}
else if (typeof XDomainRequest != 'undefined') { x = new XDomainRequest(); x.open('GET', u); }
else { return; }
x.send();
x.onload = function() {
var c = document.createElement("div");
c.setAttribute("hidden", "");
c.innerHTML = x.responseText;
b.insertBefore(c, b.childNodes[0]);
}
x.onload = function() { var c = document.createElement('div'); c.setAttribute('hidden', ''); c.innerHTML = x.responseText; b.insertBefore(c, b.childNodes[0]); }
});
})();
// Load the plyr sprite
loadSprite(document, "../dist/sprite.svg");
// This is for the docs only
loadSprite(document, "dist/sprite.svg");
</script>
<!-- Plyr core script -->

View File

@ -80,26 +80,32 @@ shr.setup({
case 'youtube':
player.source({
type: 'youtube',
type: 'video',
title: 'View From A Blue Moon',
sources: 'bTqVqk7FSmY'
sources: [{
src: 'bTqVqk7FSmY',
type: 'youtube'
}]
});
break;
case 'vimeo':
player.source({
type: 'vimeo',
type: 'video',
title: 'View From A Blue Moon',
sources: '143418951'
sources: [{
src: '143418951',
type: 'vimeo'
}]
});
break;
}
for (var x = buttons.length - 1; x >= 0; x--) {
buttons[x].classList.remove('btn--active');
buttons[x].parentElement.classList.remove('active');
}
event.target.classList.add('btn--active');
event.target.parentElement.classList.add('active');
}
})();

View File

@ -55,19 +55,29 @@ nav {
& + li .btn {
margin-left: -1px;
}
&.active .btn {
&:extend(.btn--primary);
box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
position: relative;
z-index: 1;
.icon {
color: inherit;
}
}
&.active + li .btn:hover {
z-index: 0;
}
}
.btn {
position: relative;
display: block;
border-radius: 0;
}
.btn--active {
&:extend(.btn--primary);
box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
position: relative;
z-index: 1;
.icon {
color: inherit;
&:hover,
&:focus {
z-index: 1;
}
}

View File

@ -41,7 +41,8 @@ paths = {
// Source paths
src: {
less: path.join(root, "docs/src/less/**/*"),
js: path.join(root, "docs/src/js/**/*")
js: path.join(root, "docs/src/js/**/*"),
sprite: path.join(root, "docs/src/sprite/**/*")
},
// Output paths
output: path.join(root, "docs/dist/"),
@ -55,7 +56,8 @@ paths = {
tasks = {
less: [],
sass: [],
js: []
js: [],
sprite: []
},
// Fetch bundles from JSON
@ -128,17 +130,21 @@ var build = {
}
},
sprite: function(bundle) {
var name = "sprite-" + bundle;
tasks.sprite.push(name);
// Process Icons
gulp.task("sprite", function () {
gulp.task(name, function () {
return gulp
.src(paths.plyr.src.sprite)
.src(paths[bundle].src.sprite)
.pipe(svgmin({
plugins: [{
removeDesc: true
}]
}))
.pipe(svgstore())
.pipe(gulp.dest(paths.plyr.output));
.pipe(rename({ basename: (bundle == "plyr" ? "sprite" : bundle) }))
.pipe(gulp.dest(paths[bundle].output));
});
}
};
@ -147,11 +153,12 @@ var build = {
build.js(bundles.plyr.js, "plyr");
build.less(bundles.plyr.less, "plyr");
build.sass(bundles.plyr.sass, "plyr");
build.sprite();
build.sprite("plyr");
// Docs files
build.less(bundles.docs.less, "docs");
build.js(bundles.docs.js, "docs");
build.sprite("docs");
// Build all JS
gulp.task("js", function(){
@ -168,16 +175,17 @@ gulp.task("watch", function () {
// Plyr core
gulp.watch(paths.plyr.src.js, tasks.js);
gulp.watch(paths.plyr.src.less, tasks.less);
gulp.watch(paths.plyr.src.sprite, ["sprite-plyr"]);
gulp.watch(paths.plyr.src.sprite, tasks.sprite);
// Docs
gulp.watch(paths.docs.src.js, tasks.js);
gulp.watch(paths.docs.src.less, tasks.less);
gulp.watch(paths.docs.src.sprite, tasks.sprite);
});
// Default gulp task
gulp.task("default", function(){
run(tasks.js, tasks.less, "sprite", "watch");
run(tasks.js, tasks.less, tasks.sprite, "watch");
});
// Publish a version to CDN and docs
@ -263,5 +271,5 @@ gulp.task("open", function () {
// Do everything
gulp.task("publish", function () {
run(tasks.js, tasks.less, "sprite", "cdn", "docs");
run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs");
});

View File

@ -487,21 +487,21 @@ Video example:
```javascript
player.source({
type: 'video',
title: 'Bug Buck Bunny',
title: 'Example title',
sources: [{
src: 'https://cdn.selz.com/plyr/1.0/movie.mp4',
src: '/path/to/movie.mp4',
type: 'video/mp4'
},
{
src: 'https://cdn.selz.com/plyr/1.0/movie.webm',
src: '/path/to/movie.webm',
type: 'video/webm'
}],
poster: 'https://cdn.selz.com/plyr/1.0/poster.jpg',
poster: '/path/to/poster.jpg',
tracks: [{
kind: 'captions',
label: 'English',
srclang:'en',
src: 'https://cdn.selz.com/plyr/1.0/example_captions_en.vtt',
src: '/path/to/captions.vtt',
default: true
}]
});
@ -512,13 +512,13 @@ Audio example:
```javascript
player.source({
type: 'audio',
title: '96 by Logistics',
title: 'Example title',
sources: [{
src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
src: '/path/to/audio.mp3',
type: 'audio/mp3'
},
{
src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg',
src: '/path/to/audio.ogg',
type: 'audio/ogg'
}]
});
@ -528,9 +528,12 @@ YouTube example:
```javascript
player.source({
type: 'youtube',
title: 'Enovato interview of Dan Cederholm for Made By',
sources: 'Au87oAJ2jeE'
type: 'video',
title: 'Example title',
sources: [{
src: 'bTqVqk7FSmY',
type: 'youtube'
}]
});
```
@ -539,8 +542,11 @@ Vimeo example
```javascript
player.source({
type: 'vimeo',
title: 'Yosemite HD II',
sources: '87701971'
title: 'Example title',
sources: [{
src: '143418951',
type: 'vimeo'
}]
});
```

View File

@ -127,7 +127,7 @@
},
urls: {
vimeo: {
api: 'https://f.vimeocdn.com/js/froogaloop2.min.js'
api: 'http://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js',
},
youtube: {
api: 'https://www.youtube.com/iframe_api'
@ -968,7 +968,7 @@
// Embeds
if (_inArray(config.types.embed, plyr.type)) {
_setupEmbed(plyr.embedId, plyr.type);
_setupEmbed();
// Clean up
plyr.embedId = null;
@ -982,8 +982,9 @@
}
// Setup YouTube/Vimeo
function _setupEmbed(videoId) {
function _setupEmbed() {
var container = document.createElement('div'),
videoId = plyr.embedId,
id = plyr.type + '-' + Math.floor(Math.random() * (10000));
// Remove old containers
@ -1013,7 +1014,15 @@
_injectScript(config.urls.youtube.api);
// Setup callback for the API
window.onYouTubeIframeAPIReady = function () { _youTubeReady(videoId, container); };
window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
// Add to queue
window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(videoId, container) });
// Set callback to process queue
window.onYouTubeIframeAPIReady = function () {
window.onYouTubeReadyCallbacks.forEach(function(callback) { callback(); });
};
}
}
// Vimeo
@ -1036,23 +1045,18 @@
container.appendChild(iframe);
plyr.media.appendChild(container);
// Setup API
if (typeof Froogaloop === 'function') {
_on(iframe, 'load', _vimeoReady);
}
else {
// Load the API
// Load the API
if (!('$f' in window)) {
_injectScript(config.urls.vimeo.api);
// Wait for fragaloop load
var timer = window.setInterval(function() {
if ('$f' in window && iframe.loaded) {
window.clearInterval(timer);
_vimeoReady.call(iframe);
}
}, 50);
}
// Wait for fragaloop load
var timer = window.setInterval(function() {
if ('$f' in window && iframe.loaded) {
window.clearInterval(timer);
_vimeoReady.call(iframe);
}
}, 50);
}
}
@ -1096,7 +1100,8 @@
cc_lang_pref: 'en',
wmode: 'transparent',
modestbranding: 1,
disablekb: 1
disablekb: 1,
origin: '*' // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45
},
events: {
'onReady': function(event) {
@ -1914,7 +1919,8 @@
// Update source
// Sources are not checked for support so be careful
function _updateSource(source) {
if (typeof source === 'undefined') {
if (typeof source === 'undefined' || !('sources' in source) || !source.sources.length) {
_log('Invalid source format', true);
return;
}
@ -1938,9 +1944,18 @@
// Remove the old media
_remove(plyr.media);
// Set the new type
if ('type' in source && source.type !== plyr.type) {
// Set the type
if ('type' in source) {
plyr.type = source.type;
// Get child type for video (it might be an embed)
if(plyr.type === 'video') {
var firstSource = source.sources[0];
if('type' in firstSource && _inArray(config.types.embed, firstSource.type)) {
plyr.type = firstSource.type;
}
}
}
// Create new markup
@ -1956,7 +1971,7 @@
case 'youtube':
case 'vimeo':
plyr.media = document.createElement('div');
plyr.embedId = (typeof source.sources === 'string' ? source.sources : source.sources[0].src);
plyr.embedId = source.sources[0].src;
break;
}
@ -1989,11 +2004,6 @@
// Autoplay the new source?
config.autoplay = (source.autoplay || config.autoplay);
// Set media id for embeds
if (_inArray(config.types.embed, plyr.type)) {
plyr.embedId = source.sources;
}
// Set new sources for html5
if (_inArray(config.types.html5, plyr.type)) {
_insertChildElements('source', source.sources);
@ -2085,6 +2095,11 @@
});
}
// Messages
/*_on(window, 'message', function(event) {
_log(event);
});*/
// Play
_on(plyr.buttons.play, 'click', function() {
_play();

View File

@ -158,6 +158,11 @@
box-sizing: border-box;
}
// Fix 300ms delay
a, button, input, label {
touch-action: manipulation;
}
// Screen reader only elements
&__sr-only {
position: absolute !important;
@ -637,7 +642,7 @@
}
// Hide controls when playing in full screen
&--fullscreen--hide-controls&--fullscreen-active.plyr--playing {
&--fullscreen--hide-controls&--fullscreen-active&--playing {
.plyr__controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s .2s ease;
@ -654,7 +659,7 @@
// Captions
&--fullscreen .plyr__captions,
&--fullscreen-active .plyr__captions,
&--fullscreen--hide-controls&--fullscreen-active&--playing&--hover .plyr__captions {
&--fullscreen--hide-controls&--fullscreen-active&--playing&--hover &__captions {
top: auto;
bottom: 90px;