Component events

If you decide to replace a flowplayer component with your own, in some cases you have to listen/dispatch specific events.

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.

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. playlist property of event's attached data, is an array of player source configuration objects.

2: flowplayer.endscreen.events.RECOMMENDATIONS_HIDE - a custom event fired when a new video starts playing.

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.PLAYLIST_INTERSTITIAL - A custom event fired at the end of a playlist's video. The data attached to this event is an object with the following properties.

  • advance - a boolean, if false playlist do not advance to next video.
  • delay - a number, whose value is the number of ms before playlist's next video starts.
  • queue_item - A player source configuration object, which player will play when playlist advances.

2: 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. 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 the playlist advances. Data of event is a player source configuration object.

3: flowplayer.playlist.events.PLAYLIST_SELECTION - A custom event that you should dispatch, when an item of your playlist controls component is clicked. You should attach as data the player source configuration object that is selected

this.dispatchEvent(new CustomEvent(flowplayer.playlist.events.PLAYLIST_SELECTION, { detail: playlistItem}))

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")
By using this website you agree to our privacy policy
Results