In some cases, it might be useful to create the player dynamically. Instead of simply connecting to an existing embedded player, the SDK also allows you to create an embedded video player on your page programmatically, and interact with it. You can customize the player behavior and appearance using various parameters when creating the player.

Basic Player Creation

To create a player, you need to provide at least the videoId and playerId parameters:

<!-- Container where the player will be created -->
<div id="mi-player-container" style="width: 100%; aspect-ratio: 16/9;"></div>

<script type="module">
  import { Player } from 'https://e.video-cdn.net/mi-player-sdk/mi-player-sdk.js';

  // Create a new player with required parameters
  const player = new Player('mi-player-container', {
    videoId: '123',
    playerId: '456'
  });

  // Wait for the player to be ready
  player.on('ready', () => {
    console.log('Player is ready!');
  });
</script>
Copy

Player with Authentication Token

For videos that require authentication, you can pass a token that will be included in the player's request:

<div id="mi-player-container" style="width: 100%; aspect-ratio: 16/9;"></div>

<script type="module">
  import { Player } from 'https://e.video-cdn.net/mi-player-sdk/mi-player-sdk.js';

  // Get the auth token
  const authToken = '...';

  // Create player with authentication token
  const player = new Player('mi-player-container', {
    videoId: '123',
    playerId: '456',
    token: authToken
  });

  // Now you can interact with the player
  player.on('play', () => {
    console.log('Video is playing');
  });
</script>
Copy

Creating a player with custom domain

If you are using a custom domain to load the player, you also need to specify the correct playoutUrl when creating the player:

<div id="mi-player-container" style="width: 100%; aspect-ratio: 16/9;"></div>

<script type="module">
  import { Player } from 'https://e.video-cdn.net/mi-player-sdk/mi-player-sdk.js';

  const myDomain = 'my.domain.com';

  Player.setCustomDomains([myDomain]);

  // Create player with your custom domain
  const player = new Player('mi-player-container', {
    videoId: '123',
    playerId: '456',
    playoutUrl: `https://${myDomain}/watch`
  });

  // Now you can interact with the player
  player.on('play', () => {
    console.log('Video is playing');
  });
</script>
Copy

Other options

For the other options available, check the PlayerParameters documentation.