HTML5无法直接通过video标签获取远程视频文件大小，需用HEAD请求获取Content-Length响应头；若失败可退化为Range请求或依赖服务端自定义头/X-Video-Size。
HTML5 本身无法仅通过 直接获取远程视频文件大小，因为 src 只是声明资源位置，浏览器不会主动发起请求去读取文件头或响应头中的 Content-Length，除非开始加载（如设置 preload 或调用 load()）。但你可以**不下载完整视频**，仅发送一个 HEAD 请求来安全、高效地获取文件大小。
用 HEAD 请求获取 Content-Length
这是最标准、轻量且可靠的方式：向视频 URL 发起 HTTP HEAD 请求，服务器若支持（且未禁用），会在响应头中返回 Content-Length 字段，即文件总字节数。
- 在 JavaScript 中使用
fetch(url, { method: 'HEAD' })，然后读取response.headers.get('content-length') - 必须确保目标服务器允许跨域请求（响应头含
Access-Control-Allow-Origin），否则浏览器会拦截 - 部分 CDN 或防盗链服务可能屏蔽 HEAD 请求，此时可退化为发送带
Range: bytes=0-0的 GET 请求（只取第一个字节），再从响应头读Content-Range推算总大小
注意 preload="metadata" 不提供文件大小
虽然 preload="metadata" 会让浏览器拉取 moov box 等元数据，但它不保证返回整个文件的字节长度。MP4 的 Content-Length 来自 HTTP 响应头，不是视频容器内部字段；video.duration 和 video.videoWidth 也无法推导出文件体积。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
服务端配合更稳定
如果视频是你可控的服务（如自有 CDN 或后端 API），推荐在响应中额外添加自定义头，例如：
-
X-Video-Size: 12345678（明文字节数） - 或提供轻量元数据接口：
/api/video/info?url=https%3A%2F%2F...mp4，返回 JSON 包含size、duration、width等
实际代码示例
以下是一个兼容性良好的 HEAD 请求封装：
async function getVideoSize(url) {
try {
const res = await fetch(url, { method: 'HEAD', mode: 'cors' });
if (!res.ok) throw new Error('HEAD request failed');
const size = res.headers.get('content-length');
return size ? parseInt(size, 10) : null;
} catch (e) {
console.warn('Failed to get size via HEAD:', e.message);
return null;
}
}
// 调用
getVideoSize('https://example.com/video.mp4').then(size => {
if (size) console.log(`文件大小：${(size / 1024 / 1024).toFixed(2)} MB`);
});
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
