用 vue 的 ref 控制视频播放和暂停，核心是获取原生 元素实例并调用 play() 和 pause() 方法；vue 2 通过 this.$refs.videoplayer、vue 3 通过 videoplayer.value 获取元素，需判空并可配合 isplaying 同步状态，还可实现跳转时间、监听进度、全屏切换等操作。
用 Vue 的 ref 控制视频播放和暂停，核心是拿到原生 <video></video> 元素实例，再调用它的 play() 和 pause() 方法。不需要额外插件，纯原生 API 就够用。
获取 video 元素引用
在模板中给 <video></video> 标签加 ref 属性，比如 ref="videoPlayer"。Vue 会把对应 DOM 元素挂到这个 ref 上。
- Vue 2 写法：
this.$refs.videoPlayer - Vue 3 组合式 API 写法：
videoPlayer.value（需先用ref(null)声明）
实现播放与暂停逻辑
点击按钮时，判断当前是否已暂停，再决定调用 play() 还是 pause()。建议加上空值判断，避免报错。
- 播放：检查
videoPlayer.value是否存在，再调用.play() - 暂停：同理，调用
.pause() - 可选：用响应式变量（如
isPlaying = ref(false)）同步 UI 状态
控制自动播放行为
默认情况下，<video></video> 不会自动播放。如果意外触发了自动播放，常见原因包括：
- 标签里写了
autoplay属性（删掉即可） - 某些浏览器在用户交互前静音自动播放，但 Vue 挂载时可能误触发
- 稳妥做法：在
mounted或onMounted中主动调一次.pause()
扩展常用操作
除了播放暂停，ref 还能轻松支持其他控制：
-
跳转时间：设置
videoPlayer.value.currentTime = 15（单位秒） -
监听进度：绑定
@timeupdate事件，实时读取.currentTime -
全屏切换：调用
.requestFullscreen()，注意兼容各浏览器前缀 -
禁用下载：加属性
controlslist="nodownload"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
