问题描述:新闻门户网站,会有大量的侧边广告弹框,右下角需要一个自动播放的视频弹框,并且不需要鼠标交互(不可点击播放和暂停)

问题:

使用 ckplayer 插件时,chrome 浏览器出现了不播放的情况,360 浏览器和 edge 正常

使用 video 标签设置 autoplay 不起作用

原因:

  1. chrome 66.0 开始不允许媒体自动播放

  2. safari 阻止自动播放,需要用户手动点击

  3. 移动端浏览器也禁止自动播放(出于用户体验,节省流量的考虑)

  4. opera 浏览器也会阻止 autoplay

解决

给 video 加上 muted 属性
muted 属性规定视频的音频输出应该被静音,当我们网页中要放的视频没有声音时可以使用这个方法解决不自动播放的问题

为什么加了 muted 属性就可以自动播放了呢?

自动播放策略
  1. 静音自动播放总是允许的

  2. 用户已经产生交互(点击触摸滑动等...)

    在用户交互之后,使用.paly()方法播放。注意,用户没有产生交互之前调用会抛出异常。

  3. 使用 iframe 授权自动播放

<iframe src="video.mp4" allow="autoplay"></iframe>
  1. 移动端用户将网站添加到 home screen