vue監聽video標簽播放暫停，中間按鈕替換 controls控制台

先搞個原生的video標簽進來

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

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

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

 

 

 

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

 

 

 

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

 

 

 

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

document.querySelector(".video") 

 

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

 

 

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