Integration of Vue & Other UI Frameworks/Libraries

BlendVision Web Player SDK UI is built with React, but it can be integrated with Vue or other UI frameworks/libraries.

The following guide will walk you through the steps to integrate the SDK with Vue.

Basic Integration

There is a working Vue 3 sample project you may start from here, this sample project shows how to integrate with minimal single HTML setup.

Integration in a modern Vue project is similar.

Step 1: install latest version SDK from npm into your project.

yarn add @blendvision/player^2.13.1 react react-dom

Currently react, react-dom are required since the player UI is built with React. The requirement of React dependencies will be removed in the future, so you can use the player with custom UI without React.

Step 2: wrap the player component with a Vue component

<template>
  <div id="myplayer" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { createPlayer } from '@blendvision/player'

const playerRef = ref(null)
onMounted(() => {
  playerRef.value = createPlayer('#my-player', {
    // license is optional in local development, ensure to add it for production
    // license: 'YOUR BV PLAYER LICENSE KEY',
    title: 'BlendVision One',
    source: [
      {
        type: 'application/dash+xml',
        src: 'https://d2mxta927rohme.cloudfront.net/376c618f-b27a-4a3d-9457-ad7076ee87e3/vod/dea931c3-8766-477d-a87b-1c3f91490139/vod/dash.mpd',
      },
      {
        type: 'application/x-mpegurl',
        src: 'https://d2mxta927rohme.cloudfront.net/376c618f-b27a-4a3d-9457-ad7076ee87e3/vod/dea931c3-8766-477d-a87b-1c3f91490139/vod/hls.m3u8',
      },
    ],
    volume: 0,
    autoplay: true,
  })
})

onUnmounted(() => {
  if (playerRef.value != null) {
    playerRef.value.release()
    playerRef.value = null
  }
})

</script>

It is highly recommended to wrap the player as a Vue component, to reuse across your app. In future, we will provide a Vue player compoment for easier integration.

Step 3: add the player component to your app.

<template>
  <div>
    <MyPlayer />
  </div>
</template>

<script setup>
import MyPlayer from './MyPlayer.vue'
</script>

Playback Status & Control

To control the player inside the wrapper component, make player instance accessible with defineExpose first, add to component setup:

defineExpose({
  player: playerRef
})

With access to the player instance, you can use all of player instance methods, for example, you can pause and play the player:

<template>
  <div>
    <MyPlayer />
  </div>
</template>

<script setup>
import MyPlayer from './MyPlayer.vue'

onMounted(() => {
  MyPlayer.player.pause()
  MyPlayer.player.play()
})
</script>

You may also get playback status by listening to video element events, with the player.addEventListener method:

MyPlayer.player.addEventListener('timeupdate', () => {
  console.log('current playback time', MyPlayer.player.currentTime)
})

MyPlayer.player.addEventListener('play', () => {
  console.log('video is playing')
})

MyPlayer.player.addEventListener('pause', () => {
  console.log('video is paused')
})

player.addEventListener adds event listeners to the underlying video element, so you can listen to all HTML video element events.