HTML5/Bootstrap站点嵌入视频iOS无法播放，其他设备正常

你的核心问题在于使用了不规范的<embed>标签写法（多个src属性只会让浏览器读取最后一个），且iOS Safari对<embed>的视频支持有限。换成HTML5标准的<video>标签是跨平台兼容的最优解。

解决方案步骤 #

• 用<video>标签替代<embed>，搭配<source>标签提供不同格式的视频文件，浏览器会自动选择支持的格式加载
• 确保MP4文件采用H.264编码（iOS原生支持的核心视频编码），这是兼容性最广的格式
• 保留必要的交互与响应式属性，比如controls（播放控件）、allowfullscreen（全屏支持）

修正后的代码 #

<div class="container bg-white">
  <div class="row">
    <div class="col-xl-8" style="padding-top: 25px">
      <div class="embed-responsive embed-responsive-16by9 bg-secondary">
        <video controls allowfullscreen class="embed-responsive-item">
          <!-- 按兼容性从高到低排列，浏览器优先选第一个支持的格式 -->
          <source src="video/IMG_6921_mp4.mp4" type="video/mp4">
          <source src="video/IMG_6921_mov.mov" type="video/quicktime">
          <source src="video/IMG_6921_webm.webm" type="video/webm">
          <!-- 浏览器不支持HTML5 video时的 fallback 提示 -->
          您的浏览器不支持视频播放，请更新浏览器后重试。
        </video>
      </div>
    </div>
  </div>
</div>

补充说明 #

• 不需要再提供AVI格式，因为AVI几乎没有浏览器原生支持，属于冗余格式
• 响应式布局可以通过Bootstrap的embed-responsive-item类实现，和你原来的布局适配
• iOS Safari会自动识别<video>标签并提供原生播放控件，完美支持H.264编码的MP4/MOV文件

内容的提问来源于stack exchange，提问作者Casey Y.