DynTube Player JavaScript Events and Methods

The v2 DyntubePlayer SDK controls a DynTube iframe through the supported message protocol. Give each iframe a stable playerId, construct the SDK with its selector, await readiness, and then call methods or subscribe to events. This contract works with plain JavaScript and can be managed through React or Vue lifecycles.

Create the controlled iframe

<iframe id="lesson-player"
  src="https://dyn.tube/embed/video/YOUR_EMBED_KEY?playerId=lesson-player"
  title="Lesson video"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen></iframe>

Initialize the v2 SDK

import { DyntubePlayer } from "https://embed.dyntube.com/v2/embed-sdk.js";

const player = new DyntubePlayer("#lesson-player", {
  playerId: "lesson-player",
});
await player.ready;

await player.play();
await player.seek(30);
await player.setVolume(0.5);

Listen for playback changes

const unsubscribe = player.on("timeupdate", ({ time, duration }) => {
  console.log({ time, duration });
});

player.on("play", () => console.log("playing"));
player.on("pause", () => console.log("paused"));
player.on("ended", () => console.log("ended"));
player.on("error", (error) => console.error(error));

// Call when this integration is removed.
unsubscribe();

Integration rules

• Treat ready and player method calls as asynchronous operations.
• Keep iframe id, SDK selector, and playerId aligned.
• Create one SDK instance per controlled iframe.
• Remove event subscriptions when the page or component is destroyed.
• Handle timeout, protocol, unsupported-operation, and playback errors in the user interface.
• Keep API and signing keys in trusted server code; the player uses an embed or authorized playback URL.

What the SDK can control

The current contract covers playback, seeking, live-edge navigation, volume and mute, quality, speed, looping, captions, fullscreen, picture in picture, state getters, and playlist navigation when the loaded player supports a playlist. Getter methods return promises because state is read from the iframe rather than from the host page.

Events report readiness, playback, timing, volume, quality, speed, subtitles, fullscreen, picture in picture, buffering, playlist changes, access requirements, and errors. Subscribe only to the signals your interface uses and retain the unsubscribe function returned by each listener.