Help using with nuxt and vplayer mounting issue

[daletom]

Hi Loretta,

Was trying to use this HLS player with my nuxt.js project. Have you tried doing this? It keeps telling me I have an issue mounting the Vplayer component. Just confirming, is the vplayer you are using this? https://www.npmjs.com/package/vplayer

Here is where I am working on this: https://github.com/daletom/dalesite/blob/master/pages/video.vue

Any help or guidance would be greatly appreciated.

[daletom]

I was able to actually mount this as a plugin which is great. But still not getting anything to show up. Here is what I'm seeing when I inspect:

When I created the plugin in nuxt, I did this:
`import Vue from 'vue'
import player from 'vue-hls-player'
import aplayer from 'vue-hls-player'
import vplayer from 'vplayer'

Vue.use(player)
Vue.use(aplayer)
Vue.use(vplayer)`

Then I'm using this in my vue template:

<template>
  <div class="app">
    <h2>Vue Video</h2>
    <aplayer
      class="player"
      :player-options="aOption"
      @onplay="play"
      @onpause="pause"
    />
    <vplayer
      class="player"
      :player-options="vOption"
      @onplay="play"
      @onpause="pause"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      aOption: {
        type: 'video',
        src: 'https://stream.mux.com/GvgMD02G02mv0200fDiP71cLF9RrbRlEq8V9.m3u8',
        preload: true,
        autoplay: true,
        isLoop: false,
        poster:
          'https://images.mux.com/GvgMD02G02mv0200fDiP71cLF9RrbRlEq8V9/thumbnail.jpg?',
        playsinline: true,
        title: 'Will add',
        controls: 'progress,durration,volume'
      },
      vOption: {
        type: 'video',
        src: 'https://stream.mux.com/GvgMD02G02mv0200fDiP71cLF9RrbRlEq8V9.m3u8',
        preload: true,
        autoplay: true,
        isLoop: false,
        poster:
          'https://images.mux.com/GvgMD02G02mv0200fDiP71cLF9RrbRlEq8V9/thumbnail.jpg?',
        playsinline: true,
        title: 'will add',
        controls: 'progress,durration,volume'
      }
    }
  },
  methods: {
    play(e) {
      alert('play now')
    },
    pause(e) {
      alert('pause now')
    }
  }
}
</script>
<style>
.player {
  width: 400px;
  margin: 0 auto;
  min-height: 30px;
}
</style>

[JoeEarly]

@daletom I got it running in the latest nuxt but console log is full of errors

[LorettaLei]

When playing m3u8 audio, please give the type value to application/x-mpegURL

[daletom]

So I actually got it working here @JoeEarly . But when I deployed it via Netlify the controls are all messed up. You can notice that they arent visible anymore. If you right click on video and say show controls, they show up. It's weird they show up when I do npm run dev, but not when deployed... Any idea why @LorettaLei ? Also, wonder why the poster images are not showing up.

Here is it live: https://youthful-mayer-8433fb.netlify.app/
Here it is on gh: https://github.com/daletom/nuxtvideo

[JoeEarly]

Good that you got it working @daletom I have not yet had a chance to get back to this but will in a few weeks