【原】[webkit移动开发笔记]之无法自动播放的audio元素
2013-02-05 17:03
441 查看
HTML5新增了video元素和audio元素,替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法。这次的一个项目,产品经理要求手机加载开始时播放音乐,想到播放音乐,又是在ios和android平台,那audio元素必然是首选。
一、audio的基本知识
audio:标签定义声音,比如音乐或其他音频流。
二、audio的属性
三、audio的写法
写法一:
写法二:
四、audio实战
在项目中使用audio,一开始在chrome浏览器下做测试,使用了autoplay和loop属性,在页面打开时自动播放并循环,在chrome是成功支持,发布到测试环境后,在ios和android手机中音乐不会自动播放- -!,做了一系列测试,使用JS,还是无法自动播放...
想用回HTML4的object元素与embed,但手机中有些浏览器禁止了控件....
后来在外国网站找了一些对audio使用的资料:
对audio的使用,总结如下:
1.audio元素的autoplay属性在ios和andriod上无法使用的,在PC端上正常
2.audio元素没有设置controls时,在ios和android上会占据空间大小,而在PC端chrome是不会占据任何空间
后来,跟产品经理商量后,暂不使用音乐了....如果大家有办法能在iso和android上自动播放背景音乐,请联系我~~~Thx
参考资料:
http://stackoverflow.com/questions/4259928/how-can-i-autoplay-media-in-ios-4-2-1-mobile-safari
http://www.ibm.com/developerworks/library/wa-ioshtml5/index.html
http://www.w3school.com.cn/html5/html5_audio.asp
一、audio的基本知识
audio:标签定义声音,比如音乐或其他音频流。
二、audio的属性
三、audio的写法
写法一:
<audio src="baishu.mp3" auto loop>你的浏览器还不支持哦</audio>
写法二:
<audio controls="controls"> <source src="baishu.ogg" type="audio/ogg"> <source src="baishu.mp3" type="audio/mpeg"> 优先播放音乐baishu.ogg,不支持在播放baishu.mp3 </audio>
四、audio实战
在项目中使用audio,一开始在chrome浏览器下做测试,使用了autoplay和loop属性,在页面打开时自动播放并循环,在chrome是成功支持,发布到测试环境后,在ios和android手机中音乐不会自动播放- -!,做了一系列测试,使用JS,还是无法自动播放...
想用回HTML4的object元素与embed,但手机中有些浏览器禁止了控件....
后来在外国网站找了一些对audio使用的资料:
对audio的使用,总结如下:
1.audio元素的autoplay属性在ios和andriod上无法使用的,在PC端上正常
2.audio元素没有设置controls时,在ios和android上会占据空间大小,而在PC端chrome是不会占据任何空间
后来,跟产品经理商量后,暂不使用音乐了....如果大家有办法能在iso和android上自动播放背景音乐,请联系我~~~Thx
参考资料:
http://stackoverflow.com/questions/4259928/how-can-i-autoplay-media-in-ios-4-2-1-mobile-safari
http://www.ibm.com/developerworks/library/wa-ioshtml5/index.html
http://www.w3school.com.cn/html5/html5_audio.asp
相关文章推荐
- webkit移动开发笔记:html5中video与audio标签之无法自动播放的audio元素
- audio元素和video元素在ios和andriod中无法自动播放
- 微信端开发H5页面的时候,audio标签在苹果机上无法进行自动播放
- 微信端开发H5页面的时候,audio标签在苹果机上无法进行自动播放
- 快速解决ios微信下audio无法自动播放的问题
- iphone在微信中audio 音频无法自动播放
- 只含有audio的mms无法自动播放,如何修改
- [webkit移动开发笔记]之如何去除android上a标签产生的边框(转)
- HoloLens开发笔记-引用Taptoplace后无法移动问题解决
- iphone在微信中audio 音频无法自动播放
- 【原】[webkit移动开发笔记]之使用chrome进行手机开发
- ios加载html5 audio标签用js无法自动播放
- [webkit移动开发笔记]之禁止触发系统默认菜单
- iOS开发使用阿里云直播时,无法使用AudioServicesPlaySystemSound播放音频
- 【原】[webkit移动开发笔记]之禁止触发系统默认菜单
- 【原】[webkit移动开发笔记]之空链接是使用javascript:void(0)还是使用#none
- 【原】[webkit移动开发笔记]之兼容iPhone4和iPhone5的方法
- 【原】[webkit移动开发笔记]之CSS3径向渐变
- 解决ios微信下audio无法自动播放的问题
- iOS开发学习笔记:使用xcode里的单元测试,放在STAssert…里面的语句无法使用自动完成功能