iOS系统下Bootstrap模态框弹出iframe视频无法自动播放如何解决

这个问题是iOS端WebKit内核的自动播放策略限制导致的，现有逻辑不符合iOS的自动播放触发规则，不需要更换整套实现方案，调整部分代码即可解决：

核心原因 #

iOS端所有浏览器都基于WebKit内核，规则要求非静音视频的自动播放操作必须在用户主动触发的点击事件上下文内执行。你当前绑定的show.bs.modal是Bootstrap的异步事件，已经脱离了用户点击的上下文栈，所以自动播放被系统拦截。 #

推荐优化方案（优先用原生video标签，适配性更强） #

1. HTML代码修改

<a href="#headerPopup" id="headerVideoLink" target="_blank" data-toggle="modal" data-target="#videoModal"> 观看视频 </a>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <!-- 替换iframe为原生video标签，添加iOS必备适配属性 -->
            <video width="100%" height="auto" id="myVideo" playsinline webkit-playsinline controls>
                <source src="../static/img/videos/Whatsfordinner with filter.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</div>

2. JS代码修改

$(document).ready(function(){
   const videoDom = $("#myVideo")[0];
   const originalSrc = $("#myVideo source").attr('src');

   // 把加载+播放逻辑直接绑定到用户点击按钮的事件中，符合iOS自动播放规则
   $("#headerVideoLink").on('click', function(){
      setTimeout(() => {
          videoDom.src = originalSrc;
          videoDom.play();
      }, 100); // 短延迟等待模态框渲染完成，可根据实际场景调整时长
   });

   // 模态框关闭时清空资源停止播放
   $("#videoModal").on('hide.bs.modal', function(){
      videoDom.pause();
      videoDom.src = '';
   });
});

若必须保留iframe实现，调整如下 #

1. 给iframe的src地址添加后缀#autoplay=1
2. 把iframe的allow属性调整为allow="autoplay; fullscreen"
3. 和上面的方案一样，把设置iframe src的逻辑从show.bs.modal回调，移动到#headerVideoLink的点击事件回调中即可。

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