js 浏览器的自动播放策略

浏览器的自动播放策略

策略详情：

 Chrome的自动播放政策很简单：
	
	1、始终允许静音自动播放
	2、在以下情况下，带声音的自动播放会被允许
		2.1、用户已经与当前页面进行了交互(click、tap)
		2.2、在桌面设备上，用户的媒体参与度指数阈值已超过，这意味着，用户之前播放过有声视频
		2.3、用户已经将网站添加到移动设备上的主屏幕或在桌面安装了PWA（这个你可以忽略了！）
	3、顶部帧可以将自动播放权限委派给其 iframe，允许自动播放声音
复制

媒体参与度，是什么？

 	媒体参与度(MEI)，衡量个人在网站上使用多媒体的倾向，
	它是一个数字，可以通过 chrome://media-engagement/ 查看，
	数值越高，用户对该站点的媒体参与度越高，就越有机会自动播放
	对于开发者而言，媒体参与度的计算规则，无法通过技术手段更改
复制

开发者最佳实现：

 	方案1：互动后播放
		
		先尝试自动播放，如果发生异常，则引导用户进行交互动作，然后再进行播放
 
	方案2：互动后出声
		先静音播放，然后根据，是否能自动播放，决定是否取消静音，如果：
			1、能自动播放，取消静音
			2、不能自动播放，引导用户进行互动操作后，取消静音
复制

代码示例，把.MP4文件换掉后，直接浏览器运行这个.html文件，就能看到效果

  
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浏览器的自动播放策略</title>
</head>
 
<style>
  /* 视频容器样式 */
  .vdo-container {
    position: relative;
    width: 640px;
    height: 200px;
    background: pink;
    margin: 60px auto;
  }
 
  /* 视频样式 */
  video {
    height: 200px;
  }
 
  /* 模态框样式 */
  .modal {
    width: 640px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
    /* 默认不显示 */
    align-items: center;
    justify-content: center;
  }
 
  /* 按钮样式 */
  .btn {
    padding: 10px 20px;
    background-color: #4CAF50;
    /* 绿色 */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
  }
 
  /* 鼠标悬停按钮效果 */
  .btn:hover {
    background-color: #45a049;
  }
</style>
 
<body>
 
  <div class="vdo-container">
    <video src="./test.mp4"></video>
    <div class="modal">
      <button class="btn">开始播放</button>
    </div>
  </div>
 
</body>
 
<script>
 
  const vdo = document.querySelector("video")
  const modal = document.querySelector(".modal")
  const btn = document.querySelector(".btn")
 
  function play() {
    vdo.muted = true // 静音
    vdo.play()
 
    /*
      创建一个新的音频上下文，
      AudioContext 是 Web Audio API 的一部分，
      它提供了一个音频处理环境，你可以在其中创建和修改音频数据
    */
    const ctx = new AudioContext()
 
    /*
      const canAutoPlay = ctx.state === 'running'，的意思是：检查 AudioContext 的状态是否为 running，
      如果为running，则表示，音频上下文已经成功创建并运行，
      这意味着，浏览器允许自动播放音频和视频。
    */
    const canAutoPlay = ctx.state === 'running'
 
    /*
      关闭AudioContext，
      因为，在这个函数中，你只检查其状态，并不进行其他音频处理，
      所以，立即关闭它是合理的。
    */
    ctx.close()
 
    if (canAutoPlay) {
      /*
        如果 canAutoPlay 为 true（即浏览器允许自动播放）
        vdo.muted = false：取消视频的静音状态，
        既然视频已经开始播放，并且，没有遇到自动播放的问题，那么可以取消静音，让用户听到视频的声音。
      */
      vdo.muted = false
      modal.style.display = 'none'
 
      // 从按钮上移除play函数的点击事件监听器，因为视频已经开始播放，所以不需要再监听这个按钮的点击事件。
      btn.removeEventListener('click', play)
 
    } else {
      // 如果 canAutoPlay 为 false（浏览器不允许自动播放）
      // modal.style.display = 'flex'：显示模态框，目的就是为了让用户点一下，用户和浏览器交互后，就能播放声音了
      modal.style.display = 'flex'
      btn.addEventListener('click', play)
    }
  }
 
  play()
 
</script>
 
</html>复制

js 浏览器的自动播放策略

解决VUE3 Vite打包后动态图片资源不显示问题

Vue 3 项目中导入外部的＜link＞和＜script＞资源

Vue将中英文本base64编码及解码

Vue获取url上的参数

vue省市区三级联动选择器

eslint prettier vue3格式化

Vue Router 进阶

Vscode的vue项目中下滑红线报错问题

JavaScript与JQuery的区别（超详细）

jQuery：将字符串转换为数组

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	Chrome的自动播放政策很简单：

	1、始终允许静音自动播放

	2、在以下情况下，带声音的自动播放会被允许

	2.1、用户已经与当前页面进行了交互(click、tap)

	2.2、在桌面设备上，用户的媒体参与度指数阈值已超过，这意味着，用户之前播放过有声视频

	2.3、用户已经将网站添加到移动设备上的主屏幕或在桌面安装了PWA（这个你可以忽略了！）

	3、顶部帧可以将自动播放权限委派给其 iframe，允许自动播放声音

	媒体参与度(MEI)，衡量个人在网站上使用多媒体的倾向，

	它是一个数字，可以通过 chrome://media-engagement/ 查看，

	数值越高，用户对该站点的媒体参与度越高，就越有机会自动播放

	对于开发者而言，媒体参与度的计算规则，无法通过技术手段更改

	方案1：互动后播放

	先尝试自动播放，如果发生异常，则引导用户进行交互动作，然后再进行播放

	方案2：互动后出声

	先静音播放，然后根据，是否能自动播放，决定是否取消静音，如果：

	1、能自动播放，取消静音

	2、不能自动播放，引导用户进行互动操作后，取消静音


	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>浏览器的自动播放策略</title>
	</head>

	<style>
	/* 视频容器样式 */
	.vdo-container {
	position: relative;
	width: 640px;
	height: 200px;
	background: pink;
	margin: 60px auto;
	}

	/* 视频样式 */
	video {
	height: 200px;
	}

	/* 模态框样式 */
	.modal {
	width: 640px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.4);
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	display: none;
	/* 默认不显示 */
	align-items: center;
	justify-content: center;
	}

	/* 按钮样式 */
	.btn {
	padding: 10px 20px;
	background-color: #4CAF50;
	/* 绿色 */
	border: none;
	color: white;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 5px;
	}

	/* 鼠标悬停按钮效果 */
	.btn:hover {
	background-color: #45a049;
	}
	</style>

	<body>

	<div class="vdo-container">
	<video src="./test.mp4"></video>
	<div class="modal">
	<button class="btn">开始播放</button>
	</div>
	</div>

	</body>

	<script>

	const vdo = document.querySelector("video")
	const modal = document.querySelector(".modal")
	const btn = document.querySelector(".btn")

	function play() {
	vdo.muted = true // 静音
	vdo.play()

	/*
	创建一个新的音频上下文，
	AudioContext 是 Web Audio API 的一部分，
	它提供了一个音频处理环境，你可以在其中创建和修改音频数据
	*/
	const ctx = new AudioContext()

	/*
	const canAutoPlay = ctx.state === 'running'，的意思是：检查 AudioContext 的状态是否为 running，
	如果为running，则表示，音频上下文已经成功创建并运行，
	这意味着，浏览器允许自动播放音频和视频。
	*/
	const canAutoPlay = ctx.state === 'running'

	/*
	关闭AudioContext，
	因为，在这个函数中，你只检查其状态，并不进行其他音频处理，
	所以，立即关闭它是合理的。
	*/
	ctx.close()

	if (canAutoPlay) {
	/*
	如果 canAutoPlay 为 true（即浏览器允许自动播放）
	vdo.muted = false：取消视频的静音状态，
	既然视频已经开始播放，并且，没有遇到自动播放的问题，那么可以取消静音，让用户听到视频的声音。
	*/
	vdo.muted = false
	modal.style.display = 'none'

	// 从按钮上移除play函数的点击事件监听器，因为视频已经开始播放，所以不需要再监听这个按钮的点击事件。
	btn.removeEventListener('click', play)

	} else {
	// 如果 canAutoPlay 为 false（浏览器不允许自动播放）
	// modal.style.display = 'flex'：显示模态框，目的就是为了让用户点一下，用户和浏览器交互后，就能播放声音了
	modal.style.display = 'flex'
	btn.addEventListener('click', play)
	}
	}

	play()

	</script>

	</html>

js 浏览器的自动播放策略

微信扫一扫：分享