前言:
vue中的监听方法有 watch 和 computed方法,
video是H5 标签,controls 属性规定浏览器应该为视频提供播放控件.
所以我们可以用JS原生的element.addEventListener去监听’play'事件
useCapture 默认值为 false ,即事件在 冒泡中 执行; 冒泡: 触发顺序—— 由 里 到 外 捕获: 触发顺序—— 由 外 到里
HTML
<video ref
="media" src
="http://cdn.ikcest-test.ikcest.org/video/2020-06-11/SKt8mNzybFAb4Td6exeQw3bYEtJ7hBBZ.mp4" controls /
>
JS
mounted
() {
this.
$refs.addEventListener
('play', this.handlePlay
);
this.
$refs.addEventListener
('pause', this.handlePause
);
}
methods:
{
handlePlay
() {
this.
$refs.media.play
();
this.isPlay
= true
},
handlePause
() {
this.
$refs.media.pause
();
this.isPlay
= false
},
}
默认展示 播放按钮,播放后,鼠标移入显示 暂停按钮
