html的video标签怎么使用自定义的loading动图

HTML的`<video>`标签允许你在视频加载期间显示自定义的loading动画。为了做到这一点，你需要设置`poster`属性，并提供一张图片作为占位符。同时，你可以利用CSS或者JavaScript来创建一个动态的loading效果。

1. 设置`poster`属性：

<video controls poster="custom-loading.gif">

在这里，`custom-loading.gif`是你想要使用的自定义loading动图的URL路径。

2. CSS样式优化：
如果你希望在视频开始播放前有一个过渡动画，可以使用CSS来添加一些视觉效果，比如淡入、旋转等。例如：

video {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

video.playing {
  opacity: 1;
}

这个例子中，当视频开始播放时，loading图像会渐变为完全可见。

3. JavaScript事件处理：
如果你想在加载过程中添加更复杂的动画，也可以通过JavaScript监听`canplaythrough`事件，当视频资源准备就绪时替换loading图像。

let video = document.querySelector('video');

video.addEventListener('canplaythrough', function() {
  this.style.display = 'block';
  // 如果有其他元素需要替换loading，操作那个元素
});