【原】[webkit移动开发笔记]之无法自动播放的audio元素

简介:

HTML5新增了video元素和audio元素,替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法。这次的一个项目,产品经理要求手机加载开始时播放音乐,想到播放音乐,又是在ios和android平台,那audio元素必然是首选。

一、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

作者:白树

出处:http://peunzhang.cnblogs.com/

目录
相关文章
|
移动开发
移动开发笔记
2015年2月9日 18:09:11 因为移动端app有新老版本的区别 服务端推送给app的数据, 老版本可能解析不了 因此在移动端设计的时候要定义个"白名单", 服务端来的数据, 只解析在白名单内的数据 防止因为有新数据返回时, 老版本解析不了而出错, 或者, 服务端为了兼容做太多的版本判...
585 0
|
2月前
|
开发框架 Dart Android开发
移动应用开发中的创新之路:探索跨平台解决方案
【9月更文挑战第21天】在移动应用的海洋中,开发者们面临着一个不断变化的挑战——如何在多个操作系统上提供无缝的用户体验。本文将探讨跨平台开发的魅力与挑战,并深入分析Flutter框架如何成为现代开发者的利器。我们将通过实际代码示例,揭示Flutter简化开发流程、提高生产效率的秘密。从Dart语言的基础到热重载的便捷性,本文旨在为读者提供一次全面而深刻的跨平台开发之旅。
|
1月前
|
开发框架 前端开发 Android开发
移动应用开发中的跨平台策略与实践
【9月更文挑战第34天】本文将深入探讨移动应用开发的跨平台策略,包括对React Native、Flutter和Xamarin等流行框架的比较。文章还将分享一些实用的跨平台开发技巧和最佳实践,帮助开发者在多个平台上高效地构建和维护应用。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和指导。
|
4天前
|
开发框架 前端开发 JavaScript
移动应用开发的未来:跨平台框架的崛起
【10月更文挑战第32天】随着智能手机用户数量的激增,移动应用开发已成为软件开发中增长最快的领域之一。传统的移动应用开发模式要求开发者为不同的操作系统分别编写和维护代码,这不仅耗时耗力,也增加了成本。近年来,跨平台开发框架的出现极大地改变了这一局面,它们允许开发者使用单一的代码库来部署应用到多个平台。本文将探讨跨平台开发框架的优势、面临的挑战以及未来发展趋势,旨在为读者提供一个关于移动应用开发新趋势的全面视角。

热门文章

最新文章

下一篇
无影云桌面