<video src='clip.mp4' playsinline webkit-playsinline controls></video> <iframe src='player.html' allow='autoplay; fullscreen; picture-in-picture'></iframe>
手机上点嵌入的视频,画面立刻铺满全屏,退出后页面滚动位置也丢了,安卓 Chrome 和 iOS Safari 表现一样。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:video 标签没写 playsinline,iOS 会强制走原生全屏播放器。嵌在 iframe 里时属性要写在 iframe 内部的 video 上,加在外层没有作用。外层 iframe 的 allow 里也缺全屏授权。
围绕「playsinline 缺失」排查时,命令行跑一遍比在面板里点十次有用,面板会替你做掉不少隐式操作。监控和日志的时间要对上,时区不一致会多绕很大一圈。
临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。
一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。
处理上按这个顺序:在内层 video 上补 playsinline 与 webkit-playsinline;外层 iframe 加 allow='autoplay; fullscreen; picture-in-picture';真机点一次 确认退出后页面停在原位。
确认没问题再收工,手机上视频在卡片内播放,不会跳到全屏,退出后页面位置不变。
