Here are some tips about how to tweak the FV Flowplayer (2.1.32+) behavior.

Available WordPress filters

You probably already know how WordPress filters work, you can read the Filter Reference on wordpress.org here.

List of available filters:

  • fv_flowplayer_ad_html - allows you to customize what's in the ad which shows once the video starts playing. You can use global $post to check what post is being served.
  • fv_flowplayer_autobuffer_limit - customize how many videos should be autobuffering when the plugin option is enabled. Default is 2.
  • fv_flowplayer_amazon_expires - allows you to customize the URL expiry time in seconds. First argument is the duration and second is the file URL
  • fv_flowplayer_amazon_secure_exclude - allows you to exclude URL from the process or adding the access tokens. File URL is the argument, return true to skip the file.
  • fv_flowplayer_attributes - first parameter is an array of all the player DIV element attributes, second is the video URL. You can use global $post to check what post is being served. The most important attributes are:
    • class - CSS class of the element
    • data-cuepoints - allows you to put in cuepoints. Use
    • data-embed - set to "false" to disable embeding of video
    • data-engine - set to "flash" to prefer Flash for the video
    • data-fullscreen - set to "false" to disable fullscreen option
    • data-key - license key
    • data-keyboard - set to "false" to disable keyboard shortcuts
    • data-logo - path to your player logo. Only works with a valid license key.
    • data-rtmp - set the RTMP endpoint URL
    • style - the inline style attrribute of the player container. User for video dimensions.
  • fv_flowplayer_popup_html - allows you to customize what's in the popup which shows at the end of video. You can use global $post to check what post is being served.

Let us know if you are missing any filters!

Example

Add a play button to control bar of the players (easily done, as it's just a CSS class):

add_filter( 'fv_flowplayer_attributes', 'tweak_fv_flowplayer_attributes', 10, 2 );
function tweak_fv_flowplayer_attributes( $attrs ) {
    $attrs['class'] .= ' play-button'; return $attrs;
}

Using Flowplayer JavaScript API

How to add your code

Use standard WordPress filter called wp_footer. Following code sample (you can either put it into a new plugin or into functions.php of your template) checks post meta and if it's found, it outputs a JavaScript which gets triggered when you play the video:

add_action('wp_footer', 'my_fv_flowplayer_scripts',10,3);
function my_fv_flowplayer_scripts( $script ) {
    global $post;
    if( get_post_meta( $post->ID, 'tweak_player', true ) ) {
        $args = func_get_args();
        $script .= "
        jQuery('#$args[1]').bind('ready', function() {
            alert( 'Video just started!' );
        });
        ";
    }
    return $script;
}

This could be improved to (for example) trigger a custom function to stop the video after 5 seconds of playing and show some popup. You can of course use any of the Flowplayer API events.

You can also just put a code like this into any of your JavaScript files and affect all the players. Same example like above, but this time affecting only the first player on any page:

<script>
if( typeof(flowplayer) != "undefined" ) {
    var api = flowplayer(0);
    api.bind('ready', function() {
        alert( 'Video just started!' );
    });

}
</script>

You can also just put the code into footer of your template. But double check that it works with your Minify plugin if you use one.

Important API methods

  • disable(flag) - set flag to true to disable, false to re-enable the player
  • fullscreen() - toggle fullscreen
  • load(video) - video should be an array like:
    [{ mpegurl: 'http://mydomain.com/my/other/video.m3u8'},
    {webm: 'http://mydomain.com/my/other/video.webm'},
    {mp4: 'http://mydomain.com/my/other/video.mp4'},
    {ogg: 'http://mydomain.com/my/other/video.ogv'}]
    
  • next() and prev() - next and previous playlist item
  • pause() - pause the video
  • play(index) - play video, use index to specify position in playlist
  • resume() - resume playback after pause
  • seek(time) - seek to time
  • stop() - stops the playback and returns to the start of video
  • unload() - unload the player
  • volume() - set player volume

Usage like in above examples:

api.disable(false);

Important API events

  • beforeseek - when the seeking process starts. The 3rd argument is the target seek time.
  • cuepoingt - when a cuepoint is reached. The 3rd argument is an object with cue time and index.
  • error - when an error occurs. The 3rd argument is the object with description of the error.
  • finish - when playback has finished.
  • fullscreen and fullscreen-exit - when going into/out of fullscreen.
  • load - first player event, before the video starts playing
  • mute and volume - triggers on mute or volume change
  • pause and stop - triggers on pause/stop action
  • progress - occurs every 250 ms as the video is playing
  • ready - once the video is loaded.
  • seek - seeking was completed.
  • unload - when player goes back into the splash state.

Check above examples with bind to see how to use these.

Quick JavaScript samples

Always put your scripts into wp_footer hook or include them in footer.php below wp_footer() call.

1. Player initialization via JavaScript

Make sure the element has set dimensions or set them via JavaScript. Make sure there is no existing video tag in the element, as Flowplayer will use that instead:

jQuery('#your-element').flowplayer({ playlist: [ [ {mp4: "http://example.com/videos/file.mp4"} ] ] });

If you then want to replace the video with some other, you can either just remove the element and insert a new one with new player, or use some other API call to replace the playing video.

2. How to use the above API methods

Just pick your element, call flowplayer() on it and the your method. Like this:

jQuery('#your-element').flowplayer().play();