使用HTML video标签加载视频触发CORB错误但iframe正常如何解决？

问题根因 #

你当前触发CORB错误的核心原因是填入<video>标签<source>的地址是嵌入页面地址，并非真实的视频文件地址：

• 该地址https://embed.truthcasting.com/video/100003694/208448返回的响应Content-Type为text/html，和你指定的type="video/mp4"不匹配，浏览器的CORB机制会直接拦截这类和预期资源类型不符的跨域响应。
• iframe加载正常是因为iframe本身就是用来渲染HTML页面的，预期内容类型和响应匹配，不会触发拦截。

CORB和CORS是两种不同的浏览器安全机制：CORS是限制跨域请求的权限，CORB是过滤跨域响应的内容和预期是否匹配，你当前的问题首先是资源类型不匹配导致的，其次如果用了真实视频地址跨域的话才需要配置CORS。

服务端所需配置 #

如果你要使用<video>标签加载该平台的视频，需要服务端配合完成以下配置：

1. 首先提供真实的视频文件直链地址，而非嵌入页地址，且视频资源的响应头Content-Type需要和你<source>标签指定的type完全匹配，比如MP4视频对应Content-Type: video/mp4
2. 如果视频资源和你的组件部署域名跨域，需要添加CORS响应头：
   • Access-Control-Allow-Origin: 你的组件部署域名，如果需要允许所有域名嵌入可以设为*
3. 确保视频资源的响应没有配置限制媒体资源加载的安全头，比如Content-Security-Policy: media-src 'self'这类限制。

替代方案 #

如果无法拿到平台的视频直链地址，也可以通过动态切换iframe的src属性实现多源切换的需求，无需强制使用<video>标签，不会触发CORB错误。

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