解决audio和video在手机端无法自动播放问题
各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放
<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在手机端无法自动播放问题的更多相关文章
- 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放
声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- 解决html5 audio iphone,ipd,safari不能自动播放问题
html audio 在iPhone,ipd,safari浏览器不能播放是有原因滴 (在safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的acti ...
- Html5-audio标签简介及手机端不自动播放问题
1.audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload ...
- 解决在微信中部分IOS不能自动播放背景音乐
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,IOS下的safari是无法自动播放音乐的,以至一直以来造成一种错误的认识,iso是无法自动播放媒体资源的.直到微信火 ...
- 解决移动端浏览器 HTML 音频不能自动播放的三种方法
https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...
- video实现有声音自动播放
video实现自动播放有声音 需求:老板见人家可以的,我们的也要可以!!! 前端:自动播放,简单... 要实现:鼠标移入视频播放同时有声音,移出让你暂停,,,,, 问题集合 1- 自动播放实现没有声音 ...
- 微信h5页面audio标签在ios下不能自动播放
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...
- html 中video标签视频不自动播放的问题
有个需求,客户想做个打开官网自动播放一段视频,楼主使用了video标签,即下面的代码::于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop”然而通过地址栏 ...
随机推荐
- Linux运维工程师必须掌握的基础技能有哪些?
这个问题挺好的,回答这个问题也是对自身的审查,看看自己还欠缺哪些.(所以我估计得好好思考下,也许下一刻我就会突然惊醒,发现我还是战⑤渣) 首先限定在Linux运维工程师上 回答仅代表我想到,不代表我都 ...
- [转]curl的详细使用
转自:http://www.cnblogs.com/gbyukg/p/3326825.html 下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://www.centos ...
- 如何实现圆形的进度条(ProgressBar)
在我们实际的工作中可能经常使用到圆形的进度条,但是这是怎么实现的呢?其实这只不过是修改了一下ProgressBar的模板,我们在下面的代码中我们将ProgressBar的Value值绑定到Border ...
- delphi有关获取其他程序的窗口及对窗口内控件的操作
1.获取当前所有窗口 procedure TForm1.Button1Click(Sender: TObject);var szText: array[0..254] of char; hCurren ...
- Spark_RDD之RDD操作简介
1.转化操作 转化操作是返回一个新的RDD的操作,我们可以使用filter()方法进行转化.举个使用scala进行转化操作的例子. def main(args: Array[String]): Uni ...
- 14Junit、反射、注解
14Junit.反射.注解 14.1.1 Junit的概述 一般IDE都内置了junit,若需要自行下载jar包,可以访问官网,官网地址如下:http://www.junit.org 1. ...
- BZOJ5338[TJOI2018]xor——主席树+dfs序
题目描述 现在有一颗以1为根节点的由n个节点组成的树,树上每个节点上都有一个权值vi. 现在有Q 次操作,操作如下: 1 x y 查询节点x的子树中与y异或结果的最大值 2 x y z ...
- BZOJ3510 首都(LCT)
即动态维护树的重心.考虑合并后的新重心一定在两棵树的重心的连线上.于是对每个点维护其子树大小,合并时在这条链的splay上二分即可.至于如何维护子树大小,见https://blog.csdn.net/ ...
- Spring bean默认为单例模式会引发并发问题吗
在web项目中使用spring,如果网站同时很多人访问,这时候使用spring默认的单例模式的bean是否合适呢?回不回影响效率或者产生交叉呢? Spring默认的单例模式的bean,因为是单例的,所 ...
- 自学Aruba6.3-账号管理(web页面配置)
点击返回:自学Aruba之路 自学Aruba6.3-账号管理(web页面配置) 1 管理员账号管理 Configuration---Administrator中 角色名称 说明 root 该角色允许管 ...