video 的@canplaythrough监听事件

`@canplaythrough` 是 HTML5 `<video>` 元素的一个内置事件，当视频文件足够缓冲，浏览器认为视频可以顺畅播放时触发。这个事件通常发生在视频标签的`src`属性指定的视频文件加载完毕并且解码器成功初始化之后。你可以使用它来确保视频在开始播放前达到足够的质量，例如：

<video id="my-video" controls>
  <source src="my_video.mp4" type="video/mp4">
</video>

<script>
  const videoElement = document.getElementById('my-video');
  
  videoElement.addEventListener('canplaythrough', function() {
    console.log('Video is ready to play without buffering issues.');
    
    // 在这里可以设置开始播放时间、启动动画或其他依赖于视频流畅播放的操作
    videoElement.play();
  });
  
  // 添加错误处理，以便在加载失败时提供反馈
  videoElement.onerror = function(errorEvent) {
    console.error('An error occurred while loading the video:', errorEvent);
  };
</script>

在这个例子中，当你点击播放按钮或者页面加载完成时，如果视频已经缓存好并且可以播放，`canplaythrough` 事件就会触发，然后调用`videoElement.play()`开始播放。如果没有达到可以流畅播放的状态，`play()`方法会被自动推迟，直到条件满足。