HTML video标签在iOS及iPadOS全浏览器下无法正常显示问题咨询

核心问题原因 #

iOS Safari内核对video标签有特殊的安全和交互限制，你的现有代码缺失必要的兼容属性，且存在协议不匹配的风险。

修复后的完整代码 #

<div class="sparsh-video-gallery-container">
  <img class="playBtn" src="//local-ub/static/version1635318690/frontend/Attindas/corporate/en_US/images/play.svg">
  <video 
    preload="metadata" 
    id="videoId-7" 
    class="video-player" 
    width="300" 
    height="200" 
    poster="此处替换为你的封面图地址，无封面可填透明1px图片地址" 
    playsinline
    webkit-playsinline
  >
    <source src="//local-ub/media/sparsh/video_gallery/I_Am_Attindas_Revised_1_.mp4" type="video/mp4">
  </video>
</div>

关键修改点说明 #

• 新增playsinline、webkit-playsinline属性：强制视频在页面文档流内播放，避免iOS默认触发全屏播放导致的渲染异常
• 把preload属性值从auto改为metadata：iOS默认禁止自动预加载全量视频，仅加载元数据可避免预加载失败导致的空白
• 资源地址改为相对协议//开头：自动适配HTTP/HTTPS站点，避免HTTPS站点加载HTTP资源被iOS安全策略拦截
• 补全poster属性：空poster会导致部分低版本iOS渲染video标签失败，无封面需求可使用1px透明png占位

自定义播放按钮交互注意事项 #

如果你的业务逻辑是点击自定义的playBtn触发播放，JS代码必须满足iOS的交互触发规则：播放动作必须由用户真实点击事件直接触发，不能在异步回调、定时器中调用play方法，示例代码如下：

const playBtn = document.querySelector('.playBtn');
const video = document.getElementById('videoId-7');
playBtn.addEventListener('click', function() {
  // 直接在点击回调内调用播放
  video.play().catch(function (error) {
    // 播放失败可在此处做降级处理
    console.log('视频播放失败', error);
  });
});

其他排查项 #

• 确认视频编码为H.264+AAC格式，iOS不支持其他编码的MP4文件
• 确认视频资源没有设置访问权限限制，不要针对iOS UA做特殊的请求拦截
• 如果需要实现自动播放，需要额外添加muted属性，iOS仅允许静音视频自动播放，带音频的视频必须由用户手动触发播放

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