Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

333
Views
Vue and videojs: how reload video

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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!