PRODUCTS
.png)
This article will guide you in building an e-learning application using FastPix Video API. If you are familiar with applications such as Udemy, Coursera, or Skillshare, you already know about video streaming.
Such applications can be quite complex to make. That’s why we’ll be using FastPix Video API to take the hassle out of video streaming, allowing us to focus on the fun part: building our e-learning platform.
Let's have an overview of the features present in your e-learning platform.
To integrate our APIs into your application, you would need a token key pair for authentication, which includes an Access Token and a Secret Key. Our setup page provides a helpful guide to walk you through the process, covering basic authentication, access token permissions, etc.
Building a Udemy like platform is messier and more complicated than you might think. A generic high-resolution lecture recording can easily reach 2-3 GB. Uploading such videos with standard upload limits will be difficult.
Single-threaded uploads are slow and time-consuming, and uploading large files all at once can place a heavy load on the client’s device. So, we recommend uploading videos in chunks and preventing any network interruptions due to connection failures because large file sizes overwhelm the network.
Udemy platform interface for video uploads:
Standard API requests using direct uploads endpoint only support up to 500 MB of video files. If you have large files to upload, you can use the FastPix resumable uploads SDK to make video uploads and processing for your videos easier.
This SDK lets you pause and resume uploads, so if your connection drops or you need to take a break, you won’t have to start over. With resumable uploads, you can send your videos in smaller chunks, which means that your progress is saved even if there’s a brief interruption.
You can install the SDK using:
1npm i @fastpix/uploader
Making API requests with an SDK is easier. SDKs give you pre-built functions that take care of error handling and authorization for you. FastPix has SDKs for both Android and iOS, so you can easily integrate it into your mobile apps.
After installation, you can run this command in your terminal to import the upload component into your application:
1import {Uploader} from "@fastpix/uploader"
This SDK makes it easy to upload large files from your browser by splitting them into smaller chunks, which are much more manageable than one large file. Plus, you can pause and resume uploads whenever you need to.
1const fileUploader = Uploader.init({
2 endpoint: 'https://example.com/signed-url', // Replace with the signed URL.
3 file: mediaFile, // Provide the media file you want to upload.
4 chunkSize: 5120, // Specify the chunk size in kilobytes (KB). Minimum allowed chunk size is 5120KB (5MB).
5 // Additional optional parameters can be specified here as needed
6})
You can also manage the upload lifecycle process using methods such as:
- Pause an upload
- Resume an upload
- Abort an upload
Video stored with FastPix are referred to as media. To create your first media, you’ll need to send a POST request to the /on-demand endpoint with the URL of a video file that is set as publicly shareable. (This is the pull-based upload feature)
The API response is a media ID that will be used for other operations to this video file.
FastPix allows you to pull media files from several cloud storage solutions or Content Delivery Networks (CDNs). These can include URLs originating from S3 storage, Google Cloud Storage, Azure Blob Storage, and other public CDNs. Read the detailed guide.
This is how it looks in the Udemy platform:
You could also upload a video file directly from your device’s storage to FastPix for processing and storage. For uploading a video from your device, follow this guide: Upload media from device.
FastPix uses webhooks to notify your application about events that occur in the background beyond the standard API request flow. For example, when a media file is created (but not yet processed or encoded), we’ll send a POST message to the address of your application with the webhook event video.media.created.
You can follow this guide for setting up webhooks: Webhooks for status.
Migrating your video library to your new e-learning platform doesn’t have to be a daunting task. Here’s how you can make the transition smooth and efficient:
Bulk uploads feature in Udemy:
Tagging and categorizing videos helps users find what they need quickly. You can build a functionality to search for videos with specific key-value pairs when you tag a video in "key": "value" pairs. This can be referenced in your future API calls. Dynamic Metadata allows you to define a key that allows any value pair. You can leverage this to track and manage media more efficiently.
Ever tried to create an online course? What sounds like a simple task of recording and uploading a video quickly turns into a multi-layered technical challenge.
Most instructors start with hours of unedited recordings, and raw footage is rarely course-ready. There may be awkward pauses, technical glitches, background noise, etc. But fixing those issues is easy, and here’s how you can do it.
To clip sections from the video uploaded earlier, you’ll have to follow a few steps:
fp_media:// to the existing media ID in the payload's URL parameter to enable clipping.startTime and endTime of the clip. If you don’t provide these values, the default will be the full duration of the existing media ID.
Your request body would look like this:
1{
2 "inputs": [
3 {
4 "type": "video",
5 "url": "fp_media://0dde8722-278b-49e2-b0c8-52b57aaf2843",
6 "startTime": 0,
7 "endTime": 60
8 }
9 ],
10 "metadata":
11 {
12 "key1": "value1"
13 },
14 "accessPolicy":"public",
15 "maxResolution":"1080p"
16}
Once the clip is created, the API will return a response that includes a new media ID and playback ID for the clip.
To add bumpers (intro/outro) to your video, simply provide the media URLs for the bumper files in your API request. Bumpers act as introductions and conclusions for your content.
1{
2 "inputs":
3 [
4 {
5 "type": "video",
6 "url": "https://static.fastpix.io/Mainvideo.mp4",
7 "introUrl": "https://static.fastpix.io/introvideo.mp4",
8 "outroUrl": "https://static.fastpix.io/outrovideo.mp4",
9 }
10 ]
11}
Here, url is the base video URL of your main video, introUrl is the intro video’s URL and outroUrl is the outro video’s URL.
For detailed instructions, check out this guide for adding intros and outros: Add an intro and outro to your video.
Let’s say you want to remove unnecessary sections from your videos due to mistakes, interruptions, or irrelevant content.
Follow our easy guide here to remove unwanted parts from your video.
A consistent audio quality is important for a polished video. Here’s a short guide to normalize audio levels: Optimize the loudness of audio content.
Spritesheets are a great way to create quick video previews, but many people struggle with challenges with the technicality of compiling frames and ensuring smooth playback.
But don’t worry, check out our guide here: Add timeline hovers using spritesheets.
The video you uploaded earlier will be compatible with any player, including Shaka Player, HLS Player, Exo Player for Android, and AV Player for iOS. This gives you the freedom to pick the player that suits you best.
You could also use the FastPix Player which natively supports adaptive bitrate streaming (ABR), this means your videos will automatically adjust their quality based on the viewer's internet speed, leading to smoother playback and a better experience for everyone.
FastPix Player also includes built-in video data and analytics features. Transcoding videos for different devices is done by default, and an encoding ladder with renditions is created for each video.
Our player is cross-platform, so your videos will work by default on the web, Android, iOS, etc.
Run the command below in your terminal to install the Video Player SDK:
1npm install @fastpix/player
Then, import the player component in your application:
1import "fastpix-player";
You can easily customize your video player’s look and feel by tweaking the CSS selectors. This lets you adjust controls, height, width, aspect ratio, etc. to match your app’s design.
Here’s how to modify the player component:
1fp-player {
2 height: 800px;
3 width: 600px;
4 aspect-ratio: 16/9;
5}
User convenience: Easily configure the player to support on-demand streaming, allowing users to access and play videos at their convenience.
Compatibility across frameworks: FP-Player is compatible with a wide range of web frameworks (such as React, Angular, and Vue), allowing easy integration regardless of your tech stack.
Customizable skins and themes: You can customize or create skins that align with the look and feel of your application, enhancing brand coherence.
Accessibility support: FP-Player is designed with accessibility in mind, offering features like keyboard navigation, closed captions, and screen-reader support.
Theme and style options: Adjust colors, fonts, and control layouts to match your application’s design, or create a fully branded player experience.
Advanced playback settings: Configure autoplay, looping, and seek-bar settings based on user experience requirements, making the player adaptable to different types of content.
To add a watermark to your video, you’ll want to set up your API request with a payload that outlines both the video and watermark details. You can control where the watermark appears using alignment and margin settings and customize its look by adjusting the size and opacity.
Follow our guide here to add watermarks to videos: Watermark your videos.
To generate thumbnails from your video, make a GET request to this URL using the playback ID of your video.
1https://images.fastpix.io/{PLAYBACK_ID}/thumbnail.{png|jpg|webp}
You can get thumbnails in JPG, PNG, and WEBP formats. Using WEBP is recommended because it offers a nice balance between quality and loading speed and is widely used for web-based platforms.
You can customize the thumbnails generated using parameters like width, height, horizontal and vertical flip, etc.
Follow this guide for an in-depth explanation of the parameters and how to use them: Extract thumbnails from video.
FastPix automatically creates and adds subtitles for your video files. To turn on auto-generated subtitles, just include the createSubtitles JSON object in your video settings.
This object has three key-value pairs:
For detailed guidelines and best practices for adding subtitles, check out this guide: Add auto-generated subtitles.
An NSFW (Not Safe For Work) filter helps you identify and manage inappropriate content so your platform is professional and user-friendly.
We recently tested our NSFW filter using a sample video that contained various types of content, but mostly violence. Here’s what we found:
These scores are measured on a scale of zero to one, which shows that the filter does a great job of catching potentially harmful content.
To implement an NSFW filter for your existing video, just make a PATCH request to your video’s mediaId. Add the moderation parameter and set it to true. This will turn on the NSFW filter for that video. Read detailed guide.
PATCH /on-demand/<mediaId>/moderation
For more tips on content moderation, be sure to check out our blog on AI Content Moderation Using NSFW and Profanity Filters.
MP4 support lets uploaders download videos in up to 1080p quality for editing, sharing, or any other purpose, making it easy to manage your content.
Check out our guide on setting up download for a MP4 video here: MP4 support for offline viewing.
Understanding how your videos perform is crucial for online learning platforms. However, many creators find it challenging to make sense of complex data and find useful insights.
FastPix Video Data helps you break down information by over 50 dimensions, like device type, region, playback type, and timeframes. This gives you clear insights into how viewers interact with your content and shows where you can improve. With this info, you can enhance content delivery, optimize streaming, and keep your users happy.
FastPix Data SDK makes it easy to track these important video metrics. Here’s an example of how you can track data from Shaka player. You can also integrate with other players like HLS.js player, Exo player (Android), AV player (iOS), FastPix player.
See the detailed guide for Shaka Player: Monitor Shaka Player.
Evaluating video performance is more than just basic video view counts because those numbers only scratch the surface. You should focus on other key metrics like:
Video playing time is a key metric for many online learning platforms that reveals viewer engagement and content effectiveness. A high playing time indicates that your audience is not just clicking on your videos but is genuinely invested in watching them.
Learn more about audience metrics here.
To get a good sense of the Quality of Experience (QoE) for your videos, focus on a few key metrics: playback success, startup time, smoothness, and video quality.
Additionally, FastPix Data also measures playback failure percentage, video startup failure percentage, and rebuffer percentage.
For more details, check out the QoE metrics guide here.
When it comes to playback failure, there are a couple of important metrics to keep in mind: playback failure rates and exits before the video starts.
By monitoring these metrics, you can identify potential barriers that might be frustrating your audience and work on solutions to improve their viewing experience.
Learn more about these metrics here.
To control access to your video, you can modify the accessPolicy parameter. Setting it to “drm” enables digital rights management for protecting your content.
However, if you prefer a less complex approach, you can simply set the access policy to “private” to restrict access without the overhead of DRM.
Here’s how you can set the access policy to DRM:
1"accessPolicy": "drm"
And here’s how you set the access policy to private:
"accessPolicy": "private"
You can set the value to “public,” “private,” or “drm”.
Signed URLs are an important tool for managing video uploads on your platform. Using FastPix API, you can programmatically generate a signed URL that encodes permissions and expiration details so content creators can upload videos directly to your storage without exposing sensitive credentials.
For example, a signed URL might look like this:
https://play.fastpix.io/uploads/...&X-Amz-Expires=3600
Where the X-Amz-Expires parameter specifies the URL's validity period. In this case, 3600 seconds (1 hour) from the time of generation.
You're all set with the essential steps to build your very own e-learning platform like Udemy using FastPix Video APIs. With features for video management, editing, and analytics, you can create a smooth learning experience for your users.
If you have any questions or need further assistance, feel free to reach out. Happy building, and don’t forget to check out FastPix docs for more resources and support!
Start with five videos, it's better to do a few things perfectly than many things poorly.
Follow a folder structure, separating videos, metadata, and other assets.
Start with 720p, with a 1080p option for detailed content. Always include adaptive bitrate streaming.
Our design guidelines ensure your platform works everywhere: mobile, tablet, and desktop.
Use our basic analytics setup to monitor video completion and engagement or you can also integrate your application with other third-party LMS tools.
.png)
.png)
