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.
Solved! Go to Solution.
Views
Replies
Total Likes
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
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:
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:
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 time property 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. |
unload | When the player goes back to the splash state. |
volume | 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.
Views
Replies
Total Likes
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
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:
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:
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 time property 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. |
unload | When the player goes back to the splash state. |
volume | 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.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies