html5 -audio-移动端如何自动播放
最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于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-移动端如何自动播放的更多相关文章
- [JavaScript] audio在浏览器中自动播放
audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...
- video 在iphone手机的ios系统和微信端无法自动播放
描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...
- HTML5中的audio在手机端和 微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...
- 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放
我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...
- autoplay移动端不能自动播放
本文总结自:https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad 首先,自动播放 ...
- html5添加视频为背景自动播放
客户想做个打开官网自动播放一段视频,楼主使用了video标签,即下面的代码:: 于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop” 然而通过地址栏进去的 ...
- 移动端audio自动播放问题
中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑: 一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网 ...
- html5 audio音频播放全解析
序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...
- HTML5 audio标签自制音乐播放器
相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...
随机推荐
- 剑桥offer(21~30)
21.题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 还不 ...
- vim 打开中文乱码
[root@yu ~]# find / -name vimrc/etc/vimrc [root@yu ~]# vim /etc/vimrc set fileencodings=utf-8,gb2312 ...
- spring全局异常处理 自定义返回数据结构
在写api接口中,正常返回和异常错误返回我们都希望很清楚的将这些信息清楚的返回给用户,出现异常情况下需要清楚的知道是参数异常还是未知异常,而不是返回一个不正确的数据结构. 所以此处只针对写api接口时 ...
- Linux环境下用Weblogic发布项目【三】 -- 启动、登陆、停止WebLogic
一.启动WebLogic: 1.启动前,修改访问端口.IP地址方法: 在config.xml中修改,具体路径如下: /root/Oracle/Middleware/user_projects/doma ...
- JS实现的随机乱撞的彩色圆球特效代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Just Random HDU - 4790 思维题(打表找规律)分段求解
Coach Pang and Uncle Yang both love numbers. Every morning they play a game with number together. In ...
- POJ_2112_Optimal Milking 这里有超级快的网络流板子
Description FJ has moved his K (1 <= K <= 30) milking machines out into the cow pastures among ...
- [zabbix]zabbix2.0apt源安装
http://www.sysadminworld.com/2013/install-zabbix-2-on-ubuntu-12-04-precise/
- 单线程的redis为什么达到每秒万级的处理速度?
纯内存访问,redis将所有数据都放在内存中,内存响应时间大约为100纳秒,这是redis达到每秒万级级别访问的重要基础. 非阻塞IO,redis使用epoll作为IO多路复用技术的实现,再加上red ...
- redis 设置外网可访问
前提是你已经把redis的端口放到了防火墙计划中, /sbin/iptables -I INPUT -p tcp --dport 6379 -j ACCEPT /etc/rc.d/init.d/ipt ...