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);
  })
},

```