vue-plyr
vue-plyr copied to clipboard
Cannot change vimeo source dynamically - error: Unknown player. Probably unloaded
Hello,
I want to switch the source of my vimeo embedd dynamically. However when I do that I get a continues stream of the following errors, blocking my site and not setting any source:
player.js:2 Uncaught (in promise) Error: Unknown player. Probably unloaded.
at e (player.js:2:12623)
at new Promise (<anonymous>)
at Proxy.value (player.js:2:12601)
at player.js:2:11775
at new Promise (<anonymous>)
at Proxy.value (player.js:2:11669)
at Proxy.value (player.js:2:15030)
at Proxy.ready2 (plyr.min.mjs:3:77754)
at Proxy.setup (plyr.min.mjs:3:74303)
at Proxy.setup (plyr.min.mjs:3:86581)
I am following the setting source comvention like so ...
<template>
<ClientOnly>
<vue-plyr ref="plyr" :options="{ hideControls: true, autoplay: true, muted: true, volume: 0 }">
<div data-plyr-provider="vimeo" :data-plyr-embed-id="vimeoId"></div>
</vue-plyr>
</ClientOnly>
</template>
<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
const props = defineProps<{
vimeoId: number
}>()
const plyr = ref<null | any>(null)
watchEffect(() => {
console.log(props.vimeoId)
if (plyr.value.player !== undefined && plyr.value.player.ready ) {
plyr.value.player.source = {
type: 'video',
sources: [
{
src: props.vimeoId.toString(),
provider: 'vimeo',
},
],
}
}
})
</script>
I know I can add a :key argument to my vue-plyr component instance, and in doing so I get the stream of errors 6-7 times but eventually they stop and the source changes because the component rerenders all-together, but I would really like to avoid re-rendering this component as it causes other issues for me. Why can I not simply use the API as it is intended to be used?
Thank you!