如何阻止自制video标签 poster期间点击暂停

Question

是这样的 ，目前项目需要自定义视频播放器。video标签有个poster属性，用于在视频没加载完毕用事先代替的图代替视频。我这里用一个旋转的gif作为poster的url , 问题来了 我这边vue设置了点击video标签改变暂停或播放的方法，changePlayState() {  let video = this.$refs.video  this.playOrPause = !this.playOrPause  if (video.paused) {    video.play()  } else {    video.pause()  }}如果用户在poster期间点击video标签，则正式播放会出现暂停按钮，不知道如何处理这个问题，下图是播放状态，但是不符合预期的UI

Answer 1

监听 video 的 onload 事件。

未加载完成时,点击直接使用 event.preventDefault()，阻止默认事件。