hls enabled player for nuxt ssr (vue)?

Question

JavaScript

I needed a player to play video in .m3u8 format, but I didn’t find anything good for nuxt.js ssr. I installed this plugin and included everything in nuxt.config.js but I got errors with it:

the code

<template>
  <v-container
    fill-height
    fluid
    grid-list-xl
  >
    <v-layout wrap>
      <v-flex xs12>
        <div class="vjs-custom-skin" 
              @ready="playerReadied"
              v-video-player:myVideoPlayer="playerOptions">
          </div>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
import videojs from 'video.js'
  window.videojs = videojs
  // hls plugin for videojs6
  require('videojs-contrib-hls/dist/videojs-contrib-hls.js')

export default {
  data () {
      return {
        // component options
        playerOptions: {
          // videojs and plugin options
          height: '360',
          sources: [{
            withCredentials: false,
            type: "application/x-mpegURL",
            src: "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8"
          }],
          controlBar: {
            timeDivider: false,
            durationDisplay: false
          },
          flash: { hls: { withCredentials: false }},
          html5: { hls: { withCredentials: false }},
          poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg"
        }
      }
    },
  mounted() {
      console.log('this is current player instance object', this.myVideoPlayer)
  },
  methods: {
      playerReadied(player) {
        var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
        player.tech_.hls.xhr.beforeRequest = function(options) {
          // console.log(options)
          return options
        }
      }
    }
}
</script>
<style type="text/css">
  .video-player-box {
      min-height: 200px;
    }
</style>

First window is not defined
Removed lines

import videojs from 'video.js'
  window.videojs = videojs

got an error then removed it
Cannot read property 'EventTarget' of undefined

require('videojs-contrib-hls/dist/videojs-contrib-hls.js')

and the player itself issued No compatible source was found for this media.
In short, is there a normal player with hls stream support for nuxt js ssr ?

Answer 1

https://github.com/redxtech/vue-plyr#nuxt - this seems like a normal player, I'll try to tie it to nuxt now