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>
</template>
<script>
import Player from '@vimeo/player'
export default {
name: 'VideoPlayer',
props: ['isActive', 'id'],
data () {
return {
player: null,
}
},
mounted() {
this.initPlayer()
},
ponents: {
},
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: '',
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.<puted>._cache.<puted> (VideoPlayer.vue?5912:17)
Yet, when I use the Vimeo controls it works just fine. Can someone see the issue here? Thanks!
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>
</template>
<script>
import Player from '@vimeo/player'
export default {
name: 'VideoPlayer',
props: ['isActive', 'id'],
data () {
return {
player: null,
}
},
mounted() {
this.initPlayer()
},
ponents: {
},
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./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.<puted>._cache.<puted> (VideoPlayer.vue?5912:17)
Yet, when I use the Vimeo controls it works just fine. Can someone see the issue here? Thanks!
Share Improve this question edited Aug 12, 2021 at 15:05 Triet Doan 12.1k9 gold badges39 silver badges75 bronze badges asked Aug 10, 2021 at 12:52 kaktuskaktus 1891 gold badge2 silver badges11 bronze badges3 Answers
Reset to default 9 +50Even tho Triet Doan's answer is now accepted, I do not like it. It takes whole OP code written in Options API and rewrote it into Composition API without explaining why it is needed...
Well it is NOT needed at all! In fact, simplest thing to fix original code is to ment out player: null in data() (as can be seen in demo below)
Why
Vue reactivity can be a little intruding. Both getters/setters created with Object.defineProperty() (used for reactivity in Vue 2) and proxies (used for reactivity in Vue 3) can change the behavior especially for plex data types/classes as Vimeo Player is.
To workaround such problems, just do not put such plex objects into data() or do not wrap them in ref() or reactive(). In most cases you don't need your Vue template to be reactive to some internal state of such plex objects anyway....
Instead just add them to the instance as this.player = new ... in mounted hook or declare them as ordinary variables (without ref() or reactive()) in 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./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./[email protected]/dist/vue.global.js"></script>
<script src="https://player.vimeo./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>Warning
On the other hand, I pletely agree with the suggestion of using existing wrapper - vue-vimeo-player. Because it handles some edge cases and more importantly the unloading of the player when the ponent is destroyed. Without it, you are creating a memory leak in your app
I suppose you're using Vue 3 since your code works perfectly fine for me with Vue 2 and I got the same error with Vue 3.
For Vue 3, you need to restructure your code a bit with the setup() method like below:
<template>
<div class="video-element__container">
<div class="video-element__player" ref="playerRef" @click="$emit('shrink')"></div>
<div class="video-element__play-button" @click="play()"></div>
</div>
</template>
<script>
import {ref, onMounted} from 'vue';
import Player from '@vimeo/player';
export default {
name: 'VideoPlayer',
setup() {
let player;
let isPlaying = false;
const playerRef = ref(null);
onMounted(() => {
const options = {
url: 'https://vimeo./393632283',
loop: false,
controls: false,
muted: true,
};
player = new Player(playerRef.value, options);
});
const play = () => {
player.play()
.then(isPlaying = true)
.catch(e => console.log(e));
};
const pause = () => {
player.pause()
isPlaying = false
};
return {
player, isPlaying, playerRef, play, pause
}
}
}
</script>
The code above was already tested and worked as expected.
You can take a look at Template Refs for more information how to access HTML element inside setup(). Regarding the setup() method itself, please check the Composition API documentation.
Besides, there are also some Vue wrapper for the Vimeo SDK, e.g. vue-vimeo-player. If you want to, you can use them instead of writing your own.
I know this thread is old, but for others who e across this problem:
use shallowRef instead of a normal one.