EME本身不加密，仅作为浏览器与CDM的桥梁；需服务端加密视频、部署许可证服务器，并通过navigator.requestMediaKeySystemAccess、setMediaKeys和mediaKeySession协同实现DRM播放。
HTML5 的 EncryptedMediaExtensions（EME）本身不提供加密能力，它只是浏览器与内容解密模块（CDM）之间的桥梁，用于播放已加密的视频内容。要实现受版权保护视频的加密播放，需结合服务端加密、许可证分发和客户端 EME API 协同工作。
理解 EME 的核心角色
EME 是一套 JavaScript API，允许网页应用与浏览器内置或第三方 CDM（如 Widevine、PlayReady、FairPlay）通信，但不负责加解密算法实现，也不存储密钥。它只做三件事：
- 检测浏览器是否支持特定 DRM 方案（
navigator.requestMediaKeySystemAccess） - 创建 MediaKeys 实例并绑定到 video 元素（
video.setMediaKeys） - 发起许可证请求、接收响应并交由 CDM 解密（通过
mediaKeySession.generateRequest和update）
服务端必须完成的准备工作
EME 播放的前提是视频已按 DRM 标准加密，并有配套的许可证服务器。常见流程如下：
- 使用工具（如
shaka-packager或mp4-dash）对视频进行多 DRM 方案打包：生成含 PSSH（Protection System Specific Header）的 MP4 或 DASH/HLSe 清单 - 部署许可证服务器：响应 EME 的 license request（通常是 POST 到指定 URL），验证授权策略（如 token、用户权限、设备 ID），返回加密后的密钥（如 Widevine 的 JSON Web License）
- 确保 HTTPS 环境运行：所有 EME 操作强制要求安全上下文，HTTP 域下无法启用
前端关键代码逻辑示例
以下为简化但可运行的 EME 初始化与许可证获取片段（以 Widevine 为例）：
// JS
const video = document.getElementById('video');
const config = {
'org.w3.clearkey': { robustness: 'SW' },
'com.widevine.alpha': { robustness: 'SW' }
};
navigator.requestMediaKeySystemAccess('com.widevine.alpha', [
{
initDataTypes: ['cenc'],
audioCapabilities: [{ contentType: 'audio/mp4; codecs="mp4a.40.2"' }],
videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.42E01E"' }]
}
]).then(access => access.createMediaKeys()).then(mediaKeys => {
video.setMediaKeys(mediaKeys);
return fetch('/manifest.mpd').then(r => r.arrayBuffer());
}).then(buffer => {
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', () => {
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
sourceBuffer.appendBuffer(buffer);
});
});
// 许可证处理需监听 keymessage 事件并调用 license server
常见问题与注意事项
实际落地中容易忽略的关键点：
- 不同浏览器支持的 DRM 方案不同：Chrome 支持 Widevine，Edge 支持 PlayReady，Safari 仅支持 FairPlay（且需 HTTPS + Apple 开发者证书）
- PSSH 数据必须随视频初始化段（init segment）一同传输；若用 MSE 动态加载，需在 append 前触发 keysystem 选择
- 许可证响应必须设置正确 MIME 类型（如 Widevine 要
application/octet-stream）及 CORS 头（Access-Control-Allow-Origin、Access-Control-Allow-Headers） - Clear Key 是唯一 W3C 标准内置方案，适合测试，但密钥明文传输，不可用于生产环境版权保护
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
