This guide explains how to embed recorded videos into external websites using the Fermion SDK.

The Fermion SDK is open source and available on GitHub: github.com/fermion-app/sdk

​
Prerequisites

  • Video ID from your Fermion dashboard
  • Fermion API key (only if you disable public embeds)
  • Access to your website’s codebase

​
Step 1: Enable Video Library and Get Video ID

First, go to Manage features tab on your instructor dashboard and enable Video library:

After that, go to Video library and upload a video if you haven’t:

Each video on Fermion has a unique identifier (e.g., 6779080e80ec97e953a17971). You’ll need this ID for embedding.

​
Step 2: Install the SDK

npm install @fermion-app/sdk
# or
yarn add @fermion-app/sdk
# or
pnpm add @fermion-app/sdk

​
Step 3: Basic Video Embedding

​
Public Video Embedding

For public videos, you can use the following code:

import { FermionRecordedVideo } from '@fermion-app/sdk/recorded-video'

// Create a video instance
const video = new FermionRecordedVideo({
	videoId: 'your-video-id',
	websiteHostname: 'your-domain.fermion.app',
})

// Get the embed code
const publicEmbed = video.getPubliclyEmbedPlaybackIframeCode()
console.log(publicEmbed.iframeHtml)

​
Private Video Embedding

If your video is not public, you’ll need to generate a JWT token for authentication:

import jwt from 'jsonwebtoken'

const payloadObject = {
	type: 'external-embed',
	videoId: 'your-video-id',
	userId: 'unique-user-id',
}

const jwtToken = jwt.sign(payloadObject, 'FERMION_API_KEY', {
	expiresIn: '10h',
})

Important notes: - Replace FERMION_API_KEY with your actual API key - Provide a unique user ID for each viewer - Recommended token validity is 10h-20h

Then use the token to embed the video:

const privateEmbed = video.getPrivateEmbedPlaybackIframeCode({
	jwtToken: 'your-jwt-token',
})
console.log(privateEmbed.iframeHtml)

​
Step 4: Add Event Listeners (Optional)

Track video playback events using the SDK’s event system:

const video = new FermionRecordedVideo({
	videoId: 'your-video-id',
	websiteHostname: 'your-domain.fermion.app',
})

// Setup event listeners
const events = video.setupEventListenersOnVideo()

// Listen for video events
events.onVideoPlay((data) => {
	console.log('Video started playing at', data.durationAtInSeconds, 'seconds')
})

events.onVideoPaused((data) => {
	console.log('Video paused at', data.durationAtInSeconds, 'seconds')
})

events.onVideoEnded(() => {
	console.log('Video playback ended')
})

// When done, clean up the listeners
events.dispose()

Event listeners only work when using the Fermion video player through getPubliclyEmbedPlaybackIframeCode or getPrivateEmbedPlaybackIframeCode. They are not available when using manual M3U8 playback.

​
Advanced: Custom M3U8 Playback

For advanced use cases, you can get the M3U8 playback URL to use with your own video player:

const video = new FermionRecordedVideo({
	videoId: 'your-video-id',
	websiteHostname: 'your-domain.fermion.app',
})

// Get M3U8 playback URL
const m3u8Url = await video.getM3U8PlaybackUrl({
	origin: 'https://cdn-storage.fermion.app',
	m3u8Pathname: '/path/to/your/playlist.m3u8',
	decryptionKey: '6815d8748df5297181862d32',
	signedUrlSearchParams: '?verify=signature_here',
})

// Use this URL with your custom HLS player

To get the playback options (origin, m3u8Pathname, decryptionKey, signedUrlSearchParams), you need to call the get-signed-url-data-for-recorded-video-playback API endpoint from your backend server with your Fermion API key. Refer to API Reference for more information.