Embedding Guide — Ansdev Cloud Docs

The Player SDK is designed for a clean three-tier embed:

Your server requests a short-lived playback token.
Your frontend receives the token and passes it to the SDK.
The SDK handles streaming, quality switching, and security.

Step 1 — Server-side token

Generate a playback token from your backend. The token is bound to a single video and expires in 5 minutes.

Node.js (Express)

import express from 'express';

const app = express();

app.get('/api/play/:videoId', async (req, res) => {
  const upstream = await fetch(
    `https://api.ansdev.cloud/v1/video/${req.params.videoId}/playback-token`,
    {
      method: 'POST',
      headers: { 'x-ansdev-key': process.env.ANSDEV_API_KEY },
    },
  );

  if (!upstream.ok) {
    return res.status(upstream.status).json(await upstream.json());
  }

  const { data } = await upstream.json();
  // Send ONLY the short-lived token — keep your API key on the server
  res.json({ token: data.token, expiresIn: data.expiresIn });
});

Python (Flask)

import os, requests
from flask import Flask, jsonify

app = Flask(__name__)

@app.get('/api/play/<video_id>')
def play(video_id):
    upstream = requests.post(
        f'https://api.ansdev.cloud/v1/video/{video_id}/playback-token',
        headers={'x-ansdev-key': os.environ['ANSDEV_API_KEY']},
    )
    if not upstream.ok:
        return jsonify(upstream.json()), upstream.status_code

    data = upstream.json()['data']
    return jsonify({'token': data['token'], 'expiresIn': data['expiresIn']})

🚨 Never generate tokens client-side

The token endpoint requires your API key. Calling it from the browser exposes the key to anyone with the DevTools open. Always generate tokens on a trusted server.

Step 2 — Pass the token to the frontend

Your frontend fetches the token from your server route and hands it to the SDK — never the API key.

const { token } = await fetch(`/api/play/${videoId}`).then((r) => r.json());

Step 3 — Render the player

Web Component (vanilla HTML)

<script src="https://sdk.ansdev.cloud/v1/player.js"></script>

<ansdev-player
  video-id="vid_abc123def456"
  playback-token="pt_eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
></ansdev-player>

React

import { AnsdevPlayer } from '@ansdev/player-react';

<AnsdevPlayer
  videoId="vid_abc123def456"
  playbackToken={token}
  onError={(e) => console.error(e)}
/>

iframe embed (simplest)

The token response includes a pre-built playerUrl that embeds the player without any SDK setup:

<iframe
  src="https://sdk.ansdev.cloud/embed?token=pt_eyJhbGciOi..."
  width="640"
  height="360"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
></iframe>

💡 Easiest path

Just use the playerUrl field returned from the playback-token endpoint. No SDK to load, no events to wire — drop the iframe in and you're done.

Responsive embed

Use CSS aspect-ratio to maintain the video proportions:

<div style="aspect-ratio: 16 / 9; width: 100%;">
  <ansdev-player
    style="width: 100%; height: 100%;"
    video-id="vid_abc123def456"
    playback-token="pt_eyJhbGciOi..."
  ></ansdev-player>
</div>

Complete working example

<!doctype html>
<html>
  <head><title>My Video</title></head>
  <body>
    <div style="aspect-ratio: 16/9; max-width: 800px; margin: 2rem auto;">
      <ansdev-player id="player" style="width:100%; height:100%;"></ansdev-player>
    </div>

    <script src="https://sdk.ansdev.cloud/v1/player.js"></script>
    <script type="module">
      const videoId = 'vid_abc123def456';
      const { token } = await fetch(`/api/play/${videoId}`).then((r) => r.json());

      const player = document.getElementById('player');
      player.setAttribute('video-id', videoId);
      player.setAttribute('playback-token', token);
    </script>
  </body>
</html>

Next: Customization · Events & Callbacks · Keyboard Shortcuts.