Component events

If you decide to replace a flowplayer component with your own, in some cases you have to listen/dispatch specific events. The event bus is the component itself and not the player (The only exception to this rule are the ads related events).

Ads

1: flowplayer.ads.events.AD_RESIZE- A custom event fired when a new ad is about to start. You should listen to this event and resize your ad-ui for non-linear ads. The data attached to this event is an object with the following properties.

• linear - a boolean, true when the ad is linear.
• width - a number, which is the width of the ad if the ad is non-linear. Otherwise, 0.
• height - a number, which is the height of the ad if the ad is non-linear. Otherwise, 0.

2: flowplayer.ads.events.AD_PROGRESS - a customEvent fired when a linear ad is progressing. The data attached to this event is an object with the following properties.

• duration - a number, which is the duration of the linear ad in seconds.
• remaining - a number, which is the remaining of the ad before its end in seconds.

Audio-menu

1: flowplayer.asel.events.TRACKS- custom event fired when new audio tracks has been added to the player. The data attached to this event is an array of objects with the following properties.

• title - a string, which is the language of the track.
• onclick - a callback that takes no arguments, to be invoked when the corresponding menu item is selected.

2: flowplayer.asel.events.SWITCH - a customEvent fired when internally an audio track has been enabled. The data attached to this event is an object with the following property.

• selected_index - a number, which the index of the enabled track.

Error

1: flowplayer.ovp.events.ERROR - a custom event fired shortly after error event is fired on player. The data attached to this event is an object with the following properties

• data - the MediaError object, of player's most recent error. In some cases, depending on the type of media the player tried to load, the object could be an extension of a mediaError object with additional properties.
• formatted_data - an object that has the same two properties of a mediaError object. The values of these two properties, could be the same with the ones of the data property or different when the original data provide no sufficient information about the error.

Live-countdown

1: flowplayer.ovp.events.LIVE_COUNTDOWN_TICK - custom event fired almost every 250ms, when a stream is scheduled until the start of the stream. remaining_time property of event's attached data is a formatted string of the remaining before the start of stream.

Endscreen-interstitial

1: flowplayer.endscreen.events.RECOMMENDATIONS_RENDER - a custom event fired at the end of one video. The data attached to this event is an object with the following properties.

• playlist - an array of player source configuration objects
• on_item_selected - a callback that takes as an argument a player source configuration object. You should use this callback when one of the items of your endscreen components is clicked.

2: flowplayer.endscreen.events.RECOMMENDATIONS_HIDE - a custom event fired when the endscreen component should be hidden.

Thumbnails

1: flowplayer.thumbnails.events.THUMBNAILS_RENDER - a custom event fired when the thumbnail should be rendered. The data attached to this event is an object with the following properties.

• current - an object with all the css style properties:
  • url - the url of the thumbnail
  • x- the background-position-x of the thumbnail
  • y- the background-position-y of the thumbnail
  • h- the height of the thumbnail
  • w- the width of the thumbnail
• timestamp - the timestamp of the thumbnail in seconds.

2: flowplayer.thumbnails.events.THUMBNAILS_HIDE - a custom event fired when the thumbnail component should be hidden.

Quality-menu

1: flowplayer.qsel.events.TRACKS - a custom event fired when the set of underlying qualities of a hls or dash source has changed. The data attached to this event is an array of objects with the following properties.

• title - a string, which is the quality of the track. (1080p, 720p etc)
• onclick - a callback that takes no arguments, to be invoked when the corresponding menu item is selected.

2: flowplayer.qsel.events.SWITCH - a custom event fired when internally the quality of the video has changed. The data attached to this event is an object with the following property.

• selected_index - a number, which the index of the enabled track.

Subtitles-menu

1: flowplayer.subtitles.events.TRACKS - A custom event fired when new subtitles tracks has been added. The data attached to this event is an array of objects with the following properties.

• title - a string, which is the language of the track.
• onclick - a callback that takes no arguments, to be invoked when the corresponding menu item is selected.

2: flowplayer.subtitles.events.SWITCH - A custom event fired when internally a subtitle track has been enabled. The data attached to this event is an object with the following property.

• selected_index - a number, which the index of the enabled track.

Speed-menu

1: flowplayer.speed.events.OPTIONS - A custom event with all the speed factors. The data attached to this event is an array of objects with the following properties.

• title - a string of the speed factor.
• onclick - a callback that takes no arguments, to be invoked when the corresponding menu item is selected.

Share-menu

1: flowplayer.share.events.OPTIONS - A custom event with all share options. The data attached to this event is an array of objects with the following properties.

• title - a string, name of share option.
• icon - the icon of this option.
• onclick - a callback that takes no arguments, to be invoked when the corresponding menu item is selected.

Playlist-interstitial

1: flowplayer.playlist.events.INTERSTITIAL_NEXT_ITEM - A custom event fired at the end of a playlist's video. The data attached to this event is a player source configuration object

2: flowplayer.playlist.events.INTERSTITIAL_CANCEL - A custom event fired when the interstitial component should be hidden before the related delay is over.

3: flowplayer.playlist.events.INTERSTITIAL_END - An event that you should dispatch when, your interstitial component is hidden, and you want to start the next playlist item.

Playlist-controls

1: flowplayer.playlist.events.PLAYLIST_READY - A custom event fired when the playlist is updated. queue.members property of event's attached data, is an Array of player source configuration objects

2: flowplayer.playlist.events.PLAYLIST_NEXT - A custom event fired when one playlist item has ended and before the next one start. next_index property of event's attached data, is the number of the next queue.member that is about to play.

Timeline

Chapters-plugin

If you want to use chapters plugin, with your own timeline component, then it's up to you how the chapters will be rendered or how touch or mouse events on them will be handled. There are two events that are related with chapters plugin that you should listen to.

1: flowplayer.chapters.events.CHAPTERS_NEW - A customEvent fired when new chapters has been added. The data attached to this event is an array of objects with the following properties.

• title - a string, title of the chapter.
• left - a string, whose value is where the left edge of the chapter should be positioned. (First chapter's value will be 0)
• width - a string, whose value is the width that the chapter should have.

2: flowplayer.chapters.events.CHAPTER_CHANGED - A customEvent fired when media advances to a new chapter. Data of this event is a string whose value is the title of the current chapter.

Thumbnails-plugin

In order to make it possible to use this plugin with your own timeline-component make sure to dispatch the following events.

1: timeline/gesture/move - This event should be fired when mousemove is fired on your timeline component. Attach as data of the event, a number whose value will be the percentage of the timeline’s width at the left of the X coordinate of the event. For example, if the mouse is moved at the left edge of the timeline, then the value should be 0 and if it is moved at the right edge it should be 100.

player.emit("timeline/gesture/move", {percent})

2: timeline/gesture/end - This event should be fired when mouseleave is fired on your timeline component.

player.emit("timeline/gesture/end")