Control the DynTube Player with Plain JavaScript

Start with the current generated DynTube iframe, then import the v2 module SDK when your page needs custom controls or playback events. Ordinary playback needs only the iframe; the SDK adds an asynchronous control layer without a framework dependency.

Player and controls

<iframe id="video-one"
  src="https://dyn.tube/embed/video/YOUR_EMBED_KEY?playerId=video-one"
  title="Product walkthrough"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen></iframe>
<button id="play" type="button">Play</button>
<button id="pause" type="button">Pause</button>
<button id="forward" type="button">Forward 10 seconds</button>

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

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

document.querySelector("#play").addEventListener("click", () => player.play());
document.querySelector("#pause").addEventListener("click", () => player.pause());
document.querySelector("#forward").addEventListener("click", async () => {
  await player.seek((await player.getCurrentTime()) + 10);
});

Subscribe and unsubscribe

const stopTimeUpdates = player.on("timeupdate", ({ time, duration }) => {
  progress.value = duration ? time / duration : 0;
});
const stopErrors = player.on("error", (error) => {
  console.error("DynTube playback error", error);
});

window.addEventListener("pagehide", () => {
  stopTimeUpdates();
  stopErrors();
}, { once: true });

Production checklist

• Wait for player.ready before the first command.
• Use a different stable playerId for every iframe on the page.
• Catch rejected commands and show a useful playback state.
• Use button elements for custom controls so keyboard activation works.
• Remove subscriptions when navigation replaces the player.
• Test protected playback, captions, fullscreen, picture in picture, and mobile browsers.

Read state asynchronously

Use getter methods such as getCurrentTime, getDuration, getVolume, isMuted, getPlaybackSpeed, getStatus, and isPlaying when the host page needs current player state. Each getter returns a promise because the SDK requests the value from the iframe. Reuse timeupdate event data for a frequently refreshed progress display instead of polling a getter on every animation frame.

Additional events cover volume, quality, speed, subtitles, fullscreen, picture in picture, buffering, playlists, access prompts, and playback errors. Validate the payload used by your feature against the current SDK reference, and keep access or authentication decisions in the trusted application flow rather than inferring them from a visual player state.