js 浏览器的自动播放策略

一嘴一个橘子

于 2024-04-15 17:19:46 发布

阅读量902

点赞数 18

文章标签： javascript

本文链接：https://blog.csdn.net/pig_ning/article/details/137788209

版权

浏览器的自动播放策略

策略详情：

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>