Svelte > Displaying videos

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 @datocms/svelte that exposes a <VideoPlayer /> component and pairs perfectly with the video query.

To take advantage of it, install the package:

yarn add @datocms/svelte

Then, inside your page, feed content coming from a video query directly into the <VideoPlayer /> component:

<script>
import { onMount } from 'svelte';
import { VideoPlayer } from '@datocms/svelte';
const query = `query {
  blogPost {
    title
    cover {
      coverVideo {
        video {
          muxPlaybackId
          title
          width
          height
          blurUpThumb
        }
      } 
    }
  }
}`;
let data = null;
onMount(async () => {
  const response = await fetch('https://graphql.datocms.com/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: "Bearer YOUR_API_TOKEN",
    },
    body: JSON.stringify({ query })
  })
  const json = await response.json()
  data = json.data;
});
</script>
{#if data}
  <VideoPlayer data={data.blogPost.coverVideo.video} />
{/if}
<template>
  <div>
    <div v-if="loading">
      Loading...
    </div>
    <div v-else-if="error">
      Something bad happened!
    </div>
    <div v-else>
      <article v-for="blogPost of data.allBlogPosts" v-bind:key="blogPost.id">
        <h6>{{blogPost.title}}</h6>
        <video-player :data="blogPost.coverVideo.video" />
      </article>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { VideoPlayer } from "vue-datocms";
import { request } from "./datocms";
const data = ref(null);
const error = ref(null);
const loading = ref(true);
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
  allBlogPosts(first: $limit) {
    id
    title
    coverVideo {
      video {
        muxPlaybackId
        title
        width
        height
        blurUpThumb
      }
    } 
  }
}`;
onMounted(async () => {
  try {
    data.value = await request({
      query: HOMEPAGE_QUERY,
      variables: {
        limit: 10
      }
    });
  } catch (e) {
    error.value = e;
  }
  loading.value = false;
})
</script>