Vue firing mounted functions before video duration available

Question

I am trying to get the duration of a video and place it in a div upon the Vue mounted() function firing. Code below:

Markup:

<video v-on:click="playPause()" id="tsGameFilm" ref="gameFilm" preload="metadata">
   <source src="#hiddenForSO#" type="video/mp4">
</video>

mounted() function

mounted() {
  this.setTime();
  this.$refs.endOfVideo.innerHTML = this.prettifyTimestamp(this.$refs.gameFilm.duration);
},

The problem I am having is that "this.$refs.gameFilm.duration" is returning with NaN. My suspicion is that the mounted() function is firing before the duration is available for the video. This suspicion stems from the fact that the NaN loads before the first frame of the video does...

Any thoughts?

EDIT

Attempted this to no avail:

mounted() {
  this.setTime();
  this.$nextTick(function () {
    this.$refs.endOfVideo.innerHTML = this.prettifyTimestamp(this.$refs.gameFilm.duration);
  })
},

score 1 · Answer 1 · edited Jul 15 '22 at 00:27

1

According to https://v2.vuejs.org/v2/api/#mounted you might try to use nextTick:

Note that mounted does not guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted:

edited Jul 15 '22 at 00:27

tony19

125,647
18
229
307

answered Jul 29 '20 at 00:46

Ian Wilson

6,223
1
16
24

Thank you, I tried it and unfortunately it didn't change anything, still getting NaN. See the edit above to see if you agree with how I implemented... – Hunter Jul 29 '20 at 00:58
Thanks for this though, I was able to learn the distinction! – Hunter Jul 29 '20 at 01:09

score 0 · Accepted Answer · answered Jul 29 '20 at 00:59

0

Perhaps attaching event listener to wait for video load? See:

https://stackoverflow.com/a/13875211/2411713

video.addEventListener('loadeddata', function() {
   // Video is loaded and can be played
}, false);

answered Jul 29 '20 at 00:59

Noah Stahl

6,905
5
25
36

To make it work with Vue I had to do a v-on:loadeddata but this was the general solution. Thank you! – Hunter Jul 29 '20 at 01:09

Vue firing mounted functions before video duration available

2 Answers2