video自动播放问题+方案

在用H5做短视频的需求中,碰到视频不能自动播放的问题,踩过很多坑,总结了一些问题和方案。

不能自动播放的原因:

其实,严格的来说,是浏览器不允许在用户对网页进行交互之前播放音频,而视频其实是不受限制的。但因为视频文件同样包含了音频,所以也一同被禁止了。浏览器这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。
参考1
参考2

据新政策,媒体内容将在满足以下至少一个的条件下自动播放:

    1. 音频被静音或其音量设置为0
    1. 用户和网页已有交互行为(包括点击、触摸、按下某个键等等)。
      注: 这里的可以自动播放,只是针对交互过的视频。
      例: 仿短视频交互的,有video标签A,video标签B上下两个视频。初始用户交互,播放video标签A的视频。滑动到B,企图播放B,是无法播放的。滑回A,可以播放A。
    1. 网站已被列入白名单;如果浏览器确定用户经常与媒体互动,这可能会自动发生,也可能通过首选项或其他用户界面功能手动发生
    1. 自动播放策略应用到