桌面浏览器能自动播放,手机上点了也没反应,只有黑屏。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
<video src='/v/a.mp4' autoplay muted loop playsinline controls poster='/v/cover.jpg'></video>
移动端要求静音且内联播放,属性缺失时浏览器直接阻止播放。这一点先确认清楚,后面就不用反复试。
「视频自动播放」这类改动最怕改一半,回滚脚本先准备好,再动生产。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。报错里带路径的,先去看那个路径在不在、权限对不对。
同一份配置存在多处的,先确认改的是被加载的那一份。
具体做法是,加上静音与内联属性;保留播放控件作为兜底;确认封面图已设置。
改完照着核一遍,手机端进入页面即可自动播放,无黑屏。