Embed Guide

Step-by-step guide to embedding the Ansdev Player.

Embed Guide

Web Component (any website)

The simplest way to embed — works with any framework or plain HTML.

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

<ansdev-player
  api-key="ak_live_YOUR_KEY"
  video-id="vid_YOUR_VIDEO_ID">
</ansdev-player>

React

npm install @ansdev/player-sdk hls.js

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

export default function VideoPage() {
  return (
    <AnsdevPlayer
      apiKey="ak_live_YOUR_KEY"
      videoId="vid_YOUR_VIDEO_ID"
      theme={{ colors: { primary: '#22D3EE' } }}
      onPlay={() => console.log('Playing!')}
    />
  );
}

All attributes / props

Attribute (Web)	Prop (React)	Type	Default
api-key	apiKey	string	required
video-id	videoId	string	required
api-base	apiBase	string	video-engine prod URL
theme	theme	JSON string / object	see Customization
autoplay	autoplay	boolean	false
muted	muted	boolean	false
loop	loop	boolean	false
controls	controls	boolean	true

Sizing

The player respects its container’s width and keeps a 16:9 aspect ratio by default. To force a different size, wrap it in any positioned element:

<div style="max-width: 720px; margin: 0 auto;">
  <ansdev-player api-key="…" video-id="…"></ansdev-player>
</div>

Security

Never expose your API key in client-side code shipped to untrusted users. The Player SDK makes API calls from the user’s browser. While the key is visible in network requests, it is rate-limited and scoped to read-only video access — so the worst-case leak is “someone else plays your videos using your daily quota”. Still: rotate immediately if a key is leaked publicly.

For maximum security (per-viewer JWTs, custom expiry), generate playback tokens server-side and pass them directly to the player. Advanced usage docs coming soon.