Contents x
    Add or remove a player
    • 18 Jan 2024
    • Print
    Contents

    Add or remove a player

    • Updated on 18 Jan 2024
    • Print
    Article summary

    Add or remove a player

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

    Example

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

    HTML

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

    Modifications to the Embed Code

    The example

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

    uses a slightly modified embed code to set up a container for the Player on the page:

    • The Player script has been separated from the embed code and moved to the "head" tag.

    • The "id" attribute has been added to the embed code so that it is possible to use the "addPlayerById" function.

    • The "disable-auto-creation" attribute has been added to the embed code so that the player will not load until the "create player" button is clicked.

    Creating and Removing the Player

    The "createPlayer" function (line 23) is called when the "create player" button is clicked. This function uses the API's "addPlayerById" function to add the Player to the page.

    The "removePlayer" function (line 27) is called when the "remove player" button is clicked. This function uses the "removePlayerById" function to remove the Player.

    Was this article helpful?
    What's Next