Versions Compared

Old Version 19

changes.mady.by.user Sarah Whitley

Saved on

compared with

New Version 20

changes.mady.by.user Sarah Whitley

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

It is possible to implement a callback function, which executes code as soon as a player is loaded. You can define the function containing several actions that

is

are called when

the public API of

the respective player is loaded.

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.

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.

following code shows our recommended approach for adding a player on load:

Code Block
languagetext
linenumberstrue
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 options = {
		            success: function (playerApi) {
			                playerApi.play();
			                playerApi.forward(2000010000);
			                playerApi.toggleMute();
		
		}
	};

	loadPlayer = function () {
            },
            parameters: {
             var  element = document.getElementById('1234');
configType: 'vmpro',
              var player = document.createElement('div');playerId: '<PlayerID>',
            player.setAttribute('mi24-video-player', '');
    videoId: '<VideoID>',
                 player.setAttribute('config-type', 'vmpro');
apiUrl: '//d.video-cdn.net/play',
                 player.setAttribute('player-id', '<PlayerID>');flashPath: '//e.video-cdn.net/v2/'
            }
        };
 
      player.setAttribute('video-id  VideoPlayer.Collection.addPlayerById('player_container', '<VideoId>'options);
    }
 
    //add the player
    var player.setAttributehead = document.getElementsByTagName('api-url', '//d.video-cdn.net/playhead')[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.

Adding the Player Script

First take note of the way that the Player script has been added. Locate the "script" tag at the end of your embed code:

Code Block
languagetext
<script src="//e.video-cdn.net/v2/embed.js"></script>

This tag specifies the source of the API script, the "embed.js" file. This must be included to make calls to the API work. However, it only needs to be added to the page once, regardless of how many players will be added to the page.

The code above adds the "embed.js" file by appending it to the "head" tag dynamically with JavaScript (lines 32-36). 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 39).

Creating the Player

Note the "createPlayer" function (line 12), which is called when the script loads. This function creates an "options" object to pass into the API's "addPlayerById" function (see the Adding or Removing a Player chapter for more details). The property "success" must be set within this object. This is where you can create your callback function, which you can use to call other API functions, which will execute as soon as the Player is successfully created. The above code will play, fast forward 10 seconds, and mute the audio (see the Basic Functions chapter for a list of other functions you can call here).

The "parameters" property (line 19) is created using the properties 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.