The VideoPlayer.Collection object can be used to add or remove a Player.

Please note that the following functions can be performed only after you have successfully undertaken the first steps (see the "Getting started" chapter). You will also need to replace the video and player IDs with your own.

The following example sets up a container for the Player and two buttons that allow you to add and remove the player on demand:

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript" src="//e.video-cdn.net/v2/embed.js"></script>
</head>

<body>

<div id="player_container"
	 mi24-video-player
     disable-auto-creation
	 video-id="<VideoID>"
     player-id="<PlayerID>"
     config-type="vmpro"
     flash-path="//e.video-cdn.net/v2/"
     api-url="//d.video-cdn.net/play"
	 token="***"></div>

<button onclick="createPlayer()">create player</button>
<button onclick="removePlayer()">remove player</button>

<script type="text/javascript">

  var createPlayer = function () {
  	VideoPlayer.Collection.addPlayerById("player_container");
  };

  var removePlayer = function() {
  	VideoPlayer.Collection.removePlayerById("player_container");
  };

</script>

</body>
</html>



Modifying the Embed Code

This example uses a slightly modified embed code to set up a container for the Player on the page. First note that the Player script has been separated from the embed code and moved to the "head" tag (line 4):

<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.

Additionally, a couple of attributes have been added to the embed code:

  1. the "id" attribute was added so that it is possible to use the "addPlayerById" function, which requires the id of the Player as the first argument

  2. the "disable-auto-creation" attribute is added so that the player will not load until the "create player" button is clicked

    The "disable-auto-creation" attribute can also be used like a boolean attribute. For example:

    "disable-auto-creation='false'" behaves the same way as not including the attribute at all

    "disable-auto-creation='true'" behaves the same way as including the attribute but providing no value


With these modifications we can use the embed code to set up a Player container on the page.


Creating and Removing the Player

Note the "createPlayer" function (line 23), which is called when the "create player" button is clicked. This function uses the API's "addPlayerById" function to add the Player to the page. It can then be removed by clicking the "remove player" button, which will call the "removePlayer function (line 27). This function uses the "removePlayerById" function to remove the Player.