先搞個原生的video標簽進來

<video
    ref="movie"
    class="video"
    src="static/movie.mp4"
    width="100%"
    controls
></video>

展示如下，自帶的控制臺里，播放/暫停，聲音，全屏，下載等

一般沒人用它，都喜歡自己弄個居中的播放按鈕。。

搞吧，先弄倆 播放/暫停的 icon圖標進來，

這里利用 $refs 去指定元素，綁定監聽事件：

也可以用 元素選擇器 去找到對應的 class

document.querySelector(".video")

最后，為了體驗好點，讓它鼠標移出去就隱藏暫停按鈕

簡易美觀的視頻播放器就做好了。。

總結

以上是生活随笔為你收集整理的vue监听video标签播放暂停，中间按钮替换 controls控制台的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。