• 浏览器自动播放音视频-前端实现方案

    目录

    前言

    浏览器自动播放策略

    策略详情：

    实现方案 

    方案1： 互动后播放

    方案2： 互动后出声

    总结

    前言

    在开发中可能有遇到这样的需求，当用户打开页面后，需要自动播放视频或音频，按理说那就打开页面时play()一下不就搞定了吗，但实际情况很明显不是，不然也没得这篇文章喽，要实现这个需求，我们得先了解一下浏览器自动播放策略。再给出相应解决方案。

    浏览器自动播放策略

    Chrome浏览器的自动播放策略自Chrome66起生效,动机是改善用户体验

    策略详情：

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

    1. 始终允许静音自动播放。
    2. 在以下情况下，带声音的自动播放会被允许：
      1. 用户已经与当前域进行了交互（click、tap）
      2. 在桌面设备上，用户的==媒体参与度==指数阈值已超过，这意味着用户之前播放过有声视频。
      3. 用户已将网站添加到移动设备上的主屏幕或在桌面上安装了 PWA。
    3. 顶部帧可以将自动播放权限委派给其 iframe，以允许自动播放声音。

    ==媒体参与度（MEI, Media Engagement Index）==

    媒体参与度 （MEI） 是衡量个人在网站上使用多媒体的倾向。

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

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

    但对于开发者而言：

            媒体参与度的计算规则无法通过技术手段更改

            媒体参与度的计算规则不同版本的浏览器可能会有变动

     

    实现方案

    首先呢，我们直接在用户进入页面的时候play()，可以发现视频并没有播放，并且报错Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="./index.css" />
    9.   head>
    10.   <body>
    11.     <div class="vdo-container">
    12.       <video src="./test.mp4">video>
    13.     div>
    14.     <script>
    15.       const vdo = document.querySelector('video');
    16.       vdo.play();
    17.     script>
    18.   body>
    19. html>

    这个错误的意思是浏览器已经尝试在没有用户交互的情况下播放媒体文件，但是因为这是不允许的，所以浏览器拒绝了该操作。如果没有这个保护机制，那么网站可以在用户不知情的情况下播放音频和视频，这是不安全和不负责任的行为。 

     

    方案1： 互动后播放

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

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>互动后播放title>
    8.     <link rel="stylesheet" href="./index.css" />
    9.   head>
    10.   <body>
    11.     <div class="vdo-container">
    12.       <video src="./test.mp4">video>
    13.       <div class="modal">
    14.         <button class="btn">开始播放button>
    15.       div>
    16.     div>
    17.  
    18.     <script>
    19.       const vdo = document.querySelector('video');
    20.       const modal = document.querySelector('.modal');
    21.       const btn = document.querySelector('.btn');
    22.       async function play() {
    23.         try {
    24.           await vdo.play();
    25.           modal.style.display = 'none';
    26.           btn.removeEventListener('click', play);
    27.         } catch (err) {
    28.           modal.style.display = 'flex';
    29.           btn.addEventListener('click', play);
    30.         }
    31.       }
    32.       play();
    33.     script>
    34.   body>
    35. html>

     进入页面后发现不能自动播放，这时显示开始播放按钮，用户点击后开始播放。

    方案2： 互动后出声

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

    1. 能自动播放，取消静音
    2. 不能自动播放，引导用户进行互动操作后取消静音
    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>互动后取消静音title>
    8.     <link rel="stylesheet" href="./index.css" />
    9.   head>
    10.   <body>
    11.     <div class="vdo-container">
    12.       <video src="./test.mp4">video>
    13.       <div class="modal">
    14.         <button class="btn">打开声音button>
    15.       div>
    16.     div>
    17.  
    18.     <script>
    19.       const vdo = document.querySelector('video');
    20.       const modal = document.querySelector('.modal');
    21.       const btn = document.querySelector('.btn');
    22.       function play() {
    23.         vdo.muted = true; // 静音
    24.         vdo.play();
    25.         const ctx = new AudioContext();
    26.         const canAutoPlay = ctx.state === 'running';
    27.         ctx.close();
    28.         if (canAutoPlay) {
    29.           vdo.muted = false;
    30.           modal.style.display = 'none';
    31.           btn.removeEventListener('click', play);
    32.         } else {
    33.           modal.style.display = 'flex';
    34.           btn.addEventListener('click', play);
    35.         }
    36.       }
    37.       play();
    38.     script>
    39.   body>
    40. html>

    进入页面后静音播放视频，然后判断是否允许自动播放，如果允许，则取消静音，但我们这里不允许，所以显示打开声音按钮。 

    引用的index.css文件内容如下：

    1. * {
    2.   margin: 0;
    3.   padding: 0;
    4.   box-sizing: border-box;
    5. }
    6.  
    7. .vdo-container {
    8.   width: 50%;
    9.   margin: 1em auto;
    10.   position: relative;
    11. }
    12. video {
    13.   display: block;
    14.   width: 100%;
    15. }
    16. .modal {
    17.   position: absolute;
    18.   inset: 0;
    19.   background: rgba(0, 0, 0, 0.5);
    20.   display: flex;
    21.   justify-content: center;
    22.   align-items: center;
    23.   display: none;
    24. }
    25. .btn {
    26.   border: none;
    27.   outline: none;
    28.   background: #409eff;
    29.   color: #fff;
    30.   display: inline-block;
    31.   line-height: 1;
    32.   white-space: nowrap;
    33.   cursor: pointer;
    34.   text-align: center;
    35.   transition: 0.1s;
    36.   font-weight: 500;
    37.   user-select: none;
    38.   padding: 12px 20px;
    39.   font-size: 14px;
    40.   border-radius: 4px;
    41. }
    42. .btn:hover {
    43.   background: #66b1ff;
    44. }
    45. .btn:active {
    46.   background: #3a8ee6;
    47. }
    48. .btn:disabled {
    49.   background: #66b1ff80;
    50.   cursor: not-allowed;
    51. }

     

     

    总结

    如果文中出现有瑕疵的地方各位通过评论或者私信联系我，我们一起进步，有兴趣的伙伴可以关注订阅一下：点击查看更多实用技巧及技术

     

  • 相关阅读:
    计算机组成原理习题课第一章-2（唐朔飞）
    pandas学习笔记
    【分享】集简云小程序识别财务票据同步到金蝶云星辰流程搭建示例
    虚幻引擎4中关于设置关于体坐标系下的物体速度的相关问题
    Go 1.21 新内置函数：min、max 和 clear
    计算机网络：最优路由条目优选
    学习笔记【Java 虚拟机③】类加载与字节码技术
    相似基因序列问题 ——查找
    5 步教你将 MRS 数据导入 DWS
    简单的增删改查
  • 原文地址：https://blog.csdn.net/G_ing/article/details/134145115