Web Player SDK¶

The VaultStream Web Player SDK enables embedded encrypted video playback in any web application.

Installation¶

Script Tag¶

<script src="https://player.cyfr.technology/v2/vaultstream-player.js"></script>

npm¶

npm install @cyfr/vaultstream-player

import { VSPlayer } from '@cyfr/vaultstream-player';

Quick Start¶

<div id="player" style="width: 100%; max-width: 960px; aspect-ratio: 16/9;"></div>

<script>
  VSPlayer.mount('#player', {
    contentId: 'c_7a3b9f1d',
    jwt: '<USER_SESSION_JWT>',
    theme: 'dark'
  });
</script>

Full Configuration¶

const player = VSPlayer.mount('#player', {
  // Required
  contentId: 'c_7a3b9f1d',
  jwt: '<USER_JWT>',

  // Branding
  logoUrl: 'https://acme.corp/logo.svg',
  brandName: 'Acme Training Portal',
  theme: 'custom',
  accentColor: '#2563eb',

  // Behavior
  autoplay: false,
  muted: false,
  startPosition: 0,
  defaultQuality: 'auto',
  defaultSpeed: 1.0,

  // Features
  showSubtitles: true,
  showQualitySelector: true,
  offlineSupport: true,

  // Watermark (enterprise)
  watermark: {
    text: 'ACME CORP — CONFIDENTIAL',
    opacity: 0.08,
    position: 'center'
  },

  // Callbacks
  onReady: () => console.log('Player ready'),
  onPlay: (data) => trackEvent('play', data),
  onPause: (data) => trackEvent('pause', data),
  onEnd: (data) => trackEvent('complete', data),
  onProgress: (pct) => {
    if (pct >= 90) markComplete();
  },
  onError: (err) => {
    console.error('Playback error', err.code, err.message);
    showErrorUI(err);
  }
});

// Player API
player.play();
player.pause();
player.seek(120);  // seconds
player.setQuality('720p');
player.setSpeed(1.5);
player.toggleFullscreen();
player.destroy();

Framework Integration¶

React¶

import { useEffect, useRef } from 'react';
import { VSPlayer } from '@cyfr/vaultstream-player';

export function VideoPlayer({ contentId, jwt }) {
  const containerRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    playerRef.current = VSPlayer.mount(containerRef.current, {
      contentId,
      jwt,
      theme: 'dark'
    });
    return () => playerRef.current?.destroy();
  }, [contentId, jwt]);

  return <div ref={containerRef} style={{ aspectRatio: '16/9' }} />;
}

Vue¶

<template>
  <div ref="playerContainer" style="aspect-ratio: 16/9;"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { VSPlayer } from '@cyfr/vaultstream-player';

const props = defineProps(['contentId', 'jwt']);
const playerContainer = ref(null);
let player = null;

onMounted(() => {
  player = VSPlayer.mount(playerContainer.value, {
    contentId: props.contentId,
    jwt: props.jwt,
    theme: 'dark'
  });
});

onUnmounted(() => player?.destroy());
</script>

Supported Browsers¶

Browser	Version
Chrome	90+
Firefox	90+
Safari	14+
Edge	90+

Security¶

All video segments are AES-128 encrypted
The player handles key exchange transparently — no key material is exposed to the DOM
JWT tokens are validated on every segment request
Content Security Policy compatible