Next.js Starter Kit
Words are nice... but code speaks louder. Dive into a fully commented project template, showcasing these techniques (and more) in action.
Sorry, no results found for "".
Next.js > Displaying videos
Displaying videos
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-datocmsThen, 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) { id title coverVideo { video { muxPlaybackId title width height blurUpThumb } } }}`;
export default async function Home() { const pageContent = await performRequest(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> );}