Component events

If you decide to replace a flowplayer component with your own, in some cases you have to listen or dispatch specific events. The event bus is the component itself, not the player. The only exception to this rule is for ad-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, signifying the width of the ad if the ad is non-linear. Otherwise, 0.
  • height - A number, signifying the height of the ad if the ad is non-linear. Otherwise, 0.

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

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

Audio-menu

1. flowplayer.asel.events.TRACKS- A custom event fired when new audio tracks have 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 custom event 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 is 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 a 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 as those of the data property or different when the original data provides no sufficient information about the error.

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.

Quality-menu

1. flowplayer.qsel.events.TRACKS - A custom event fired when the set of underlying qualities of an 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 is the index of the enabled track.

Subtitles-menu

1. flowplayer.subtitles.events.TRACKS - A custom event fired when new subtitles tracks were 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 is 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, which is the name of the share option.
  • icon - The icon of the 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.

4. flowplayer.playlist.events.PLAYLIST_INTERSTITIAL_END - A custom event fired when a new video starts playing.

Playlist-controls

1. flowplayer.playlist.events.PLAYLIST_READY - A custom event fired when the playlist is updated. The 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 starts. next_index property of event's attached data is the number of the next queue.member that is about to play.

Info

When one of the items of your playlist's controls component is clicked, use playlist's play api method.

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.

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 the chapters plugin that you should listen to. Those are:

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. The 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.

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

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

Copy
Copied
player.emit("timeline/gesture/end")
© 2007-2024 Wowza Media Systems, ™ LLC. All rights reserved.   Security & Privacy Policy | Legal | System Status