vue 动态绑定 video src，不能正常播放问题

最新推荐文章于 2025-09-09 16:01:27 发布

原创最新推荐文章于 2025-09-09 16:01:27 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

67 篇文章

订阅专栏

本文介绍如何使用Vue.js动态绑定video元素的src属性，并实现视频自动播放功能。通过访问$refs中注册过的DOM元素，可以更新视频源并启动倒计时后自动播放下一个视频。

vue 动态绑定 video src，不能正常播放问题

通过 vm.$refs

vm.$refs
一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

核心代码

let el = _self.$refs.HomeVideo
el.src = 'xxx.mp4'

自动播放下一个视频

onNext() {
  const _self = this
  let el = _self.$refs.HomeVideo
  el.src = _self.videoArr[1]
  let num = 3
  _self.countDownText = `3秒 播放下一个视频`
  let times = setInterval(() => {
    num--
    _self.countDownText = `${num}秒 播放下一个视频`
    if (num === 0) {
      clearInterval(times)
      _self.countDownText = ''
      el.play()
    }
  }, 1000)
},