HTML 嵌入 YouTube 视频出现 Error 153,本地无法播放怎么办?
结论
先检查本地页面是否通过 file:// 打开。如果是,改用本地 HTTP 服务访问,然后再测试视频播放。
YouTube 将错误 153 定义为请求缺少 HTTP Referer 请求头或等效的 API 客户端标识。你设置的 strict-origin-when-cross-origin 策略符合 YouTube 的建议,接下来需要确认请求是否实际携带了来源信息。YouTube 错误码说明、嵌入播放器身份要求。
原问题没有提供本地访问地址,目前还不能确定根因。既然视频在 Neocities 上可以播放,可以先比较两种访问环境中的请求。
为什么设置 referrer policy 后仍可能失败?
referrerpolicy 控制浏览器如何发送来源信息,但不会给本地文件创建一个 HTTP 来源地址。
如果直接双击 HTML 文件,地址栏通常是 file:///.../index.html。大多数通用浏览器不会把本地 file URL 作为 Referer 发送,这与错误 153 的触发条件相符。RFC 9110 的 Referer 说明。
因此,本地文件无法播放而托管后正常,是值得检查的线索,但仍需通过访问地址和请求头确认。
第一步:通过本地 HTTP 服务打开页面
如果已安装 Python 3,在 HTML 文件所在目录执行:
python3 -m http.server 8000 --bind 127.0.0.1
假设文件名为 index.html,在浏览器中访问:
http://127.0.0.1:8000/index.html
文件名和端口只是示例,请按实际情况调整。测试时确认地址栏使用的是 http://,避免再次打开原来的 file:// 页面。如果已经通过本地 HTTP 服务访问,可以直接进行下一步。
第二步:保留现有策略,检查实际请求
当前 iframe 中的策略可以保留:
referrerpolicy="strict-origin-when-cross-origin"
该策略在允许发送来源的跨源请求中只提供来源地址,适合这里的嵌入场景。MDN Referrer-Policy 说明。
打开开发者工具,按顺序检查:
- 切换到 Network 面板,然后刷新页面。
- 找到
https://www.youtube.com/embed/wDchsz8nmbo的请求。 - 查看 Request Headers 中是否存在
Referer。 - 比较本地页面和 Neocities 页面发出的请求。
通过上述本地服务访问时,正常发送的来源信息可能类似:
Referer: http://127.0.0.1:8000/
如果请求头缺失,检查浏览器扩展、隐私设置或代理是否移除了来源信息。可以使用未启用扩展的浏览器配置进行对照测试。HTML 中写有 referrerpolicy,并不代表请求头一定已经发送。
可用于对照的 HTML
下面的代码保留了原视频地址和来源策略,并修正了 viewport 中 device-width 两侧多余的单引号。这项修正用于规范页面配置,不能据此认定错误 153 已解决。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="strict-origin-when-cross-origin">
<title>Document</title>
</head>
<body>
<iframe
width="1713"
height="963"
src="https://www.youtube.com/embed/wDchsz8nmbo"
title="1 Minute Sample Video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</body>
</html>
如果仍然出现 Error 153
如果已通过 HTTP 访问,并确认 iframe 请求携带了 Referer,需要继续查看播放器后续请求是否失败,以及扩展或网络中间层是否修改了请求。仅凭现有代码,无法确定这种情况下的具体原因。
不要把直接在地址栏打开 /embed/视频ID 当作有效的对照测试。这种访问通常没有外层嵌入页面提供的 Referer,也可能出现错误 153。YouTube 嵌入帮助。
备注:内容仅供参考。
