Vimeo SDK：初始化后出现未知播放器错误 (VueJS)

Question

我想使用 Vimeo 播放器在 Vue 网站上显示一堆视频。

为此，我创建了一个为每个视频创建的 VideoPlayer-Component：

<template>

  <div class="video-element__container">
    <div class="video-element__player" ref="player" @click="$emit('shrink')"></div>


    <div class="video-element__play-button" @click="play()"></div>
       
  </div>


</template>

<script>
import Player from '@vimeo/player'

export default {
  name: 'VideoPlayer',
  props: ['isActive', 'id'],
  data () {
    return {
      player: null,
    }
  },
  mounted() {
    this.initPlayer()
  },
  components: {
  },
  methods:
  {
    async play () {
      try {
        await this.player.play()
        this.isPlaying = true
      } catch (e) {
        console.log(e)
      }
    },
    pause() {
      this.player.pause()
      this.isPlaying = false
    },

    initPlayer () {
      let options = {
        url: 'https://vimeo.com/393632283',
        loop: false,
        controls: false,
        muted: true,
      };

      let iframe = this.$refs.player
      this.player = new Player(iframe, options);
    
    }
  }
}
</script>

但是，每当我单击“播放”时，我都会收到以下错误：

Uncaught (in promise) Error: Unknown player. Probably unloaded.
    at readyPromise (player.es.js?84c9:1458)
    at new Promise (<anonymous>)
    at Proxy.ready (player.es.js?84c9:1457)
    at eval (player.es.js?84c9:1311)
    at new Promise (<anonymous>)
    at Proxy.get (player.es.js?84c9:1306)
    at Proxy.getDuration (player.es.js?84c9:2052)
    at Proxy.initPlayer (VideoPlayer.vue?5912:93)
    at Proxy.play (VideoPlayer.vue?5912:53)
    at Object.onClick._cache.<computed>._cache.<computed> (VideoPlayer.vue?5912:17)

然而，当我使用 Vimeo 控件时，它工作得很好。有人可以看到这里的问题吗？谢谢！

Answer 1

尽管 Triet Doan 的答案现在已被接受，但我不喜欢它。它采用用 Options API 编写的整个 OP 代码，并将其重写为 Composition API，但没有解释为什么需要它......

好吧，根本不需要！事实上，修复原始代码最简单的方法就是注释掉player: null（data()如下面的演示所示）

为什么

Vue 反应性可能有点干扰。使用Object.defineProperty()创建的 getter/setter （用于 Vue 2 中的反应性）和代理（用于 Vue 3 中的反应性）都可以更改行为，特别是对于像 Vimeo Player 这样的复杂数据类型/类。

要解决此类问题，只需不要将此类复杂对象放入data()或包装在ref()or中即可reactive()。在大多数情况下，你不需要 Vue 模板对此类复杂对象的某些内部状态做出反应......

相反，只需将它们添加到实例中，如hookthis.player = new ...中mounted，或者将它们声明为普通变量（不带ref()或reactive()）setup()

const app = Vue.createApp({
  name: 'VideoPlayer',
  data() {
    return {
      // player: null, <-- THIS LITTLE CHANGE IS NEEDED
    }
  },
  mounted() {
    this.initPlayer()
  },
  methods: {
    async play() {
      try {
        await this.player.play()
        this.isPlaying = true
      } catch (e) {
        console.log(e)
      }
    },
    pause() {
      this.player.pause()
      this.isPlaying = false
    },

    initPlayer() {
      let options = {
        url: 'https://vimeo.com/393632283',
        loop: false,
        controls: false,
        muted: true,
      };

      let element = this.$refs.player
      this.player = new Vimeo.Player(element, options);

    }
  }
})
app.mount('#app')

<script src="https://unpkg.com/vue@3.2.2/dist/vue.global.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>

<div id="app">
  <div class="video-element__container">
    <div class="video-element__player" ref="player" @click="$emit('shrink')"></div>
    <div class="video-element__play-button" @click="play()"></div>
  </div>
</div>

警告

另一方面，我完全同意使用现有包装器 - vue-vimeo-player的建议。因为它处理一些边缘情况，更重要的是在组件被销毁时卸载播放器。如果没有它，您就会在应用程序中造成内存泄漏