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

        背景:由于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.rhkb.cn/news/460765.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue的路由的两种模式 hash与history 详细讲解

文章目录 1. Hash 模式工作原理优点缺点使用示例 2. History 模式工作原理优点缺点服务器配置示例使用示例 总结 Vue Router 是 Vue.js 的官方路由管理器&#xff0c;它支持多种路由模式&#xff0c;其中最常用的两种是 hash 模式和 history 模式。下面我们详细讲解这两种模式的…

什么是目标检测?

首先计算机视觉能够解决哪些问题&#xff1f;&#xff1f; 分类、检测、分割 首先以下面这幅图为例&#xff1a; 分类就是输入一张图像&#xff0c;算法能够告诉我们图像中有什么类别&#xff0c;比如说猫或者狗&#xff0c;而并不知道这个类别在图像中的位置&#xff0c;如…

转移概率矩阵的计算

目录 T1T2 T1 写出图示信道的转移概率矩阵&#xff0c;并指出其是否为对称信道。 解&#xff1a; 信道的转移概率矩阵 P ( Y ∣ X ) [ 0.99 0.01 0 0.005 0.99 0.005 0 0.01 0.99 ] P(Y|X)\begin{bmatrix}0.99&0.01&0\\0.005&0.99&0.005\\0&0.01&0.9…

Linux中Samba服务配置和管理

文章目录 一、Samba介绍1.1、Samba是什么1.2、Samba的核心功能1.3、Samba的主要组件1.4、Samba的工作流程1.5、Samba主要配置文件smb.conf 二、Samba安装2.1、更新yum源2.2、安装Samba客户端和服务器软件包2.3、启动Samba 三、Samba的使用3.1、设置Samba服务的全局选项3.2、tes…

MS01SF1 精准测距UWB模组助力露天采矿中的人车定位安全和作业效率提升

在当今矿业行业&#xff0c;随着全球对资源需求的不断增加和开采难度的逐步提升&#xff0c;传统的作业方式面临着越来越多的挑战。露天矿山开采&#xff0c;因其大规模的作业环境和复杂的地形特点&#xff0c;面临着作业人员的安全风险、设备调度的高难度以及资源利用率低下等…

Spring Security 门神中的战斗机

Spring Security 是 Spring 家族中的一个安全管理框架。相比与另外一个安全框架Shiro&#xff0c;它提供了更丰富的功能&#xff0c;社区资源也比Shiro丰富。 一般来说中大型的项目都是使用SpringSecurity 来做安全框架。 小项目有Shiro的比较多&#xff0c;因为相比与SpringS…

CentOS 7 下升级 OpenSSL

升级openssh,下载&#xff1a;https://download.csdn.net/download/weimeilayer/89935114 上传到服务器&#xff0c;然后执行命令 rpm -Uvh *.rpm --nodeps --force安装依赖 yum -y install gcc perl make zlib-devel perl-CPAN下载安装包&#xff1a;https://github.com/ope…

unordered_map、unordered_set 底层原理及其相关面试题

目录 unordered_map、unordered_set的底层原理 哈希表的实现 unordered_map 与map的区别&#xff1f;使用场景&#xff1f; unordered_map、unordered_set的常用函数 unordered_map map区别和联系 unordered_map、unordered_set的底层原理 unordered_map的底层是一个防冗余…

若依框架部署到服务器后头像资源访问404

排错过程 第一开始以为是代理出问题了 官网给出的解决方案 第一种是用代理后端接口&#xff0c;第二种是重写路径直接访问静态文件 接口通过捕获profile开头的路径/profile/avatar…&#xff0c;转为/home…/avatar找到我们在该路径下的文件 但是我想了一下&#xff0c;我ngin…

Linux——五种IO模型

目录 一IO基本理解 二五种IO模型 1五种IO模型示意图 2同步IO和异步IO 二非阻塞IO 1fcntl 2实现非阻塞IO 三多路复用 1select 1.1定位和作用 1.2介绍参数 1.3编写多路复用代码 1.4优缺点 2poll 2.1作用和定位 2.2介绍参数 2.3修改select代码 3epoll 3.1介绍…

【隐私计算篇】全同态加密应用场景案例(隐私云计算中的大模型推理、生物识别等)

1.题外话 最近因为奖项答辩&#xff0c;一直在忙材料准备&#xff0c;过程非常耗费时间和精力&#xff0c;很难有时间来分享。不过这段时间虽然很忙碌&#xff0c;但这期间有很多新的收获&#xff0c;特别是通过与领域内专家的深入交流和评审过程&#xff0c;对密码学和隐私计算…

【汇编语言】第一个程序(四)—— 谁在幕后启动程序 : 探讨可执行文件的装载与执行

文章目录 前言1. 可执行文件的加载与运行1.1 DOS中的程序加载过程1.2 问题1&#xff1a;谁加载了1.exe&#xff1f;1.3 问题2&#xff1a;程序运行结束后的返回过程1.4 操作系统的外壳1.5 回答问题1和问题21.6 汇编程序执行的完整历程 2. 使用Debug加载与跟踪1.exe2.1 Debug的加…

Unreal Engine 5 C++(C#)开发:使用蓝图库实现插件(一)认识和了解Build.cs

目录 引言 一、创建一个C插件TextureReader插件 二、Build.cs文件 三、ModuleRules 四、TextureReader插件的构造 4.1ReadOnlyTargetRules的作用 4.2TextureReaderd的构造调用 4.3设置当前类的预编译头文件的使用模式 4.4PublicIncludePaths.AddRange与PrivateInclude…

SELS-SSL/TLS

一、了解公钥加密&#xff08;非对称加密&#xff09; 非对称加密中&#xff0c;用于加密数据的密钥与用于解密数据的密钥不同。私钥仅所有者知晓&#xff0c;而公钥则可自由分发。发送方使用接收方的公钥对数据进行加密&#xff0c;数据仅能使用相应的私钥进行解密。 你可以将…

STM32FreeRTOS 使用QSPI驱动nandFlash

STM32FreeRTOS 使用QSPI驱动nandFlash 不清楚为什么STM32同时打开3个以上的音频文件时会出现播放问题&#xff0c;所以更换方案。因为SRAM的内存空间过小&#xff0c;用于存储音频文件不适合&#xff0c;所以使用大小为128MByte的nandFlash。 nandFlash使用华邦的W25N01GVZEI…

vscode的一些使用心得

问题1&#xff1a;/home目录空间有限 连接wsl或者remote的时候&#xff0c;会在另一端下载一个.vscode-server&#xff0c;vscode的插件都会安装进去&#xff0c;导致空间增加很多&#xff0c;可以选择更换这个文件的位置 参考&#xff1a;https://blog.csdn.net/weixin_4389…

1Panel应用商店开源软件累计下载突破200万次!

2024年10月23日&#xff0c;1Panel应用商店内开源软件累计下载突破200万次。 1Panel&#xff08;github.com/1Panel-dev/1Panel&#xff09;是一款现代化、开源的Linux服务器运维管理面板&#xff0c;它致力于通过开源的方式&#xff0c;帮助用户简化建站与运维管理流程。 为…

基于MATLAB多参数结合火焰识别系统

一、课题介绍 本设计为基于MATLAB的火焰烟雾火灾检测系统。传统的采用颜色的方法&#xff0c;误识别大&#xff0c;局限性强。结合火焰是实时动态跳跃的&#xff0c;采用面积增长率&#xff0c;角点和圆形度三个维度相结合的方式判断是否有火焰。该设计测试对象为视频&#xf…

利用摄像机实时接入分析平台LiteAIServer视频智能分析软件进行视频监控:过亮过暗检测算法详解

视频监控作为一种重要的安全和管理工具&#xff0c;广泛应用于各个领域&#xff0c;如安全监控、交通监管、员工监管、公共场所监控等。然而&#xff0c;在实际应用中&#xff0c;视频监控系统经常面临各种挑战&#xff0c;其中之一便是视频画面过亮或过暗的问题。过亮过暗检测…