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

Vimeo IE9/10 (Fixes #348), HTML5 ready event (Fixes #349)

Browse Source
This commit is contained in:
Sam Potts 2016-08-26 18:15:24 +10:00
parent 6694c1e6cf
commit 1ced6b4d67
7 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
changelog.md
View File

@ -1,16 +1,20 @@
# Changelog # Changelog
## v2.0.5
- Fix for Vimeo in IE9 & IE10
- Fix for HTML5 elements not firing `ready` event
## v2.0.4 ## v2.0.4
- Fix for Firefox full screen (fixes #343) - Fix for Firefox full screen (fixes #343)
## v2.0.3 ## v2.0.3
- Set 'global' keyboard shortcut option to false as default, added `<textarea>` to editable elements to be ignored. - Set 'global' keyboard shortcut option to false as default, added `<textarea>` to editable elements to be ignored
## v2.0.2 ## v2.0.2
- Added 'global' keyboard shortcut option - Added 'global' keyboard shortcut option
## v2.0.1 ## v2.0.1
- Version bump for NPM - Version bump for NPM (sorry for folks who upgraded to the now deleted v1.9.0 through NPM)
# v2.0.0 # v2.0.0
This version contains several potential ***breaking changes***: This version contains several potential ***breaking changes***:

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

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.4", "version": "2.0.5",
"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",

10
readme.md
View File

@ -122,7 +122,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.4/plyr.js"></script> <script src="https://cdn.plyr.io/2.0.5/plyr.js"></script>
``` ```
### CSS ### CSS
@ -135,11 +135,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.4/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/2.0.5/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.4/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.5/plyr.svg`.
## Advanced ## Advanced
@ -487,7 +487,7 @@ Here's a list of the methods supported:
<tr> <tr>
<td><code>isReady()</code></td> <td><code>isReady()</code></td>
<td>&mdash;</td> <td>&mdash;</td>
<td>Determine if the player is loaded and UI ready - this is because HTML5 is ready instantly but YouTube and Vimeo can take some time to load their APIs.</td> <td>Determine if the player is loaded and UI ready.</td>
</tr> </tr>
<tr> <tr>
<td><code>on()</code></td> <td><code>on()</code></td>
@ -736,7 +736,7 @@ These events also bubble up the DOM. The event target will be the container elem
<tr> <tr>
<td><code>ready</code></td> <td><code>ready</code></td>
<td></td> <td></td>
<td>Triggered when the instance is ready for API use and external APIs are ready (YouTube and Vimeo).</td> <td>Triggered when the instance is ready for API use and external APIs are ready (in the case of YouTube and Vimeo).</td>
</tr> </tr>
<tr> <tr>
<td><code>canplay</code></td> <td><code>canplay</code></td>

18
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v2.0.4 // plyr.js v2.0.5
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -43,7 +43,7 @@
displayDuration: true, displayDuration: true,
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/2.0.4/plyr.svg', iconUrl: 'https://cdn.plyr.io/2.0.5/plyr.svg',
clickToPlay: true, clickToPlay: true,
hideControls: true, hideControls: true,
showPosterOnEnd: false, showPosterOnEnd: false,
@ -175,7 +175,7 @@
fullscreen: null fullscreen: null
}, },
// Events to watch on HTML5 media elements // Events to watch on HTML5 media elements
events: ['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', 'emptied'],
// Logging // Logging
logPrefix: '[Plyr]' logPrefix: '[Plyr]'
}; };
@ -1785,8 +1785,8 @@
function _vimeoReady(mediaId, container) { function _vimeoReady(mediaId, container) {
// Setup instance // Setup instance
// https://github.com/vimeo/player.js // https://github.com/vimeo/player.js
plyr.embed = new window.Vimeo.Player(container.id, { plyr.embed = new window.Vimeo.Player(container, {
id: mediaId, id: parseInt(mediaId),
loop: config.loop, loop: config.loop,
autoplay: config.autoplay, autoplay: config.autoplay,
byline: false, byline: false,
@ -3473,8 +3473,10 @@
// Everything done // Everything done
function _ready() { function _ready() {
// Ready event // Ready event at end of execution stack
_triggerEvent(plyr.container, 'ready', true); window.setTimeout(function() {
_triggerEvent(plyr.media, 'ready');
}, 0);
// Set class hook on media element // Set class hook on media element
_toggleClass(plyr.media, defaults.classes.setup, true); _toggleClass(plyr.media, defaults.classes.setup, true);
@ -3681,7 +3683,7 @@
// Listen for events if debugging // Listen for events if debugging
if (config.debug) { if (config.debug) {
var events = config.events.concat(['setup', 'ready', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']); var events = config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']);
_on(instance.getContainer(), events.join(' '), function(event) { _on(instance.getContainer(), events.join(' '), function(event) {
console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr); console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr);