React项目视频桌面播放正常但移动端Safari无法自动播放问题求助

1. 修正HTML注入的属性写法 #

原生HTML不识别React的驼峰属性（如playsInline）和{true}赋值语法，需调整为原生标准属性，同时source标签不需要autoPlay、muted属性，这两个是video标签的专属属性，修正后的代码如下：

<div
  dangerouslySetInnerHTML={{
    __html: `
    <video
      loop
      muted
      autoplay
      playsinline
      id="video"
    >
    <source src="${video}" type="video/mp4" />
    </video>`,
  }}
/>

如果没有特殊需求，更推荐直接写React原生video标签，避免innerHTML的属性解析问题：

<video
  loop
  muted
  autoPlay
  playsInline
  id="video"
>
  <source src={video} type="video/mp4" />
</video>

2. 优化MP4文件兼容性 #

移动端Safari对MP4文件的编码和结构要求较高，需做以下检查和处理：

• 确认视频编码为H.264、音频编码为AAC，避免使用H.265、VP9等Safari兼容度低的编码
• 将MP4的MOOV原子移到文件头部，实现边加载边播放，不用等整个文件下载完成才能启动，可使用ffmpeg处理：

  ffmpeg -i 原视频.mp4 -movflags faststart 输出视频.mp4
  

• 尽量使用H.264 Main profile编码，高版本High profile在旧iOS设备上可能无法解码

3. 增加JS主动播放兜底 #

Safari的自动播放策略偶尔会出现属性不生效的情况，可在组件加载完成后主动调用播放方法，加异常捕获兼容限制场景：

// React组件示例，配合useEffect使用
useEffect(() => {
  const video = document.getElementById('video')
  if (video) {
    video.play().catch(err => {
      // 若自动播放被拦截，可在这里增加点击播放的交互提示
      console.log('自动播放被拦截', err)
    })
  }
}, [])

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