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