能否仅通过纯Javascript与HTML5 Video播放DRM内容？

当然可以，但你得自己扛下原本由 Shaka Player、Dash.js 这些库封装好的一大堆底层工作——从流清单解析、DRM 密钥获取到媒体片段加载解码，每一步都要手动实现。下面具体说怎么搞：

核心基础：HTML5 的原生能力 #

HTML5 靠 MediaSource Extensions (MSE) 和 Encrypted Media Extensions (EME) 提供了原生加密媒体播放支持，这是纯 JS 实现的核心。先明确各浏览器支持的 DRM 密钥系统：

• Safari（macOS/iOS）：仅支持 com.apple.fairplay
• Chrome：仅支持 com.widevine.alpha
• Edge：支持 com.widevine.alpha 和 com.microsoft.playready

分DRM类型的实现步骤 #

1. Widevine（Chrome/Edge） #

• 初始化 MediaSource 关联视频元素
  创建 MediaSource 对象，把它的 URL 赋值给 video 的 src，监听 sourceopen 事件准备后续操作：

  const video = document.getElementById('drm-video');
  const mediaSource = new MediaSource();
  video.src = URL.createObjectURL(mediaSource);
  
  mediaSource.addEventListener('sourceopen', async () => {
    // 所有后续逻辑都在这里写
  });
  

• 解析流清单
  自己发请求拉取 DASH 的 MPD 或 HLS 的 m3u8 文件，手动解析出媒体轨道信息（编码格式、初始化片段地址、媒体片段地址列表）。
• 配置 DRM 密钥系统
  请求 Widevine 密钥系统权限，创建 MediaKeys 并绑定到视频元素：

  const keySystemOptions = [{
    initDataTypes: ['cenc'],
    audioCapabilities: [{ contentType: 'audio/mp4; codecs="mp4a.40.2"' }],
    videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.4D401E"' }]
  }];
  
  const keySystemAccess = await navigator.requestMediaKeySystemAccess('com.widevine.alpha', keySystemOptions);
  const mediaKeys = await keySystemAccess.createMediaKeys();
  await video.setMediaKeys(mediaKeys);
  

• 获取并注入密钥
  从初始化片段或清单里提取 DRM 初始化数据（initData），构造请求发给你的 DRM 服务器，拿到密钥后通过 MediaKeySession 注入：

  const session = mediaKeys.createSession();
  session.addEventListener('message', async (event) => {
    // event.message 是原始密钥请求数据，直接发给DRM服务器
    const licenseResponse = await fetch('你的DRM密钥服务地址', {
      method: 'POST',
      body: event.message,
      headers: { 'Content-Type': 'application/octet-stream' }
    });
    const license = await licenseResponse.arrayBuffer();
    await session.update(license);
  });
  
  // 传入解析得到的initData
  await session.generateRequest('cenc', initData);
  

• 加载媒体片段
  按照清单里的片段地址逐个请求数据，添加到对应的 SourceBuffer 里，实现流式播放。

2. PlayReady（Edge） #

流程和 Widevine 基本一致，核心区别是密钥系统标识换成 com.microsoft.playready，还有密钥请求/响应的格式细节（比如 PlayReady 常用 XML 格式的请求）。示例密钥系统请求：

const keySystemAccess = await navigator.requestMediaKeySystemAccess('com.microsoft.playready', [/* 对应音频/视频能力配置 */]);

3. FairPlay（Safari） #

FairPlay 的逻辑差异比较大，因为它基于 HLS 流，还有专属的证书和密钥交换机制：

• 关联 HLS 流
  Safari 原生支持 HLS，直接把加密 HLS 流的 URL 赋值给 video.src 就行，但要处理密钥获取逻辑。
• 获取 FairPlay 证书
  先从你的服务器拉取 FairPlay 证书，用来给后续的密钥请求签名。
• 处理加密事件
  监听 video 的 encrypted 事件，提取初始化数据，用证书签名后构造密钥请求发给 DRM 服务器，拿到密钥再注入：

  video.addEventListener('encrypted', async (event) => {
    const keySystemAccess = await navigator.requestMediaKeySystemAccess('com.apple.fairplay', [/* 对应能力配置 */]);
    const mediaKeys = await keySystemAccess.createMediaKeys();
    await video.setMediaKeys(mediaKeys);
    const session = mediaKeys.createSession();
  
    session.addEventListener('message', async (event) => {
      // 用FairPlay证书对event.message做签名，构造合法的密钥请求
      const licenseResponse = await fetch('你的DRM密钥服务地址', {
        method: 'POST',
        body: 签名后的请求数据,
        headers: { /* 对应请求头 */ }
      });
      const license = await licenseResponse.arrayBuffer();
      await session.update(license);
    });
  
    await session.generateRequest(event.initDataType, event.initData);
  });
  

你还得手动搞定这些额外工作 #

• 流解析细节：手动处理 MPD/m3u8 的 XML/文本解析，还要实现多码率自适应、轨道切换这些逻辑。
• 错误处理：密钥请求失败、媒体加载出错、DRM 会话过期等各种异常，都得自己写捕获和恢复逻辑。
• 性能优化：媒体片段预加载、缓存管理，避免播放卡顿。
• 兼容性适配：不同浏览器对 EME/MSE 的细节实现有差异，得逐个做兼容。

总结 #

纯 JS + HTML5 Video 完全能实现 DRM 播放，但工作量巨大。如果没有特殊的定制需求，继续用 Shaka Player、Dash.js 这类成熟库会省心太多——它们已经把所有 DRM 适配、流解析和错误处理都封装好了，能省掉大量开发和维护成本。

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