Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
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.
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); });
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
