这是我参与更文挑战的第9天，活动详情查看： 更文挑战

自动播放功能被禁止

大家都知道 video 标签添加一个 autoplay，视频就可以正常自动播放了。的确在 8102 年之前确实可以这样做，但是现在都 1202 年了，“自动播放”（带有声音）早就被 chrome（66版本）、safari（11版本） 等浏览器禁止了。

<video src="学习资料.mp4" autoplay>
复制代码

注意：上述所说的“自动播放”是指带有声音的自动播放。

在这里也提醒一下，不单止是视频被禁止了，还有音频也被禁止了，听说浏览器厂商这是考虑到用户一打开网站，网站就发出声音可能会骚扰到用户。

啊这，看的都是什么网站(/ω＼)……

解决方法

方法1：静音播放

请跟读几遍，浏览器禁止的是“有声音的自动播放”，是“有声音的自动播放”，是“有声音的自动播放”……

所以，“静音自动播放”是允许的，你在 video 标签添加上 muted 属性（静音）即可自动播放。

但是，这种播放估计很多公司都不能接受。

方法2：用户在同一个网站上进行了互动

这个办法在字面上可能比较难理解，取决于浏览器把什么归为“互动”。

我的理解是当用户对网站进行点击、键盘输入等操作，即是“互动”。

举个栗子，一个网站有两个网页，一个是首页，另一个是视频页，首页里带有视频链接，链接到视频页，视频页有视频播放，首页也有视频播放。我们刚打开浏览器，第一次打开网站首页时，首页的视频是不能自动播放，当我们点击首页的链接进入到视频页，视频页的视频是可以自动播放（带有声音）。注意：必须是同一个网站。

合理使用这个“互动”逻辑，可以解决部分自动播放问题。

方法3：浏览器设置

以火狐浏览器为例，在浏览器设置里，搜索“自动播放”，可以找到“自动播放”这个设置，设置“允许音频和视频”。

我们可以在网站里做一个引导链接，跳到引导页面，引导用户进行这个操作来解决问题，不过由于各个浏览器厂商的设置地方可能都不一致，引导页可能需要对各个浏览器都做一次引导，有点繁琐。

方法4：砸钱

没错，就是砸钱。

好吧，其实这个我没有证实是否是真的。

你有没有发现像虎牙直播这样的平台，能够几乎做到无条件“带有声音的自动播放”。听说是因为浏览器厂商有一个类似域名白名单的东西，里面的网站都会允许“自动播放”，你可以试试将 host 改一下，用虎牙的域名去访问自己的网站，你会发现自己的网站也可以“自动播放”了。

因此，可能存在网站平台与浏览器厂商的某种 py 交易，用钱砸出来的功能……

上述也只是我的猜测，大家不要盲目相信，欢迎在评论区打我脸。

提升用户体验

既然我们这些小众网站可能无法实现无条件的“带有声音的自动播放”，那就至少让用户体验好一点。

我们打开网页时，可以先检测有没有“带有声音的自动播放”的资格，若不支持，则在视频中间显示一个播放按钮引导用户点击播放。

var promise = document.querySelector('video').play()
if (promise !== undefined) {
    promise.then(() => {
// 支持自动播放且有声音
    }).catch(error => {
// 不支持自动播放且有声音，这个时候可以在视频上面显示一个播放图标，提示用户自己点击播放
    })
}
复制代码

注意，不是所有浏览器的 video.play() 都支持返回 promise，可以看看这篇MDN。

不过放心用吧，也就一些旧版本的浏览器和傻帽IE不支持。