视频无法在 React 的移动设备上播放

Question

视频在任何台式机或笔记本电脑上都能正常播放，但在移动设备上，特别是移动版 Safari 上，视频无法播放。但是，视频显示为具有正确样式的元素。我已应用 playsInline 和 dangerouslySetInnerHTML 解决方案，但无法播放视频。该视频也是 3.3mb，位于 assets 文件夹中。有人对如何让视频在移动设备上显示和自动播放有任何想法吗？

JSX:

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

Answer 1

问题已解决！

我查了一下原来的mp4编解码器，是AAC，H.264。我使用 HandBrake 解码了 mp4 文件并取出了音频。我不太确定静音功能是否正常工作，但解码文件似乎可以解决问题。