This commit is contained in:
Sam Potts
parent
10561d6c83
commit
efe54fbba4
2
demo/dist/demo.js
vendored
2
demo/dist/demo.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 i,s=arguments.length;for(i=0;i<s;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",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;t<i;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=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;s<o;s++)this.push(i[s]);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+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!=r)&&(r.length||t!=n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,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,s=arguments.length;for(i=0;i<s;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",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;t<i;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=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;s<o;s++)this.push(i[s]);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+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!==r)&&(r.length||t!==n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
|
||||
@ -94,7 +94,7 @@
|
||||
// Set a new source
|
||||
function newSource(type, init) {
|
||||
// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
|
||||
if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) {
|
||||
if(!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
36
readme.md
36
readme.md
@ -30,13 +30,22 @@ Oh and yes, it works with Bootstrap.
|
||||
## Changelog
|
||||
Check out the [changelog](changelog.md) to see what's new with Plyr.
|
||||
|
||||
## Planned Development
|
||||
- Playback speed
|
||||
- Quality selection
|
||||
## Features currently being developed
|
||||
- Playback speed (#53)
|
||||
- Quality selection (#218)
|
||||
- Caption language selection (#385)
|
||||
- AirPlay
|
||||
- Picture in Picture (MacOS Sierra + Safari) (#366)
|
||||
[more info](https://github.com/Selz/plyr/issues?q=is%3Aissue+is%3Aopen+label%3A%22In+Development%22)
|
||||
|
||||
## Planned features
|
||||
- Playlists
|
||||
- Multiple language captions (with selection)
|
||||
- Google cast
|
||||
- Facebook video support
|
||||
- Wistia video support
|
||||
- YouTube and Vimeo audio support
|
||||
- Audio captions
|
||||
... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
|
||||
...and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
|
||||
|
||||
If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or, of course, forking and sending a pull request.
|
||||
|
||||
@ -106,10 +115,13 @@ For YouTube and Vimeo, Plyr uses the standard YouTube API markup (an empty `<div
|
||||
<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>
|
||||
```
|
||||
|
||||
Note: `data-video-id` value can now be the ID or URL for the video. This attribute name will change in a future release to reflect this change.
|
||||
|
||||
#### Vimeo embed
|
||||
```html
|
||||
<div data-type="vimeo" data-video-id="143418951"></div>
|
||||
```
|
||||
Note: `data-video-id` value can now be the ID or URL for the video. This attribute name will change in a future release to reflect this change.
|
||||
|
||||
### JavaScript
|
||||
Include the `plyr.js` script before the closing `</body>` tag and then call `plyr.setup()`. More info on `setup()` can be found under [initialising](#initialising).
|
||||
@ -676,6 +688,8 @@ player.source({
|
||||
});
|
||||
```
|
||||
|
||||
Note: `src` can be the video ID or URL
|
||||
|
||||
Vimeo example
|
||||
|
||||
```javascript
|
||||
@ -689,7 +703,9 @@ player.source({
|
||||
});
|
||||
```
|
||||
|
||||
Some more details on the object parameters
|
||||
Note: `src` can be the video ID or URL
|
||||
|
||||
More details on the object parameters
|
||||
|
||||
<table class="table" width="100%">
|
||||
<thead>
|
||||
@ -713,7 +729,7 @@ Some more details on the object parameters
|
||||
<tr>
|
||||
<td><code>sources</code></td>
|
||||
<td>Array</td>
|
||||
<td>This is an array of sources. <code>type</code> is optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
|
||||
<td>This is an array of sources. <code>type</code> is optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, the video ID or URL must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>poster</code></td>
|
||||
@ -776,7 +792,7 @@ These events also bubble up the DOM. The event target will be the container elem
|
||||
<tr>
|
||||
<td><code>ended</code></td>
|
||||
<td></td>
|
||||
<td>Sent when playback completes.</td>
|
||||
<td>Sent when playback completes. Note: with Vimeo this does not occur if `loop` is enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>error</code></td>
|
||||
@ -820,12 +836,12 @@ These events also bubble up the DOM. The event target will be the container elem
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>seeked</code></td>
|
||||
<td>✔</td>
|
||||
<td></td>
|
||||
<td>Sent when a seek operation completes.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>seeking</code></td>
|
||||
<td>✔</td>
|
||||
<td></td>
|
||||
<td>Sent when a seek operation begins.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@ -175,7 +175,7 @@
|
||||
fullscreen: null
|
||||
},
|
||||
// Events to watch on HTML5 media elements
|
||||
events: ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'emptied'],
|
||||
events: ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'seeked', 'emptied'],
|
||||
// Logging
|
||||
logPrefix: '[Plyr]'
|
||||
};
|
||||
@ -596,6 +596,18 @@
|
||||
}
|
||||
};
|
||||
|
||||
// Parse YouTube ID from url
|
||||
function _parseYouTubeId(url) {
|
||||
var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
|
||||
return (url.match(regex)) ? RegExp.$2 : url;
|
||||
}
|
||||
|
||||
// Parse Vimeo ID from url
|
||||
function _parseVimeoId(url) {
|
||||
var regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
|
||||
return (url.match(regex)) ? RegExp.$2 : url;
|
||||
}
|
||||
|
||||
// Fullscreen API
|
||||
function _fullscreen() {
|
||||
var fullscreen = {
|
||||
@ -1505,9 +1517,23 @@
|
||||
// Setup YouTube/Vimeo
|
||||
function _setupEmbed() {
|
||||
var container = document.createElement('div'),
|
||||
mediaId = plyr.embedId,
|
||||
mediaId,
|
||||
id = plyr.type + '-' + Math.floor(Math.random() * (10000));
|
||||
|
||||
// Parse IDs from URLs if supplied
|
||||
switch (plyr.type) {
|
||||
case 'youtube':
|
||||
mediaId = _parseYouTubeId(plyr.embedId);
|
||||
break;
|
||||
|
||||
case 'vimeo':
|
||||
mediaId = _parseVimeoId(plyr.embedId);
|
||||
break;
|
||||
|
||||
default:
|
||||
mediaId = plyr.embedId;
|
||||
}
|
||||
|
||||
// Remove old containers
|
||||
var containers = _getElements('[id^="' + plyr.type + '-"]');
|
||||
for (var i = containers.length - 1; i >= 0; i--) {
|
||||
@ -1724,6 +1750,12 @@
|
||||
|
||||
case 1:
|
||||
plyr.media.paused = false;
|
||||
|
||||
// If we were seeking, fire seeked event
|
||||
if (plyr.media.seeking) {
|
||||
_triggerEvent(plyr.media, 'seeked');
|
||||
}
|
||||
|
||||
plyr.media.seeking = false;
|
||||
_triggerEvent(plyr.media, 'play');
|
||||
_triggerEvent(plyr.media, 'playing');
|
||||
@ -1848,6 +1880,12 @@
|
||||
}
|
||||
});
|
||||
|
||||
plyr.embed.on('seeked', function() {
|
||||
plyr.media.seeking = false;
|
||||
_triggerEvent(plyr.media, 'seeked');
|
||||
_triggerEvent(plyr.media, 'play');
|
||||
});
|
||||
|
||||
plyr.embed.on('ended', function() {
|
||||
plyr.media.paused = true;
|
||||
_triggerEvent(plyr.media, 'ended');
|
||||
@ -2009,7 +2047,6 @@
|
||||
|
||||
// Embeds
|
||||
if (_inArray(config.types.embed, plyr.type)) {
|
||||
// YouTube
|
||||
switch(plyr.type) {
|
||||
case 'youtube':
|
||||
plyr.embed.seekTo(targetTime);
|
||||
@ -2029,11 +2066,14 @@
|
||||
_pause();
|
||||
}
|
||||
|
||||
// Trigger timeupdate for embeds
|
||||
// Trigger timeupdate
|
||||
_triggerEvent(plyr.media, 'timeupdate');
|
||||
|
||||
// Set seeking flag
|
||||
plyr.media.seeking = true;
|
||||
|
||||
// Trigger seeking
|
||||
_triggerEvent(plyr.media, 'seeking');
|
||||
}
|
||||
|
||||
// Logging
|
||||
@ -3259,19 +3299,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Taken from https://gist.github.com/takien/4077195
|
||||
function parseYoutubeVideoId(url) {
|
||||
var videoId;
|
||||
url = url.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
|
||||
if(url[2] !== undefined) {
|
||||
videoId = url[2].split(/[^0-9a-z_\-]/i);
|
||||
videoId = videoId[0];
|
||||
} else {
|
||||
videoId = url;
|
||||
}
|
||||
return videoId;
|
||||
}
|
||||
|
||||
// Setup a player
|
||||
function _init() {
|
||||
// Bail if the element is initialized
|
||||
@ -3300,12 +3327,6 @@
|
||||
plyr.type = media.getAttribute('data-type');
|
||||
plyr.embedId = media.getAttribute('data-video-id');
|
||||
|
||||
switch(plyr.type) {
|
||||
case 'youtube':
|
||||
plyr.embedId = parseYoutubeVideoId(plyr.embedId);
|
||||
break;
|
||||
}
|
||||
|
||||
// Clean up
|
||||
media.removeAttribute('data-type');
|
||||
media.removeAttribute('data-video-id');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user