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
Hygraph is a headless CMS that offers flexibility in how content, including video, is managed. It decouples content management from presentation, allowing for easy integration into various platforms while maintaining a structured and scalable solution. To efficiently manage video content and metadata, you can set up a Hygraph project tailored for video storage, querying, and playback. Create a Hygraph Account and Set Up a Project To get started with Hygraph, you first need to create an account on the Hygraph platform: Step 1 : Go to Hygraph and sign up for a new account. Step 2 : After signing up, create a new project from your dashboard. Step 3 : Choose the project type based on your content requirements. You now have a Hygraph project ready to be configured for video content management. Defining Content Models Content models structure how your video data is organized within Hygraph. By defining a custom model, you can efficiently manage video-related data, such as metadata, video URLs, and associated assets like thumbnails. Creating a Video Content Model: Here's how to define a basic Video content model: Step 1: In the Hygraph dashboard, navigate to the Content Model section. Step 2: Create a new content model called Video . Step 3: Add the following fields to the Video model: Title (Text field) Description (Text field) Video URL (URL field) Thumbnail (Asset field) The content model should look like this: { 'title': 'Sample Video Title', 'description': 'This is a sample description of the video.', 'videoUrl': 'https://yourcdn.com/video.mp4', 'thumbnail': 'https://yourcdn.com/video-thumbnail.jpg' } Connecting to the Hygraph API Hygraph uses GraphQL, allowing you to efficiently fetch and manage video data. The next step is connecting your frontend to Hygraph to query the video data. Fetching Video Data Using GraphQL : To fetch the video details from Hygraph using GraphQL, follow these steps: 1. Generate a GraphQL endpoint from the Hygraph dashboard under API Access . 2. Use the following GraphQL query to retrieve the video data: query { video { title description videoUrl thumbnail { url } } } Explanation : query : Defines a GraphQL query to retrieve specific data from an API. video : Specifies the video object that we are querying for. title : Requests the title of the video. description : Requests the description of the video. videoUrl : Requests the URL where the video can be accessed. thumbnail : Requests the thumbnail object associated with the video. URL : Specifies that we want the URL of the thumbnail image. 3. To query the data programmatically, you can use fetch() or a GraphQL client like Apollo Client. Here's an example using fetch() in JavaScript: const fetchVideoData = async () => { const response = await fetch('https://graphql-endpoint.com', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YOUR_API_KEY', }, body: JSON.stringify({ query: ` query { video { title description videoUrl thumbnail { url } } } `, }), }); const data = await response.json(); return data.data.video; }; fetchVideoData().then(video => { console.log(video); }); Explanation : fetchVideoData : Defines an asynchronous function to fetch video data from a GraphQL API. fetch('https://graphql-endpoint.com') : Sends a POST request to the specified GraphQL endpoint. method: 'POST' : Specifies the HTTP method as POST for sending the query. headers : Defines the request headers, including Content-Type (set to application/json ) and an authorization token. Authorization : Includes a bearer token ( YOUR_API_KEY ) for authentication with the API. body : Contains the GraphQL query, which requests the title , description , videoUrl , and thumbnail.url fields from the video object. response.json() : Converts the response body into JSON format. return data.data.video : Returns the video object from the response data. fetchVideoData().then(video => { console.log(video); }) : Calls the fetchVideoData function and logs the returned video data to the console. Integrating Videos into Your Frontend Once you have fetched video data from Hygraph, it's time to integrate the videos into your frontend application. Here, we’ll demonstrate how to embed a video using HTML5’s
element. Embedding Videos on a Webpage Assuming you’ve fetched the video data, here’s an example of how you can embed the video into your webpage:
Your browser does not support the video tag.
Explanation :
: Embeds a video player in the webpage with controls (play, pause, etc.), and sets the video width to 100% of the container and height to auto for maintaining aspect ratio.
: Specifies the video source URL (video.mp4) and its MIME type (video/mp4). Your Browser Does Not Support the Video Tag. : Displays this fallback text if the user's browser does not support the
element. To display the video dynamically, bind the video URL from the Hygraph response to the src attribute: const displayVideo = (video) => { const videoElement = document.querySelector('video'); videoElement.src = video.videoUrl; }; fetchVideoData().then(displayVideo); Explanation : displayVideo : Defines a function that takes a video object as an argument. const videoElement = document.querySelector('video') : Selects the first
element on the page. videoElement.src = video.videoUrl : Sets the src attribute of the selected video element to the videoUrl from the video object. fetchVideoData().then(displayVideo) : Fetches video data asynchronously using fetchVideoData() and passes the resulting video object to the displayVideo function for display. Using Webhooks for Video Updates Hygraph’s webhook feature allows you to get notifications when video content is updated. This can be used to update your frontend automatically with the latest video content. Setting Up a Webhook : Step 1: In your Hygraph dashboard, navigate to Settings —> Webhooks and create a new webhook. Step 2: Provide the URL where your application will listen for incoming webhook notifications. Step 3: On your backend, set up an endpoint to handle the webhook payload: app.post('/webhook', (req, res) => { const { videoUrl, title } = req.body; // Logic to update the frontend with new video data console.log('Video updated:', title, videoUrl); res.status(200).send('Received video update'); }); Explanation : app.post('/webhook', (req, res) => { ... }) : Defines a POST route for the /webhook endpoint to handle incoming HTTP requests. const { videoUrl, title } = req.body : Destructures the videoUrl and title properties from the request body. console.log('Video updated:', title, videoUrl) : Logs the updated video title and URL to the console for debugging or monitoring purposes. res.status(200).send('Received video update') : Sends an HTTP response with status code 200, indicating the request was successfully processed. Storing Videos on Cloud Storage Cloud storage services like AWS S3 are commonly used to store large video files. This allows for efficient management and retrieval of videos in a scalable manner. Uploading a Video to AWS S3 Step 1: Install the AWS SDK: npm install aws-sdk Explanation : npm install aws-sdk : Installs the AWS SDK (Software Development Kit) package using npm (Node Package Manager), allowing you to interact with AWS services from a Node.js application. Step 2: Use the AWS SDK to upload videos to S3: const AWS = require('aws-sdk'); const s3 = new AWS.S3(); const uploadVideoToS3 = async (file) => { const params = { Bucket: 'your-s3-bucket', Key: `videos/${file.name}`, Body: file, ContentType: 'video/mp4', }; try { const uploadResult = await s3.upload(params).promise(); console.log('Video uploaded to S3:', uploadResult); return uploadResult.Location; } catch (err) { console.error('Error uploading video:', err); } }; Explanation : AWS : Imports the AWS SDK, allowing interaction with AWS services like S3. s3 : Creates an instance of the AWS S3 service client for managing objects in an S3 bucket. uploadVideoToS3 : Defines an asynchronous function to upload a video file to S3. params : Specifies the parameters for the file upload, including the S3 bucket name ( your-s3-bucket ), the object key (file path in S3), the file content ( Body ), and the content type ( video/mp4 ). s3.upload(params).promise() : Uploads the video file to S3 and returns a promise for the upload result. uploadResult.Location : Logs the URL of the uploaded video in S3 after the upload is successful. try/catch : Handles any errors that occur during the upload process and logs them to the console.
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
