Introduction
AmstramgramAudioPlayer and AmstramgramMediaPlayer classes both extends a small utility EventEmitter class.
So they can emit events and listen to them.
Listening to an event is set through the on method.
The off method stops the listening.
//Listening to the mouse click event on the playPause button.
myPlayer.on('amst__playPause-click', function onPlayPauseClick() {
//this = myPlayer
console.log(this, 'playPause button has been clicked')
//Stop listening.
this.off('amst__playPause-click', onPlayPauseClick)
})
You can check all the events generated by the video player of the PLAYLIST demo in your browser console.
The player instance emits an event for each button click.
The event name is of the form : amst__<buttonName>-click.
Thus, for the mute button, it will be : amst__mute-click.
The event transmits the button instance and the original event.
//Listening to the mouse click event on the playPause and the mute buttons.
myPlayer.on('amst__playPause-click amst__mute-click', (button, event) => {
//Will output "The playPause button has been clicked"
//when click occurs on playPause button
//and "The mute button has been clicked"
//when click occurs on mute button
console.log("The " + button.name + " button has been clicked")
//Will output the button properties
console.log(button.params)
//Will output the original event
console.log(event)
})
Likewise, an event is emitted whenever a button has been updated.
And the event name is on the form : amst__<buttonName>-update.
Thus, for the mute button, it will be : amst__mute-update.
The event transmits the button instance.
error
amst__error
Emit when media src can't be found.
fullscreen-enter
amst__fullscreen-enter
Emit after video player enters fullscreen.
fullscreen-exit
amst__fullscreen-exit
Emit after video player exits fullscreen.
playbackRate-change
amst__playbackRate-change
Emit after the source playbackRate has been changed.
Transmits the old and the new values.
//Listening to the amst__playbackRate-change.
myPlayer.on('amst__playbackRate-change', (oldValue, newValue) => {
console.log("Playback rate has changed from " + oldValue + " to " + newValue)
})
Check it in your browser console with the video playlist demo.
quality-change
amst__quality-change
Emit after the source quality has been changed.
Transmits the old and the new values.
//Listening to the amst__quality-change event.
myPlayer.on('amst__quality-change', (oldValue, newValue) => {
console.log("Quality has changed from " + oldValue + " to " + newValue)
})
pause
amst__pause
Emit after player pauses.
play
amst__play
Emit after player plays.
reset
amst__reset
Emit after player reset.
Most of mobile browsers don't like to load multiple media elements.
The reset method is called on the last player used when another player starts.
When a player is reset :
- its src is set to undefined;
- its preload attribute to 'none';
- its autoplay attribute to false;
- its src and currentTime are then restored.
resize
amst__resize
Emit after player resizes.
The class watches the window resize and scroll events through a requestAnimationFrame and dispatches a throttled amst__optimizedScrollResize event that players listen to. This listener is also triggered by the amst__should-resize event internally dispatched by the UI elements when they are updated.
settings-change
amst__settings-change
Emit after the player settings has been changed.
Transmits the name (playbackRate, quality or subs) of the changed setting and its old and new values.
//Listening to the amst__settings-change event.
myPlayer.on('amst__settings-change', (settingName, oldValue, newValue) => {
console.log(settingName + " has changed from " + oldValue + " to " + newValue)
})
src-change
amst__src-change
Emit when player source changes.
subs-change
amst__subs-change
Emit after the subtitles language has been changed.
Transmits the old and the new values.
//Listening to the amst__subs-change event.
myPlayer.on('amst__subs-change', (oldValue, newValue) => {
console.log("Subtitles language has changed from " + oldValue + " to " + newValue)
})