HTML 视频在移动设备上失败答案

【问题标题】：HTML Video failing on mobileHTML 视频在移动设备上失败
【发布时间】：2020-10-26 22:14:25
【问题描述】：

我正在播放ReactPlayer 中的视频，该视频在<video> 标记中生成HTML5 视频。它不适用于移动设备（在 iPhone 8 iOS 13.5.1 上的 Safari、Chrome 和 Firefox 上测试）

我看到this question 让我知道禁用autoplay 并为移动设备添加playsinline，但它仍然不适合我。我提取的文件（如果相关）托管在 Google Cloud Storage 上

<div id="ReactPlayer" style="margin: auto; border-radius: 10px; min-height: 360px; min-width: 640px; display: block; width: 80%; height: 80%;">
  <video src="link_to_my_video" preload="auto" controls="" playsinline="" webkit-playsinline="" x5-playsinline="" style="width: 100%; height: 100%;">
  </video>
</div>

有谁知道如何让它在手机上播放？谢谢

编辑

如果有帮助，我的链接看起来像

"https://firebasestorage.googleapis.com/v0/b/my-mvp.appspot.com/o/videos%sub-folder?alt=media&token=my_token"

它所提取的视频是一个.webm 文件

【问题讨论】：

标签： reactjs video html5-video mobile-website react-player

【解决方案1】：

对我来说，有效的方法是使用 mp4 而不是 webm 录制视频。这会引发 Chrome 只能使用webm MIME 类型进行录制的问题，因此您实际上是在 Chrome 上录制和在移动设备上查看之间进行选择。关于使视频在所有浏览器中通用，我没有明确的答案

我会留下这个问题，希望有人能提出更好的解决方案

【讨论】：