Google Drive视频嵌入HTML报错net::ERR_CONNECTION_TIMED_OUT排查

问题根源 #

1. 错误使用网页查看链接作为视频源 #

你当前用的https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/view?usp=sharing是Drive的网页查看入口，并非直接的媒体资源URL。HTML的<video>标签需要能直接流式传输的文件地址，这种网页链接会跳转至Drive的交互页面，浏览器无法将其解析为可播放的视频流，因此触发ERR_CONNECTION_TIMED_OUT错误。

2. 视频未完成转码分析 #

Drive上传视频后会自动进行转码、格式适配的分析流程，在此期间视频无法对外提供标准化的流媒体服务，所以会出现“需用应用打开”的提示，也无法正常嵌入网页。

解决方法 #

第一步：等待分析完成 #

耐心等待Drive完成视频转码（时长取决于视频大小，小文件几分钟，大文件可能数小时），直到你能在Drive网页端直接播放视频，再进行后续操作。

第二步：获取正确的嵌入链接 #

视频可正常播放后，按以下步骤生成可用的URL：

• 打开视频的Drive详情页，点击右上角「分享」，确认权限设置为公开可查看。
• 复制分享链接（格式为https://drive.google.com/file/d/[文件ID]/view?usp=sharing）。
• 修改链接格式二选一：
  • 替换/view?usp=sharing为/preview：此为Drive的内嵌预览链接，支持直接在<video>中流式播放。
  • 替换/view?usp=sharing为/uc?export=download：此为直接下载链接，兼容性更强，适合部分无法解析预览链接的场景。
• 将修改后的URL填入<video>标签的src属性，示例代码：

  <video controls width="600">
    <source src="https://drive.google.com/file/d/1vJgksW011ngQpyBV7xdrJid3X4cLFza_/preview" type="video/mp4">
    你的浏览器不支持HTML5视频播放
  </video>
  

第三步：验证链接有效性 #

将修改后的链接直接粘贴到浏览器地址栏，确认能直接播放或下载视频，再嵌入到HTML项目中即可。

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