Product Updates

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:

query {
  blogPost {
    title
    cover {
      video {
        muxPlaybackId
        title
        width
        height
        blurUpThumb
      }
    }
  }
}

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} />