在 nuxt js 中动态更改视频标签的 src

Question

我正在使用 nuxt.js。我有一个标签，我想动态更改 src 但我无法调用 load() 方法来刷新视频并开始播放。

标签：

<video ref="videoPlayer">

nuxt 方法中的“更改视频”功能：

 this.videoUrl = "new url";
 let videoPlayer = this.$refs['videoPlayer'];
 videoPlayer.load();

load() 不工作！它有错误。我无法访问 load() 方法！为什么？我该怎么办？

错误：

cannot read property 'load' of undefined

Answer 1

在数据中定义videoUrl：

data() {
 return {
  videoUrl: 'path/to/old/video'
 }
}

html中的模板：

 <video
  ref="videoPlayer"
  muted
  controls
 >
  <source :src="videoUrl" type="video/mp4" />
 </video>

在方法或 Nuxt 挂钩中：

changeVideoUrl() {
 this.videoUrl = '/videos/home/intro-desktop.mp4'
 const videoPlayer = this.$refs.videoPlayer
 videoPlayer.load()
 videoPlayer.play()
},

在数据中定义 videoUrl 以正确激活 Vue 反应系统很重要。

在 nuxt js 中动态更改视频标签的 src

change src of video tag dynamicly in nuxt js

video

load

undefined

refs

nuxt.js