关于浏览器静止音频自动播放的问题

2023-10-29

背景:

今天在制作前端页面时,想要给网页加上会自动播放的音乐,但是用audio标签设置音频的自动播放后,即使将autoplay属性设置成true,谷歌等浏览器页面加载完成后也不会自动播放音乐,尝试了各种办法无果。

原因:

目前,最为流行的浏览器共有五个:分别是Edge浏览器(属于微软),火狐,谷歌(chrome)Safari和Opera五大浏览器。以谷歌浏览器为例,在2018年4月发布的Chrome 66版本中,谷歌已经将带声音的视频自动播放默认禁止。只有用户点击或点按网站后媒体不播放声音或者(在桌面设备上)用户之前已对网站上的媒体表现出兴趣时,才允许自动播放。这会减少首次打开网页时带声音的意外视频播放。

也就是说谷歌浏览器最新版本只允许

  1. 静音的音频
  2. 有用户行为发生时
  3. 播放器没有被隐藏

时候才能执行autoplay

解决办法:

以上2,3点必须满足所以只能让播放器显示出来,

给audio标签添加controls="controls"

然后让高度为0 style="height: 0" 只占一行的高度,但并不显示出来了

这样autoplay就有作用了

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

关于浏览器静止音频自动播放的问题 的相关文章

  • 自动化测试之 Espresso VS Appium

    前言 事情的起因是这样的 相信很多人都经历过这样一个过程 一个成熟的线上app版本需要更新一个系列新功能的时候 我们上线需要完成以下几个步骤 1 测试环境下 测试人员测试新功能 并且连带需要测试线上稳定版本的主要老功能 2 确保没问题以后
  • B树与B+树

    一 B树 B 树 特点 1 多路 非二叉树 2 每个节点既保存索引 又保存数据 3 搜索时相当于二分查找 二 B 树 特点 1 多路非二叉 2 只有叶子节点保存数据 3 搜索时相当于二分查找 4 增加了相邻接点的指向指针 三 B树与B 树的

随机推荐

  • 决策树和 K 近邻分类

    决策树和 K 近邻分类 决策树和 K 近邻分类 决策树和 K 近邻分类 介绍 知识点 机器学习介绍 示例 决策树 如何构建决策树 熵 玩具示例 决策树构建算法 分类问题中其他的分割质量标准 示例 树的关键参数
  • CUnit的用法

    CUnit下载地址 http sourceforge net projects cunit CUnit 在线文档帮助 http cunit sourceforge net doc index html 关于CUnit 本文主要从介绍三方面的
  • Corosync+Pacemaker+DRBD+MySQL 实现高可用(HA)的MySQL集群

    大纲一 前言二 环境准备三 Corosync 安装与配置四 Pacemaker 安装与配置五 DRBD 安装与配置六 MySQL 安装与配置七 crmsh 资源管理 推荐阅读 Linux 高可用 HA 集群基本概念详解 http www l
  • c语言中delay的用法。

    C语言作为一门新型高级编程语言 在计算机软件编程中具有较为广泛的应用和实现 下面小编就跟你们详细介绍下c语言中delay的用法 希望对你们有用 c语言中delay的用法如下 假设一个延时函数如下 void delay uint i for
  • Unity 动态生成mesh圆圈

    using UnityEngine using System Collections RequireComponent typeof MeshRenderer typeof MeshFilter public class yuan Mono
  • BIOS中开启虚拟化技术

    安装Intel Hardware Accelerated Execution Manager 为了避免Android虚拟设备创建过程中发生错误 下载地址 https software intel com en us android arti
  • 闲置资源优化,轻松检查集群中的空闲成本

    前言 Kubernetes 提供了对计算 网络 存储资源的抽象 提升了集群资源管理的效率 然而 由于用户不需要直接管理底层资源 可能导致部分闲置资源未及时发现 造成成本浪费 在企业 IT 成本治理过程中 如何发现并处理这部分资源 是成本优化
  • Nvidia Deepstream极致细节:3. Deepstream Python RTSP视频输出显示

    Nvidia Deepstream极致细节 3 Deepstream Python RTSP视频输出显示 此章节将详细对官方案例 deepstream test 1 rtsp out py作解读 deepstream test 1 rtsp
  • Buuctf——[RCTF2015]EasySQL

    Buuctf RCTF2015 EasySQL 一 解题步骤 1 看到注册登录 闲着没事先注册个号试试 1 123 2 进去看了 除了受到文化熏陶 别的好像没有啥 点一下试试其有什么功能 一不小心就看到了修改密码 3 惊奇的发现 密码可以被
  • 【数据结构】二、顺序表的定义和基本操作的实现

    目录 数据结构 DATA STRUCTURE 二 线性表 2 1 线性表的定义和基本操作概述 2 2 线性表的顺序表示 2 2 1 顺序表存储结构描述和特点 1 静态存储方式 2 动态存储方式 3 顺序表的优缺点 2 2 2 顺序表基本操作
  • 数据库-ER建模

    目录 基本概念 1 实体 entity 2 属性 attribute 3 联系 relation 3 1 基数约束的四种形态 3 1 1 基数约束形态一 3 1 2 基数约束形态二 3 1 3 基数约束形态三 3 1 4 基数约束形态四 扩
  • OneOS文字转语言组件实操

    本文分享自中移OneOS微信公众号 当万耦遇上chaoTTS 作者 柏灵 大家好 柏灵又又又来啦 相信大家已经开始在寒冷的冬季种植鲜嫩的豌豆尖 火锅里烫上豌豆尖 从此打工人有了豌豆尖自由 还没有种植的小伙伴 可以通过OneOS 基于端云融合
  • fit、transform、fit_transform的区别,为什么训练集用 fit_transform , 测试集用 transform

    三个函数的使用具体解释 在数据预处理中的应用 1 只涉及一组数据 fit data 对数据进行拟合 获得了数据的均值 最大最小 标准差等属性值 transform data 利用 fit data 获取到的属性对数据做预处理 如标准化 归一
  • cocos cretor shader effect-the book of shader前言

    前言 说来惭愧 半年前开始接触cocso creator shader的时候 看了官方教程 看了大神写的例子 搞懂了一些语法概念 可是当时看一遍有种似懂非懂的感觉 那种感觉就是听过很多道理 任然过不好一生 在cocos论坛里有大神也分享过自
  • Foxmail 搜索功能找不到全部邮件问题的解决方法。

    经常使用Foxmail办公收发邮件 发现Foxmail 搜索功能找不到全部邮件 原来问题出在搜索上 举例说明 迁移到Foxmail后 王卡卡同志给我发过3封邮件 可是我用据称无比强大的Foxmail搜索邮件时 输入关键字 root 只能找到
  • [计算机毕业设计]数字水印算法

    前言 大四是整个大学期间最忙碌的时光 一边要忙着准备考研 考公 考教资或者实习为毕业后面临的就业升学做准备 一边要为毕业设计耗费大量精力 近几年各个学校要求的毕设项目越来越难 有不少课题是研究生级别难度的 对本科同学来说是充满挑战 为帮助大
  • 梦幻模拟战pc版更新服务器正在维护,梦幻模拟战PC版免CD(更新2代跳出补丁 一些实用说明)...

    最近看到游侠有发梦幻模拟战PC版1 2 下载 不过要禁用DX 还要拔光驱 比较麻烦 我把我以前收藏的L1 L2 免CD发出来分享 我自己反正测试可以用 1代 第1步 替换langpc exe 请做好备份 第2步 复制光盘上 DISK1 ID
  • shell脚本中$!、$@、$#、$$、$0、$1、$2、$*的含义

    一 shell脚本中 0 1 2 的含义 Shell最后运行的后台Process的PID 后台运行的最后一个进程的进程ID号 添加到shell当中参数的个数 Shell本身的PID ProcessID 即脚本运行的当前进程ID号 0 脚本本
  • 【第八章 线程的同步机制(同步代码块、同步方法)】

    第八章 线程的同步机制 同步代码块 同步方法 1 线程的同步机制方式一 同步代码块 java中通过同步机制解决线程安全问题 synchronized 同步监视器 需要被同步的代码 说明 操作共享数据的代码即为需要被同步的代码 共享数据 多个
  • 关于浏览器静止音频自动播放的问题

    背景 今天在制作前端页面时 想要给网页加上会自动播放的音乐 但是用audio标签设置音频的自动播放后 即使将autoplay属性设置成true 谷歌等浏览器页面加载完成后也不会自动播放音乐 尝试了各种办法无果 原因 目前 最为流行的浏览器共