Open daletom opened 4 years ago
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>
@daletom I got it running in the latest nuxt but console log is full of errors
When playing m3u8 audio, please give the type value to application/x-mpegURL
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
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
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.