iPhone端HTML5 video标签视频缩略图显示空白白屏问题求助

• 新增poster属性指定首帧图
  iOS Safari为节省用户流量，默认不会主动加载视频首帧作为缩略图，哪怕配置preload="auto"也会被系统策略拦截，手动给video标签添加poster属性，值为预先截取的视频首帧图片地址即可解决，修改后代码参考：

<video width="100%" src="{{section.settings.mp4url}}" preload="auto"  controls="true" loop  playsinline poster="你的首帧静态图地址"></video>

• 检查视频编码兼容性
  确认你的MP4资源使用H.264编码（Baseline Profile 3.1及以下版本）、音频轨道为AAC编码，不要使用H.265（HEVC）编码的视频，旧iOS系统对H.265视频的缩略图解析存在原生bug。
• 调整属性避免逻辑冲突
  暂时移除loop属性测试，部分iOS版本下同时配置loop和preload会导致首帧渲染逻辑异常，可通过JS监听视频ended事件手动触发回放实现同等循环效果。
• 代码主动触发首帧渲染
  如果不想额外上传静态首帧图，可添加JS代码在视频元数据加载完成后手动跳转到0.1秒位置触发帧渲染：

const targetVideo = document.querySelector('video');
targetVideo.addEventListener('loadedmetadata', () => {
  targetVideo.currentTime = 0.1;
})

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