Vue 在视频持续时间可用之前触发挂载功能

Posted 2023-05-07

【中文标题】Vue 在视频持续时间可用之前触发挂载功能

【英文标题】：Vue firing mounted functions before video duration available

【发布时间】：2020-11-18 12:27:24

【问题描述】：

我正在尝试获取视频的持续时间并将其放置在 Vue 的 mount() 函数触发时的 div 中。代码如下：

标记：

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

mount() 函数

mounted() 
  this.setTime();
  this.$refs.endOfVideo.innerhtml = this.prettifyTimestamp(this.$refs.gameFilm.duration);
,

我遇到的问题是“this.$refs.gameFilm.duration”返回了 NaN。我怀疑 mount() 函数在视频的持续时间可用之前触发。这种怀疑源于这样一个事实，即 NaN 在视频的第一帧之前加载......

有什么想法吗？

编辑

尝试过没有用：

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

【参考方案1】：

根据https://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:

【讨论】：

谢谢，我试过了，不幸的是它没有改变任何东西，仍然得到 NaN。请参阅上面的编辑，看看您是否同意我的实施方式...

谢谢你，我学会了区别！

【参考方案2】：

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

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

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

【讨论】：

为了让它与 Vue 一起工作，我必须做一个 v-on:loadeddata 但这是一般的解决方案。谢谢！