audio 标签加入背景音乐谷歌浏览器不能自动播放的问题
在网上查阅相关资料才知道原来在4月份谷歌浏览器做了改革，不支持自动播放了，现贴出解决方案：
由于audio.play()必须要在交互事件中才能使用，因此在项目中，我的解决方案是当用户触发滑动事件时，audio自动播放, 具体实现代码如下:
<script>
window.addEventListener("myaudio", function() { //audio 标签的id
audio.play();
})
</script>
项目部署在tomcat服务器上, 重启tomcat服务器 ,进入到tomcat 执行命令的bin目录下
cd /usr/local/java/tomcat8/bin/ (这个每个人的目录路径不太一样, 大家切换到自己的目录下就好)
重启tomcat 输入命令: ./startup.sh
等待成功启动后, 浏览器输入访问地址:http://152.136.114.31:8888 (具体大家访问自己的项目地址即可)
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爱不问归期</title>
<audio id="myaudio" src="whys.mp3" autoplay="autoplay" loop="loop" style="display:none;">
Your browser does not support the audio element.
</audio>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<script>
window.addEventListener("myaudio", function() {
audio.play();
})
</script>
</body>
</html>
大家只需看红色部分关键代码即可! 有些问题, 就谷歌浏览器而言, 打开页面有时能自动播放, 但是有时又不行, 小编改变了策略, 页面打开鼠标单击页面任意空白地方触发播放; 详情请点击查看: 详情请点击此处查看
audio 标签加入背景音乐谷歌浏览器不能自动播放的问题相关推荐
- HTML5 解决audio标签不能在iPhone上自动播放的问题
直接上解决方法: 添加代码段: <!--下面这段代码用来解决不能在ios上自动播放 --><script type="text/javascript">$( ...
- 解决audio和video在手机端无法自动播放问题
解决audio和video在手机端无法自动播放问题 参考文章: (1)解决audio和video在手机端无法自动播放问题 (2)https://www.cnblogs.com/theblogs/p/9 ...
- 解决html5 audio iphone,ipd，safari不能自动播放问题
解决html5 audio iphone,ipd,safari不能自动播放问题 参考文章: (1)解决html5 audio iphone,ipd,safari不能自动播放问题 (2)https:// ...
- 解决谷歌浏览器无法自动播放HTML文件的声音和视频问题的方法
首先,先检测一下浏览器是否能支持自动播放,点击下方链接进行检测: https://video-dev.github.io/can-autoplay/ 本人检测的谷歌浏览器结果是: 结果显示,谷歌浏览器 ...
- 网站背景音乐隐藏按钮自动播放
现在浏览器都禁止网页自动播放音乐了,需要访客点击才可播放,怎么样才能让网站背景音乐自动播放看下面教程. 一.添加网页背景音乐并隐藏按钮 添加音乐 <audio src="音乐.mp3& ...
- iframe标签控制视频大小及自动播放
项目中问题:quill富文本中插入的视频,表单发送给后台是iframe标签:所以前端拿到的视频为后台直接返回数据渲染,如下: <iframe class="ql-video" ...
- 微信播放在服务器视频无法播放音乐,解决ios微信浏览器中audio和video音乐视频无法自动播放等问题...
产生问题的原因 参考网址:点击 对于自动播放的局限性,没有变通方案.正如前面所提及的,音频流只能从用户触摸事件加载.当针对移动版 Safari 进行开发时,重要的一点是要在必要时调整您的工作流,以适应 ...
- html5播放器源码自己添加音乐,HTML5 audio标签 打造属于自己的音乐播放器
最近学习了HTML5中的Audio标签,学习他的最好方式当然是实践,于是就自己写了一个.那就直接上演示链接吧 http://htmlpreview.github.io/?https://github. ...
- 谷歌浏览器设置自动播放视频（转）
声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...
最新文章
- 用Access的iif代替SQL中的IsNull()
- Linux shell删除变量
- PaddlePaddle版Flappy-Bird—使用DQN算法实现游戏智能
- 相对不容易用计算机语言编程实现的是,在描述算法的方法中,相对不容易用计算机语言编程实现的是( )....
- mysql master host_mysql异步备份的有关问题，MASTER_HOST可否指定多个
- JMS（Java消息服务）与消息队列ActiveMQ基本使用（一）
- python beautifulreport_Python unittest 之 BeautifulReport可视化报告
- Vim配置文件（.vimrc），Vim配置教程
- 繁体字_学认繁体字？你可能是低估了汉字的难度
- 对linux中多线程编程中pthread_join的理解
- 一行代码扫出“敬业福”
- 保研面试 算法题_面试挂在了一道 LRU 缓存算法设计题
- pythonunittest模块_python单元测试模块unittest
- C/C++[codeup 2088]排名
- 网络规划设计师教程知识点精讲之计算机网络汇总
- python爬股指期货数据_股指期货高频数据机器学习预测
- maya模型展开UV
- python(2) 简单字符串
- 独立开发变现周刊（第41期）：一个开源项目一个人每月收入8万美金
- 查看电脑配置命令_注册表