vue如何实现对video的监听？

前言:

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
    },
 }

默认展示 播放按钮,播放后,鼠标移入显示 暂停按钮