Next.js

Displaying videos

Pro tip: Start with our how-to guides first

If you're new to hosting videos on DatoCMS, we recommend first starting with our tutorials:

How to upload videos: Videos and Video Optimizations
Why you should use HLS Streaming via Mux: How to stream videos efficiently: Raw MP4 Downloads vs HLS Streaming

Then, this page provides framework-specific playback advice using our helper components. Read on when you're ready!

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:

1
import { VideoPlayer } from "react-datocms";
2
import { performRequest } from '../lib/datocms';
3

4
const PAGE_CONTENT_QUERY = `query HomePage($limit: IntType) {
5
  allBlogPosts(first: $limit) {
6
    id
7
    title
8
    coverVideo {
9
      video {
10
        muxPlaybackId
11
        title
12
        width
13
        height
14
        blurUpThumb
15
      }
16
    }
17
  }
18
}`;
19

20
export default async function Home() {
21
  const pageContent = await performRequest(PAGE_CONTENT_QUERY, {
22
    variables: { limit: 10 },
23
  });
24

25
  return (
26
    <div>
27
      {data.allBlogPosts.map(blogPost => (
28
        <article key={blogPost.id}>
29
          <VideoPlayer data={blogPost.coverVideo.video} />
30
          <h2>{blogPost.title}</h2>
31
        </article>
32
      ))}
33
    </div>
34
  );
35
}