vue如何实现对video的监听?
前言:vue中的监听方法有 watch 和 computed方法,video是H5 标签,controls 属性规定浏览器应该为视频提供播放控件.所以我们可以用JS原生的element.addEventListener去监听’play'事件HTML<video ref="media" src="http://cdn.ikcest-test.ikcest.org/video/2020-06-1
·
前言:
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
},
}
默认展示 播放按钮,播放后,鼠标移入显示 暂停按钮
更多推荐
已为社区贡献25条内容
所有评论(0)