Versions Compared

Old Version 16

changes.mady.by.user Sarah Whitley

Saved on

compared with

New Version Current

changes.mady.by.user P Team

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
It is possible

This tutorial shows you how to implement a callback function

, which executes

that allows you to execute code as soon as a

player is loaded. You can define the function containing

Player loads. The function can contain several actions that

is

are called when the

public

API of the respective

player is loaded

Player loads. The code in this tutorial introduces our recommended approach for dynamically adding a player on load.

Note

Please note that 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.

The

property 'success' must be set as value to the player property object.

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

Code Block
languagetext
linenumberstrue

Sample

In the code example, the respective player will be loaded when the user is clicking on the button [load]. If loading is completed, the following functions are executed: the player is started, the video is forwarded to the set time point and the sound is turned off.

Note

Please note that you need to specify necessary IDs and URLs.

Panel
bgColor#DCDCDC
<!DOCTYPE html>
<html>
<head>
<script src="//e.video-cdn.net/v2/embed.js"></script>
</head>
<body>
 
<div id="1234player_container"></div>
 
<script type="text/javascript">
 
    //create a new player instance (vmpro)

	var playerProps    function createPlayer() {
        var initPlayer = {
		            success: function (playerApi) {
			                playerApi.play();
			playerApi.forward(20000);
			playerApi.                playerApi.toggleMute();
		
		}
	};

	loadPlayer = function () {
            },
            parameters: {
              var element = document.getElementById('1234');
configType: 'vmpro',
             var  player = document.createElement('div');
playerId: '<PlayerID>',
                videoId: player.setAttribute('mi24-video-player'<VideoID>', '');

                player.setAttribute('config-type', 'vmpro');
apiUrl: '//d.video-cdn.net/play',
                player.setAttribute('player-id', '<PlayerID>');
    flashPath: '//e.video-cdn.net/v2/',
				token: "***"
            }
        };
 
        playerVideoPlayer.Collection.setAttributeaddPlayerById('video-idplayer_container', '<VideoId>'initPlayer);
    }
 
    //add the  player.setAttribute('api-url', '//d.video-cdn.net/playplayer
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
      player.setAttribute('flash-path',script.src = '//e.video-cdn.net/v2/embed.js');
    head.appendChild(script);
     
   element.appendChild(player);
     script.onload = (function () {
        VideoPlayer.Collection.addPlayerById('1234', playerPropscreatePlayer();
        });
 
</script>

<button onclick="loadPlayer()">load</button

</body>
</html>
Note

Please note that you need to specify necessary IDs and URLs.


Note the addition of the "success" property (line 14). This should define the function you'd like to execute as soon as the Player loads (the callback function). By adding this to your "initPlayer" object and passing it into the second argument of the "addPlayerById" function (line 28), a Player object will be sent to your callback function, which you can then use to make API calls.

Info

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


Adding the Player Script

First take note of the way that the Player script has been added in this example. The code above adds the "embed.js" file by appending it to the "head" tag dynamically with JavaScript (lines 31-35). We have found this to be 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 (line 37). 

Creating the Player

Also note the "createPlayer" function (line 12), which is called when the script loads. This function creates an "initPlayer" object to pass into the API's "addPlayerById" function. The "parameters" property 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.