最近在做webapp的html5页面碰到了一个奇葩问题
<audio>标签在三星系的机型上不能自动播放,测试机型包括s4,note3,一定要交互操作后才能播放
查了博客以后发现,确实大家都碰到了这样的问题,
其实只要发生一个用户触发的事件,之后就可以随意操作audio标签的音频了。
下面给出一个解决方案:
给body绑定一个touchstart事件。
$(document).one('touchstart', function (e) {
audio.play();
});
这样就可以简单解决不能播放的问题了。
分享到:
相关推荐
总的来说,移动端`<audio>`标签的使用涉及到HTML5、JavaScript以及可能的第三方库如jQuery,通过合理的设计和编程,可以在不同平台上提供一致且良好的音频播放体验。对于开发者来说,理解这些技术细节和兼容性问题至...
本项目涉及的是在PC端和移动端实现`<audio>`标签的拖动功能,以提升用户体验。虽然在PC端存在一些小问题,但总体上并不影响用户对音频的正常播放和欣赏。 首先,我们需要了解`<audio>`的基本结构和属性。一个简单的...
然后,使用getFileURL函数创建一个可以用于audio或video标签的URL,这样就可以在前端展示上传的媒体内容。 知识点3:使用window.createObjectURL 在处理媒体文件时,window.createObjectURL是一个非常有用的API,它...
再来,`<audio>`和`<video>`标签简化了多媒体内容的集成。在仿淘宝页面中,可以利用这些标签展示商品视频介绍或播放广告。 表单控件的增强也是HTML5的一大亮点,如`<input type="date">`, `<input type="range">`等...
HTML文件通过使用标签来定义元素,如标题、段落、图片和链接等,使浏览器知道如何呈现这些内容。在移动端H5项目中,HTML5的引入带来了许多新特性,如离线存储、媒体元素和表单控件改进,增强了移动设备上的用户体验...
本套源码提供了一整套移动端的解决方案,适合前端开发者或对移动电商感兴趣的人员学习和使用。 首先,我们要理解H5页面的核心特性。HTML5引入了新的标签,如、、和,这些使得文档结构更加清晰,提高了代码可读性和...
HTML5引入了许多新的标签和API,如`<input>`类型的扩展、`<canvas>`画布、`<video>`视频、`<audio>`音频以及Geolocation地理位置API等,这些都极大地增强了网页的交互性和表现力。在登录注册界面中,例如,`...
此时节,正值中秋国庆来临之际,特此在闲暇时间做了个以“中秋国庆”为主题的...2 audio标签使用 3 css3 key-frame属性 4 css3 transform属性 5 gulp 自动构建工具 注意:pc端浏览,请使用chrome浏览器移动端调试模拟器
1. HTML5基础知识:包括新的标签(如, , 等)、表单控件、存储机制(如localStorage和sessionStorage)以及媒体元素(如<audio>和)的使用。 2. CSS3样式和动画:学习如何使用选择器、盒模型、布局模式(如Flexbox...
1. HTML5新元素的学习与使用:如、、、等语义化标签,以及、、<audio>等多媒体元素。 2. CSS3新属性的实践:如Flexbox布局、Grid布局、过渡效果、动画、响应式设计等。 3. JavaScript基础与进阶:包括DOM操作、事件...
例如,`<audio>`和`<video>`标签让多媒体内容的集成变得简单,`<canvas>`元素支持动态图形绘制,这些都是创建交互式页面的基础。 实现翻页效果,通常会用到CSS3的过渡(transition)和动画(animation)属性,以及...
携程网首页可能使用这些标签展示旅游目的地的视听信息,提供更生动的旅行体验。同时,`<picture>`元素支持根据设备特性加载不同的图片资源,以适应不同的分辨率和网络环境。 在交互性方面,HTML5的`<form>`元素新增...
HTML5是超文本标记语言的最新版本,提供了许多新特性,如语义化标签(如、、、)、离线存储(Application Cache)、媒体元素(<audio>、)以及地理定位API等,这些都在移动端H5页面中发挥着重要作用。 2. **地理...
4. **媒体元素(Media Elements)**:通过`<audio>`和`<video>`标签,HTML5支持直接在网页内嵌入音频和视频,无需第三方插件,对于展示旅游目的地的风光或提供旅行攻略非常有用。 5. **Canvas与SVG**:`Canvas`提供...
5. **Audio & Video**:内建的音频和视频元素使得直接在网页上嵌入媒体资源变得简单,无需第三方插件。 6. **Web Storage**:包括`localStorage`和`sessionStorage`,为浏览器提供更持久的数据存储能力。 7. **...
6. **HTML5新特性**:如`<header>`, `<footer>`, `<section>`等语义化标签,以及`<video>`和`<audio>`元素的使用,提高网页可访问性和功能。 7. **优化性能**:学习如何减少HTTP请求、合并CSS和JavaScript文件,...
HTML5还强化了多媒体支持,通过`<video>`和`<audio>`标签可以直接在网页内播放视频和音频,这对于创建丰富的求职介绍或者公司宣传非常有用。同时,画布(Canvas)和SVG(Scalable Vector Graphics)提供了强大的图形...
2. 多媒体支持:内置和<audio>标签,可以方便地在网页中嵌入视频和音频,而无需依赖Flash等外部插件。 3. Canvas和SVG:提供图形绘制能力,可用于动态图表、游戏等场景。 4. 表单控件增强:新增了日期选择器、搜索...
HTML5引入了一系列新的标签,这些标签旨在使文档结构更加清晰,提高可读性和可访问性,同时也为移动端开发带来了全新的机遇。 在HTML5中,新增的结构性标签如、、、、和等,它们各自代表了网页的不同部分。例如,...
这个项目是一个专为移动端设计的HTML5音乐播放器,它使用了轻量级的JavaScript库Zepto.js。Zepto.js是为移动设备优化的,它具有与jQuery类似的API,但体积更小,更适合在移动环境中使用,减少了页面加载时间,提高了...