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

<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. mongo扩展错误

    make: *** [php_mongo.lo] Error 1 Ask Question 0   When I installed the Mongo PHP extension, the foll ...

  2. [转帖] ASP ASPX 等知识

    asp.asp.net..aspx..ascx..ashx的简单说明 https://www.cnblogs.com/jhcelue/p/6736147.html ASP是动态server页面(Act ...

  3. Java之枚举类范例

    代码如下: package catf.component.http.model; /** * @Auther:gongxingrui * @Date:2018-04-17 * @Description ...

  4. ajax 提交数组 泛型集合(二)

    最近在项目中,使用 mvc架构,model层使用code first 碰见一个问题,前台json传递数据给后台action的复杂对象,发现复杂对象中的list范型集合并没有获取到数据. 研究半天,终于 ...

  5. 第八届蓝桥杯国赛java B组第三题

    标题:树形显示 对于分类结构可以用树形来形象地表示.比如:文件系统就是典型的例子. 树中的结点具有父子关系.我们在显示的时候,把子项向右缩进(用空格,不是tab),并添加必要的连接线,以使其层次关系更 ...

  6. 自学Python3.5-字符串格式化 作用域 递归

    一.字符串格式化 二.作用域 三.递归

  7. [poj3278]抓住那头牛

    题目描述 Farmer John has been informed of the location of a fugitive cow and wants to catch her immediat ...

  8. 青蛙跳台阶(C、Python)

    C语言: /* ----------------------------------- 当n = 1, 只有1中跳法:当n = 2时,有两种跳法:当n = 3 时,有3种跳法:当n = 4时,有5种跳 ...

  9. mathML如何在谷歌浏览器进行展示

    前几天不是做了个word公式的解析吗,就是office插入的公式是个xmlObject对象,读出来就是个String,所以要进行转换才能在网页上展示,其实我对这方面也不是很了解,然后各种百度解决方案, ...

  10. xrandr: 命令行修改分辨率工具

    常用功能举例 查看支持的分辨率 xrandr -q 将分辨率设为1024×768 xrandr -s 1024×768 恢复到默认分辨率 xrandr -s 0