Using the plugin in a Vue.js app

[dan-niles]

Hi, I'm trying to use this plugin in Vue.js app built with Vite. I'm getting the following error:

TypeError: Cannot read properties of undefined (reading 'OGVCompat')

By any chance, do you know how to solve this?

The code:

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import videojs from 'video.js'
import type Player from 'video.js/dist/types/player'

import 'video.js/dist/video-js.css'
import '@/assets/vjs-youtube.css'

import ogv from 'ogv'
import '@/assets/videojs-ogvjs/Videojs-Ogvjs.min.js'

const videoOptions = {
  controls: true,
  autoplay: false,
  preload: true,
  fluid: true,
  responsive: true,
  enableSmoothSeeking: true,
  controlBar: { pictureInPictureToggle: false },
  playbackRates: [0.25, 0.5, 1, 1.5, 2],
  techOrder: ['html5', 'ogvjs'],
  ogvjs: {
    base: '/node_modules/ogv/dist'
  },
  sources: [
    {
      src: 'videos/9TgosbGRsTk/video.webm'
    }
  ]
}

const videoPlayer = ref<HTMLVideoElement>()
const player = ref<Player>()

// Initialize video.js when the component is mounted
onMounted(() => {
  if (videoPlayer.value) {
    player.value = videojs(videoPlayer.value, videoOptions)
  }
})

// Destroy video.js when the component is unmounted
onBeforeUnmount(() => {
  if (player.value) {
    player.value.dispose()
  }
})
</script>

<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-youtube"></video>
  </div>
</template>

[HuongNV13]

Hi @dan-niles, Which version are you using?

Have you tried with the Videojs-Ogvjs.amd.jsor Videojs-Ogvjs.es.js? I have fixed it with:

const OGVCompat = ogv.OGVCompat;
const OGVLoader = ogv.OGVLoader;
const OGVPlayer = ogv.OGVPlayer;

[dan-niles]

Hi @HuongNV13, I tried using Videojs-Ogvjs.es.js as you suggested and it worked!

I had to do a minor change where I replaced this code

const OGVCompat = ogv.OGVCompat;
const OGVLoader = ogv.OGVLoader;
const OGVPlayer = ogv.OGVPlayer;

with...

import { OGVCompat, OGVLoader, OGVPlayer } from 'ogv'

And now everything works fine. Thanks alot for your help!

[HuongNV13]

No worries, @dan-niles I'm going to close this issue. Feel free to raise a new one if you have any questions.