各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放

<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
<audio controls="controls">
<source src="music/bg.ogg" type="audio/ogg"></source>
<source src="music/bg.mp3" type="audio/mpeg"></source>
优先播放音乐bg.ogg,不支持在播放bg.mp3
</audio>
//JS绑定自动播放(操作window时,播放音乐)
$(window).one('touchstart', function(){
music.play();
}) //微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false); //注意
//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常;
//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间;
//3.注意不要遗漏微信的兼容处理需要引用微信JS;

解决audio和video在手机端无法自动播放问题的更多相关文章

  1. 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放

    声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...

  2. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  3. 解决html5 audio iphone,ipd,safari不能自动播放问题

    html audio 在iPhone,ipd,safari浏览器不能播放是有原因滴 (在safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的acti ...

  4. Html5-audio标签简介及手机端不自动播放问题

    1.audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload ...

  5. 解决在微信中部分IOS不能自动播放背景音乐

    前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,IOS下的safari是无法自动播放音乐的,以至一直以来造成一种错误的认识,iso是无法自动播放媒体资源的.直到微信火 ...

  6. 解决移动端浏览器 HTML 音频不能自动播放的三种方法

    https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...

  7. video实现有声音自动播放

    video实现自动播放有声音 需求:老板见人家可以的,我们的也要可以!!! 前端:自动播放,简单... 要实现:鼠标移入视频播放同时有声音,移出让你暂停,,,,, 问题集合 1- 自动播放实现没有声音 ...

  8. 微信h5页面audio标签在ios下不能自动播放

    背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...

  9. html 中video标签视频不自动播放的问题

    有个需求,客户想做个打开官网自动播放一段视频,楼主使用了video标签,即下面的代码::于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop”然而通过地址栏 ...

随机推荐

  1. Tor源码阅读与改造(一)

    0x00 前言 由于公司需求,需要掌握洋葱网络的整体架构和部分详细实现细节,并对Tor进行针对性的改造.在查询Tor官方相关文档和google各种网站后,得到的信息仍无法达到目的,所以便开始了阅读To ...

  2. IntersectionObserver简介

    写在前面 在移动端,有个很重要的概念,叫做懒加载,适用于一些图片资源特别多,ajax数据特别多的页面中,经常会有动态加载数据的场景中,这个时候,我们通常是使用监听scroll或者使用setInterv ...

  3. 关于linux上文件无法正确显示中文的情况解决

    其实有遇到过多次,而且还有几次是css在预编译的时候,系统编码不对也会报错. 贴一个写的还不错的文章:http://www.360doc.com/content/11/0728/09/7102324_ ...

  4. 关于封装了gevent的request grequest库的使用与讨论

    最近迷上了gevent所以研究很多gevent相关的东西. 但是我现在不想写相关gevent和greenlet的东西.因为这一块内容实在太多太大太杂,我自己也还没有完全弄明白,所以等我完全搞清楚测试也 ...

  5. python之itemgetter函数:对字典列表进行多键排序

    itemgetter函数:对字典列表进行多键排序 from operator import itemgetter list_people = [ {'name': 'Mike', 'age': 22, ...

  6. js跨域请求jsonp解决方案-最简单的小demo

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  7. windows下 navicat_premium破解方法

    https://blog.csdn.net/qq_21205435/article/details/78902052

  8. Hopcroft-Carp 算法模板 自用

    #include <iostream> #include <cstdio> #include <cstring> #include <queue> #d ...

  9. 自学Zabbix3.10.2.1 linux如何配置使用sendEmail发送邮件

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix3.10.2.1 linux如何配置使用sendEmail发送邮件 sendEma ...

  10. 如何同时修改SharePoint帐号和AD帐号的密码 - 批量修改SharePoint Managed Account

    cls if ((Get-PSSnapin "Microsoft.SharePoint.PowerShell" -ErrorAction SilentlyContinue) -eq ...