要点

指定视频的时间，等 oncanplay 事件可以后就用 canvas 画图片

知识点

image-20230803225523725

10次请求文件。 但是network 显示了39次请求

这是一个HTTP响应头的示例，表示响应的内容长度、内容范围和内容类型。下面是对每个部分的解释：

  1. Content-Length: 2076689900 这指示响应主体的长度，以字节为单位。在这种情况下，响应主体的长度是2076689900字节。
  2. Content-Range: bytes 0-2076689899/2076689900 这表示服务器正在返回的是整个资源（视频）的一部分，而不是完整的资源。其中 “bytes 0-2076689899” 表示返回的是从字节0到2076689899范围的内容，总共2076689900字节。最后的 “/2076689900” 表示整个资源的长度。
  3. Content-Type: video/mp4 这指示响应主体的媒体类型是视频，具体地说是MP4格式的视频。

js控制range 范围

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/video.mp4');
xhr.setRequestHeader('Range', 'bytes=100-199'); // 设置Content-Range范围

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 206) { // 检查响应状态和状态码
    var contentRangeHeader = xhr.getResponseHeader('Content-Range');
    console.log(contentRangeHeader); // 获取响应头中的Content-Range信息

    // 处理服务器返回的数据
    var responseData = xhr.responseText;
    console.log(responseData);
  }
};

xhr.send();

Other

如果用 class 类去使用，所加载的视频数据比较小

image-20230803231827739

image-20230803231911633