video设置autoplay无效 需点击左上角logo触发播放修复方案

问题背景 #

• 站点首页首屏视频已配置autoplay属性，但桌面端访问时视频无法自动启动
• 必须点击页面左上角logo一次才能触发视频播放
• 相关逻辑为10年前离职员工开发，无配套维护文档

根因定位 #

目前所有主流浏览器（Chrome、Firefox、Safari、Edge）都执行统一的媒体自动播放策略，结合现有代码逻辑，问题出在四个地方：

1. 视频标签缺失muted（静音）属性：带音轨的非静音视频，浏览器默认禁止无用户交互的自动播放，这是最核心的原因
2. 代码逻辑存在缺陷：动态给video标签设置src后，仅调用了load()方法，没有显式调用play()触发播放；标签初始设置display:none时，部分浏览器不会触发原生autoplay逻辑
3. 视频标签缺失iOS适配属性：Safari移动端需要playsinline属性支持内联播放，否则会强制弹出全屏播放器
4. 原有高度适配逻辑用JS计算宽高，判断条件存在冲突，容易在加载过程中出现样式异常干扰播放触发

具体修复步骤 #

1. 调整video标签属性
   把原有的video标签替换为以下代码，补全必要属性：

   <video autoplay loop muted playsinline preload poster="/images/giffindexmanufacturer2022.jpg" id="videoHero" style="display:none;height:auto;"></video>
   

   muted是所有浏览器允许自动播放的硬性前置要求，playsinline用于适配iOS Safari的内联播放规则
2. 修正视频加载播放逻辑
   找到JS中loadeddata事件的回调函数，替换为以下逻辑，显式触发播放并增加异常兜底：

   videoHero.addEventListener('loadeddata', function() {
       $(".videoslide .wrapper").css('background', 'rgba(0,0,0,0.1)'); 
       const playTask = videoHero.play();
       // 兼容不返回Promise的旧浏览器
       if (playTask !== undefined) {
           playTask.then(() => {
               // 播放成功后再淡入视频，避免显示黑屏
               $(".videoslide video").fadeIn(200);
               updateVideoHeight();
           }).catch(() => {
               // 如果被浏览器安全策略拦截，监听第一次用户任意交互就触发播放
               const triggerPlay = () => {
                   videoHero.play();
                   $(".videoslide video").fadeIn(200);
                   updateVideoHeight();
               };
               // 一次交互就移除监听，避免重复触发
               document.addEventListener('click', triggerPlay, { once: true });
               document.addEventListener('touchstart', triggerPlay, { once: true });
           });
       }
   }, false);
   

   原有逻辑仅做了视频淡入效果，没有主动调用播放方法，动态修改src的场景下原生autoplay不会自动生效，必须显式调用play()。增加的兜底逻辑不需要用户特意点击logo，页面任意位置的第一次点击/触摸都会触发播放，兼容极少数严格限制自动播放的浏览器场景。
3. 优化视频尺寸适配逻辑
   原有JS计算宽高的逻辑容易出现判断冲突，直接用CSS实现适配更稳定，给视频元素增加以下样式：

   .videoslide video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       z-index: 0;
   }
   

   增加该样式后，可以直接删除updateVideoHeight函数以及绑定在window上的resize监听，减少JS运行出错的概率，同时自动适配所有屏幕尺寸，不会出现黑边、拉伸变形问题。

验证标准 #

• 清空缓存后新开标签页访问站点，无需任何点击操作，视频自动静音循环播放
• 移动端访问时正常显示预设的背景图，不会自动加载视频消耗用户流量（原有移动端UA判断逻辑可正常保留）
• 缩放浏览器窗口、切换横竖屏时，视频始终铺满首屏容器，无样式异常
• 即使在极少数限制严格的浏览器环境下，用户点击页面任意位置即可触发视频播放，不需要特意点击左上角logo

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