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

Merge branch 'master' into develop

Browse Source 
# Conflicts:
#	demo/index.html
#	dist/plyr.js
This commit is contained in:
Sam Potts 2016-11-06 15:55:55 +11:00
commit bae04a492a
5 changed files with 83 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
changelog.md
View File

@ -1,5 +1,9 @@
# Changelog # 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 ## v2.0.9
- Temporary patch for the YouTube API issues with `getDuration()` (relates to #374) - Temporary patch for the YouTube API issues with `getDuration()` (relates to #374)

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

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

43
readme.md
View File

@ -30,13 +30,23 @@ Oh and yes, it works with Bootstrap.
## Changelog ## Changelog
Check out the [changelog](changelog.md) to see what's new with Plyr. Check out the [changelog](changelog.md) to see what's new with Plyr.
## Planned Development ## Features currently being developed
- Playback speed - Playback speed selection
- Quality selection - Quality selection
- Caption language selection
- AirPlay
- Picture in Picture (MacOS Sierra + Safari)
[more info](https://github.com/Selz/plyr/issues?q=is%3Aissue+is%3Aopen+label%3A%22In+Development%22)
## Planned features
- Playlists - Playlists
- Multiple language captions (with selection) - Google cast
- Facebook video support
- Wistia video support
- YouTube and Vimeo audio support
- Audio captions - 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. 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 +116,13 @@ For YouTube and Vimeo, Plyr uses the standard YouTube API markup (an empty `<div
<div data-type="youtube" data-video-id="bTqVqk7FSmY"></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 #### Vimeo embed
```html ```html
<div data-type="vimeo" data-video-id="143418951"></div> <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 ### 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). 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 +135,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: If you want to use our CDN for the JavaScript, you can use the following:
```html ```html
<script src="https://cdn.plyr.io/2.0.9/plyr.js"></script> <script src="https://cdn.plyr.io/2.0.10/plyr.js"></script>
``` ```
### CSS ### CSS
@ -135,11 +148,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: If you want to use our CDN for the default CSS, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.9/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/2.0.10/plyr.css">
``` ```
### SVG Sprite ### 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.9/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 ## Advanced
@ -687,6 +700,8 @@ player.source({
}); });
``` ```
Note: `src` can be the video ID or URL
Vimeo example Vimeo example
```javascript ```javascript
@ -700,7 +715,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%"> <table class="table" width="100%">
<thead> <thead>
@ -724,7 +741,7 @@ Some more details on the object parameters
<tr> <tr>
<td><code>sources</code></td> <td><code>sources</code></td>
<td>Array</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>
<tr> <tr>
<td><code>poster</code></td> <td><code>poster</code></td>
@ -787,7 +804,7 @@ These events also bubble up the DOM. The event target will be the container elem
<tr> <tr>
<td><code>ended</code></td> <td><code>ended</code></td>
<td></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>
<tr> <tr>
<td><code>error</code></td> <td><code>error</code></td>
@ -831,12 +848,12 @@ These events also bubble up the DOM. The event target will be the container elem
</tr> </tr>
<tr> <tr>
<td><code>seeked</code></td> <td><code>seeked</code></td>
<td>✔</td> <td></td>
<td>Sent when a seek operation completes.</td> <td>Sent when a seek operation completes.</td>
</tr> </tr>
<tr> <tr>
<td><code>seeking</code></td> <td><code>seeking</code></td>
<td>✔</td> <td></td>
<td>Sent when a seek operation begins.</td> <td>Sent when a seek operation begins.</td>
</tr> </tr>
<tr> <tr>

52
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v2.0.9 // plyr.js v2.0.10
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -45,7 +45,7 @@
displayDuration: true, displayDuration: true,
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/2.0.9/plyr.svg', iconUrl: 'https://cdn.plyr.io/2.0.10/plyr.svg',
clickToPlay: true, clickToPlay: true,
hideControls: true, hideControls: true,
showPosterOnEnd: false, showPosterOnEnd: false,
@ -190,7 +190,7 @@
speed: null speed: null
}, },
// Events to watch on HTML5 media elements // 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 // Logging
logPrefix: '[Plyr]' logPrefix: '[Plyr]'
}; };
@ -576,6 +576,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 // Fullscreen API
var _fullscreen; var _fullscreen;
(function() { (function() {
@ -1688,9 +1700,23 @@
// Setup YouTube/Vimeo // Setup YouTube/Vimeo
function _setupEmbed() { function _setupEmbed() {
var container = document.createElement('div'), var container = document.createElement('div'),
mediaId = plyr.embedId, mediaId,
id = plyr.type + '-' + Math.floor(Math.random() * (10000)); 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 // Remove old containers
var containers = _getElements('[id^="' + plyr.type + '-"]'); var containers = _getElements('[id^="' + plyr.type + '-"]');
for (var i = containers.length - 1; i >= 0; i--) { for (var i = containers.length - 1; i >= 0; i--) {
@ -1907,6 +1933,12 @@
case 1: case 1:
plyr.media.paused = false; plyr.media.paused = false;
// If we were seeking, fire seeked event
if (plyr.media.seeking) {
_triggerEvent(plyr.media, 'seeked');
}
plyr.media.seeking = false; plyr.media.seeking = false;
_triggerEvent(plyr.media, 'play'); _triggerEvent(plyr.media, 'play');
_triggerEvent(plyr.media, 'playing'); _triggerEvent(plyr.media, 'playing');
@ -2031,6 +2063,12 @@
} }
}); });
plyr.embed.on('seeked', function() {
plyr.media.seeking = false;
_triggerEvent(plyr.media, 'seeked');
_triggerEvent(plyr.media, 'play');
});
plyr.embed.on('ended', function() { plyr.embed.on('ended', function() {
plyr.media.paused = true; plyr.media.paused = true;
_triggerEvent(plyr.media, 'ended'); _triggerEvent(plyr.media, 'ended');
@ -2222,7 +2260,6 @@
// Embeds // Embeds
if (_inArray(config.types.embed, plyr.type)) { if (_inArray(config.types.embed, plyr.type)) {
// YouTube
switch(plyr.type) { switch(plyr.type) {
case 'youtube': case 'youtube':
plyr.embed.seekTo(targetTime); plyr.embed.seekTo(targetTime);
@ -2242,11 +2279,14 @@
_pause(); _pause();
} }
// Trigger timeupdate for embeds // Trigger timeupdate
_triggerEvent(plyr.media, 'timeupdate'); _triggerEvent(plyr.media, 'timeupdate');
// Set seeking flag // Set seeking flag
plyr.media.seeking = true; plyr.media.seeking = true;
// Trigger seeking
_triggerEvent(plyr.media, 'seeking');
} }
// Logging // Logging