在获取视频任意时刻的截图时，通常大多数的做法都是

• 通过视频播放，canvas绘制
• 借助ffmpeg

除此之外，还有另外一种方式：URI Queries

使用方式

只需要在url后面带上#t=xx（秒）即可，如果是本地文件的话，上传之后需要拿到blobUrl

1<!-- 网络地址 -->
2<div>
3  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=1.2"></video>
4  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=2.2"></video>
5  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=3.5"></video>
6</div>
7
8<!-- 本地地址 -->
9<div>
10  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=1.2"></video>
11  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=2.2"></video>
12  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=3.5"></video>
13</div>
14
15<!-- 获取blob url -->
16<script>
17  fetch('https://www.w3school.com.cn/i/video/shanghai.mp4').then(res => res.blob()).then(blob => {
18    const blobUrl = URL.createObjectURL(blob);
19    console.log(blobUrl);
20  })
21</script>

到此就可以渲染出指定时刻的图片。就这？是的，没错，就这。

优点

• 快
• 简单

缺点

• 每一张图实际是一个video，会导致资源重复请求，视频文件过大，图片过多，网络压力较大。
• 请求网络地址进而转换成本地地址，虽然可以解决并发导致的网络压力，但是如果文件过大，首次加载依旧需要消耗比较长的时间。

总结

具体使用什么方式，还需根据业务需求决定。

参考文档：https://www.w3.org/TR/media-frags/#media-fragment-syntax