React Player在移动端Chrome环境下无法通过URL加载视频问题求助

你使用的是HLS格式的.m3u8视频流，桌面端Chrome原生不支持该格式，正常播放是因为React Player自动调用了hls.js做软解码。移动端Chrome存在独有的播放限制和React Player默认适配逻辑缺陷，导致加载失败，可按以下步骤修复：

修复步骤 #

• 强制启用hls.js软解码：React Player默认在移动端优先尝试调用系统原生能力播放HLS，但安卓Chrome对跨域HLS流的原生支持兼容性极差，需要在配置中强制开启hls.js软解，关闭原生播放回退。
• 适配移动端自动播放规则：安卓Chrome禁止非静音状态下的自动播放，如果你初始化时将playing设为true，要么默认将muted设为true，要么必须在用户点击、触摸等交互行为触发后再修改playing状态为true，否则播放会被浏览器直接拦截。
• 补充移动端专属播放属性：添加playsinline属性避免视频强制拉起全屏播放，安卓Chrome下未加该属性会大概率拦截非全屏的播放行为。

修改后可正常运行的代码 #

const streamUrl='https://d3nzuksi34yzii.cloudfront.net/4611/240/240p.m3u8';

<ReactPlayer
  ref={playerRef}
  width="100%"
  height="100%"
  url={streamUrl}
  pip={pip}
  playing={playing}
  controls={false}
  light={light}
  loop={loop}
  playbackRate={playbackRate}
  volume={volume}
  muted={muted}
  onProgress={handleProgress}
  config={{
    file: {
      forceHLS: true, // 强制识别为HLS流不走其他格式匹配
      hls: {
        enable: true // 强制开启hls.js软解，跳过原生HLS播放尝试
      },
      attributes: {
        crossorigin: 'anonymous',
        controlsList: 'nodownload',
        playsInline: true, // 移动端禁止自动全屏
        'x5-playsinline': true // 兼容腾讯系移动端内核可选配置
      },
    },
  }}
/>

如果以上配置修改后仍无法播放，检查CloudFront的CORS配置，确保响应头包含匹配你站点域名的Access-Control-Allow-Origin，同时暴露Content-Range、Content-Length响应头，否则HLS分片拉取会触发跨域错误导致加载失败。

内容的提问来源于stack exchange，提问作者Nafaz M N M