<VideoPlayer /> is a Svelte component specially designed to work seamlessly with DatoCMS’s video GraphQL query that optimizes video streaming for your sites.

To stream videos, DatoCMS partners with MUX, a video CDN that serves optimized streams to your users. Our component is a wrapper around MUX's video player web component. It takes care of the details for you, and this is our recommended way to serve optimal videos to your users.

• Offers optimized streaming so smartphones and tablets don’t request desktop-sized videos
• Lazy loads the underlying video player web component and the video to be played to speed initial page load and save bandwidth
• Holds the video position so your page doesn’t jump while the player loads
• Uses blur-up technique to show a placeholder of the video while it loads

• Installation
• Usage
• Example
• Props
• Opt-in Viewer Analytics

npm install --save @datocms/svelte @mux/mux-player

@mux/mux-player is a peer dependency for @datocms/svelte: so you're expected to add it to your project.

1. Import VideoPlayer from @datocms/svelte and use it in your app
2. Write a GraphQL query to your DatoCMS project using the video query

The GraphQL query returns data that the VideoPlayer component automatically uses to properly size the player, set up a “blur-up” placeholder as well as lazy loading the video.

<script>

import { onMount } from 'svelte';

import { VideoPlayer } from '@datocms/svelte';

const query = gql`
  query {
    blogPost {
      title
      cover {
        video {
          # required: this field identifies the video to be played
          muxPlaybackId

          # all the other fields are not required but:

          # if provided, title is displayed in the upper left corner of the video
          title

          # if provided, width and height are used to define the aspect ratio of the
          # player, so to avoid layout jumps during the rendering.
          width
          height

          # if provided, it shows a blurred placeholder for the video
          blurUpThumb

          # if provided, it enables DatoCMS Content Link for click-to-edit overlays
          alt

          # you can include more data here: they will be ignored by the component
        }
      }
    }
  }
`;

export let data = null;

onMount(async () => {
  const response = await fetch('https://graphql.datocms.com/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: "Bearer AN_API_TOKEN",
    },
    body: JSON.stringify({ query })
  })

  const json = await response.json()

  data = json.data;
});

</script>

<article>
  {#if data}
    <h1>{{ data.blogPost.title }}</h1>
    <VideoPlayer data={data.blogPost.cover.video} />
  {/if}
</article>

The <VideoPlayer /> component supports as props all the attributes of the <mux-player /> web component, plus data, which is meant to receive data directly in the shape they are provided by DatoCMS GraphQL API.

<VideoPlayer /> uses the data prop to generate a set of attributes for the inner <mux-player />.

<VideoPlayer /> generate some default attributes:

• when not declared, the disableCookies prop is true, unless you explicitly set the prop to false (therefore it generates a disable-cookies attribute)
• when not declared, the disableTracking prop is true, unelss you explicitly set it to false (so, it normally generates a disable-tracking attribute)
• preload defaults to metadata, for an optimal UX experience together with saved bandwidth
• the video height and width, when available in the data props, are used to set a default aspect-ratio: [width] / [height]; for the <mux-player />'s style attribute

All the other props are forwarded to the <mux-player /> web component that is used internally.

This <VideoPlayer/> component can OPTIONALLY collect clientside playback and engagement metrics such as playback percentages, user agents, and geography.

These analytics are disabled by default. To enable them, you must opt in to Mux Data integration by creating a Mux Data account (free) and providing its envKey to the component.

For details and setup instructions, please see our documentation on Streaming Video Analytics with Mux Data.