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,
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:
The jQuery event object. This jQuery convention allows fine grained control of the event object's properties.
Provides a handle on the player API.
Optional, depends on the event.
Within the callback the thiskeyword 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:
event
when it fires
beforeseek
Before 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.
disable
When the player toggles between disabled and normal state. In disabled mode the UI elements cannot be used.
error
When an error occurred. The 3rd argument provides an object featuring the code and message properties. See the error tablebelow.
finish
When playback has finished.
fullscreen
When the player goes to fullscreen mode.
fullscreen-exit
When player exits fullscreen mode.
load
First 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.
mute
When the player's mute state is toggled.
pause
When playback is paused.
progress
When 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.
ready
When the video is fully loaded and video metadata (such asduration) becomes available from the video object which is provided by the 3rd argument.
resume
When playback is resumed.
seek
When seeking is completed at the target position. Since v5.4.2 the 3rd argument gives access to the target position.
speed
v5.1 When the playback speed is changed. The new level is provided by the 3rd argument.
stop
v5.2 When playback is stopped by the stop()method.
When 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.
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:
The jQuery event object. This jQuery convention allows fine grained control of the event object's properties.
Provides a handle on the player API.
Optional, depends on the event.
Within the callback the thiskeyword 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:
event
when it fires
beforeseek
Before 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.
disable
When the player toggles between disabled and normal state. In disabled mode the UI elements cannot be used.
error
When an error occurred. The 3rd argument provides an object featuring the code and message properties. See the error tablebelow.
finish
When playback has finished.
fullscreen
When the player goes to fullscreen mode.
fullscreen-exit
When player exits fullscreen mode.
load
First 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.
mute
When the player's mute state is toggled.
pause
When playback is paused.
progress
When 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.
ready
When the video is fully loaded and video metadata (such asduration) becomes available from the video object which is provided by the 3rd argument.
resume
When playback is resumed.
seek
When seeking is completed at the target position. Since v5.4.2 the 3rd argument gives access to the target position.
speed
v5.1 When the playback speed is changed. The new level is provided by the 3rd argument.
stop
v5.2 When playback is stopped by the stop()method.
When 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.