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.xdnf.cn/news/966.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

WPF自定义日历控件Calendar 的方法

推荐下载地址 https://www.haolizi.net/example/view_2107.html <UserControl.Resources><local1:DayConverter x:Key"DayConverter"/><!--导入转换器--><Style x:Key"CalendarStyle1"TargetType"{x:Type Calendar}">&…

TOEIC 词汇专题:旅游计划篇

TOEIC 词汇专题&#xff1a;旅游计划篇 制定旅行计划时&#xff0c;尤其是跨国旅游&#xff0c;会涉及到很多独特的英语词汇。以下是与“旅游计划”相关的托业词汇&#xff0c;帮助你更加自如地规划行程。 1. 旅行服务和优惠 出发前了解一下与服务和优惠相关的常用词汇&#…

Java集合框架面试指南

Java集合框架面试指南 文章目录 Java集合框架面试指南ArrayList特点&#xff1a;LinkedList特点&#xff1a;ArrayDeque特点&#xff1a;PriorityQueue特点&#xff1a;HashMap特点&#xff1a;HashSet特点&#xff1a;LinkedHashMap特点LinkedHashMap经典用法 TreeMap特点Conc…

QEMU学习之路(4)— Xilinx开源项目systemctlm-cosim-demo安装与使用

QEMU学习之路&#xff08;4&#xff09;— Xilinx开源项目systemctlm-cosim-demo安装与使用 一、前言 项目说明&#xff1a;https://xilinx-wiki.atlassian.net/wiki/spaces/A/pages/862421112/Co-simulation 操作系统&#xff1a;Ubuntu 20.04.6 LTS gcc版本&#xff1a;9.4…

【Java知识】高性能网络应用框架Netty应知应会

文章目录 概述线程模型IO模型代码示例服务端代码示例客户端代码示例代码说明&#xff1a; 自定义协议实现自定义协议格式自定义编码器&#xff08;Encoder&#xff09;自定义解码器&#xff08;Decoder&#xff09;业务处理器&#xff08;Handler&#xff09;在Netty服务器管道…

AUTOSAR 规范中的设计模式:传感器执行器模式

在 AUTOSAR Adaptive Platform (AP) 规范中,传感器执行器模式是一种典型的设计模式,主要用于实时控制系统中,用来实现传感器数据的获取和执行器指令的发送。该模式通过分离传感器和执行器的实现,使其独立运行并且能够通过某种通信机制进行数据交换,以确保数据的实时性和系…

Linux:编辑器Vim和Makefile

✨✨所属专栏&#xff1a;Linux✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ vim的三种常用模式 分别是命令模式&#xff08;command mode&#xff09;、插入模式&#xff08;Insert mode&#xff09;和底行模式&#xff08;last line mode&#xff09; 各模式的功能区分如下&…

【Linux】【进程控制】API汇总整理

进程控制是操作系统中一个非常重要的概念&#xff0c;它涉及到创建、管理和终止进程的能力。进程控制包括一系列操作&#xff0c;如创建新进程、等待进程结束、发送信号给进程等。下面是进程控制中一些常见的操作及其相关API&#xff1a; 进程控制概述 进程控制是指操作系统提…

HTML练习题:彼岸的花(web)

展示效果: 代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>彼岸の花</title><style…

【安全性分析】正式安全分析与非正式安全分析

安全性分析-系列文章目录 第一章 【安全性分析】正式安全分析与非正式安全分析 第二章 【安全性分析】BAN逻辑 (BAN Logic) 文章目录 安全性分析-系列文章目录前言一、正式安全分析1. 理想化模型(如随机预言机模型)2. 标准模型(Standard Model)3. 形式化验证4. 数学证明二…

HTML小阶段二维表和思维导图

下面是对标签、元素、属性的对比二维表&#xff0c;通过对比3w1h&#xff08;what是什么、where用在哪、why为什么要用、how如何用&#xff09;来学习区分学习标签、元素、属性 标签 元素 属性 what &#xff08;Tags&#xff09;标签是用来标记内容块或标明元素内容意义 …

NIO 核心知识总结

在传统的 Java I/O 模型&#xff08;BIO&#xff09;中&#xff0c;I/O 操作是以阻塞的方式进行的。也就是说&#xff0c;当一个线程执行一个 I/O 操作时&#xff0c;它会被阻塞直到操作完成。这种阻塞模型在处理多个并发连接时可能会导致性能瓶颈&#xff0c;因为需要为每个连…

助力风力发电风机设备智能化巡检,基于YOLOv7全系列【tiny/l/x】参数模型开发构建无人机巡检场景下风机叶片缺陷问题智能化检测预警模型

在全球能源转型的大潮中&#xff0c;清洁环境能源的发展已成为各国关注的焦点。风力发电作为其中的佼佼者&#xff0c;以其可再生、无污染的特点&#xff0c;受到了广泛的青睐。然而&#xff0c;风力发电设施大多建于人迹罕至的地区&#xff0c;设备庞大且复杂&#xff0c;其维…

Apache POI(java操作Miscrosoft Office)

Apache POI 1.1 介绍 Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是&#xff0c;我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。 一般情况下&#xff0c;POI 都是用于操作 Excel 文件。 Apache POI 的应用场景&a…

C++ | Leetcode C++题解之第537题复数乘法

题目&#xff1a; 题解&#xff1a; class Solution { public:string complexNumberMultiply(string num1, string num2) {regex re("\\|i"); vector<string> complex1(sregex_token_iterator(num1.begin(), num1.end(), re, -1), std::sregex_token_iterator…

Java ==> String类(字符串)

文章目录 一、认识String类1、创建String对象2、不可变的String3、字符串常量池 二、字符串常用操作1、字符串比较1.1 用“”比较1.2 用equals()方法比较1.3用compareTo()方法进行比较 2、获取字符串长度3、字符串查找4、字符串转换4.1valueOf()数值转换为字符串4.2字母大小写转…

Qt中的Model与View 4:QStandardItemModel与QTableView

目录 QStandardItemModel API QTableView 导航 视觉外观 坐标系统 API 样例&#xff1a;解析一个表格txt文件 QStandardItemModel QStandardItemModel 可用作标准 Qt 数据类型的存储库。它是模型/视图类之一&#xff0c;是 Qt 模型/视图框架的一部分。它提供了一种基于…

【SpringMVC】传递json,获取url参数,上传文件

【传递json数据】 【json概念】 一种轻量级数据交互格式&#xff0c;有自己的格式和语法&#xff0c;使用文本表示一个对象或数组的信息&#xff0c;其本质上是字符串&#xff0c;负责在不同的语言中数据传递与交换 json数据以字符串的形式体现 【json字符串与Java对象互转…

Java JUC(四) 自定义线程池实现与原理分析

目录 一. 阻塞队列 BlockingQue 二. 拒绝策略 RejectPolicy 三. 线程池 ThreadPool 四. 模拟运行 在 Java基础&#xff08;二&#xff09; 多线程编程 中&#xff0c;我们简单介绍了线程池 ThreadPoolExecutor 的核心概念与基本使用。在本文中&#xff0c;我们将基于前面学…

go-logger v0.27.0 - 并发性能为官方库 10 倍

go-logger是一个高性能的 golang 日志库&#xff0c;旨在提供快速、轻量级的日志记录功能 Github 使用文档 v0.27.0 更新内容 优化内存分配优化写数据性能增加日志属性自定义函数增加各个日志级别格式化打印函数 说明 性能优化是该版本最重要的更新内容。性能优化的结果&…