html5视频跨域播放需前后端协同：服务端必须返回access-control-allow-origin、access-control-allow-headers: range等cors头，前端video标签须设crossorigin属性，且csp中需配置media-src指令限制媒体源。
HTML5 视频标签跨域播放，不能只靠加 crossorigin 属性就万事大吉。它是一套前后端协同的配置体系：服务端必须返回合规 CORS 响应头，前端需正确声明跨域模式，同时还要配合内容安全策略（CSP）限制媒体来源——三者缺一不可。
服务端必须返回的关键 CORS 响应头
浏览器对音视频资源的跨域访问比图片、脚本更严格。仅返回 Access-Control-Allow-Origin: * 不够，还需满足以下最低要求：
-
Access-Control-Allow-Origin：可设为具体域名（如
https://yourapp.com），若需支持凭证则不能为* - Access-Control-Allow-Headers: Range：必需项，否则 Safari/Chrome 可能无法拖拽、缓冲或流式加载
-
Access-Control-Expose-Headers：建议加上
Content-Range和X-Content-Range，便于 JS 读取分片信息 - 若需携带 Cookie 或认证头，额外添加：
Access-Control-Allow-Credentials: true，且前端必须用crossorigin="use-credentials"
前端 video 标签的 crossorigin 配置要点
不加 crossorigin 属性，浏览器会当作“不透明响应”处理，JS 无法读取 duration、buffered 或触发 loadedmetadata 事件。
-
crossorigin="anonymous"：最常用，发起跨域请求但不带 Cookie；服务端响应头中Access-Control-Allow-Origin可为* -
crossorigin="use-credentials"：需携带认证信息（如登录态 Cookie），此时服务端Access-Control-Allow-Origin必须是具体域名，不能是* - 动态创建 video 元素时，也要显式设置：
v.crossOrigin = 'anonymous'，再赋值v.src - 字幕（
<track></track>）、封面图（poster）同样受跨域约束，需一并配置
内容安全策略（CSP）中的 media-src 控制
CSP 的 media-src 指令专管所有音视频相关资源的加载源，包括 <video src></video>、<audio src></audio>、poster 图片、WebVTT 字幕文件等。
- 务必显式声明
media-src，不要依赖default-src回退，容易遗漏 - 推荐写法：
media-src 'self' https://cdn.example.com https://videos.yourapp.net; - 禁用
http:协议，避免中间人劫持；慎用通配符https://*.example.com，禁止使用*或data:（除非确需内联 base64 小资源） - HLS/DASH 播放器加载的
.m3u8、.ts、.mpd文件由connect-src控制，不是media-src管辖范围
常见失败场景与排查方向
播放失败但网络请求状态码为 200，大概率是跨域或 CSP 问题。可按顺序检查：
- 浏览器开发者工具 → Network 标签页 → 点击视频资源 → 查看 Response Headers 是否含
Access-Control-Allow-Origin和Access-Control-Allow-Headers: Range - Console 中是否报错 “Origin is not allowed…” 或 “Refused to load media from…”
- 若报 CSP 错误，检查实际加载的所有 URL（包括字幕、poster、HLS 分片）是否都匹配
media-src或connect-src策略 - 确认播放器（如 Plyr、Video.js）未绕过
crossorigin直接用 fetch 加载，这类情况需额外配置connect-src
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
