前端之视频自动播放

当我们打开一些视频网站的时候，我们发现视频可以自动播放，但是到了我们自己的网站后即使加上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浏览器可以打开

来查看

image

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

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

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

快手是静音播放

image

抖音是让用户点击播放

image

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

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


10 感谢 


20 回帖 
2.2K