Блог

Я пытаюсь создать плейлист видео в Vue 3 с помощью плагина video-js, но мой компонент не отображается, и я получаю ошибку превышения максимального размера стека вызовов.

Вот моя страница, где я включаю компонент:

 <template>
  <div class="about">
    <h1>This is an about page</h1>
    <VideoOne></VideoOne>
  </div>
</template>
<script>
import VideoOne from '@/components/VideoOne';
export default {
  components: {
    VideoOne
  },
  name: "VideoOne"
}
</script> 
 

А вот код для моего компонента VideoOne:

 <template>
  <div class="mt-2">
    <vid-player
        ref="videoPlayer"
                :playerdata="playerdata"></vid-player>
  </div>
</template>

<script>
import vidPlayer from "../components/Player";
export default {
  components: {
    'vid-player': vidPlayer
  },
  name: "vidPlayer",
  data() {
    return {
      playerdata: {
        autoplay: false,
        playlist: [{
          sources: [{
            src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
            type: 'video/mp4'
          }],
          poster: 'http://media.w3.org/2010/05/bunny/poster.png'
        }, {
          sources: [{
            src: 'http://vjs.zencdn.net/v/oceans.mp4',
            type: 'video/mp4'
          }],
          poster: 'http://www.videojs.com/img/poster.jpg'
        }, {
          sources: [{
            src: 'http://media.w3.org/2010/05/bunny/movie.mp4',
            type: 'video/mp4'
          }],
          poster: 'http://media.w3.org/2010/05/bunny/poster.png'
        }, {
          sources: [{
            src: 'http://media.w3.org/2010/05/video/movie_300.mp4',
            type: 'video/mp4'
          }],
          poster: 'http://media.w3.org/2010/05/video/poster.png'
        }],
      },
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
}
</script> 
 

И это мой код для основного компонента плеера:

 <template>
  <div v-if="playerOptions.sources[0].src">
    <video-player  class="video-player-box"
                   ref="videoPlayer"
                   :options="playerOptions"
                   :playsinline="true"
                   @ready="playerReadied">
    </video-player>
  </div>
</template>

<script>
import { videojs } from "vue-video-player";
import playlistMaker from "videojs-playlist/src/playlist-maker";

const plugin = function(list, item) {
  playlistMaker(this, list, item);
};

videojs.registerPlugin("playlist", plugin);

export default {
  name: "vid-player",
  props: ["playerdata"],

  data() {
    return {
      playerOptions: {
        language: 'en',
        controls: true,
        preload: 'auto',
        fluid: true,
        playbackRates: [0.2, 0.5, 1, 1.5, 2,3,4],
        sources: [
         { 
           src: this.playerdata.source,
          type: "video/mp4"
         } 
        ],
      },
    }
  },

  methods: {
    // player is ready
    playerReadied(player) {
      this.player = player;
      console.log('the player is readied', player)
      // you can use it to do something...
      // player.[methods]
      // e.g. console.log(player.paused());
      player.playlist(this.playerdata.playlist);

      player.playlist.autoadvance(5);

    },
  }
};
</script> 
 

Что я делаю не так? Я проверил документацию для video-js и плагин плейлиста video-js, и я сделал все так, как должен.

Вот ошибка из консоли моего браузера:

 VideoOne.vue?26c9:17 Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Proxy.data (VideoOne.vue?26c9:17)
    at applyOptions (runtime-core.esm-bundler.js?5c40:2389)
    at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6710)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6629)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6559)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4418)
    at processComponent (runtime-core.esm-bundler.js?5c40:4393)
    at patch (runtime-core.esm-bundler.js?5c40:3988)
    at mountChildren (runtime-core.esm-bundler.js?5c40:4184)
    at mountElement (runtime-core.esm-bundler.js?5c40:4093)
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:7117
queueJob @ runtime-core.esm-bundler.js?5c40:7111
reload @ runtime-core.esm-bundler.js?5c40:102
eval @ runtime-core.esm-bundler.js?5c40:132
eval @ VideoOne.vue?cb06:11
./src/components/VideoOne.vue @ about.js:35
__webpack_require__ @ app.js:854
hotApplyInternal @ app.js:750
hotApply @ app.js:412
(anonymous) @ app.js:387
Promise.then (async)
hotUpdateDownloaded @ app.js:386
hotAddUpdateChunk @ app.js:362
webpackHotUpdateCallback @ app.js:58
(anonymous) @ about.1adee3ac782e04e5a8ed.hot-update.js:1 
 

Потому что это:

 <template>
  <div class="mt-2">
    <vid-player
        ref="videoPlayer"
                :playerdata="playerdata"></vid-player>
  </div>
</template>

<script>
import vidPlayer from "../components/Player";
export default {
  components: {
    'vid-player': vidPlayer
  },
  name: "vidPlayer",
 

вы назвали компонент name: "vidPlayer" VideoOne , а Vue 3 ниже <vid-player> , и то, что вы используете в шаблоне, является VideoOne . Здесь это делает бесконечный цикл.
Вам следует изменить имя компонента VideoOne на name: "VideoOne" .