Hosting MP4 video files in a headless CMS (like Strapi, Contentful, or others) combined with Cloudflare Stream simplifies video content management, delivery, and optimization. Cloudflare Stream enables seamless video content storage, transcoding, and streaming, while a headless CMS handles metadata, content management, and flexible API delivery. This architecture is highly scalable, secure, and efficient for handling large-scale video delivery in modern web applications.
Architecture Overview
The architecture integrates key components that ensure efficient video hosting, delivery, and playback:
Cloudflare Stream: A platform for secure video hosting, transcoding, and adaptive streaming. It automatically handles video encoding, with support for HLS or MP4 formats, and delivers content globally via Cloudflare's CDN. The platform optimizes video quality based on user bandwidth and provides high availability and low-latency playback.
Headless CMS (e.g., Strapi): Manages video metadata, such as titles, descriptions, and playback URLs generated by Cloudflare Stream. The CMS decouples content from its presentation layer, making it easier to manage and distribute video content to websites, mobile apps, and other platforms via APIs.
Cloudflare CDN: Accelerates video delivery by caching content on edge servers globally, ensuring low-latency streaming and responsive playback across regions.
JW Player (or Other Video Players): Integrates with Cloudflare Stream URLs and offers a customizable player to render video content. JW Player enhances user experience with features like adaptive bitrate streaming, captions, custom playback controls, and can be embedded into your web application via the CMS.
This architecture ensures secure video storage, efficient delivery, and smooth playback while being easily manageable through the headless CMS.
Hosting MP4 Files in Cloudflare Stream
Cloudflare Stream simplifies the process of hosting MP4 video files by handling storage, transcoding, and adaptive bitrate streaming automatically. Follow the steps below to upload MP4 files to Cloudflare Stream and retrieve playback URLs.
Step 1: Upload MP4 Video to Cloudflare Stream
You can upload MP4 files directly to Cloudflare Stream either via the web UI or using their API. The following curl command shows how to upload an MP4 file to Cloudflare Stream using the API.
curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account_id}/stream" \
-H "Authorization: Bearer {api_token}" \
-F "file=@/path/to/video.mp4"
After successfully uploading an MP4 Video to Cloudflare Stream, Cloudflare will further transcode the video and generate a playback URL.
Step 2: Retrieving Playback URL
Once the video has been uploaded, Cloudflare Stream will transcode the video and generate a playback URL. The response from the upload request will contain the playback_url.
{
"result": {
"uid": "video_id",
"playback_url": "https://watch.cloudflarestream.com/video_id"
}
}
This playback_url can be embedded into your website or integrated into the CMS for easy access.
Integrating Cloudflare Stream with a Headless CMS
Integrating Cloudflare Stream with a headless CMS such as Strapi enables efficient content management for video metadata. You can use Strapi"s API to manage the video title, description, and playback URL dynamically.
Step 1: Define a Video Content Type in Strapi
To manage video content effectively within Strapi, you need to create a custom Video content type. This content type will store metadata for each video, such as the title, description, and playback URL. Defining a content type ensures that your videos can be managed, queried, and delivered efficiently.
Content Type Definition:
In your Strapi admin panel, navigate to Content Type Builder and define a new content type called Video. Add attributes such as title, description, and playbackUrl.
{
"name": "Video",
"attributes": {
"title": { "type": "string" },
"description": { "type": "text" },
"playbackUrl": { "type": "string" }
}
}
Step 2: Add Video Data to Strapi
With the Video content type created, you can now add individual video data entries, including the metadata like title, description, and playback URL. You can do this manually through the Strapi admin interface or programmatically through the Strapi API.
Example:
In the Strapi admin panel, create a new video entry with the following metadata:
{
"title": "Sample Video",
"description": "A sample video for testing.",
"playbackUrl": "https://watch.cloudflarestream.com/video_id"
}
Explanation:
- Title: → Sample Video → is the title of the video.
- Description: This provides a brief description of the content of the video.
- PlaybackUrl: This is the URL pointing to the Cloudflare Stream video, which can be used to stream the video directly through the player.
This allows Strapi to store your video metadata along with the necessary playback URL, making it easy to retrieve and embed in your frontend application.
Embedding Cloudflare Stream Video in a Web Application
After the video data is stored in Strapi, you can fetch this data through Strapi"s REST or GraphQL API and embed the video in your frontend application using a video player like JW Player.
Example: Embedding with JW Player
Once you retrieve the video playback URL from Strapi, you can use it to initialize JW Player or any other HTML5 player. The integration is simple and enables you to customize video playback on your website.
<div id="player"></div>
<script src="https://cdn.jwplayer.com/libraries/your-library-id.js"></script>
<script>
jwplayer("player").setup({
file: "https://watch.cloudflarestream.com/video_id",
image: "https://your-image-url.jpg", // Optional thumbnail
width: "100%",
aspectratio: "16:9"
});
</script>
Explanation:
- File: The file property in the JW Player setup is the URL pointing to the video stored in Cloudflare Stream (retrieved from Strapi).
- Image: The image property is optional but recommended for setting a preview thumbnail for the video. You can upload and retrieve a custom thumbnail image for each video, making it visually appealing in the UI.
- Width: Set to 100% to make the player responsive to the parent container"s width.
- Aspect Ratio: Set to 16:9 to ensure the video maintains the correct aspect ratio during playback.
Caching and CDN Delivery with Cloudflare
Cloudflare Stream caches video content across its global CDN. This means that video files are stored on servers located closer to the end user, reducing the time it takes to load and stream the video. By using Cloudflare's edge servers, video content can be delivered faster, reducing the impact of latency and ensuring smoother playback.
Cloudflare Stream automatically handles caching of videos, but you can improve this process further by configuring specific cache settings for video content in Cloudflare"s Page Rules. These rules allow you to define how long content should be stored on Cloudflare"s edge servers before it is considered outdated and needs to be re-fetched from the origin server.
Set Cache TTL for Video Content
In the Cloudflare Dashboard, you can set the Cache Time-to-Live (TTL) for your video URLs. The TTL dictates how long Cloudflare will cache a video file on its servers. After the TTL expires, Cloudflare will check for any updates to the video or re-fetch the file from the origin server.
By adjusting the TTL, you can control how frequently Cloudflare fetches updated video content from the origin server. For videos that don't change frequently, you can set a longer TTL to keep the video cached for a longer period, reducing the need to fetch it from the origin server on every request.
Security and Access Control
Cloudflare Stream supports secure video delivery using token-based authentication and signed URLs. Signed URLs restrict access to video content, ensuring only authorized users can view the video. You can generate signed URLs through the Cloudflare API or your backend.
Generate a Signed URL
To generate a signed URL, use the Cloudflare API or your backend service. Here's how to generate a signed URL via API:
curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account_id}/stream/{video_id}/signed_url" \
-H "Authorization: Bearer {api_token}" \
-d "expires_at=2023-12-31T23:59:59Z"
The signed URL will ensure that only users with the token can access the video.
Optimizing Video Delivery with Cloudflare Stream
Cloudflare Stream handles adaptive bitrate streaming (ABR) automatically, ensuring that videos are delivered in the most appropriate quality based on user bandwidth. No further action is required on your part to enable this feature.
Best Practices:
- Use Adaptive Bitrate Streaming to improve video playback performance across varying network speeds.
- Enable HTTPS for secure delivery of video content.
- Regularly clear and invalidate caches to ensure the latest content is delivered after updates.
Error Handling for Video Playback
Error handling provides a smooth user experience during video playback. Both JW Player and HTML5 video players offer ways to detect errors and respond to them. JW Player triggers an error event when something goes wrong during video playback. Developers can listen to this event, log the error, and take action based on the error type (e.g., load a backup video or display a message).
jwplayer("player").on("error", function(event) {
console.error("Video playback error:", event.message);
});