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

Event listeners

Browse Source
This commit is contained in:
Sam Potts 2016-01-19 00:30:25 +11:00
parent 5b2a016241
commit b81b8c1d31
5 changed files with 223 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
changelog.md
View File

@ -1,7 +1,15 @@
# Changelog
## v1.5.2
- `handlers` option renamed to `listeners`
- Added event listeners for all types to the plyr container (playback, fullscreen, captions etc - see docs)
- Removed onSetup config option (use the 'setup' event instead, plyr element is event.plyr)
- Style bug fixes
- Vimeo seek bug fix (requires whole seconds when seeking)
- Fix for fullscreen player (using class hook, not browser fullscreen)
## v1.5.1
- Fix for event listeners being duplicated on source change
- Fix for event listeners being duplicated on source change
# v1.5.0
- Vimeo support (fixes #8)

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

3
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

144
readme.md
View File

@ -305,12 +305,6 @@ Options must be passed as an object to the `setup()` method as above.
<td>&mdash;</td>
<td>Two properties; <code>enabled</code> which toggles if local storage should be enabled (if the browser supports it). The default value is `true`. This enables storing user settings, currently it only stores volume but more will be added later. The second property <code>key</code> is the key used for the local storage. The default is <code>plyr_volume</code> until more settings are stored.</td>
</tr>
<tr>
<td><code>onSetup</code></td>
<td>Function</td>
<td>&mdash;</td>
<td>This callback function is called on every new plyr instance created. The context (<code>this</code>) is the plyr instance itself.</td>
</tr>
</tbody>
</table>
@ -370,7 +364,7 @@ Or you can use the returned object from your call to the setup method:
var player = plyr.setup('.js-plyr')[0];
```
This will return an array of plyr instances setup, so you need to specify the index of the instance you want. This is less useful if you are setting up mutliple instances. You can also use the `onSetup` callback documented below which will return each instance one by one, as they are setup.
This will return an array of plyr instances setup, so you need to specify the index of the instance you want. This is less useful if you are setting up mutliple instances. You can listen for the `setup` [event](#events) documented below which will return each instance one by one, as they are setup (in the `plyr` key of the event object).
Once you have your instance, you can use the API methods below on it. For example to pause it:
@ -605,19 +599,139 @@ Some more details on the object parameters
</table>
## Events/Callbacks
## Events
The `plyr` object on the player element also contains a `media` property which is a reference to the `<audio>` or `<video>` element within the player which you can use to listen for events. Here's an example:
You can listen for events on the element you setup Plyr on. Some events only apply to HTML5 audio and video.
<table class="table" width="100%">
<thead>
<tr>
<th width="20%">Event name</th>
<th width="20%">HTML5 only</th>
<th width="60%">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><a href="/en-US/docs/Web/Events/canplay" title="/en-US/docs/Web/Events/canplay">canplay</a></code></td>
<td>✔</td>
<td>Sent when enough data is available that the media can be played, at least for a couple of frames.&nbsp; This corresponds to the <code>HAVE_ENOUGH_DATA</code>&nbsp;<code>readyState</code>.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/canplaythrough" title="/en-US/docs/Web/Events/canplaythrough">canplaythrough</a></code></td>
<td></td>
<td>Sent when the ready state changes to <code>CAN_PLAY_THROUGH</code>, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. <strong>Note</strong>: Manually setting the <code>currentTime</code> will eventually fire a <code>canplaythrough</code> event in firefox. Other browsers might not fire this event.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/emptied" title="/en-US/docs/Web/Events/emptied">emptied</a></code></td>
<td>✔</td>
<td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" class="internal" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a>&nbsp;method is called to reload it.</td>
</tr>
<tr>
<td><code>ended</code></td>
<td></td>
<td>Sent when playback completes.</td>
</tr>
<tr>
<td><code>error</code></td>
<td>✔</td>
<td>Sent when an error occurs.&nbsp; The element's <code>error</code> attribute contains more information. See <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Error_handling">Error handling</a> for details.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/loadeddata" title="/en-US/docs/Web/Events/loadeddata">loadeddata</a></code></td>
<td>✔</td>
<td>The first frame of the media has finished loading.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/loadedmetadata" title="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a></code></td>
<td>✔</td>
<td>The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/loadstart" title="/en-US/docs/Web/Events/loadstart">loadstart</a></code></td>
<td>✔</td>
<td>Sent when loading of the media begins.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/pause" title="/en-US/docs/Web/Events/pause">pause</a></code></td>
<td></td>
<td>Sent when playback is paused.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/play" title="/en-US/docs/Web/Events/play">play</a></code></td>
<td></td>
<td>Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior <code>pause</code> event.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/playing" title="/en-US/docs/Web/Events/playing">playing</a></code></td>
<td></td>
<td>Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/progress" title="/en-US/docs/Web/Events/progress">progress</a></code></td>
<td></td>
<td>Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's <code>buffered</code> attribute.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/seeked" title="/en-US/docs/Web/Events/seeked">seeked</a></code></td>
<td>✔</td>
<td>Sent when a seek operation completes.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/seeking" title="/en-US/docs/Web/Events/seeking">seeking</a></code></td>
<td>✔</td>
<td>Sent when a seek operation begins.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/stalled" title="/en-US/docs/Web/Events/stalled">stalled</a></code></td>
<td>✔</td>
<td>Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/timeupdate" title="/en-US/docs/Web/Events/timeupdate">timeupdate</a></code></td>
<td></td>
<td>The time indicated by the element's <code>currentTime</code> attribute has changed.</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/volumechange" title="/en-US/docs/Web/Events/volumechange">volumechange</a></code></td>
<td></td>
<td>Sent when the audio volume changes (both when the volume is set and when the <code>muted</code> attribute is changed).</td>
</tr>
<tr>
<td><code><a href="/en-US/docs/Web/Events/waiting" title="/en-US/docs/Web/Events/waiting">waiting</a></code></td>
<td>✔</td>
<td>Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).</td>
</tr>
<tr>
<td><code>enterfullscreen</code></td>
<td></td>
<td>User enters fullscreen (either the proper fullscreen or full-window fallback for older browsers)</td>
</tr>
<tr>
<td><code>exitfullscreen</code></td>
<td></td>
<td>User exits fullscreen</td>
</tr>
<tr>
<td><code>captionsenabled</code></td>
<td></td>
<td>Captions toggled on</td>
</tr>
<tr>
<td><code>captionsdisabled</code></td>
<td></td>
<td>Captions toggled off</td>
</tr>
</tbody>
</table>
Here's an example of binding an event listener:
```javascript
var media = document.querySelector(".js-plyr").plyr.media;
media.addEventListener("playing", function() {
console.log("playing");
document.querySelector(".js-plyr").addEventListener("playing", function() {
/* Magic happens */
});
```
A complete list of events can be found here:
[Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)
## Embeds

126
src/js/plyr.js
View File

@ -92,18 +92,6 @@
},
tabFocus: 'tab-focus'
},
handlers: {
seek: null,
play: null,
pause: null,
restart: null,
rewind: null,
forward: null,
mute: null,
volume: null,
captions: null,
fullscreen: null
},
captions: {
defaultActive: false
},
@ -138,6 +126,7 @@
embed: ['youtube', 'vimeo'],
html5: ['video', 'audio']
},
// URLs
urls: {
vimeo: {
api: 'https://cdn.plyr.io/froogaloop/1.0.0/plyr.froogaloop.js',
@ -145,7 +134,22 @@
youtube: {
api: 'https://www.youtube.com/iframe_api'
}
}
},
// Custom control listeners
listeners: {
seek: null,
play: null,
pause: null,
restart: null,
rewind: null,
forward: null,
mute: null,
volume: null,
captions: null,
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']
};
// Build the default HTML
@ -529,36 +533,36 @@
// Bind event
function _on(element, events, callback) {
if (element) {
_toggleHandler(element, events, callback, true);
_toggleListener(element, events, callback, true);
}
}
// Unbind event
function _off(element, events, callback) {
if (element) {
_toggleHandler(element, events, callback, false);
_toggleListener(element, events, callback, false);
}
}
// Bind along with custom handler
function _proxyHandler(element, eventName, userHandler, defaultHandler) {
function _proxyListener(element, eventName, userListener, defaultListener) {
_on(element, eventName, function(event) {
if(userHandler) {
userHandler.apply(element, [event]);
if(userListener) {
userListener.apply(element, [event]);
}
defaultHandler.apply(element, [event]);
defaultListener.apply(element, [event]);
});
}
// Toggle event handler
function _toggleHandler(element, events, callback, toggle) {
// Toggle event listener
function _toggleListener(element, events, callback, toggle) {
var eventList = events.split(' ');
// If a nodelist is passed, call itself on each node
if (element instanceof NodeList) {
for (var x = 0; x < element.length; x++) {
if (element[x] instanceof Node) {
_toggleHandler(element[x], arguments[1], arguments[2], arguments[3]);
_toggleListener(element[x], arguments[1], arguments[2], arguments[3]);
}
}
return;
@ -571,20 +575,17 @@
}
// Trigger event
function _triggerEvent(element, event) {
function _triggerEvent(element, eventName, properties) {
// Bail if no element
if(!element || !event) {
if(!element || !eventName) {
return;
}
// Create faux event
var fauxEvent = document.createEvent('MouseEvents');
// Set the event type
fauxEvent.initEvent(event, true, true);
// create and dispatch the event
var event = new CustomEvent(eventName, properties);
// Dispatch the event
element.dispatchEvent(fauxEvent);
element.dispatchEvent(event);
}
// Toggle aria-pressed state on a toggle button
@ -1241,6 +1242,9 @@
// Bail if we're at 100%
if (plyr.media.buffered === 1) {
window.clearInterval(plyr.timer.buffering);
// Trigger event
_triggerEvent(plyr.media, 'canplaythrough');
}
}, 200);
@ -1274,6 +1278,7 @@
plyr.media.paused = false;
plyr.media.seeking = false;
_triggerEvent(plyr.media, 'play');
_triggerEvent(plyr.media, 'playing');
// Poll to get playback progress
plyr.timer.playing = window.setInterval(function() {
@ -1289,6 +1294,7 @@
case 2:
plyr.media.paused = true;
_triggerEvent(plyr.media, 'pause');
break;
}
}
}
@ -1339,6 +1345,7 @@
plyr.embed.addEvent('play', function() {
plyr.media.paused = false;
_triggerEvent(plyr.media, 'play');
_triggerEvent(plyr.media, 'playing');
});
plyr.embed.addEvent('pause', function() {
@ -1355,6 +1362,11 @@
plyr.embed.addEvent('loadProgress', function(data) {
plyr.media.buffered = data.percent;
_triggerEvent(plyr.media, 'progress');
if(parseInt(data.percent) === 1) {
// Trigger event
_triggerEvent(plyr.media, 'canplaythrough');
}
});
plyr.embed.addEvent('finish', function() {
@ -1759,11 +1771,14 @@
_toggleClass(plyr.controls, config.classes.hover, false);
// Keep an eye on the mouse location in relation to controls
_toggleHandler(plyr.controls, 'mouseenter mouseleave', _setMouseOver, plyr.isFullscreen);
_toggleListener(plyr.controls, 'mouseenter mouseleave', _setMouseOver, plyr.isFullscreen);
// Show the controls on mouse move
_toggleHandler(plyr.container, 'mousemove', _showControls, plyr.isFullscreen);
_toggleListener(plyr.container, 'mousemove', _showControls, plyr.isFullscreen);
}
// Trigger an event
_triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen');
}
// Bail from faux-fullscreen
@ -1899,6 +1914,9 @@
// Add class hook
_toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
// Trigger an event
_triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled');
}
// Check if media is loading
@ -2267,33 +2285,33 @@
}
// Play
_proxyHandler(plyr.buttons.play, 'click', config.handlers.play, _togglePlay);
_proxyListener(plyr.buttons.play, 'click', config.listeners.play, _togglePlay);
// Pause
_proxyHandler(plyr.buttons.pause, 'click', config.handlers.pause, _togglePlay);
_proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, _togglePlay);
// Restart
_proxyHandler(plyr.buttons.restart, 'click', config.handlers.restart, _seek);
_proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, _seek);
// Rewind
_proxyHandler(plyr.buttons.rewind, 'click', config.handlers.rewind, _rewind);
_proxyListener(plyr.buttons.rewind, 'click', config.listeners.rewind, _rewind);
// Fast forward
_proxyHandler(plyr.buttons.forward, 'click', config.handlers.forward, _forward);
_proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward);
// Seek
_proxyHandler(plyr.buttons.seek, inputEvent, config.handlers.seek, _seek);
_proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek);
// Set volume
_proxyHandler(plyr.volume, inputEvent, config.handlers.volume, function() {
_proxyListener(plyr.volume, inputEvent, config.listeners.volume, function() {
_setVolume(plyr.volume.value);
});
// Mute
_proxyHandler(plyr.buttons.mute, 'click', config.handlers.mute, _toggleMute);
_proxyListener(plyr.buttons.mute, 'click', config.listeners.mute, _toggleMute);
// Fullscreen
_proxyHandler(plyr.buttons.fullscreen, 'click', config.handlers.fullscreen, _toggleFullscreen);
_proxyListener(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, _toggleFullscreen);
// Handle user exiting fullscreen by escaping etc
if (fullscreen.supportsFullScreen) {
@ -2353,6 +2371,11 @@
// Loading
_on(plyr.media, 'waiting canplay seeked', _checkLoading);
// Proxy events to container
_on(plyr.media, config.events.join(' '), function(event) {
_triggerEvent(plyr.container, event.type);
});
}
// Destroy an instance
@ -2643,9 +2666,7 @@
element.plyr = (Object.keys(instance).length ? instance : false);
// Callback
if (typeof config.onSetup === 'function') {
config.onSetup.apply(element.plyr);
}
_triggerEvent(element, 'setup', { plyr: element.plyr });
}
// Add to return array even if it's already setup
@ -2657,3 +2678,20 @@
return api;
}));
// Custom event polyfill
//
(function () {
function CustomEvent (event, params) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
CustomEvent.prototype = window.Event.prototype;
if(!('CustomEvent' in window)) {
window.CustomEvent = CustomEvent;
}
})();