当前位置: 首页 > news >正文

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.mrgr.cn/news/62466.html

相关文章:

  • uniapp写移动端,适配苹果手机底部导航栏,ios安全区问题,苹果手机遮挡底部信息,uview的u-action-sheet组件
  • 1436. 旅行终点站
  • 51c多模态~合集1
  • 【JVM 深入了解】JVM 到底包含什么?
  • 蓝桥杯练习笔记(十九-质数筛)
  • 初体验鸿蒙 HarmonyOS NEXT开发
  • OpenCV自动滑块验证(Java版)
  • Spring Boot助力校园社团信息数字化管理
  • Python爬虫:在1688上“侦探游戏”获取店铺详情
  • 大厂面试真题-简单说说中台的架构设计
  • Python酷库之旅-第三方库Pandas(181)
  • NocoBase 本周更新汇总:提升表格区块渲染性能等
  • 炫酷!HTMLCSS 让五星评级单选按钮“活“起来
  • Spring Boot技术在校园社团管理中的高效应用
  • 微信小程序开发(教学笔记)——一、通过微信官方文档认识、学习小程序
  • 让卷积神经网络来辨识马和人
  • 三合一无线键鼠中射频芯片-PHY6233
  • clickhouse运维篇(二):多机器手动部署ck集群
  • 启航新征程|三维天地沈阳分公司办公楼开工启用
  • 农作物病害图像分割系统:深度学习检测
  • C/C++系列(2)重载各种玩法
  • Mac用户必备的任务管理软件!三款高效工具推荐
  • MySQL架构面试题系列-MySQL面试宝典(三)
  • 算法详解——线段树
  • UBUNTU查看CPU核心数
  • GB/T 28046.2-2019 道路车辆 电气及电子设备的环境条件和试验 第2部分:电气负荷(4)