已提供密钥ID与密钥，为何Shaka Player仍无法播放受保护m3u8列表？

问题背景 #

有一个受保护的M3U8文件，已在Shaka Player中配置了对应的Key ID和密钥，但视频仍无法播放。使用VSCode Live Server运行，所有相关文件（MP4分片、list.m3u8、index.html）都在同一目录，控制台输出The video has now been loaded!，代码基本复制自官方文档，仅添加了player.configure配置部分。

提供的代码文件 #

Index.html #

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.7.11/shaka-player.ui.min.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.7.11/controls.min.css"
    />
  </head>
  <body>
    <div data-shaka-player-container style="max-width: 40em" data-shaka-player-cast-receiver-id="07AEE832">
      <video autoplay data-shaka-player id="video" style="width: 100%; height: 100%"></video>
    </div>
    <script>
      const manifestUri = "list.m3u8";

      async function init() {
        const video = document.getElementById("video");
        const ui = video["ui"];
        const controls = ui.getControls();
        const player = controls.getPlayer();
        player.configure({
          drm: {
            // First value is the key-id, second value is the encryption key
            clearKeys: {
              bbd230ea4874420ea798872d6ea2019a: "52ee68eaddf6b390589450214e48a661",
            },
          },
        });

        window.player = player;
        window.ui = ui;

        player.addEventListener("error", onPlayerErrorEvent);
        controls.addEventListener("error", onUIErrorEvent);

        try {
          await player.load(manifestUri);
          console.log("The video has now been loaded!");
        } catch (error) {
          onPlayerError(error);
        }
      }

      function onPlayerErrorEvent(errorEvent) {
        onPlayerError(event.detail);
      }

      function onPlayerError(error) {
        console.error("Error code", error.code, "object", error);
      }

      function onUIErrorEvent(errorEvent) {
        onPlayerError(event.detail);
      }

      function initFailed(errorEvent) {
        console.error("Unable to load the UI library!");
      }

      document.addEventListener("shaka-ui-loaded", init);
      document.addEventListener("shaka-ui-load-failed", initFailed);
    </script>
  </body>
</html>

list.m3u8 #

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-TARGETDURATION:6
#EXT-X-PLAYLIST-TYPE:EVENT
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PROGRAM-DATE-TIME:2024-03-04T23:59:58.967Z
#EXT-X-KEY:METHOD=SAMPLE-AES-CTR,KEYFORMAT="urn:uuid:edef8ba9-79d6-4ace-a3c8-27dcd51d21ed",KEYFORMATVERSIONS="1",URI="data:text/plain;base64,AAAAMnBzc2gAAAAA7e+LqXnWSs6jyCfc1R0h7QAAABISELvSMOpIdEIOp5iHLW6iAZo="
#EXT-X-KEY:METHOD=SAMPLE-AES-CTR,KEYFORMAT="com.microsoft.playready",KEYFORMATVERSIONS="1",URI="data:text/plain;charset=UTF-16;base64,xAEAAAEAAQC6ATwAVwBSAE0ASABFAEEARABFAFIAIAB4AG0AbABuAHMAPQAiAGgAdAB0AHAAOgAvAC8AcwBjAGgAZQBtAGEAcwAuAG0AaQBjAHIAbwBzAG8AZgB0AC4AYwBvAG0ALwBEAFIATQAvADIAMAAwADcALwAwADMALwBQAGwAYQB5AFIAZQBhAGQAeQBIAGUAYQBkAGUAcgAiACAAdgBlAHIAcwBpAG8AbgA9ACIANAAuADAALgAwAC4AMAAiAD4APABEAEEAVABBAD4APABQAFIATwBUAEUAQwBUAEkATgBGAE8APgA8AEsARQBZAEwARQBOAD4AMQA2ADwALwBLAEUAWQBMAEUATgA+ADwAQQBMAEcASQBEAD4AQQBFAFMAQwBUAFIAPAAvAEEATABHAEkARAA+ADwALwBQAFIATwBUAEUAQwBUAEkATgBGAE8APgA8AEsASQBEAD4ANgBqAEQAUwB1ADMAUgBJAEQAawBLAG4AbQBJAGMAdABiAHEASQBCAG0AZwA9AD0APAAvAEsASQBEAD4APAAvAEQAQQBUAEEAPgA8AC8AVwBSAE0ASABFAEEARABFAFIAPgA="
#EXT-X-KEY:METHOD=SAMPLE-AES-CTR,KEYFORMAT="PRMNAGRA",KEYFORMATVERSIONS="1",URI="data:text/plain;base64,eyJrZXktaWQiOiJiYmQyMzBlYS00ODc0LTQyMGUtYTc5OC04NzJkNmVhMjAxOWEiLCJlbWkiOiJjdHIiLCJwcm0iOiJleUpqYjI1MFpXNTBTV1FpT2lKamRISWlMQ0pyWlhsSlpDSTZJbUppWkRJek1HVmhMVFE0TnpRdE5ESXdaUzFoTnprNExUZzNNbVEyWldFeU1ERTVZU0o5In0="
#EXT-X-MAP:URI="map.mp4"
#EXTINF:0.834166667,
58_967.mp4
#EXTINF:5.005,
59_801.mp4
#EXTINF:5.005,
04_806.mp4
#EXTINF:5.005,
09_811.mp4
#EXTINF:5.005,
14_816.mp4
#EXTINF:5.005,
19_821.mp4
#EXTINF:5.005,
24_826.mp4
#EXTINF:5.005,
29_831.mp4
...

可能的解决方向 #

• 修正错误处理函数：当前onPlayerErrorEvent和onUIErrorEvent中错误地使用了全局event变量，应改为传入的参数，这样才能获取到真实的错误信息：

  function onPlayerErrorEvent(errorEvent) {
    onPlayerError(errorEvent.detail);
  }
  
  function onUIErrorEvent(errorEvent) {
    onPlayerError(errorEvent.detail);
  }
  

• 强制使用ClearKeys：M3U8中同时提供了多种DRM格式的密钥，Shaka Player可能优先尝试DRM系统而非ClearKeys，可通过禁用DRM服务器配置强制使用本地密钥：

  player.configure({
    drm: {
      clearKeys: {
        "bbd230ea4874420ea798872d6ea2019a": "52ee68eaddf6b390589450214e48a661",
      },
      servers: {} // 禁用所有DRM服务器
    },
  });
  

• 验证密钥与Key ID匹配：确认配置的十六进制Key ID和密钥，与M3U8中第三个KEY条目里的key-id（bbd230ea-4874-420e-a798-872d6ea2019a去掉连字符）、实际加密使用的密钥完全一致。

• 检查文件可用性：在浏览器网络面板中查看map.mp4和所有MP4分片的请求状态，确保文件能正常加载（返回200 OK），没有损坏或路径错误。

• 确认加密模式兼容性：M3U8使用的是SAMPLE-AES-CTR模式，需确保Shaka Player版本（4.7.11）支持该模式，且密钥符合CTR模式的使用要求。

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