The JavaScript SDK ships a single Web Component (<ansdev-player>)
plus an imperative AnsdevPlayer class for full programmatic control.
No build step or framework required.
Install
<script src="https://sdk.ansdev.cloud/v1/player.js"></script>
The SDK registers the ansdev-player custom element on window and
exposes the AnsdevPlayer class globally.
Quick start — Web Component
<script src="https://sdk.ansdev.cloud/v1/player.js"></script>
<ansdev-player
api-key="ak_live_8f3a9b2c1d4e5f6a7b8c9d0e1f2a3b4c"
video-id="vid_abc123def456"
theme="dark"
autoplay="false"
controls="true"
></ansdev-player>
⚠️ Server-side tokens in production
The example above uses an API key for simplicity. In production,
generate a short-lived
playback token on your
server and pass it via playback-token instead — your API key
should never reach the browser.
Quick start — imperative API
const player = new AnsdevPlayer({
container: '#player',
apiKey: 'ak_live_8f3a9b2c1d4e5f6a7b8c9d0e1f2a3b4c',
videoId: 'vid_abc123def456',
});
await player.ready;
player.play();
Methods
| Method | Description |
|---|---|
play() | Start playback. Returns a Promise that resolves when the video starts playing. |
pause() | Pause playback. |
seek(time) | Seek to time in seconds. |
setVolume(value) | Set volume from 0 (mute) to 1 (full). |
setMuted(bool) | Mute or unmute without changing the volume value. |
setQuality('auto' | level) | Force a quality rendition (e.g. '720p') or use ABR with 'auto'. |
setSpeed(rate) | Playback rate, e.g. 0.5, 1, 1.5, 2. |
getCurrentTime() | Current playhead in seconds. |
getDuration() | Total video duration in seconds. |
getState() | One of 'idle', 'loading', 'playing', 'paused', 'ended', 'error'. |
destroy() | Remove the player and release all resources. |
Feature flags
Toggle individual features at construct time:
const player = new AnsdevPlayer({
container: '#player',
videoId: 'vid_abc123def456',
playbackToken: 'pt_eyJhbGciOi...',
features: {
keyboardShortcuts: true,
pictureInPicture: true,
theater: true,
chat: false,
ambientGlow: true,
statsOverlay: false,
},
});
See Customization for the full theming + controls reference and Events for callback hooks.
⚠️ SDK is in beta
The SDK CDN URL and public API surface may change before
the v1 stable release. Pin to a specific version in production:
https://sdk.ansdev.cloud/v1/player.js.
💡 Using React?
The React SDK wraps the Web Component with typed props, ref forwarding, and SSR-safe defaults.