Advanced Interactions with Fastevo MP2 Player

Overview

The Fastevo MP2 Player offers multiple ways to programmatically control playback and manage player behavior. By sending commands directly to the player, you can customize your users’ experience with features like play, pause, seeking, volume changes, and more.

In addition to the original window.players approach, you can also dispatch commands as DOM events on the container. This document outlines both methods for sending commands and provides a comprehensive reference of the available commands.

For information about listening to player events (e.g., playbackStarted, timeUpdate), see Understanding Media Player Events.

Accessing the Player

You can interact with the player by referencing its id. There are two complementary ways to send commands to a specific player:

1. Via the global window.players object
2. By dispatching custom events on the container

1. Using the Global window.players Object

When the player is fully initialized, an object representing the player instance is available at window.players[containerId].

// Example: Accessing a player instance by container ID:
var player = window.players["my-video-container"];

From there, you can invoke the sendCommand method to control the player:

player.sendCommand("play"); // Sends a "play" command

2. Dispatching a "playerCommand" Event on the Container

Alternatively, you may send commands by dispatching a custom playerCommand event on the container element. The event’s detail should include:

• eventName: The name of the command (e.g., "play")
• data: Any additional parameters

var container = document.getElementById("my-video-container");
 
var playCommandEvent = new CustomEvent("playerCommand", {
  detail: {
    eventName: "play",
    data: {} // optional data for certain commands
  }
});
 
container.dispatchEvent(playCommandEvent);

Both approaches achieve the same outcome. Choose the method that best fits your development style or framework.

Knowing When the Player Is Ready

Before sending commands, ensure the player is initialized. You can detect when a player is ready by listening for the "playerInitialized" event on the container:

var container = document.getElementById("my-video-container");
 
container.addEventListener("playerInitialized", function (e) {
  // The player is now ready.
  console.log("Player ready:", e.detail.playerId);
 
  // Optionally, access the instance via window.players
  var player = window.players[e.detail.playerId];
  player.sendCommand("play");
});

Once "playerInitialized" fires, you can safely send commands via either method above.

Command Reference

Below is a comprehensive list of commands you can send to the player. Each command name corresponds to the eventName in player.sendCommand(eventName, data) or in the custom playerCommand event.

1. play

Starts video (or audio) playback.

player.sendCommand("play");

2. pause

Pauses the current playback.

player.sendCommand("pause");

3. stop

Stops playback and resets the playback position to the beginning.

player.sendCommand("stop");

4. seek

Changes the current playback position.

Data parameters:

• time (number, in seconds): Where the playback should move (e.g., 120 for 2 minutes).

// Seeks to 2 minutes (120 seconds)
player.sendCommand("seek", { time: 120 });

5. volumeChange

Changes the player’s volume.

Data parameters:

• volume (number): A value between 0 (muted) and 1 (full volume).

// Sets the volume to 50%
player.sendCommand("volumeChange", { volume: 0.5 });

6. playbackRate

Changes the playback speed.

Data parameters:

• playbackRate (number): Playback speed (e.g., 1.0 = normal speed, 0.5 = half speed, 2.0 = double speed).

// Plays at 1.5x speed
player.sendCommand("playbackRate", { playbackRate: 1.5 });

7. mute

Mutes the player’s audio.

player.sendCommand("mute");

8. unmute

Unmutes the player’s audio.

player.sendCommand("unmute");

9. toggleFullscreen

Toggles the player’s fullscreen mode (if supported).

Note: On some devices or browsers, native fullscreen might be restricted without user interaction. In those cases, the player may use a fallback approach if configured (see fullscreenFallback in Embedding the Player).

player.sendCommand("toggleFullscreen");

10. destroy

Destroys the player instance and frees its resources. After destroying, the container may remain in the DOM, but the player is no longer functional.

player.sendCommand("destroy");

11. hideControlsUI

Hides the overlay for the player’s control UI.

player.sendCommand("hideControlsUI");

12. showControlsUI

Shows the overlay for the player’s control UI.

player.sendCommand("showControlsUI");

Putting It All Together

Example using the window.players approach for commands:

<!-- Player Container -->
<div id="my-advanced-container"
     data-token="YOUR_PLAYBACK_TOKEN"
     data-config='{"autoPlay":"false","loop":"false"}'>
</div>
 
<script>
// Wait for the player to initialize
var container = document.getElementById("my-advanced-container");
 
container.addEventListener("playerInitialized", function(e) {
  var playerId = e.detail.playerId;
  var player = window.players[playerId];
 
  // Start playback
  player.sendCommand("play");
 
  // Seek to 60 seconds after a delay
  setTimeout(function() {
    player.sendCommand("seek", { time: 60 });
  }, 5000);
});
</script>

Example using a custom playerCommand event:

<!-- Player Container -->
<div id="my-advanced-container"
     data-token="YOUR_PLAYBACK_TOKEN"
     data-config='{"autoPlay":"false","loop":"false"}'>
</div>
 
<script>
var container = document.getElementById("my-advanced-container");
 
// Wait for player initialization
container.addEventListener("playerInitialized", function(e) {
  console.log("Player is ready:", e.detail.playerId);
 
  // Dispatch a play command event
  var playEvent = new CustomEvent("playerCommand", {
    detail: { eventName: "play" }
  });
  container.dispatchEvent(playEvent);
 
  // Dispatch a seek command after 5 seconds
  setTimeout(function() {
    var seekEvent = new CustomEvent("playerCommand", {
      detail: { eventName: "seek", data: { time: 60 } }
    });
    container.dispatchEvent(seekEvent);
  }, 5000);
});
</script>

Conclusion

By using one (or both) of the methods above, you can fully control how your users experience your content within the Fastevo MP2 Player. If you’d like to learn more about how to listen for and respond to various player events (e.g., when playback starts, stops, or progresses), see Understanding Media Player Events.

For general embedding details, refer back to Embedding the Fastevo MP2 Player. If you have any questions or encounter issues, feel free to contact our support team.