Product Updates

DatoCMS changelog for new features and general improvements
Images API Content Delivery API

A <VideoPlayer /> for everyone

February 29th, 2024

We've released new <VideoPlayer /> components for React, Vue and Svelte. The component makes it straightforward to display a video from data retrieved from the GraphQL API, and acts as a wrapper around Mux's video player web component.

Given a query like this:

1
query {
2
blogPost {
3
title
4
cover {
5
video {
6
muxPlaybackId
7
title
8
width
9
height
10
blurUpThumb
11
}
12
}
13
}
14
}

It's possible to display the video with:

React, Next.js, Remix

import React from 'react';
import { VideoPlayer } from 'react-datocms';
<VideoPlayer data={data.blogPost.cover.video} />

Vue, Nuxt

import Vue from 'vue';
import { DatocmsVideoPlayerPlugin } from 'vue-datocms';
Vue.use(DatocmsVideoPlayerPlugin);
<datocms-video-player :data="data.blogPost.video" />

Svelte, SvelteKit

import { VideoPlayer } from '@datocms/svelte';
<VideoPlayer data={data.blogPost.cover.video} />
Start using DatoCMS today
According to Gartner 89% of companies plan to compete primarily on the basis of customer experience this year. Don't get caught unprepared.
  • No credit card
  • Easy setup
Subscribe to our newsletter! 📥
One update per month. All the latest news and sneak peeks directly in your inbox.
support@datocms.com ©2024 Dato srl, all rights reserved P.IVA 06969620480