Vue在视频持续时间可用之前安装了功能

Question

我正在尝试获取视频的持续时间，并将其放置在Vue mounted((函数启动时的div中。以下代码：

标记：

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

mounted((函数

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

我遇到的问题是；这个$参考文献gameFilm.duration；正在返回NaN。我怀疑mounted((函数在视频的持续时间之前就已经启动了。这种怀疑源于这样一个事实，即NaN在视频的第一帧之前加载。。。

有什么想法吗？

编辑

尝试过但没有成功：

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

Answer 1

根据https://v2.vuejs.org/v2/api/#mounted您可以尝试使用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:

Answer 2

也许是附加事件侦听器以等待视频加载？参见：

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

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