前端之视频自动播放

当我们打开一些视频网站的时候，我们发现视频可以自动播放，但是到了我们自己的网站后即使加上autoplay或者用js方法控制，也是不能自动播放的

<body>
	<video src="1.mp4" autoplay></video>
</body>
<script>
  const vd = document.querySelector('video')
  vd.play()
</script>

打开控制台，会发现报错了

image
说是用户还没有与页面交互，所以这个方法失败了
这是因为chrome浏览器的自动播放策略，其它播放器也大差不差
主要目的是为了改善用户体验
要不然你在人多的地方打开一个网站，网站突然发出奇怪的声音，岂不是当场社死
那么解决办法有哪些
自动播放策略里也说明了

  1. 允许无声自动播放
  2. iframe
  3. 满足下面三种条件的任意一种
    1. 用户在当前域进行了交互
    2. 用户已经将网站添加到移动端主屏幕或桌面上安装了pwa
    3. 在桌面设备上，用户的媒体参与度超过阈值

这个媒体参与度是什么呢
这个值越高，浏览器就会认为你对这个网站的内容更感兴趣，当达到一定值后，就会允许自动播放视频
chrome浏览器可以打开chrome://media-engagement/来查看

image

左边是访问的域名，右边是参与度的值，数值越高，越有可能自动播放
可是我们的网站没有那么高的值，那么我们怎么实现自动播放呢
1.iframe是父窗口有自动播放的能力了可以传递给子窗口，这个肯定不合适
2.用户刚打开网站，怎么可能已经交互过呢
3.移动端添加到主屏幕或者桌面安装pwa，这个国内基本没有
那么只剩下两种方式

  1. 静音播放，让用户手动打开音量
  2. 检测到不能自动播放，让用户点击播放

我们看看视频网站都是怎么做的
我哔哩哔哩值太高，所以换了个电脑来截图展示
哔哩哔哩是静音播放
Screenshot_20230709_193824

快手是静音播放

image

抖音是让用户点击播放

image

好，方法说到这里，哪种方式自己选择

 
宝鸡 位置
12 点赞
0 关注
2 收藏


10 感谢 


20 回帖 
2K