Vue.js video player

The Sirv Media Viewer component for Vue simplifies embedding media into your applications. You can easily integrate many types of media:

• Streaming videos
• YouTube and Vimeo videos
• 360-degree spins and 3D models
• Zoomable images

The component allows you to create rich media galleries by combining those different media types into a single gallery viewer. Sirv Media Viewer supports all kinds of image and video formats, with options to customize the appearance and behavior of the embedded content.

Some key video features of Sirv Media Viewer include:

• Adaptive bitrate streaming for smooth video playback
• Intuitive API for easy integration into Vue apps
• Customizable UI to match your app's branding
• Cross-device compatibility
• Automatic schema markup generation for better SEO

With its comprehensive functionality and seamless integration, Sirv Media Viewer streamlines the process of adding engaging multimedia experiences to your Vue applications.

Demo

View on StackBlitz.

Getting started

1. Sign up and upload your videos

Sign up for a Sirv account, you'll automatically start a free trial (no credit card required). Then upload your videos and enable video streaming.

2. Install Sirv NPM package

npm install @sirv/sirvjs-vue
#pnpm add @sirv/sirvjs-vue
#yarn add @sirv/sirvjs-vue

3. Register Sirv Media Viewer as a plugin

//main.js
import { createApp } from 'vue';
import App from './App.vue';
import SirvjsVue from '@sirv/sirvjs-vue';
const app = createApp(App);

app.use(SirvjsVue);
app.mount('#app');

Usage

Loading Sirv JS

You can load the Sirv Media Viewer script in your HTML:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

If you need finer control, use the loadScript module:

import { loadScript } from '@sirv/sirvjs-vue';
loadScript().then((sirv) => {
    sirv.start();
})

Using the component

There are two ways to use the Sirv Media Viewer component in your Vue app.

Add your videos to the slides array:

<sirv-media-viewer :slides="[
  {
    src: 'https://demo.sirv.com/video.mp4',
    type: 'video',
    dataOptions: {
      autoplay: 'true',
    },
  },
  {
    src: 'https://demo.sirv.com/videos/e-tron_quattro.mp4',
    type: 'video',
  },
  {
    src: 'https://demo.sirv.com/demo/303/testing.mp4',
    type: 'video',
  },
    {
    src: 'https://www.youtube.com/watch?v=svK_DnHu-7I',
    type: 'youtube',
  },
    {
    src: 'https://vimeo.com/76979871',
    type: 'vimeo',
  },
]"></sirv-media-viewer>

The slides object accepts other props, which you can find below.

Use div options

Alternatively, you can use the component by adding each element of the gallery as a div, for example:

  <sirv-media-viewer data-options="fullscreen.enable:false;">
    <div
            data-type="video"
            data-src="https://demo.sirv.com/video.mp4"
            data-options="autoplay:true;"
    ></div>
    <div
            data-type="video"
            data-src="https://demo.sirv.com/videos/e-tron_quattro.mp4"
            data-options="autoplay:true;"
    ></div>
    <div
            data-type="video"
            data-src="https://demo.sirv.com/demo/303/testing.mp4"
    ></div>
    <div
            data-type="youtube"
            data-src="https://www.youtube.com/watch?v=svK_DnHu-7I"
    ></div>
    <div data-type="vimeo" data-src="https://vimeo.com/76979871"></div>
  </sirv-media-viewer>

You can apply data types and data options in the div itself. You can find all the options in the Sirv Media Viewer Image Zoom documentation.

Props

slides

• :id - viewer id
• :data-src - used for `*.view` files, overrides `:slides`. .view files documentation
• data-options. Full list of options.
• :slides - an Array with slide sources. Sources can be a String or an Object.

String accepts a URL e.g. https://demo.sirv.com/video.mp4.

An Object has additional props:

• id - Slide id [String]
• src - Source [String]
• dataOptions - Local slide options [Object]
• type - Type of slide [String]. The available props are: `spin`, `zoom`, `image`, `model`, `youtube`, `vimeo`, `video`, `html`
• dataThumbnailImage - Custom thumbnail image [String]
• dataThumbnailHtml - Custom thumbnail html [String]
• dataDisabled - Disable slide [Boolean]
• dataSwipeDisabled - Disable slide swipe [Boolean]
• dataHiddenSelector - Hide selector [Boolean]
• dataPinned - Pinned selector [String]. The available props are: `left`, `right`
• staticImage - Static image [Boolean].

Events and API

Full list of API methods and Events.

Here's a sample component that utilizes the next and previous methods to control the Sirv Media Viewer slides.

<template>
<sirv-media-viewer
 :id="id"
 :slides="[
   {
   src: 'https://demo.sirv.com/video.mp4',
   type: 'video',
   dataOptions: {
    autoplay: 'true',
   },
  },
  {
   src: 'https://demo.sirv.com/videos/e-tron_quattro.mp4',
   type: 'video',
  },
  {
   src: 'https://demo.sirv.com/demo/303/testing.mp4',
   type: 'video',
  },
  {
   src: 'https://www.youtube.com/watch?v=svK_DnHu-7I',
   type: 'youtube',
  },
  {
   src: 'https://vimeo.com/76979871',
   type: 'vimeo',
  },
 ]"
></sirv-media-viewer>
</template>

<script setup>
//import dependencies
import { onMounted, ref } from 'vue';
import { loadScript } from '@sirv/sirvjs-vue';
//define the viewer and methods
const viewer = ref(null);
const id = ref('smv-test');
const prev = () => {
 if (viewer.value) {
  viewer.value.prev();
 }
};

const next = () => {
 if (viewer.value) {
  viewer.value.next();
 }
};
//load Sirv JS after the app is mounted, start SMV and define the viewer
onMounted(() => {
 loadScript().then((sirv) => {
  sirv.start();
  sirv.on('viewer:ready', (e) => {
   if (e.id === 'smv-test') {
    viewer.value = e;
    console.log('viewer:ready', e);
   }
  });
 });
});
</script>

Get help

If you need help with the Vue component for Sirv Media Viewer, please message the Sirv support team.