@kr_ilya

Проигрыватель с поддержкой hls для nuxt ssr (vue)?

Понадобился плеер для воспроизведения видео в формате .m3u8 но для nuxt.js ssr ничего хорошего не нашел. Поставил этот плагин, и подключил все в nuxt.config.js но у меня пошли с ним ошибки:

код
<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>


Сначала window is not defined
Убрал строки
import videojs from 'video.js'
  window.videojs = videojs
появилась ошибка
Cannot read property 'EventTarget' of undefined
После этого убрал
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
и уже сам плеер выдал No compatible source was found for this media.

Короче, есть ли нормальный плеер с поддержкой hls потока для nuxt js ssr ?
  • Вопрос задан
  • 562 просмотра
Пригласить эксперта
Ответы на вопрос 1
Chode
@Chode
https://github.com/redxtech/vue-plyr#nuxt — вот вроде нормальный плеер, попробую сейчас его прикрутить к nuxt
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы