HTML DOM Video crossOrigin 属性

简介

HTML5 的 <video> 标签被广泛使用，允许在网页中嵌入视频。为了防止跨站攻击（Cross-site attacks），HTML DOM 规范定义了 crossOrigin 属性。该属性指定是否允许从不同源加载视频。

语法

videoObject.crossOrigin = "anonymous|use-credentials";

属性值

crossOrigin 属性可设置以下值：

• anonymous：允许跨域请求视频，但不提供凭据（如 Cookie 和 HTTP 认证）。
• use-credentials：允许跨域请求视频，并提供凭据。

注意事项

• 该属性只有在 CORS（Cross-Origin Resource Sharing）（跨源资源共享）策略允许的情况下才有效。
• 如果视频的 crossOrigin 属性设置为 anonymous，则相应的响应头需要包含 Access-Control-Allow-Origin: * 或者指定的域名，否则将无法跨域加载视频。
• 如果视频的 crossOrigin 属性设置为 use-credentials，则相应的响应头需要包含 Access-Control-Allow-Origin: 具体允许的域名，同时需要在前端配置正确的跨域凭据（一般通过 XMLHttpRequest.withCredentials 属性实现）。

示例代码

<!-- 包含 video 标签的 HTML 代码 -->
<video id="my-video" src="http://example.com/video.mp4"></video>

// JS 代码
let video = document.getElementById("my-video");
video.crossOrigin = "anonymous";

结论

HTML DOM 规范的 crossOrigin 属性允许跨域请求视频，增强了视频的可用性和跨域请求的安全性。程序员需要注意 CORS 策略和跨域凭据的配置，以免无法正确加载视频。