精彩动人！这个事件才会触发加载！原来HTMLVideoElement还有“小心机”！

2023-12-12 21:45:41

说起HTML5，我们总能联系到媒体资源和多媒体内容。从<audio>标签到<video>标签，它们总能提供最好的媒体体验。视频标签<video>，更可以播放各种各样的视频格式，并提供各种控制功能，例如播放、暂停、快进、快退等。

然而，有一个非常容易被忽略的问题，那就是<video>标签的load事件会被浏览器拦截。这个拦截行为导致了load事件无法在视频加载完成后触发，而是由loadstart、canplay和play等其他事件代替。

为了证明这一点，我们可以进行一个简单的实验。首先，我们在<video>标签中设置一个load事件监听器，并输出一条消息。然后，我们再设置一个canplay事件监听器，并输出另一条消息。最后，我们播放视频。

<video id="video" src="video.mp4">
  <script>
    const video = document.getElementById('video');

    video.addEventListener('load', () => {
      console.log('Load event triggered!');
    });

    video.addEventListener('canplay', () => {
      console.log('Canplay event triggered!');
    });

    video.play();
  </script>
</video>

实验结果表明，load事件并没有触发，而是canplay事件触发了。这表明，load事件确实被浏览器拦截了。

那么，为什么浏览器会拦截load事件呢？原来，load事件不仅仅是针对视频加载，它还包括了视频解码和渲染的过程。由于视频解码和渲染是一个耗时的过程，浏览器为了提高性能，将load事件拦截，并改用loadstart、canplay和play等事件来表示视频加载的各个阶段。

虽然浏览器拦截了load事件，但这并不意味着我们无法在视频加载完成后执行某些操作。我们可以使用canplay或play事件来替代load事件。canplay事件表示视频已经可以播放，但可能还没有完全加载。play事件表示视频正在播放。

<video id="video" src="video.mp4">
  <script>
    const video = document.getElementById('video');

    video.addEventListener('canplay', () => {
      console.log('Video can be played!');
    });

    video.addEventListener('play', () => {
      console.log('Video is playing!');
    });

    video.play();
  </script>
</video>

实验结果表明，canplay和play事件都能够在视频加载完成后触发。因此，我们可以使用这些事件来替代load事件，以在视频加载完成后执行某些操作。

除了canplay和play事件之外，我们还可以使用loadeddata事件。loadeddata事件表示视频的元数据已经加载完成，但视频可能还没有完全加载。

<video id="video" src="video.mp4">
  <script>
    const video = document.getElementById('video');

    video.addEventListener('loadeddata', () => {
      console.log('Video metadata loaded!');
    });

    video.play();
  </script>
</video>