Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Help using with nuxt and vplayer mounting issue #1

Open
daletom opened this issue Mar 20, 2020 · 5 comments
Open

Help using with nuxt and vplayer mounting issue #1

daletom opened this issue Mar 20, 2020 · 5 comments

Comments

@daletom
Copy link

daletom commented Mar 20, 2020

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.

image

@daletom
Copy link
Author

daletom commented May 9, 2020

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:

image

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
Copy link

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

@LorettaLei
Copy link
Owner

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

@daletom
Copy link
Author

daletom commented Mar 6, 2021

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants