Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Add event listners to flow player using html5media

Avatar

Level 1

Hi,

I’m using http://api.html5media.info/1.1.6/html5media.min.js to use flow player on browser fallback. I want to add event listeners to flow player to capture play, pause, stop etc events. Could you please give me some guidance to do this.

Better if below method can be used without using flowplayer.js to achieve this,

html5media.configureFlowplayer = function(element, config) {
return config;
}

Appreciate swift response.

--

Thanks,

Manoj.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Go here : https://flowplayer.org/docs/api.html

Here is a part of the doc, but you better read it yourself as there is a way to do it via jquery as well. when the event happens  send the video tracking for adobe analytics

Events

Use the bind() method to execute your own JavaScript when a specified event happens in the player. For example:

api.bind("pause", function(e, api) { // do your thing });

 

The first argument is the event name, and the second is a callback function which is fed with 2 or 3 arguments:

  1. The jQuery event object. This jQuery convention allows fine grained control of the event object's properties.
  2. Provides a handle on the player API.
  3. Optional, depends on the event.

Within the callback the this keyword refers to the root element of the player - the container element. It corresponds to the currentTarget property of the first argument.

Here is a full list of events:

                                                                         
eventwhen it fires
beforeseekBefore seeking starts at the origin position. Since v5.4.2 the 3rd argument gives access to the seek target position. By callingevent.preventDefault() (where event is the callback's 1st argument) or returning false the seek can be stopped.
disableWhen the player toggles between disabled and normal state. In disabled mode the UI elements cannot be used.
errorWhen an error occurred. The 3rd argument provides an object featuring the code and message properties. See the error tablebelow.
finishWhen playback has finished.
fullscreenWhen the player goes to fullscreen mode.
fullscreen-exitWhen player exits fullscreen mode.
loadFirst event in the lifecycle of the player and the video, before the configured video or a new video starts playing. Offers an opportunity to alter the video properties. The 3rd argument provides the video object featuring basic data like src, but not yet the video metadata from the server (such as duration). Returningfalse will prevent the video from loading.
muteWhen the player's mute state is toggled.
pauseWhen playback is paused.
progressWhen the playhead moves forward. Happens approximately every 250 milliseconds during playback. The 3rd argument provides the current playback position, i.e. the current value of the timeproperty of the video object.
readyWhen the video is fully loaded and video metadata (such asduration) becomes available from the video object which is provided by the 3rd argument.
resumeWhen playback is resumed.
seekWhen seeking is completed at the target position. Since v5.4.2 the 3rd argument gives access to the target position.
speedv5.1 When the playback speed is changed. The new level is provided by the 3rd argument.
stopv5.2 When playback is stopped by the stop() method.
unloadWhen the player goes back to the splash state.
volumeWhen the volume level is changed. The new level is provided by the 3rd argument.

Note: You will often find that Flowplayer's CSS programming capabilities provide a more elegant way to customize the player's look and feel dynamically according to its state.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Go here : https://flowplayer.org/docs/api.html

Here is a part of the doc, but you better read it yourself as there is a way to do it via jquery as well. when the event happens  send the video tracking for adobe analytics

Events

Use the bind() method to execute your own JavaScript when a specified event happens in the player. For example:

api.bind("pause", function(e, api) { // do your thing });

 

The first argument is the event name, and the second is a callback function which is fed with 2 or 3 arguments:

  1. The jQuery event object. This jQuery convention allows fine grained control of the event object's properties.
  2. Provides a handle on the player API.
  3. Optional, depends on the event.

Within the callback the this keyword refers to the root element of the player - the container element. It corresponds to the currentTarget property of the first argument.

Here is a full list of events:

                                                                         
eventwhen it fires
beforeseekBefore seeking starts at the origin position. Since v5.4.2 the 3rd argument gives access to the seek target position. By callingevent.preventDefault() (where event is the callback's 1st argument) or returning false the seek can be stopped.
disableWhen the player toggles between disabled and normal state. In disabled mode the UI elements cannot be used.
errorWhen an error occurred. The 3rd argument provides an object featuring the code and message properties. See the error tablebelow.
finishWhen playback has finished.
fullscreenWhen the player goes to fullscreen mode.
fullscreen-exitWhen player exits fullscreen mode.
loadFirst event in the lifecycle of the player and the video, before the configured video or a new video starts playing. Offers an opportunity to alter the video properties. The 3rd argument provides the video object featuring basic data like src, but not yet the video metadata from the server (such as duration). Returningfalse will prevent the video from loading.
muteWhen the player's mute state is toggled.
pauseWhen playback is paused.
progressWhen the playhead moves forward. Happens approximately every 250 milliseconds during playback. The 3rd argument provides the current playback position, i.e. the current value of the timeproperty of the video object.
readyWhen the video is fully loaded and video metadata (such asduration) becomes available from the video object which is provided by the 3rd argument.
resumeWhen playback is resumed.
seekWhen seeking is completed at the target position. Since v5.4.2 the 3rd argument gives access to the target position.
speedv5.1 When the playback speed is changed. The new level is provided by the 3rd argument.
stopv5.2 When playback is stopped by the stop() method.
unloadWhen the player goes back to the splash state.
volumeWhen the volume level is changed. The new level is provided by the 3rd argument.

Note: You will often find that Flowplayer's CSS programming capabilities provide a more elegant way to customize the player's look and feel dynamically according to its state.