Video.js播放DASH内容时未传递Cloudfront签名Cookie问题求助

问题详情 #

在NextJS项目中使用Video.js构建播放器，播放受Cloudfront签名Cookie保护的DASH视频内容时，出现以下异常：

• 播放器能正常获取.mpd索引文件，但无法加载具体的.mp4分片文件
• 直接在浏览器地址栏访问分片文件，能正常加载播放
• 已尝试过类似问题的解决方案，但未解决问题

用户当前代码：

useEffect(() => {
  if (!playerRef.current) {
    const videoElement = document.createElement("video-js");

    playerRef.current = videojs(videoElement, {
      responsive: true,
      fluid: true,
      aspectRatio: "16:9",
      sources: [
        {
          src: videoSrc,
          type: "application/dash+xml",
          withCredentials: true,
        },
      ],
    });

    playerRef.current.on("loadeddata", onDuration);
    playerRef.current.on("click", onPlayPause);
  }
}, [src]);

useEffect(() => {
  const player = playerRef.current;

  return () => {
    if (player && !player.isDisposed()) {
      player.dispose();
      playerRef.current = null;
    }
  };
}, [playerRef, src]);

解决方法 #

1. 给dash.js实例强制开启withCredentials #

Video.js的DASH播放依赖dash.js库，仅在source配置中设置withCredentials可能无法传递到分片请求，需要直接给dash.js实例配置：

useEffect(() => {
  if (!playerRef.current) {
    const videoElement = document.createElement("video-js");

    playerRef.current = videojs(videoElement, {
      responsive: true,
      fluid: true,
      aspectRatio: "16:9",
      sources: [
        {
          src: videoSrc,
          type: "application/dash+xml",
          withCredentials: true,
        },
      ],
    });

    // 关键：获取dash.js实例并开启XHR带凭证
    const tech = playerRef.current.tech({ IWillNotUseThisInPlugins: true });
    if (tech.dash) {
      tech.dash.mediaPlayer.setXHRWithCredentials(true);
    }

    playerRef.current.on("loadeddata", onDuration);
    playerRef.current.on("click", onPlayPause);
  }
}, [src]);

2. 检查Cloudfront签名Cookie的属性 #

• 确保Cookie的Domain与视频域名匹配，跨域场景下SameSite需设为None，同时必须携带Secure属性
• 确认Cookie的Path覆盖了DASH分片文件的路径

3. 验证Cloudfront分发配置 #

• 在Cloudfront行为设置中，将“Cookie”选项设为“白名单”，并包含签名所需的Cookie名称
• 检查Origin Request Policy，确保允许将Cookie传递到源站

4. 配置NextJS跨域头（跨域场景） #

如果页面域名与视频域名不同，需在next.config.js中添加跨域配置，确保请求能携带凭证：

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/your-player-page-path', // 替换为播放器所在页面路径
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: 'https://your-cloudfront-domain.com' }, // 替换为你的Cloudfront域名
          { key: 'Access-Control-Allow-Methods', value: 'GET, OPTIONS' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type' },
        ],
      },
    ];
  },
};

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