Unable to get video src to display in Nuxt

vue.js version 2.12

You can see it live here: https://www.thedales.me/video/

The page is blank, unable to get src to display when I inspect front end. Here is a screen shot:

Was expecting to see a .m3u8 video or even the player showing some kind of error. Here is the template I am using:

<template>
  <section class="container">
    <video-player
      v-video-player:myVideoPlayer="playerOptions"
      class="video-player-box"
      :playsinline="playsinline"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      @ready="playerReadied"
      @statechanged="playerStateChanged($event)"
    ></video-player>
  </section>
</template>

<script>
export default {
  data() {
    return {
      playsinline: true,
      playerOptions: {
        muted: false,
        controls: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: 'application/x-mpegURL',
            src:
              'https://stream.mux.com/GvgMD02G02mv0200fDiP71cLF9RrbRlEq8V9.m3u8',
            poster:
              'https://images.mux.com/GvgMD02G02mv0200fDiP71cLF9RrbRlEq8V9/thumbnail.jpg'
          }
        ]
      }
    }
  },
  mounted() {
    // console.log('this is current player instance object', this.myVideoPlayer)
  },
  methods: {
    onPlayerPlay(player) {
      // console.log('player play!', player)
    },
    onPlayerPause(player) {
      // console.log('player pause!', player)
    },
    onPlayerEnded(player) {
      // console.log('player ended!', player)
    },
    onPlayerLoadeddata(player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting(player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying(player) {
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate(player) {
      // console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay(player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough(player) {
      // console.log('player Canplaythrough!', player)
    },
    playerStateChanged(playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },
    playerReadied(player) {
      // console.log('example 01: the player is readied', player)
    }
  }
}

I’ve also done this in the plugins: import Vue from ‘vue’

const VueVideoPlayer = require(‘vue-video-player/dist/ssr’) Vue.use(VueVideoPlayer)

and I believe I included it correctly in my nuxt.config:

Any advice greatly appreciated!

[daletom]

Thanks for sending that @Nabute . Is the example even using the Vue-Video-Player? Yes, your example absolutely works. But I guess this Vue-Video-Player isnt very easy to use, thats for sure. Thanks for all the help.

[Nabute]

I ran into this issue a few days ago and fixed it by installing Video-js 7 and used the builtin HTML5 player.Take a look at this gist