Preview
Changes reflect live as you adjust settings belowEmbed Code
<!-- VSL Player -->
<div data-vsl-video="cmjpa4tha0001c9g5m1p8v3mj" data-vsl-origin="https://vsl-player.alexell.io" data-vsl-api="" style="width: 100%; aspect-ratio: 16/9;"></div>
<script src="https://vsl-embed.alexell.io/embed.min.js" async></script>Programmatic Usage
// Programmatic usage
const player = new VSLEmbed(
document.getElementById('player-container'),
'cmjpa4tha0001c9g5m1p8v3mj',
{
playerOrigin: 'https://vsl-player.alexell.io',
apiBase: '',
config: {}
}
);
// Events
player.on('play', () => console.log('Playing'));
player.on('pause', () => console.log('Paused'));
player.on('progress', ({ milestone }) => console.log(`Reached ${milestone}%`));
player.on('timedevent', ({ eventType, eventData }) => {
// Handle timed events (show CTA, fire pixel, etc.)
});
player.on('seekblocked', () => {
// User tried to skip ahead
});
player.on('float', ({ floating, position }) => {
// Video entered/exited floating mode
console.log(floating ? `Floating at ${position}` : 'Back to inline');
});
player.on('floatdismiss', () => {
// User closed the floating player
});
// Control
player.play();
player.pause();
player.setVolume(0.5);
// Floating player control
player.setFloatingConfig({ position: 'top-right', width: 400 });
player.enableFloating(); // Re-enable after dismissProgress Bar Settings
Presets:
Double-click to add points. Right-click to remove. Drag to adjust.
0:00 / 0%
Preview (what viewers see):
Mapping: [0:00: 0%] → [0:59: 75%] → [2:26: 86%] → [5:00: 100%]
Video Info
Cloudflare Video ID
46f61df8463fa07d20ab8737866bb6c7
Account ID
ea07c55eecb19167d09f569683e80275
Timed Events
No timed events configured.