web端Video自动播放解决方案(主要是移动端)

2,033 阅读4分钟

背景

最近在总结web端视频开发的知识,想到自动播放这一块,只能想到一个字,"坑"。在移动web各种浏览器兼容参差不齐的情况下,配合上自动播放更是愈发的坑了。一想到就头疼。不过毕竟是总结知识嘛,再头疼也要硬着头皮干了,也顺便分享一下当时调研的一些方案。下述的方案主要是针对移动web端的浏览器,PC上基本上都是用chrome的,所以大部分自动播放的场景都可以用静音自动播放解决。

简单总结

对于一些想详细了解自动播放的同学,可以先看看我之前写的一篇文章 传送门。 我这里直接简单总结自动播放所需的两个最重要条件

  • 静音自动播放 (pc端基本支持,移动端部分浏览器支持,部分不支持)
  • 由用户交互触发导致的视频播放 (很关键!!大家要记住这点,移动端上大部分支持)

DEMO展示

先看大家看一个demo,免得直接讲原理就干巴巴的。可以用手机扫码体验或者看gif图,先给大家看看实际的效果 demo传送门

gif展示图1 (安卓夸克,需要点击才能自动播放)

gif展示图2 (安卓微信)

原理解析

实际上,上面的demo的自动播放,主要还是根据自动播放很重要的两条规则:

  • 规则一:静音自动播放
  • 规则二:由用户交互触发导致的视频播放

下面来详细说说demo的执行流程: demo实际由两部分组成,一个是"引导页", 一个是“视频播放页”。

  • 情况A:如果视频支持静音自动播放,则会直接进入“视频播放页”
  • 情况B:如果不支持静音自动播放,则由“引导页”收集用户的交互,在点击事件内创建video对象并调用play()。此时这个video对象符合上述的规则二,具备了自动播放的能力,就可以为所欲为了。我们就可以利用这个video对象,插入到任意的位置,并设置想要播放的视频地址,调用play(),就可以实现"自动播放"

原理小结

  • 静音在部分浏览器上允许自动播放
  • 在点击事件内创建video对象,或者在事件内调用video.play(), 该video对象允许在后续的js逻辑内调用play()。

总结

本文章的自动播放解决方案就很明显了,主要是利用了自动播放的两条规则。实际上这个方案是针对部分场景的,比如上述demo,需要经过一个"引导页"(实际上是用户交互)再播放的情况,不适合官网首屏的自动播放。 这里再提出一个想法,其实我们可以给页面添加全屏级别的点击事件,在此点击事件内利用规则二,那应该比直接点击按钮高效的多,可应用的场景应该就更广了,不过可能会有浏览器的限制,后续我会调研一下该想法。

demo及源码可以点击这里

吐槽和补充说明

移动web端实在是太多浏览器了,许多浏览器都夹带私货,对于一些功能的实现没有统一的标准,对于自动播放的规则也是如此。比如在安卓的夸克浏览器上(并非针对),能点击自动播放了,但是实际上调用play()是会报错的(提示需要用户交互触发播放),但是却能播放,而且还能在js中取消静音... 所以,对于移动端的浏览器,以上的方案应该是满足大部分的浏览器的(有问题的话可以在github的里提issues,我看下能不能处理),主要是提供一个思路,但是由于各浏览器的差异性,会出现一些未知的情况,所以移动web端的开发实在是太多坑了....(🤮)