前言:
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
},
}
默认展示 播放按钮,播放后,鼠标移入显示 暂停按钮