Compare commits

...

6 Commits

Author SHA1 Message Date
94208dce76 v2.0.10
- Added seek event fixes for Vimeo and YouTube (fixes #409)
- Added support for embed URLs rather than ID only (fixes #345)
2016-11-02 18:14:06 +11:00
efe54fbba4 Added seek event fixes (fixes #409), Added support for URLs (fixes #345) 2016-11-02 18:09:40 +11:00
10561d6c83 Merge pull request #408 from gurupras/urlparser
Added logic to parse youtube video id
2016-11-02 16:59:28 +11:00
0ef87f93a6 Added logic to parse youtube video id
This commit is targetted at solving issue#345 and adds
    functionality to parse youtube video IDs from various
    types of youtube video URLs.

    Other embed types like vimeo/soundcloud can be extended by
    following a similar structure as implemented in this commit.
2016-10-30 00:49:17 -04:00
a3ed309342 v2.0.9
- Temporary patch for the YouTube API issues with `getDuration()` (relates to #374)
2016-10-23 15:18:53 +11:00
08b4c09b89 Temporary patch for the YouTube API issues with getDuration() (relates to #374) 2016-10-23 15:18:08 +11:00
7 changed files with 95 additions and 24 deletions

View File

@ -1,5 +1,12 @@
# Changelog
## v2.0.10
- Added seek event fixes for Vimeo and YouTube (fixes #409)
- Added support for embed URLs rather than ID only (fixes #345)
## v2.0.9
- Temporary patch for the YouTube API issues with `getDuration()` (relates to #374)
## v2.0.8
- Added `isPaused()` API method (thanks to @darrena092)
- Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357)

2
demo/dist/demo.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,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 &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: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 &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: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"));

View File

@ -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

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "2.0.8",
"version": "2.0.10",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "http://plyr.io",
"main": "src/js/plyr.js",

View File

@ -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).
@ -122,7 +134,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
If you want to use our CDN for the JavaScript, you can use the following:
```html
<script src="https://cdn.plyr.io/2.0.8/plyr.js"></script>
<script src="https://cdn.plyr.io/2.0.10/plyr.js"></script>
```
### CSS
@ -135,11 +147,11 @@ Include the `plyr.css` stylsheet into your `<head>`
If you want to use our CDN for the default CSS, you can use the following:
```html
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.8/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.10/plyr.css">
```
### SVG Sprite
The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.8/plyr.svg`.
The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.10/plyr.svg`.
## Advanced
@ -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>

View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v2.0.8
// plyr.js v2.0.10
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -43,7 +43,7 @@
displayDuration: true,
loadSprite: true,
iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/2.0.8/plyr.svg',
iconUrl: 'https://cdn.plyr.io/2.0.10/plyr.svg',
clickToPlay: true,
hideControls: true,
showPosterOnEnd: false,
@ -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');
@ -1737,6 +1769,14 @@
_triggerEvent(plyr.media, 'timeupdate');
}, 100);
// Check duration again due to YouTube bug
// https://github.com/Selz/plyr/issues/374
// https://code.google.com/p/gdata-issues/issues/detail?id=8690
if (plyr.media.duration !== instance.getDuration()) {
plyr.media.duration = instance.getDuration();
_triggerEvent(plyr.media, 'durationchange');
}
break;
case 2:
@ -1840,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');
@ -2001,7 +2047,6 @@
// Embeds
if (_inArray(config.types.embed, plyr.type)) {
// YouTube
switch(plyr.type) {
case 'youtube':
plyr.embed.seekTo(targetTime);
@ -2021,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