Quick Start
Play your first video with VIDTREO Player in just 2 minutes.
Quick Start
Get up and running with VIDTREO Player in under 2 minutes. This guide will walk you through playing your first video.
Load the Player Script
Add the player script to your HTML page:
<script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/player-wc@latest/dist/vidtreo-player.js"></script><script type="module" src="node_modules/@vidtreo/player-wc/dist/vidtreo-player.js"></script>Get Your API Key
- Sign in to the VIDTREO Dashboard
- Navigate to Environments
- Create one if you don't have one (for example: Production)
- Configure the environment
- Navigate to the API Keys tab
- Create a new API key
- Assign 2 permissions:
- Get Config
- Upload Video
- It's recommended to configure the allowed domains property (optional but recommended). This ensures that API key cannot upload video from another source that is not declared in the API key
- Copy your API key
Keep your API key secure. This API key is visible in network requests. Never expose it in client-side code for production applications. Use environment variables or server-side proxies instead.
Add the Player Component
Add the <vidtreo-player> element to your HTML:
<vidtreo-player
video-id="your-video-id"
api-key="your-api-key"
></vidtreo-player>Replace your-video-id with the ID of a video you've recorded with VIDTREO.
Play the Video
The player will automatically:
- Authenticate using your API key
- Fetch the video from VIDTREO servers
- Load and display the player
- Ready for playback
Listen to the player-ready event to know when the video is loaded:
<script>
const player = document.querySelector('vidtreo-player');
player.addEventListener('player-ready', () => {
console.log('Video is ready to play!');
});
</script>Complete Example
Here's a full working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIDTREO Player</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@vidtreo/player-wc@latest/dist/vidtreo-player.js"></script>
<style>
body {
font-family: system-ui, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
vidtreo-player {
display: block;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>My Video Player</h1>
<vidtreo-player
id="my-player"
video-id="your-video-id"
api-key="your-api-key"
screenshot
setting
fullscreen
></vidtreo-player>
<script>
const player = document.getElementById('my-player');
player.addEventListener('player-ready', () => {
console.log('Player is ready!');
});
player.addEventListener('player-error', (event) => {
console.error('Player error:', event.detail.error);
});
</script>
</body>
</html>What's Next?
- Web Component Integration — Complete integration guide
- Configuration Options — All available settings
- Events Reference — Handle player events
- Customization — Styling and theming
- Theming Examples — Theme customization examples
- Configuration Options — All settings
- Advanced Usage — Error handling, dynamic loading
- API Reference — Complete API docs
- Types Reference — TypeScript types