RIXL Video SDK

The RIXL Video SDK enables you to build custom media experiences with RIXL's core technology through a highly optimized TypeScript library.

The library provides a framework-agnostic foundation for media playback experiences: fetching, caching, player state stores, analytics, and pure helpers for progress, buffering, chapters, captions, and more. It powers the React components in @rixl/media-react and can be used directly from any JavaScript/TypeScript project (vanilla, Vue, Svelte, web components, etc.).

Use of this SDK is subject to our Terms of Use.

Installation

In your project, install the Video SDK:

npm install @rixl/media
# or
pnpm add @rixl/media
# or
bun add @rixl/media

Media Fetching

| Function | Description | | --------------------------------------- | ----------------------------------- | | getImage(imageId) | Fetches image data by ID | | getVideo(videoId) | Fetches video data by ID | | getFeedPost(feedId, postId) | Fetches a single post from a feed | | getFeedPosts(feedId, offset?, limit?) | Fetches paginated posts from a feed |

Usage:

// Fetch image data
const imageData = await getImage("image-id");

// Fetch video data
const videoData = await getVideo("video-id");

// Fetch a single post from a feed
const post = await getFeedPost("feed-id", "post-id");

// Fetch paginated posts from a feed
const posts = await getFeedPosts("feed-id", 0, 10);

TypeScript Types

The library exports the following TypeScript types:

| Type | Description | | ------------------- | ---------------------------------------------- | | ImageData | Image metadata and URLs | | VideoData | Video metadata, URLs, and playback information | | FeedPost | Feed post content and metadata | | FeedPostsResponse | Paginated response for feed posts | | FileStatus | Status of a media file | | FileData | Generic file metadata |

Player State

Reactive nanostores for media playback state. All stores are framework-agnostic; consume them in React via @nanostores/react, in Vue via @nanostores/vue, etc.

| Store | Description | | ----------------------------- | ----------------------------------------------------------------------- | | playerStateStore | Per-player playback state (mute, volume, rate, tracks, fullscreen, PiP) | | controlsStore | UI controls visibility/state | | settingsStore | User settings (caption styling, language preferences, playback speed) | | postStore | Active post/content metadata | | analyticsStore | Watched-segments tracking for analytics payloads | | feedStore | Feed interaction state (transitions, initialization) | | feedCacheStore | Cached feed pages | | playerContainerElementStore | Reference to the active player container element | | playerMediaElementStore | Reference to the active media element |

Progress Bar & Player UI Actions

| Function | Description | | ----------------------------------------------- | --------------------------------------------------- | | initProgressBar({video, ...}) | Wires drag/seek interactions to a video element | | showPlayerControls() / hidePlayerControls() | Toggle controls visibility | | togglePlayerFullscreen() | Enter/exit fullscreen for the active player | | togglePlayerPictureInPicture() | Enter/exit picture-in-picture for the active player |

Pure Helpers

Selected utilities (fully tree-shakeable):

• Progress / buffer: computeProgressFraction, computeBufferRanges, computeBufferedAhead
• Chapters & heatmap: calculateChaptersWithEnd, calculateHeatmapSlices, sliceHeatmapData, validateChapters
• Subtitles & captions: extractSubtitleTracks, processCues, findNextCue, calculateFontSize, constrainPercentagePosition
• Volume / fullscreen / PiP: calculateVolumeToSet, shouldBeMuted, isEffectivelyMuted, isDocumentFullscreen, togglePictureInPicture
• Persistence: getPersistedProgress, persistProgress, getPersistedAudioTrack, getPersistedSubtitleTrack, loadSettings, saveSettings
• HLS / quality: sortLevelsByQuality, generateLevelName, getQualityLabel, isHlsStream
• Analytics: postContentEvent, buildVideoAnalyticsPayload, buildContentViewEvent, calculateWatchDuration
• Formatting: formatTime, formatNumber, formatNumberSm, clamp, hexToRGB, hexToRGBAString

API Reference

All data is fetched from https://api.rixl.com.

REST Endpoints

| Endpoint | Description | | --------------------------------------------------------------- | --------------------------------------------- | | GET /images/{imageId} | Fetch image metadata and URLs | | GET /videos/{videoId} | Fetch video metadata and playback information | | GET /feeds/{feedId}/posts?offset=...&limit=... | Fetch paginated feed posts | | GET /feeds/{feedId}/posts/{postId} | Fetch a specific feed post | | GET /feeds/{feedId}/creators/{creatorId}?offset=...&limit=... | Fetch posts by a specific creator |

Documentation

For complete documentation, tutorials, and examples, visit our SDK Documentation.

Need Help?

• Developer Support
• Developer Forum
• Premier Developer Support (priority support)