最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用,对于audio相关的常用知识点以及一些相关的问题如下:

   <audio id="audios" src="xxxx.mp3" autoplay controls="controls">
您的浏览器不支持 audio 标签。
</audio>
不支持audio元素的浏览器会显示标签内文字 audio相关属性:
src:音频地址
autoplay:音频加载完毕后自动播放。
controls:显示播放控制条。
loop:播放完毕后会重复播放。
preload: auto 预加载音频视频。metadata 只预加载音频视频元数据。 有autoplay时此属性无效。 js控制媒体
play() 播放
pause() 暂停
load() 重新加载 相关事件:
oncanplay //在用户可以开始播放视频/音频(audio/video)时触发(页面加载完毕)
onerror //在音频/视频(audio/video)加载发生错误时触发
ontimeupdate //在视频/音频(audio/video)当前的播放位置发送改变时触发 event.currentTime
onended //在视频/音频(audio/video)播放结束时触发 微信端和手机不能支持自动播放问题
原因是:android ios 内部原因 为了节省流量,规定不自动播放音频视频
解决方法:
//--创建页面监听,等待微信端页面加载完毕 触发音频播放
document.addEventListener('WeixinJSBridgeReady', function() {
document.getElementById('audios').play()
}) //--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
document.addEventListener('touchstart', function() {
document.getElementById('audios').play()
})

html5 -audio-移动端如何自动播放的更多相关文章

  1. [JavaScript] audio在浏览器中自动播放

    audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...

  2. video 在iphone手机的ios系统和微信端无法自动播放

    描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...

  3. HTML5中的audio在手机端和 微信端的自动播放

    再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...

  4. 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放

    我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...

  5. autoplay移动端不能自动播放

    本文总结自:https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad 首先,自动播放 ...

  6. html5添加视频为背景自动播放

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

  7. 移动端audio自动播放问题

    中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑: 一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网 ...

  8. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  9. HTML5 audio标签自制音乐播放器

    相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...

随机推荐

  1. 那些常用的JS命令

    window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象(用于框架) opener.location.reload()刷新父窗口对象 ...

  2. 洛谷P3966 [TJOI2013]单词(fail树性质)

    P3966 [TJOI2013]单词 题目链接:https://www.luogu.org/problemnew/show/P3966 题目描述 小张最近在忙毕设,所以一直在读论文.一篇论文是由许多单 ...

  3. Android IntentService分析

    IntentService其实是一个很通用的知识点,最近看了下阿里巴巴Android开发手册,再次记录下 阿里巴巴Android开发手册 [强制]避免在 BroadcastReceiver#onRec ...

  4. UVA 1213 Sum of Different Primes

    https://vjudge.net/problem/UVA-1213 dp[i][j][k] 前i个质数里选j个和为k的方案数 枚举第i个选不选转移 #include<cstdio> # ...

  5. uva 1506 Largest Rectangle in a Histogram

    Largest Rectangle in a Histogram http://acm.hdu.edu.cn/showproblem.php?pid=1506 Time Limit: 2000/100 ...

  6. 招人不是HR第一职责,留住人才是

    什么是HR的第一责任?我希望你们知道,招人不是你的第一职责,留住人才是你的第一职责.HR工作是相当难做的,你们是公司集团内里各个部门中最难做的部门,也是最具战略性的部门. 以人为本,这个“人”就是阿里 ...

  7. [cerc2012][Gym100624A]20181013

    A 题意:n(n<=20)个国家,每个国家之间有一些债务关系,总体为负债的国家会破产,破产国家的债务关系全部消除.问哪些国家可能成为最后一个唯一存在的国家. 题解: 对于每一个状态,面对若干个负 ...

  8. 【vijos】P1448 校门外的树

    [题意]两种操作,[L,R]种新的树(不覆盖原来的),或查询[L,R]树的种类数.n<=50000. [算法]树状数组||线段树 [题解]这题可以用主席树实现……不过因为不覆盖原来的,所以有更简 ...

  9. JS之window对象

    window对象 window属性: opener:打开当前窗口的源窗口,如果这个窗口是由别的网页点击链接跳转过来的,或者是从另外一个页面点击打开窗口打开的,opener就是找到源页面的.如果当前窗口 ...

  10. arping详解

    arping干嘛用的? arping主要干的活就是查看ip的MAC地址及IP占用的问题. 参数 -0:指定源地址为0.0.0.0,这个一般是在我们刚刚安装好系统,电脑还没配置好IP的时候 -a:Aud ...