Vue v3中的VideoJS播放列表超过最大调用堆栈大小错误

Posted 2023-02-23

【中文标题】Vue v3中的VideoJS播放列表超过最大调用堆栈大小错误

【英文标题】：VideoJS Playlist in Vue v3 Maximum call stack size exceeded Error

【发布时间】：2021-11-06 22:38:37

【问题描述】：

我正在尝试使用 video-js 插件在 Vue 3 中创建一个视频播放列表，但我的组件没有呈现并且我收到了一个超出最大调用堆栈大小的错误。

这是我包含组件的页面：

<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 

【问题讨论】：

playerOptions没有sources这样的属性，它是从哪里来的？

@Radeanu 道歉，省略了。更新了代码。但是仍然有错误。

你在用vue路由器吗？当您未能将组件设置到您定义的路由器路径之一时，我会看到该错误。提供完整的异常堆栈可能有助于缩小范围。

即使现在，playerdata.source 也应该是未定义的，因为在 VideoOne 组件中它没有这样的属性，请在询问之前检查您的代码是否有错误

@hvaughan3 我已将浏览器控制台中的错误添加到上面的代码中：)

【参考方案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",

您将 VideoOne 组件命名为 name: "vidPlayer"，并且 Vue 3 支持您在模板中使用的 <vid-player> 是 VideoOne。它在这里形成了一个无限循环。 您应该将 VideoOne 组件名称更改为 name: "VideoOne"。

【讨论】：

照你说的做了，但它给我留下了这个错误：无法解析组件：视频播放器在

因为您的 Player 组件中没有组件 video-player。你是怎么用这个的：<video-player class="video-player-box"...。 video-player 来自哪里？