search

surmon-china / videojs-player

@videojs player component for @vuejs(3) and React.
https://github.surmon.me/videojs-player
MIT License
5.24k stars 1.12k forks source link

No compatible source was found for this media. (NUXT) #357

Open schmidfelix opened 4 years ago

schmidfelix commented 4 years ago

BUG REPORT TEMPLATE

Vue.js version and component version

image

I'm trying to play a .m3u8 video file with the vue-video-player but I'm getting the following error: image

I have the code exactly like your nuxt example:

image

daletom commented 4 years ago

Yes, I have this exact same issue as well. Its in issue #356

Screen Shot 2020-05-13 at 2 51 56 PM

Following..

Artem-Schander commented 4 years ago

What a shame that no one officially answered this question. In my case it helped to import the hls package individually.

Like So:

import VueVideoPlayer from 'vue-video-player';
import 'videojs-contrib-hls';
// ...

I hope it helps.

Bwijn commented 4 years ago

The document has given the answer Please read the document carefully🤔

// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {
  const VueVideoPlayer = require('vue-video-player/dist/ssr')
  Vue.use(VueVideoPlayer)
}

<!-- You can custom the "myVideoPlayer" name used to find the videojs instance in current component -->
<template>
  <div class="video-player-box" 
       @play="onPlayerPlay($event)"
       @pause="onPlayerPause($event)"
       @ready="playerReadied"
       @statechanged="playerStateChanged($event)"
       v-video-player:myVideoPlayer="playerOptions">
  </div>
</template>