最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于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. Codeforces Round #345 (Div. 2) B

    B. Beautiful Paintings time limit per test 1 second memory limit per test 256 megabytes input standa ...

  2. ubuntu切割mp3文件

    ffmpeg -i InputFile -vn -acodec copy -ss 00:00:00 -t 00:01:32 OutPutFile

  3. Makefile中的 =,:=,?=,+= 的差异

    在Makefile中常常遇见这几种等操作,总结一下具体区别. =  是最基本的赋值 :=  是用右值覆盖左值 ?=  判断,如果左值没有被赋值过就赋以右值,否则,不做赋值动作 += 在左值后面连接右值 ...

  4. c++11新特性之future

    std::future可以从异步任务中获取结果,一般与std::async配合使用,std::async用于创建异步任务,实际上就是创建一个线程执行相应任务. 先看段代码: #include < ...

  5. HRBUST 1819

    石子合并问题--圆形版 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 61(27 users) Total Accepted: 26( ...

  6. sql service 事务与锁

    了解事务和锁 事务:保持逻辑数据一致性与可恢复性,必不可少的利器. 锁:多用户访问同一数据库资源时,对访问的先后次序权限管理的一种机制,没有他事务或许将会一塌糊涂,不能保证数据的安全正确读写. 死锁: ...

  7. window10下的solr6.1.0入门笔记之---安装部署

    1.安装部署java1.6+ ,确保jre安装[安装步骤略] 安装后的环境为jdk1.8+ jre1.8+ 2.安装ant 下载:官网=>http://ant.apache.org/=>  ...

  8. (转)史上最好的Python线程指南

    来自AstalWind的好文,彻底认识python线程 http://www.cnblogs.com/huxi/archive/2010/06/26/1765808.html . . . . .

  9. SpringMVC中ModelAndView addObject()设置的值jsp取不到的问题

    controller public class HelloWorldController implements Controller { public ModelAndView handleReque ...

  10. 51nod 1284 2 3 5 7的倍数 | 容斥原理

    用容斥原理求出不满足条件的个数cnt,然后用n-cnt就得到答案了. 这里不满条件的数就是能整除2,3,5,7这些数的集合并集.要计算几个集合并集的大小,我们要先将所有单个集合的大小计算出来,然后减去 ...