如何阻止自制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()，阻止默认事件。