Dynamic Content Loading

Some themes load content using Ajax calls. This is typically used for infinity scrolling and rarely also for the actual navigation on the website.

• Getting FV Player to load
• Loading the dynamically added players
• Problems with JavaScript events?
• Autoplay

Getting FV Player to load

FV Player only loads the scripts if there was a [fvplayer] shortcode used anywhere in the loop, in the widgets or in PHP code.

If the FV Player is not there and you intend to load content using Ajax make sure you enable wp-admin -> FV Player -> Settings -> Integrations/Compatibility -> “Load FV Flowplayer JS everywhere” to make sure the FV Player library is loaded on all pages.

A much better option is to put this code to the page template where you need FV Player:

do_action( 'fv_player_force_load_assets');

That way the JavaScript only loads where it’s necessary.

Loading the dynamically added players

FV Player does detect jQuery Ajax calls and will initialize any new players that might be added to the page as a result of the Ajax.

jQuery(document).ajaxComplete( function() {  
  fv_player_load();
});

However if you are not using jQuery for your Ajax you must provide your own hook. Here’s how it works with WPLMS:

document.addEventListener( 'unit_loaded', function(){
  setTimeout( fv_player_load, 100 );
});

unit_loaded is the WPLMS JavaScript event which occurs when loading a new lesson. The timeout is there to make sure the player has been already appended to HTML as the event seems to trigger before the HTML is updated.

Problems with JavaScript events?

If there is no JavaScript event to hook into, here’s the last resort – this effectively looks for new FV Player every second and loads it:

setInterval( fv_player_load, 1000 );

FV Player could be doing this automatically, or it could be an advanced integration option.

Autoplay

If you would like the new appended players to also autoplay, here’s the code:

document.addEventListener( 'YOUR-EVENT_NAME', function(){
  setTimeout( function() {
    fv_player_load();

    // Normally only one autoplay is allowed per page, this unlocks autoplay
    fv_player_did_autoplay = false;
    fv_autoplay_exec();
    jQuery('[data-fvautoplay]').removeAttr('data-fvautoplay');
  }, 100 );
});

Allowing autoplay for Ajax loaded content can get problematic if you run these Ajax calls while the main video is still playing.