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

Added new configuration option 'handlers'

Browse Source 
This option allows developers to attach their custom handlers
before internal plyr's handlers. This should enable developers
to have full control over all the buttons including the ability
to stop event propagation if desired.
This commit is contained in:
Guru Prasad Srinivasa 2016-01-14 02:51:29 -05:00
parent cce7e9932e
commit b5092c338c
3 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

6
readme.md
View File

@ -269,6 +269,12 @@ Options must be passed as an object to the `setup()` method as above.
<td>&mdash;</td>
<td>See <code>plyr.js</code> in <code>/src</code> for more info. You probably don't need to change any of these.</td>
</tr>
<tr>
<td><code>handlers</code></td>
<td>Object</td>
<td>&mdash;</td>
<td>Allows early binding of handlers to Plyr's controls. See <code>controls</code> above for list of controls and see <code>plyr.js</code> in <code>/src</code> for more info.</td>
</tr>
<tr>
<td><code>classes</code></td>
<td>Object</td>

41
src/js/plyr.js
View File

@ -68,6 +68,18 @@
currentTime: '.plyr__time--current',
duration: '.plyr__time--duration'
},
handlers: {
seek: null,
play: null,
pause: null,
restart: null,
rewind: null,
forward: null,
mute: null,
volume: null,
captions: null,
fullscreen: null
},
classes: {
videoWrapper: 'plyr__video-wrapper',
embedWrapper: 'plyr__video-embed',
@ -2170,34 +2182,43 @@
});
}
function _registerHandler(element, event, userHandler, defaultHandler) {
_on(element, event, function(e) {
if(userHandler) {
userHandler(e);
}
defaultHandler(e);
});
}
// Play
_on(plyr.buttons.play, 'click', function() { _togglePlay(true); });
_registerHandler(plyr.buttons.play, 'click', config.handlers.play, function() { _togglePlay(true); });
// Pause
_on(plyr.buttons.pause, 'click', function() { _togglePlay(); });
_registerHandler(plyr.buttons.pause, 'click', config.handlers.pause, function() { _togglePlay(); });
// Restart
_on(plyr.buttons.restart, 'click', _seek);
_registerHandler(plyr.buttons.restart, 'click', config.handlers.restart, _seek);
// Rewind
_on(plyr.buttons.rewind, 'click', _rewind);
_registerHandler(plyr.buttons.rewind, 'click', config.handlers.rewind, _rewind);
// Fast forward
_on(plyr.buttons.forward, 'click', _forward);
_registerHandler(plyr.buttons.forward, 'click', config.handlers.forward, _forward);
// Seek
_on(plyr.buttons.seek, inputEvent, _seek);
_registerHandler(plyr.buttons.seek, inputEvent, config.handlers.seek, _seek);
// Set volume
_on(plyr.volume, inputEvent, function() {
_setVolume(this.value);
_registerHandler(plyr.volume, inputEvent, config.handlers.volume, function() {
_setVolume(plyr.volume.value);
});
// Mute
_on(plyr.buttons.mute, 'click', _toggleMute);
_registerHandler(plyr.buttons.mute, 'click', config.handlers.mute, _toggleMute);
// Fullscreen
_on(plyr.buttons.fullscreen, 'click', _toggleFullscreen);
_registerHandler(plyr.buttons.fullscreen, 'click', config.handlers.fullscreen, _toggleFullscreen);
// Handle user exiting fullscreen by escaping etc
if (fullscreen.supportsFullScreen) {