Integrate video data with player
Integrate video data with player
FastPix Web Player lets you attach rich metadata to live streams using attributes like metadata-workspace-key, metadata-video-title, metadata-viewer-user-id, and metadata-video-id for analytics, monitoring, and per-viewer tracking.
1. How it works
The page loads the FastPix Player SDK via a script tag. The defer attribute ensures the custom element is registered before any JavaScript runs against it.
2. Setting up the player element
3. Identifying the stream
4. Attaching workspace metadata
5. Labelling the video
6. Tracking the viewer
7. Identifying the video asset
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <!-- Registers the <fastpix-player> custom element -->
8 <script src="https://cdn.jsdelivr.net/npm/@fastpix/fp-player@latest" defer></script>
9</head>
10<body>
11 <!--
12 playback-id: FastPix live asset id (replace with yours).
13 stream-type: set to "live-stream" to enable live playback mode.
14 metadata-workspace-key: your FastPix workspace key for analytics.
15 metadata-video-title: human-readable label for the video in dashboards.
16 metadata-viewer-user-id: unique identifier for the viewing user (for per-viewer tracking).
17 metadata-video-id: unique identifier for this specific video asset.
18 -->
19 <fastpix-player
20 playback-id="your-live-playback-id"
21 stream-type="live-stream"
22 metadata-workspace-key="your-metadata-key"
23 metadata-video-title="video title"
24 metadata-viewer-user-id="user id"
25 metadata-video-id="video-id"
26 ></fastpix-player>
27</body>
28</html>