注册
web

什么,产品让我实现自动播放?

前言


最近,在逛一些技术群时,看到有人在吐槽,这个video媒体标签设置autoplay属性怎么不生效。不生效就算了,为什么我在dom渲染完成时去获取video元素(假设获取到的元素为el),然后执行el.paly()也不生效,why????


那为什么我通过控制台去执行这两行代码的时候,它又生效了!!!!???


带着满脸疑惑,我们来了解一下浏览器的自动播放策略。


1、浏览器的自动播放策略


以谷歌浏览器为例:


在某些特定的情况下,浏览器是允许自动播放的:




  1. 静音状态下始终允许自动播放




  2. 有声音自动播放时:



    • 用户进行了页面点击等与界面发生交互行为后。
    • 达到媒体参与指数, 也就是用户之前在本站播放过有声音的视频。
    • 用户将页面添加到移动设备的主屏幕上或者在PC上安装了PWA



  3. 主站可以将自动播放权限委托给它们的 iframe,以允许自动播放声音。




2、静音播放。


在静音状态下,浏览器是允许自动播放的,代码如下:


<video controls class="videoItem" width="100%" autoplay muted loop="loop" src="./tets.mp4"></video>

属性说明:


muted: 是否静音播放,默认为false


autoplay:是否自动播放,默认为false


control:控制器是否显示,默认为false(可不写)。


loop:是否循环播放,默认为false(可不写)。


唉,好像可以自动播放了,于是我拿去应付产品,产品给我泼了一盆冷水,说能让它播放起来有声音吗?

于是,又开始了我们的与非静音状态自动播放功能的探索。


3、非静音自动播放


我们在上面有了解到非静音自动播放有四种情况:



  1. 用户进行了页面点击等与界面发生交互行为后。
  2. 达到媒体参与指数MEI.
  3. 用户将页面添加到移动设备的主屏幕上或者在PC上安装了PWA
  4. 主站可以将自动播放权限委托给它们的 iframe。

3.1 用户进行了页面交互行为


这个就可以理解成用户触碰了页面之后,我们就可以进行有声音的自动播放了。看代码


HTML部分:


<video controls class="videoItem" width="100%"  loop="loop" src="./tets.mp4"></video>

JS部分:


const vdo = document.querySelector('video')
// 播放函数
async function playAudio() {
const res = await vdo.play()
}
// 监听用户点击
document.addEventListener('click',playAudio)
// 监听媒体播放
vdo.addEventListener('play', function () { //播放开始执行的函数
console.log("开始播放");
// 移除点击监听事件
document.removeEventListener("click",playAudio)
})

这里我们就有很大的发挥空间了,比如说视频不完全在可见区,或者用户看视频前给他弹个框?


3.2 达到媒体参与指数MEI


MEI是浏览器根据我们对一些网站的浏览行为打分,越高,就表示我们喜欢观看这个网站的视频,可以通过about://media-engagement来查询,不可更改。
注意:该策略只对PC端浏览器有效。


3.3 用户将页面添加到移动设备的主屏幕上或者在PC上安装了PWA


用户将页面添加到移动设备的主屏幕上或者在PC上安装了PWA,这个我们基本可以不用去考虑了,在国内是比较少见的,感兴趣的可以去百度。


3.4 主站可以将自动播放权限委托给它们的 iframe。


这个就是通过iframe来控制媒体的自动播放。代码如下:


    <!-- 允许自动播放 -->
<iframe src="跨源地址" allow="autoplay">

<!-- 允许自动播放和设置全屏 -->
<iframe src="跨源地址" allow="autoplay; fullscreen">

需要注意的是,我们可能需要做一些本地代理,不然可能会出现跨域问题。


4 补充


上面还有一点是没有提到的,就是同源下点击页面跳转后可实现自动播放。


比如:我在http://www.bilibili.com页面点击一个视频跳转到了一个新页面,就可以实现自动播放(注意:不能打开新窗口,否则非

作者:清_秋
来源:juejin.cn/post/7244818202214416443
静音自动播放将失效)

0 个评论

要回复文章请先登录注册