Thursday, 12 August 2021

Vimeo SKD : Unknown Player Error after Initialization (VueJS)

I would like to display a bunch of Videos on a Vue-Website using a Vimeo player.

For this purpose, I created a VideoPlayer-Component which is created for each Video:

<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>
  </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>

However, whenever I click 'play' I get the following error:

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)

Yet, when I use the Vimeo controls it works just fine. Can someone see the issue here? Thanks!



from Vimeo SKD : Unknown Player Error after Initialization (VueJS)

No comments:

Post a Comment