In Vue (3) how can i reload the videojs?
I have the following code:
<template>
<video-js controls="true" preload="auto" ref="video_player" class="video-js vjs-big-play-centered">
</video-js>
</template>
<script>
import videojs from 'video.js'
export default {
data() {
return {
player: null
};
},
mounted() {
const element = this.$refs.video_player;
console.log(element);
this.player = videojs(element, {
fluid: true,
responsive: true,
playbackRates: [0.5, 1, 1.5, 2],
sources: [
{
src: 'url',
type: 'application/x-mpegURL'
}]
})
</script>
The first time i call the component it works.
The second time, because the url is the same (change only the param id) the component is reused. I need to force the component reload because videojs on dispose method destroy the dom.
So, how can i reuse the video player with vue js or force the component to re-render (so calling again creating and mounting)?
Thanks
Let's call your component videoComponent
<VideoComponent></VideoComponent>
You can add key attribute to your component.
Thanks to that it will be re-rendered when key is changed
<VideoComponent :key="someUniqueParamId"></VideoComponent>