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