标签导航：

前端视频标签循环播放为何重复发送请求及如何解决？

网页视频循环播放导致重复请求的解决方法

使用HTML5

问题根源分析

  1. 触发 ended 事件，告知脚本视频播放结束。
  2. 将播放时间重置为0，重新开始播放。

这个过程会触发浏览器重新请求视频文件。

解决方案

以下方法可以有效解决重复请求问题：

  • 服务器端缓存控制: 在服务器端设置响应头 Cache-Control: max-age=，例如 max-age=3600 (缓存一小时)。这能指示浏览器在指定时间内不重新请求视频。

  • 利用Ajax和Blob对象: 使用Ajax异步加载视频文件，将其作为Blob对象存储在浏览器缓存中。然后，使用 URL.createObjectURL() 方法创建指向Blob对象的URL，并将其赋值给

代码示例 (Ajax加载视频并使用Blob播放):

fetch('/path/to/video.mp4')
  .then(response => response.blob())
  .then(blob => {
    const videoURL = URL.createObjectURL(blob);
    video.src = videoURL;
    video.play();
  });

通过以上方法，可以有效避免