如何在Shaka Player中使用获取的Widevine License URL播放DASH文件

核心实现流程 #

• 引入Shaka Player依赖并初始化播放器实例
• 请求DRM ticket接口获取返回的licence_server_url许可证地址
• 将许可证地址配置到Shaka Player的DRM规则中
• 加载DASH格式的.mpd manifest文件触发播放

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <!-- 可替换为本地引入的Shaka Player库文件 -->
  <script src="shaka-player.compiled.min.js"></script>
</head>
<body>
  <video id="playback-video" width="100%" controls></video>
  <script>
    async function startPlayback() {
      const videoElement = document.getElementById('playback-video');
      const shakaPlayer = new shaka.Player(videoElement);
      // 全局错误监听
      shakaPlayer.addEventListener('error', (err) => {
        console.error('播放器运行错误：', err.detail);
      });
      // 1. 请求接口获取Widevine许可证服务器地址
      const ticketRes = await fetch('https://example/v1/drm/content/ticket/?streamId=47072');
      const ticketResult = await ticketRes.json();
      const widevineLicenseUrl = ticketResult.licence_server_url;
      // 2. 配置DRM参数
      shakaPlayer.configure({
        drm: {
          servers: {
            // 该值为Widevine固定系统标识，不可修改
            'com.widevine.alpha': widevineLicenseUrl
          }
          // 若许可证请求需要携带自定义请求头，取消下方注释并修改对应配置
          // , advanced: {
          //   'com.widevine.alpha': {
          //     headers: {
          //       '自定义头字段': '对应值'
          //     }
          //   }
          // }
        }
      });
      // 3. 加载DASH manifest文件启动播放
      try {
        await shakaPlayer.load('https://example.com/7844-6093f36b051c9/manifest.mpd');
      } catch (loadErr) {
        console.error('资源加载失败：', loadErr);
      }
    }
    // 页面加载完成后启动初始化流程
    document.addEventListener('DOMContentLoaded', startPlayback);
  </script>
</body>
</html>

配置注意事项 #

• com.widevine.alpha是Widevine DRM在Chromium内核浏览器、安卓设备中的固定系统标识，配置时不可修改
• 确保DASH资源、许可证服务、当前页面域名满足CORS跨域规则，避免浏览器拦截请求
• 若许可证服务器要求POST请求携带特定格式的挑战数据，可通过drm.advanced下的licenseRequestFilter钩子自定义请求逻辑

内容的提问来源于stack exchange，提问作者jay.jivani