如何在HTML <video>元素中播放Google Drive中大于100MB的视频？

核心问题分析 #

你遇到的两个问题本质是：

1. 直接使用uc?export=download链接时，大文件会触发Google的病毒扫描拦截，导致重定向到确认页面，无法直接流式播放
2. 使用Drive API的alt=media链接时，返回文件无扩展名，但浏览器识别视频格式主要依赖响应头的Content-Type，而非文件名——大概率是未明确指定视频的MIME类型，或API权限/配置有问题

可行解决方案 #

方案1：利用Drive API获取MIME类型，配合alt=media链接播放

这个方法能稳定支持大文件流式播放，前提是你已启用Google Drive API并拥有有效API Key：

1. 获取文件的MIME类型：
   调用Drive API的files.get接口，仅请求mimeType字段：

   GET https://www.googleapis.com/drive/v3/files/[FILE_ID]?fields=mimeType&key=[API_KEY]
   

   响应会返回类似{"mimeType": "video/mp4"}的结果。

2. 在HTML中指定视频类型：
   把alt=media链接作为<source>的src，同时设置type为获取到的MIME类型：

   <video controls>
     <source src="https://www.googleapis.com/drive/v3/files/[FILE_ID]?alt=media&key=[API_KEY]" type="video/mp4">
   </video>
   

   浏览器会根据type属性识别视频格式，无需依赖文件名扩展名。

方案2：动态获取带确认参数的下载链接（适用于公开共享文件）

针对uc?export=download的拦截问题，可以通过动态获取重定向后的带confirm参数的链接来绕过扫描提示：

async function getValidDriveUrl(fileId) {
  const res = await fetch(`https://drive.google.com/uc?export=download&id=${fileId}`);
  // 返回重定向后的最终有效链接
  return res.url;
}

// 调用并设置视频源
getValidDriveUrl("你的文件ID").then(url => {
  const video = document.querySelector("video");
  video.src = url;
  // 可选：提前获取MIME类型并设置video的type属性
});

注意：confirm参数可能会过期，需要每次播放前动态获取；仅适用于已设置为「任何人可查看」的公开文件。

关键注意事项 #

• 权限配置：
  • 公开文件：需设置为「任何人都可以查看」，API Key或直接链接才能访问
  • 私有文件：不能仅用API Key，需使用OAuth 2.0授权用户访问对应文件
• CORS设置：在Google Cloud控制台的API Key配置中，添加你的网站域名到「HTTP引用来源」列表，避免跨域请求被拦截
• 流式支持：两个方案均支持HTTP Range请求，HTML5 video会自动实现流式加载，无需额外处理大文件的分段播放

内容的提问来源于stack exchange，提问作者withtahmid