Chrome浏览器音/视频无法自动播放

news/2024/12/24 11:35:08/

        背景:由于google的一些制度,我们在写html项目时会发现刷新页面时无法自动播放audio和video,即使你添加了autoplay属性也无济于事, 但是IE和Edge浏览器是可以自动播放的。

        解决方案:

本人在网上搜寻了很多方法,最后发现几个关键点:

首先是谷歌浏览器的相关政策,自从 Chrome 66 开始限制了 video 和 audio 元素的自动播放,从 Chrome 71 开始限制了 Web Audio API 的自动播放,因此一些网页游戏和 webrtc 相关的音视频项目都会相应受到影响。

推荐使用第四种。

方法一:

首先是视频自动播放的问题,常规的方法是给 video 标签增添 muted 属性 

<videosrc="xxx.mp4"autoplay="auto play"mutedcontrols="controls">
</video>

这样就能静音自动播放视频了。

第二种方法:

只适用 Chrome 66 以下的版本

        打开 chrome 浏览器,地址栏中输入:chrome://flags。在页面内搜索栏中写入:Autoplay policy,并将默认为“Default”,修改为 “No user gesture is required” 后,重启浏览器。

但 Chrome 66 以上的版本貌似搜索不到 Autoplay policy ,因此无法使用第二种方法。

所以第二个办法基本不行了。

第三种方法

就是修改浏览器的设置,找到声音设置:

第一步:

第二步:添加对应的网站地址或者html 代码,允许其播放声音。

第四种

插入js代码,点击屏幕即可播放音乐,目前看来这个应该是最好的。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>背景音乐示例</title>
</head>
<body><h1>欢迎来到我的网站</h1><!-- 插入背景音乐 --><audio id="bgm" loop controls><source src="sound/bgm1.mp3" type="audio/mpeg">您的浏览器不支持 audio 标签。</audio><!--    点击页面播放音乐js --><script>document.addEventListener('click', function() {var audioElement = document.getElementById('bgm');if (audioElement.paused) {  // 检查音频是否已播放audioElement.volume = 0.5;  // 设置音量audioElement.play();  // 播放音频}}, { once: true });  // 确保事件处理器只执行一次</script></body>
</html>


http://www.ppmy.cn/news/1544934.html

相关文章

CF Round 984 C. Anya and 1100(模拟)

传送门https://codeforces.com/contest/2036/problem/C 解题思路 先扫一遍字符串&#xff0c;判断有几个 1100 子串。 然后&#xff0c;对于每一次操作&#xff0c;可以算出对答案的影响&#xff0c;减去更改会减少的子串&#xff0c;再加上更改后会增加的子串。 代码 #inc…

Lua数据类型

Lua 语言 数据类型 Lua 有以下数据类型&#xff1a; nil&#xff1a;表示一个无效值&#xff0c;相当于 NULL。boolean&#xff1a;true 或 false。number&#xff1a;整数或浮点数。string&#xff1a;字符串。function&#xff1a;函数。userdata&#xff1a;用户数据。th…

system generator结合高版本matlab的使用

system generator 使用的时候需要结合matlab才能正确打开。2019.1Vivado可以支持2017以及以上全部版本的的matlab。所以其实如果我们电脑里有新版的matlab&#xff0c;是不需要再去退回旧版本的。 我们只需要在vivado中再进行一个配置&#xff1a; 1、在vivado安装路径下&…

2024年大湾区杯粤港澳金融数学建模B题论文首发+60种模型组合讲解+代码手把手保姆级讲解+数据分享

大湾杯B题论文已经完成更新。本次论文问题一提供四种解题方法、问题二提供五种解题方法、问题三提供三种解题方法。累计4*5*360种方案随机组合&#xff0c;方便大家降重。每种方法提供matlab、python两套实现代码。 11.2日 18:00 发布降重说明 11.3日 18:00 发布选题人数统计…

高效管理iPhone存储:苹果手机怎么删除相似照片

在使用iPhone的过程中&#xff0c;我们经常会遇到存储空间不足的问题&#xff0c;尤其是当相册中充满了大量相似照片时。这些照片不仅占用了宝贵的存储空间&#xff0c;还可能使iPhone出现运行卡顿的情况。因此&#xff0c;我们迫切需要寻找苹果手机怎么删除相似照片的方法&…

SpringBoot+Shiro权限管理

Shiro是一个强大的Java安全框架&#xff0c;提供了身份验证、授权、加密、会话管理以及与Web集成等多种安全功能。以下是对Shiro权限管理的详细总结&#xff1a; 一、Shiro权限管理的基本概念 权限管理&#xff0c;一般指根据系统设置的安全规则或者安全策略&#xff0c;用户…

PySimpleGUI和Pymysql

PySimpleGUI 库 PySimpleGUI 是一个用于简化 GUI 编程的 Python 包&#xff0c;它封装了多种底层 GUI 框架&#xff08;如 tkinter、Qt、WxPython 等&#xff09;&#xff0c;提供了简单易用的 API。PySimpleGUI 包含了大量的控件&#xff08;也称为小部件或组件&#xff09;&…

基于CentOS 7.9上安装WebLogic

基于CentOS 7.9上安装WebLogic 一&#xff0c;安装准备与环境配置 创建用户组 groupadd weblogic创建 weblogic 用户 useradd -g weblogic weblogic设置 weblogic 用户密码 passwd weblogic创建安装目录并授权 mkdir /opt/weblogic chown -R weblogic:weblogic /opt/weblogic切…