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
Download Patch File Download Diff File Expand all files Collapse all files

8
changelog.md
View File

@ -1,16 +1,20 @@
# Changelog
## v2.0.5
- Fix for Vimeo in IE9 & IE10
- Fix for HTML5 elements not firing `ready` event
## v2.0.4
- Fix for Firefox full screen (fixes #343)
## 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
- Added 'global' keyboard shortcut option
## 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
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",
"version": "2.0.4",
"version": "2.0.5",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "http://plyr.io",
"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:
```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
@ -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:
```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
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
@ -487,7 +487,7 @@ Here's a list of the methods supported:
<tr>
<td><code>isReady()</code></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>
<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>
<td><code>ready</code></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>
<td><code>canplay</code></td>

18
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v2.0.4
// plyr.js v2.0.5
// 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.4/plyr.svg',
iconUrl: 'https://cdn.plyr.io/2.0.5/plyr.svg',
clickToPlay: true,
hideControls: true,
showPosterOnEnd: false,
@ -175,7 +175,7 @@
fullscreen: null
},
// 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
logPrefix: '[Plyr]'
};
@ -1785,8 +1785,8 @@
function _vimeoReady(mediaId, container) {
// Setup instance
// https://github.com/vimeo/player.js
plyr.embed = new window.Vimeo.Player(container.id, {
id: mediaId,
plyr.embed = new window.Vimeo.Player(container, {
id: parseInt(mediaId),
loop: config.loop,
autoplay: config.autoplay,
byline: false,
@ -3473,8 +3473,10 @@
// Everything done
function _ready() {
// Ready event
_triggerEvent(plyr.container, 'ready', true);
// Ready event at end of execution stack
window.setTimeout(function() {
_triggerEvent(plyr.media, 'ready');
}, 0);
// Set class hook on media element
_toggleClass(plyr.media, defaults.classes.setup, true);
@ -3681,7 +3683,7 @@
// Listen for events if debugging
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) {
console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr);