Player events
// Use it from Playable object
import Playable from 'playable';
console.log(Playable.VIDEO_EVENTS);
// Use destruction
import { VIDEO_EVENTS } from 'playable';
console.log(VIDEO_EVENTS);
Add new event listeners
player.on(Playable.UI_EVENTS.PLAY_CLICK, () => {
// Will be executed after you will click on play button
});
// To supply a context value for `this` when the callback is invoked,
// pass the optional context argument
player.on(Playable.VIDEO_EVENTS.UPLOAD_STALLED, this.handleStalledUpload, this);
And remove them
const callback = function() {
// Code to handle some kind of event
};
// ... Now callback will be called when some one will pause the video ...
player.on(Playable.UI_EVENTS.PAUSE_CLICK, callback);
// ... callback will no longer be called.
player.off(Playable.UI_EVENTS.PAUSE_CLICK, callback);
// ... remove all handlers for event UI_EVENTS.PAUSE_CLICK.
player.off(Playable.UI_EVENTS.PAUSE_CLICK);
You can create listeners for events triggered by the video player, using on method. To remove a listener, use off.
Below you can see the events that can be passed as eventName.
Video Events
VIDEO_EVENTS.ERROR
- Error occured. You can check all errors below.
VIDEO_EVENTS.STATE_CHANGED
- Playback state changed. You can check all states below.
VIDEO_EVENTS.DYNAMIC_CONTENT_ENDED
- Live stream ended. Use VIDEO_EVENTS.LIVE_STATE_CHANGED
for more live states.
VIDEO_EVENTS.LIVE_STATE_CHANGED
- Live video state changed. You can check all states below.
VIDEO_EVENTS.CHUNK_LOADED
- Chunk of video loaded.
VIDEO_EVENTS.CURRENT_TIME_UPDATED
- Updated current time of playback.
VIDEO_EVENTS.DURATION_UPDATED
- Duration of video updated.
VIDEO_EVENTS.VOLUME_CHANGED
- Volume changed.
VIDEO_EVENTS.MUTE_CHANGED
- Video muted or unmuted.
VIDEO_EVENTS.SOUND_STATE_CHANGED
- Sound state changed. It will emit on both volume changes or muted\unmute.
VIDEO_EVENTS.SEEK_IN_PROGRESS
- Triggers when video tag processing seek.
VIDEO_EVENTS.UPLOAD_STALLED
- Upload stalled for some reason.
VIDEO_EVENTS.UPLOAD_SUSPEND
- Upload suspended for some reason.
VIDEO_EVENTS.PLAY_REQUEST
- Player was requested for play.
VIDEO_EVENTS.PLAY_ABORTED
- Player aborted play request.
VIDEO_EVENTS.RESET
- Triggers when player reseting playback.
UI Events
UI_EVENTS.PLAY_CLICK
- User click on play control.
UI_EVENTS.PLAY_OVERLAY_CLICK
- User click on overlay play button.
UI_EVENTS.PAUSE_CLICK
- User triggered pause.
UI_EVENTS.PROGRESS_CHANGE
- User changed current time of playback.
UI_EVENTS.PROGRESS_DRAG_STARTED
- User's drag on progress bar started.
UI_EVENTS.PROGRESS_DRAG_ENDED
- User's drag on progress bar finished.
UI_EVENTS.PROGRESS_SYNC_BUTTON_MOUSE_ENTER
- Mouse entered boundaries of progress bar's sync with live button.
UI_EVENTS.PROGRESS_SYNC_BUTTON_MOUSE_LEAVE
- Mouse left boundaries of progress bar's sync with live button.
UI_EVENTS.PROGRESS_USER_PREVIEWING_FRAME
- User previewing frames on progress bar.
UI_EVENTS.VOLUME_CHANGE
- User changed volume with volume control.
UI_EVENTS.MUTE_CLICK
- User clicks on mute button.
UI_EVENTS.UNMUTE_CLICK
- User clicks on unmute button.
UI_EVENTS.ENTER_FULL_SCREEN_CLICK
- User clicks on enter full screen button.
UI_EVENTS.EXIT_FULL_SCREEN_CLICK
- User clicks on exit full screen button.
UI_EVENTS.MOUSE_ENTER_ON_PLAYER
- Mouse entered player boundaries.
UI_EVENTS.MOUSE_MOVE_ON_PLAYER
- Mouse moved in player boundaries.
UI_EVENTS.MOUSE_LEAVE_ON_PLAYER
- Mouse left player boundaries.
UI_EVENTS.MAIN_BLOCK_SHOW
- Main UI block appeared.
UI_EVENTS.MAIN_BLOCK_HIDE
- Main UI block disappeared.
UI_EVENTS.LOADER_SHOW
- Loader appeared.
UI_EVENTS.LOADER_HIDE
- Loader disappeared.
UI_EVENTS.LOADING_COVER_SHOW
- Loading cover appeared.
UI_EVENTS.LOADING_COVER_HIDE
- Loading cover disappeared.
UI_EVENTS.TOGGLE_PLAYBACK_WITH_KEYBOARD
- Playback toggled via keyboard.
UI_EVENTS.GO_BACKWARD_WITH_KEYBOARD
- Go backward in playback triggered via keyboard.
UI_EVENTS.GO_FORWARD_WITH_KEYBOARD
- Go forward in playback triggered via keyboard.
UI_EVENTS.INCREASE_VOLUME_WITH_KEYBOARD
- Volume increased via keyboard.
UI_EVENTS.DECREASE_VOLUME_WITH_KEYBOARD
- Volume decreased via keyboard.
UI_EVENTS.MUTE_WITH_KEYBOARD
- Sound muted via keyboard.
UI_EVENTS.UNMUTE_WITH_KEYBOARD
- Soune unmuted via keyobard.
UI_EVENTS.HIDE_INTERACTION_INDICATOR
- Interaction indicator disappeared.
UI_EVENTS.PLAY_WITH_SCREEN_CLICK
- User triggered play via click on screen.
UI_EVENTS.PAUSE_WITH_SCREEN_CLICK
- Uset triggered pause via click on screen.
UI_EVENTS.ENTER_FULL_SCREEN_WITH_SCREEN_CLICK
- User triggered enter full screen via dblclick on screen.
UI_EVENTS.EXIT_FULL_SCREEN_WITH_SCREEN_CLICK
- Uset triggered exit full screen via dblclick on screen.
UI_EVENTS.CONTROL_DRAG_START
- User started drag control.
UI_EVENTS.CONTROL_DRAG_END
- Uset ended drag control.
UI_EVENTS.KEYBOARD_KEYDOWN_INTERCEPTED
- User pressed keyboard button on player.
UI_EVENTS.FULL_SCREEN_STATE_CHANGED
- Full screen state of player somehow changed.
UI_EVENTS.RESIZE
- Triggers when size of player boundaries changed(via entering in full screen or usage of API for changins size of player).
Errors
ERRORS.MANIFEST_LOAD
- Cannot load manifest.
ERRORS.MANIFEST_PARSE
- Cannot parse manifest.
ERRORS.MANIFEST_INCOMPATIBLE
- Current system is not fit requirements of manifest.
ERRORS.LEVEL_LOAD
- Cannot load level of video.
ERRORS.CONTENT_LOAD
- Cannot load content of video.
ERRORS.MEDIA
- Problem with playing video.
ERRORS.UNKNOWN
- Unknown error.
Playback States
ENGINE_STATES.SRC_SET
- Source of video setted in player.
ENGINE_STATES.LOAD_STARTED
- Player started loading of video data.
ENGINE_STATES.METADATA_LOADED
- Player loaded video metadata.
ENGINE_STATES.READY_TO_PLAY
- Player ready to play something.
ENGINE_STATES.SEEK_IN_PROGRESS
- Seek in progress.
ENGINE_STATES.PLAY_REQUESTED
- Player was requested for play.
ENGINE_STATES.WAITING
- Player is waiting for content to download.
ENGINE_STATES.PLAYING
- Player is playing video.
ENGINE_STATES.PAUSED
- Player paused video.
ENGINE_STATES.ENDED
- Video ended.
Live States
LIVE_STATES.NONE
- Video is not live stream or metadata is not loaded yet.
LIVE_STATES.INITIAL
- Player loaded metadata and video is live stream.
LIVE_STATES.NOT_SYNC
- Video is live stream but not sync with live.
LIVE_STATES.SYNC
- Video is live stream and sync with live.
LIVE_STATES.ENDED
- Video is live stream but stream is ended.