Player API

AppVideoStudio website player widget

Load the app-owned <avs-player> element from /player/api, send it a document, and use these pages when you need a concrete example.

Open API playground Browse component docs

Runtime /player/api

Element <avs-player>

Scope Playground, live demos, component docs

Studio access: The website player widget is available on Studio only. Studio includes use on 1 approved customer domain at a time. Contact us for additional domain pricing.

<script type="module" src="https://create.appvideostudio.com/player/api"></script>

<avs-player id="player" class="api-player"></avs-player>

<script type="module">
  const player = document.getElementById('player');
  await player.ready;
  await player.load(documentData);
  await player.preloadAssets();
  await player.play();
</script>

npm install @appvideostudio/sdk

import { createEmptyVideoDocument } from '@appvideostudio/sdk';
import { defineAVSPlayerElement } from '@appvideostudio/sdk/player';

defineAVSPlayerElement();

const doc = createEmptyVideoDocument({ width: 1920, height: 1080 });
// ... add layers, assets, components ...

const player = document.createElement('avs-player');
document.body.appendChild(player);
await player.ready;
await player.load(doc);

Full SDK docs

The <avs-player> element supports HTML attributes for declarative playback control.

Attribute	Type	Description
`src`	String	Custom player URL. Defaults to `/player/` from the script origin.
`autoplay`	Boolean	Automatically starts playback after `load()` or `loadFromUrl()` resolves. Controls are hidden initially but appear on hover or keyboard interaction.
`loop`	Boolean	Automatically seeks to the start and replays when playback ends.
`no-controls`	Boolean	Completely hides the scrubber and transport controls. They will not appear on hover or keyboard interaction.
`defer`	Boolean	Waits to create the hosted iframe until the player first intersects the viewport.
`auto-pause`	Boolean	Pauses active playback when the player scrolls out of view. It does not auto-resume when it returns.

<!-- Auto-play and loop a preview -->
<avs-player autoplay loop></avs-player>

<!-- Defer iframe creation until visible, then auto-pause when scrolled away -->
<avs-player autoplay loop defer auto-pause></avs-player>

<!-- Auto-play with no visible controls -->
<avs-player autoplay loop no-controls></avs-player>

<script type="module">
  const player = document.querySelector('avs-player');
  await player.ready;
  await player.load(myDocument);
  // Playback starts automatically, no player.play() needed
</script>