Contents x
    Onload callback function
    • 18 Jan 2024
    • Print
    Contents

    Onload callback function

    • Updated on 18 Jan 2024
    • Print
    Article summary

    Implement a callback function for dynamic player loading

    Description

    This tutorial shows you how to implement a callback function that allows you to execute code as soon as a Player loads. The function can contain several actions that are called when the API of the respective Player loads. The code in this tutorial introduces the recommended approach for dynamically adding a player on load.

    Note: When lazy loading is enabled, the Player will not be accessible through the API until a user clicks play. This is an inherent quality of the lazy loading feature, which prevents the Player from loading until a user clicks play. Find more information on lazy loading here.

    Example

    The following code shows the recommended approach for adding a player on load. This example will play and mute the video as soon as the Player loads:

    HTML

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
  
<div id="player_container"></div>
  
<script type="text/javascript">
  
    //create a new player instance (vmpro)
    function createPlayer() {
        var initPlayer = {
            success: function (playerApi) {
                playerApi.play();
                playerApi.toggleMute();
            },
            parameters: {
                configType: 'vmpro',
                playerId: '<PlayerID>',
                videoId: '<VideoID>',
                apiUrl: '//d.video-cdn.net/play',
                flashPath: '//e.video-cdn.net/v2/',
                token: "***"
            }
        };
  
        VideoPlayer.Collection.addPlayerById('player_container', initPlayer);
    }
  
    //add the player
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//e.video-cdn.net/v2/embed.js';
    head.appendChild(script);
      
    script.onload = createPlayer;
  
</script>
  
</body>
</html>

    Note: You need to specify the necessary IDs and URLs in the initPlayer object.

    Use the callback function

    The success property in the initPlayer object defines the function you want to execute as soon as the Player loads (the callback function). When you pass the initPlayer object to the addPlayerById function, the Player object is sent to your callback function. You can then use the Player object to make API calls.

    For a list of other API functions available, see the Basic Functions Reference.

    Add the Player script

    The embed.js script file is added to the head tag dynamically with JavaScript. This is the best way to add the embed.js file because it facilitates correct timing and order of operations by allowing you to use the script's onload property to initiate the creation of your Player.

    Create the Player

    The createPlayer function is called when the embed.js script loads. This function creates an initPlayer object to pass into the API's addPlayerById function. The parameters property in the initPlayer object should use the attributes from your embed code. This allows you to set up an empty div, player_container as a placeholder and add these properties dynamically when the player is created.

    Conclusion

    This tutorial has shown you how to implement a callback function that allows you to execute code as soon as a Player loads. The function can contain several actions that are called when the API of the respective Player loads. The code in this tutorial introduced the recommended approach for dynamically adding a player on load.

    Was this article helpful?
    What's Next