前端加油站🧠

Appearance

产品：为啥视频不能自动播放？ ​

这个问题相信大多数的程序员都遇到过视频无法自动播放的问题。原因也是非常的简单和好理解：

浏览器怕浪费资源，或者说有恶意的人故意放一些恐怖类型的音视频，吓到用户，所以是强制要求我们必须先跟页面有个交互（点击等等类型的交互）之后，才能够自动播放。

但是非常玄学的一点是，像 B 站、抖音等大厂的视频网站，他的视频却能够实现自动播放。我一度怀疑这些大厂是不是给浏览器厂商打钱了。

面对产品同学提出的质疑，我也无力反驳。为啥他们就可以呢？

自动播放策略 ​

要想视频能够自动播放，需要满足一下政策：

  • 视频静音

  • 如果非静音，则需要再满足以下情况

    • 用户已经在当前的域下进行看交互
    • 用户的媒体参与度指数超过一个标准（意味着大多数用户都是有交互的，对这个网站很有兴趣）

  • 父窗体将自动播放能力传递给子部的 iframe

比较关键的就是媒体参与度标准。但是这个标准对于我们开发者而言没有办法通过代码的方式进行修改。

播放方案 ​

两个常见的处理方案

互动播放 ​

先尝试自动播放，如果发生了异常，则引导用户进行一个简单的互动操作，然后再进行播放操作

ts
const video = document.querySelector('.myVideo')
async function play() {
	try {
		await video.play()
		// 弹窗隐藏
		// 去除弹窗的点击播放事件
	} catch (err) {
		// 引导出一个弹窗
		// 给弹窗添加点击事件，点击了（交互了） 重新调用 play 方法
	}
}

play() // 自动播放一次
const video = document.querySelector('.myVideo')
async function play() {
	try {
		await video.play()
		// 弹窗隐藏
		// 去除弹窗的点击播放事件
	} catch (err) {
		// 引导出一个弹窗
		// 给弹窗添加点击事件，点击了（交互了） 重新调用 play 方法
	}
}

play() // 自动播放一次

无声播放 ​

先进行静音播放，然后根据是否能够自动播放来决定是否取消静音。

  • 如果能自动播放，取消静音
  • 不能自动播放，则引导用户进行交互操作后取消禁音

目前企业使用最多的方案，比如抖音。

ts
const video = document.querySelector('.myVideo')
function play() {
	video.muted = true // 静音
	video.play()
	const ctx = new AudioContext() // 创建声音上下文
	const canAutoPlay = ctx.state === 'running' // 如果能自动播放 音频上下文的 state 就是 running 说明有音轨在运行
	ctx.close() // 关闭声音上下文
	if (canAutoPlay) {
		video.muted = false
		// 引导交互打开声音弹窗取消
		// 去除弹层点击事件
	} else {
		// 引导出一个交互打开声音弹窗
		// 弹窗添加点击事件，点击了，重新调用 play 方法
	}
}

play()
const video = document.querySelector('.myVideo')
function play() {
	video.muted = true // 静音
	video.play()
	const ctx = new AudioContext() // 创建声音上下文
	const canAutoPlay = ctx.state === 'running' // 如果能自动播放 音频上下文的 state 就是 running 说明有音轨在运行
	ctx.close() // 关闭声音上下文
	if (canAutoPlay) {
		video.muted = false
		// 引导交互打开声音弹窗取消
		// 去除弹层点击事件
	} else {
		// 引导出一个交互打开声音弹窗
		// 弹窗添加点击事件，点击了，重新调用 play 方法
	}
}

play()

来源 ​

知识点来孕育 渡一教育 袁老师视频 视频地址