VideoJS + TypeScript + Vue3 (Quasar v2) Single-File Component

README.md

1. install video.js - npm i [email protected]
2. install video.js types (recently updated): npm i @types/video.js
3. Check tsconfig.json --> "typeRoots" + "types" config properties matter!

tsconfig.json

{
  "extends": "@quasar/app/tsconfig-preset",
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "importHelpers": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "useDefineForClassFields": true,
    "skipLibCheck": true,
    "paths": {
      "@/assets/*": ["src/assets/*"],
      "@/boot/*": ["src/boot/*"],
      "@/components/*": ["src/components/*"],
      "@/css/*": ["src/css/*"],
      "@/gql/*": ["src/graphql/*"],
      "@/layouts/*": ["src/layouts/*"],
      "@/models/*": ["src/models/*"],
      "@/pages/*": ["src/pages/*"],
      "@/router/*": ["src/router/*"],
      "@/store/*": ["src/store/*"],
      "@/tools/*": ["tools/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable"],
    "typeRoots": [
      "../../node_modules/@types/",
    ],
    // Forces quasar typings to be included, even if they aren't referenced directly
    // Removing this would break `quasar/wrappers` imports if `quasar`
    //  isn't referenced anywhere, because those typings are declared
    //  into `@quasar/app` which is imported by `quasar` typings
    "types": ["quasar", "@types/video.js"]
  },
  "exclude": [
    ".vscode",
    "tools",
    "dist",
    ".quasar",
    "node_modules",
    "**/node_modules",
    "stash",
  ]
}

VideoJSPlayer.vue

<script lang="ts">
import videojs from 'video.js'
import { useQuasar } from 'quasar'
import 'video.js/dist/video-js.css'
import { defineComponent, ref, onMounted } from 'vue'

type PlayerPropsType = {
  id: string
  mediaType?: string
  src: string
  title: string
  token?: string
  createdAt: string
}

export default defineComponent({
  name: 'VideojsPlayer',
  props: {
    options: {
      type: Object as () => PlayerPropsType,
      default: () => ({}),
      required: true,
    },
  },
  setup(props) {
    const isPlaying = ref<boolean>(false)
    const isSupported = ref<boolean>(false)
    const que = useQuasar()
    let VideoJSPlayerInstance = null as unknown

    onMounted(() => {
      VideoJSPlayerInstance = videojs(
        'player-element',
        props.options,
        function onPlayerReady() {
          console.log('Player Is: ', VideoJSPlayerInstance)
        },
      )
    })
  },
})
</script>
<template>
  <div class="container row">
    <br />
    <!-- crossorigin='use-credentials' -->
    <div class="column">
      <audio
        ref="mediacontainer"
        id="player-element"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
      >
        <source
          src="https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3"
        />

        <!-- :type="options.mediaType" -->
      </audio>
    </div>
  </div>
</template>

probably should do this, but, thank you very much! I had to add the css import line to make videojs work on my app :)