One of the advantages of using DatoCMS instead of other content management systems is its video
query, which will return pre-computed video attributes that will help you display videos in your frontend without any additional manipulation.
To make it easy to offer optimized, progressive videos on your projects, we offer a package called react-datocms
that exposes a <VideoPlayer />
component and pairs perfectly with the video query.
To take advantage of it, install the react-datocms
package:
npm install react-datocms
Then, inside your page, feed content coming from a video
query directly into the <VideoPlayer />
component:
import { VideoPlayer } from "react-datocms";import { performRequest } from '../lib/datocms';const PAGE_CONTENT_QUERY = `query HomePage($limit: IntType) {allBlogPosts(first: $limit) {idtitlecoverVideo {video {muxPlaybackIdtitlewidthheightblurUpThumb}}}}`;export default async function Home() {const pageContent = await performRequest({query: PAGE_CONTENT_QUERY,variables: { limit: 10 },});return (<div>{data.allBlogPosts.map(blogPost => (<article key={blogPost.id}><VideoPlayer data={blogPost.coverVideo.video} /><h2>{blogPost.title}</h2></article>))}</div>);}