HTML <video>标签跨设备播放异常：PC正常移动端Safari故障求助

针对你遇到的PC端播放正常、部分移动端无法播放或需弹窗播放的问题，以下是针对性解决方法：

• 添加playsinline属性：iOS Safari默认会将视频跳转至全屏播放器播放，该属性可强制视频在页面内（inline）播放，避免弹窗的同时，满足移动端自动播放的核心条件。
• 检查视频编码兼容性：移动端对MP4视频编码要求更严格，需确保视频采用H.264 Baseline Profile编码，帧率控制在30fps以内，分辨率适配720p/1080p等移动端常见尺寸。
• 优化视频文件结构：确保视频文件的moov原子（存储元数据的部分）位于文件开头，否则移动端可能因加载延迟无法正常播放。可通过FFmpeg工具重新封装：ffmpeg -i input.mp4 -movflags faststart output.mp4
• 补充preload属性：添加preload="auto"可让浏览器提前加载视频内容，提升移动端播放流畅度（注意：该属性会消耗用户流量，需根据场景选择）。

修改后的示例代码：

<div class="video_container">
  <video
    autoplay
    muted
    loop
    playsinline
    preload="auto"
    src="./resources/videos/excursion.mp4"
    type="video/mp4"
  >
    Video not compatible with your browser
  </video>
</div>

若问题仍存在，可排查：

• 视频文件路径在移动端是否可正常访问（检查相对路径是否正确，或是否因HTTP协议被移动端浏览器拦截）
• 用户是否修改过移动端浏览器的隐私/自动播放设置

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