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 vue-datocms
that exposes a <VideoPlayer />
component and pairs perfectly with the video query.
To take advantage of it, install the vue-datocms package:
npm install vue-datocms
Then, inside your page, feed content coming from a video
query directly into the <VideoPlayer />
component:
<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) {idtitlecoverVideo {video {muxPlaybackIdtitlewidthheightblurUpThumb}}}}`;onMounted(async () => {try {data.value = await request({query: HOMEPAGE_QUERY,variables: {limit: 10}});} catch (e) {error.value = e;}loading.value = false;})</script>