Embedding the Fastevo MP2 Player on Your Website

Introduction

The Fastevo MP2 Player allows you to seamlessly embed high-quality video, audio, and image content into your website. This guide walks you through simple steps to integrate the player, ensuring a smooth experience for you and your users.

For additional advanced interactions, such as controlling the player via commands or listening to a full list of player events, please refer to the following:

Advanced Interactions with Fastevo MP2 Player (Commands you can send)
Understanding Media Player Events (All available events you can listen to)

To learn how to create the playback tokens required for embedding, see Creating Playback Tokens.

ℹ️

Secure Context Required: To function properly, the Fastevo MP2 Player must be embedded from a secure context (i.e., your website should be served over HTTPS). If you are testing locally, consider using tools such as ngrok or a locally trusted SSL certificate to serve your site via HTTPS.

ℹ️

Direct Embedding Required: The page that hosts the Fastevo MP2 Player must be loaded directly and should not be embedded within an iframe.

Embedding the Player: Step-by-Step

Step 1: Add Required Head Elements

In the <head> section of your HTML, add the following meta tag and the Fastevo MP2 Player injector script:

<head>
  <meta name="viewport" content="viewport-fit=cover" />
  <script src="https://webplay.mp2.fastevo.net/player-injector.js"></script>
</head>

Step 2: Add Player Containers to Your Page

For each player you want to embed, add a <div> element where the player should appear. This container must have:

A unique id attribute (which does not start with a digit or consist solely of digits).
The necessary data-* attributes to configure the player.

Example:

<div id="my-video-container" class="player-container"
     data-token="YOUR_PLAYBACK_TOKEN"
     data-config='{"autoPlay":"false","startMuted":"false","loop":"false"}'>
</div>

Important Notes:

Unique Container IDs: Each player container must have a unique id. This id is crucial for initializing the player and interacting with it programmatically.
No Numeric-Only or Digit-Starting IDs: Ensure that the id does not start with a number and is not entirely numeric (e.g., "1234"). This can cause issues with player initialization, CSS, or JavaScript references.
You cannot have more than one player with the same id on a page.

ℹ️

Do not use the same id for multiple player containers. Each player must have a unique id to function correctly.

Attributes Explained:

id: A unique identifier for the player container. Used to initialize and interact with the player.
class: (Optional) For styling purposes.
data-token: Your playback token. Replace "YOUR_PLAYBACK_TOKEN" with the actual token you've generated. See Creating Playback Tokens for guidance.
data-config: A JSON string to configure player settings. See Configuring Player Options.

Step 3: Style (Size) the Player Container

The player will fill the container you create, so it’s crucial to give the container an explicit size or a responsive aspect ratio. At minimum, set width and height or a responsive ratio so the player displays consistently.

A. Fixed Dimensions

<style>
  .player-container {
    width: 640px;
    height: 360px;
    background-color: #000; /* Fallback background color before the player loads */
  }
</style>

This ensures the player is displayed at a consistent 640×360 size.

B. Responsive Aspect Ratio

If you’d like the player to scale automatically while preserving a specific ratio (e.g., 16:9), use the following technique:

• CSS aspect-ratio (modern browsers):

<style>
  .player-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #212529;
    margin-bottom: 4%;
  }
</style>

⚠️

Avoid width: auto / height: auto without a plan
If you rely on auto dimensions, the container may collapse or display incorrectly. Always set a definite size or aspect ratio for best results.

Step 4: Configuring Player Options

The data-config attribute allows you to customize the player's behavior. It’s a JSON string that can include the following options:

autoPlay ( "true" or "false" ): Whether the media should start playing automatically.
- Default: "false"
startMuted ( "true" or "false" ): Whether the media should start muted.
- Default: "false"
loop ( "true" or "false" ): Whether the media should loop continuously.
- Default: "false"
fullscreenFallback ( "true" or "false" ): Enables a fallback for fullscreen on devices without native fullscreen support.
- Default: "true"
st (number or string): The playback start time in seconds.
- Default: Starts at the beginning.
preferredStartingVideoHeight (number): Not recommended. Tries to start at a specific resolution.
- Default: Automatically selects optimal.

Example Configuration

<div id="my-video-container" class="player-container"
     data-token="YOUR_PLAYBACK_TOKEN"
     data-config='{
       "autoPlay": "true",
       "startMuted": "true",
       "loop": "true",
       "fullscreenFallback": "true",
       "st": "30"
     }'>
</div>

In this configuration:

Autoplay is enabled.
The media starts muted.
The media loops endlessly.
Fullscreen fallback is enabled.
Playback begins at 30 seconds.

Step 5: Complete Example

Below is a complete HTML snippet combining all steps:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Step 1: Add Required Head Elements (Meta + Script) -->
  <meta name="viewport" content="viewport-fit=cover" />
  <script src="https://webplay.mp2.fastevo.net/player-injector.js"></script>
</head>
<body>
 
  <!-- Step 2: Player Container with Token & Config -->
  <div id="my-video-container" class="player-container"
       data-token="YOUR_PLAYBACK_TOKEN"
       data-config='{"autoPlay":"false","startMuted":"false","loop":"false"}'>
  </div>
 
  <!-- Step 3: Style the Container (Example: Fixed 640x360) -->
  <style>
    .player-container {
      width: 640px;
      height: 360px;
      background-color: #000;
    }
  </style>
 
</body>
</html>

Replace "YOUR_PLAYBACK_TOKEN" with the actual token you’ve generated.

Embedding Multiple Players

You can embed multiple players on a single page by adding multiple containers with unique IDs (that do not start with digits or contain only digits).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Include the Player Injector Script (only once) -->
  <meta name="viewport" content="viewport-fit=cover" />
  <script src="https://webplay.mp2.fastevo.net/player-injector.js"></script>
</head>
<body>
 
  <!-- Player 1 -->
  <div id="player-container1" class="player-container"
       data-token="YOUR_PLAYBACK_TOKEN_1"
       data-config='{"autoPlay":"false","startMuted":"false","loop":"false"}'>
  </div>
 
  <!-- Player 2 -->
  <div id="player-container2" class="player-container"
       data-token="YOUR_PLAYBACK_TOKEN_2"
       data-config='{"autoPlay":"true","startMuted":"true","loop":"true"}'>
  </div>
 
  <!-- Player 3 -->
  <div id="player-container3" class="player-container"
       data-token="YOUR_PLAYBACK_TOKEN_3"
       data-config='{"autoPlay":"false","startMuted":"false","loop":"false"}'>
  </div>
 
</body>
</html>

ℹ️

Key Points for Multiple Players
• Use unique id attributes (e.g., player-container1, player-container2, etc.).
• Style each container for its intended size or aspect ratio.
• Only include the injector script once per page.

Advanced Interactions

The script provides two main ways to send commands and listen for events from the player:

Via the global window.players object
Directly by dispatching/listening to events on the container

Both methods achieve the same results. Feel free to choose whichever best fits your workflow.

1. Sending Commands

Below are two approaches for sending commands to the player. For a complete list of commands, see Advanced Interactions with Fastevo MP2 Player.

A. Using the Global `window.players` Object

// Get a reference to your player instance via the container ID
var player = window.players["my-video-container"];
 
// Send a "play" command
player.sendCommand("play");
 
// Example: Pause the media
player.sendCommand("pause");

B. Dispatching Directly to the Container

You can also invoke commands by dispatching a custom "playerCommand" event on the container:

var container = document.getElementById("my-video-container");
var playCommandEvent = new CustomEvent("playerCommand", {
  detail: {
    eventName: "play",
    data: {} // additional data if needed
  }
});
container.dispatchEvent(playCommandEvent);

2. Listening for Player Events

Whenever the embedded media sends events, the script will forward them in two ways:

Through the player instance (player.on("eventName", callback))
As custom DOM events on the container (container.addEventListener("eventName", callback))

For a full list of available events, see Understanding Media Player Events.

A. Via `window.players` Object

var player = window.players["my-video-container"];
 
// Register an event handler
function onPlaybackStarted(data) {
  console.log("Playback started. Data:", data);
}
player.on("play", onPlaybackStarted);

B. Directly on the Container

var container = document.getElementById("my-video-container");
 
container.addEventListener("play", function (e) {
  // e.detail contains event-specific data
  console.log("Playback started. Data:", e.detail);
});

3. Knowing When the Player Is Ready (playerInitialized)

When a container finishes its initialization, the script dispatches a "playerInitialized" event on that container. This signals that window.players[container.id] is now ready to be used for advanced interactions (commands, event handlers, etc.).

var container = document.getElementById("my-video-container");
 
container.addEventListener("playerInitialized", function (e) {
  console.log("Player ready! Container ID:", e.detail.playerId);
 
  // From here, you can safely access window.players[e.detail.playerId]
  var player = window.players[e.detail.playerId];
  player.sendCommand("play");
});

Frequently Asked Questions

Why is the `id` attribute necessary?

• The player injector script uses it to embed the player into the correct container.
• It’s how you reference a specific player instance for programmatic actions or direct event dispatching.

Can I have multiple players with the same `id`?

No. Each player must have a unique id, or the script won’t know which container to use.

Can the `id` attribute start with a number?

No. Some browsers and libraries may not work correctly with digit-only IDs.

Does this method work for audio and images too?

Yes. If your playback token references audio or image content, the player automatically adapts.

How do I create or manage my playback tokens?

Please see Creating Playback Tokens.

Next Steps

Advanced Interactions with Fastevo MP2 Player: Learn commands like play, pause, seek, volume changes, etc.
Understanding Media Player Events: Listen for data on playback progress, state changes, etc.
Creating Playback Tokens: Generate the necessary tokens to stream protected content.

Summary

Embedding the Fastevo MP2 Player involves:

Adding the required head elements (meta and script) in your HTML.
Adding player containers with unique IDs and required data attributes.
Giving each container a defined size (fixed or aspect ratio).
Configuring options via data-config (e.g., autoPlay, loop, startMuted).
Avoiding numeric-only or digit-starting IDs.
Sending commands either through window.players[id].sendCommand(eventName, data) or by dispatching "playerCommand" on the container.
Listening for events either via player.on("eventName", handler) or directly on the container (e.g., container.addEventListener("eventName", ...)).
Watching for "playerInitialized" to know the instance is ready for interactions.

By following these steps, you’ll provide a high-quality media experience to your users with minimal setup. For more advanced usage, refer to the documentation above or contact support.

Recap of Key Points

Unique IDs Are Crucial: Each container must have a unique id.
Define Container Size: Either a fixed dimension or a responsive aspect ratio.
Include the Injector Once: You only need one script tag per page.
Use data-config: Adjust playback behavior easily.
Send Commands & Listen for Events: Either via window.players or by dispatching/listening to events on the container.
Listen for playerInitialized: Lets you know window.players[id] is ready to receive commands.

Content Trash Playback Tokens