@kavimo-tehran/vis3-vue

Vis3 for Vue

Put the Kavimo Vis3 video player in a Vue app with a single component.

• Vue 2.6, Vue 2.7 and Vue 3
• Safe with server-side rendering (e.g. Nuxt)
• Cleans up after itself: when the component unmounts, the player stops downloading and is removed

Installation

npm install @kavimo-tehran/vis3-vue

vue is a peer dependency: the component uses the Vue your app already has.

Quick start

<script setup>
import Vis3 from '@kavimo-tehran/vis3-vue'
</script>

<template>
  <Vis3 domainName="stream.domain.com" ID="xxxxxxxxxxxx" />
</template>

• domainName is your Kavimo stream domain, without https://
• ID is the ID of the video

Examples

Vue 3 (or Vue 2.7): <script setup>

<script setup>
import Vis3 from '@kavimo-tehran/vis3-vue'

const handleLoad = (media) => {
  console.log('Player is ready', media.api.get.Title())
}
</script>

<template>
  <main>
    <h1>My course</h1>
    <Vis3 domainName="stream.domain.com" ID="xxxxxxxxxxxx" :onLoad="handleLoad" />
  </main>
</template>

Vue 2: Options API

<template>
  <main>
    <h1>My course</h1>
    <Vis3 domainName="stream.domain.com" ID="xxxxxxxxxxxx" :onLoad="handleLoad" />
  </main>
</template>

<script>
import Vis3 from '@kavimo-tehran/vis3-vue'

export default {
  components: { Vis3 },
  methods: {
    handleLoad(media) {
      console.log('Player is ready', media.api.get.Title())
    }
  }
}
</script>

Control the player with your own buttons

Keep media.api from onLoad, then call it whenever you need:

<script setup>
import Vis3 from '@kavimo-tehran/vis3-vue'

let player = null
const handleLoad = (media) => { player = media.api }
</script>

<template>
  <Vis3 domainName="stream.domain.com" ID="xxxxxxxxxxxx" :onLoad="handleLoad" />

  <button @click="player?.actions.Play()">Play</button>
  <button @click="player?.actions.Pause()">Pause</button>
  <button @click="player?.actions.Seek(60)">Jump to 1:00</button>
</template>

Listen to playback events

const handleLoad = (media) => {
  const api = media.api

  api.events.OnPlay(() => console.log('Playing'))
  api.events.OnPause(() => console.log('Paused'))
  api.events.OnEnded(() => console.log('Finished'))

  api.events.OnTimeupdate(() => {
    console.log('Now at second', api.get.CurrentTime())
  })
}

Save the viewer's progress

const handleLoad = (media) => {
  const api = media.api

  api.events.OnEnded(() => {
    fetch('/api/progress', {
      method: 'POST',
      body: JSON.stringify({ video: api.get.ID(), done: true }),
    })
  })
}

Show another video

The props are read when the component mounts. Give it a key, so it rebuilds when the video changes:

<script setup>
import { ref } from 'vue'
import Vis3 from '@kavimo-tehran/vis3-vue'

const videoID = ref('xxxxxxxxxxxx')
</script>

<template>
  <Vis3 :key="videoID" :ID="videoID" domainName="stream.domain.com" />
  <button @click="videoID = 'yyyyyyyyyyyy'">Next lesson</button>
</template>

Watermark (DRM text)

Show the viewer's details over the video, so a screen recording can be traced back:

const handleLoad = (media) => {
  media.api.DRMText({
    text: ['user@example.com', '09123456789'],
    time: '2.5',        // seconds between moves (optional)
    color: '#FFFFFF',   // (optional)
    fontSize: '13px',   // px or % (optional)
    fontStyle: 'bold',  // normal, bold or italic (optional)
    fontName: 'arial',  // (optional)
    opacity: '0.4',     // (optional)
  })
}

Props

The media object

onLoad receives media. Everything you can do with the player is on media.api.

api.get: read information

api.is: check the state

api.actions: control playback

You don't need Destroy() with <Vis3 />: unmounting the component already does it.

api.events: listen to playback

api.DRMText(options): watermark

Good to know

• Unmounting removes the player (beforeDestroy in Vue 2, beforeUnmount in Vue 3): it stops downloading and leaves nothing behind. No cleanup code is needed.
• <keep-alive> / <KeepAlive>: a cached component is not unmounted, so the player is kept. While it is off the page it downloads nothing, and it carries on when it comes back.
• Server-side rendering (e.g. Nuxt): the server renders an empty <div>, and the player is built in the browser.

Troubleshooting