移动端audio自动播放问题
中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑:
一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网址导航等等,底部也有留白,应该出去这一部分;
二:audio背景音乐是不能自动播放的,不管怎么调试js都没用,经过多方查证,居然是移动端做了限制,一定要用户交互才能触发,网上的解决方案大多是通过touchstart事件;
<audio id="myaudio" >
<source src="/static/warn.mp3" type="audio/mpeg">
</audio> <script> function audioPlay(){
document.getElementById("myaudio").play();
} function audioLoad(){
document.getElementById("myaudio").pause();
} // 触发播放
audioPlay();
</script>
移动端audio自动播放问题的更多相关文章
- 关于移动端audio自动播放问题
本人小白全栈一枚,给公司写了一个监控中心,要求严重报警的时候需要触发音频播放,于是就有了以下的折腾. 刚开始一切都很顺利,自然而然的写了以下代码. <audio id="myaudio ...
- video 在iphone手机的ios系统和微信端无法自动播放
描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...
- HTML5中的audio在手机端和 微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...
- iOS下Audio自动播放(Autoplay)音乐
前几天做了一个H5活动页面,产品要求初始化播放音乐,因晓得H5 Audio标签支持Autoplay就没在意. 完了在手机上测试,发现手机上打开页面死活就是不会自动播放,点击播放按钮才可以播放,很是纠结 ...
- html5 -audio-移动端如何自动播放
最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用,对于audio相关的常用知识点以及一些相关的问题如下: <audio id="audios" ...
- ios设置音乐audio自动播放
因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...
- autoplay移动端不能自动播放
本文总结自:https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad 首先,自动播放 ...
- 微信audio自动播放(ios播放问题)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- audio标签的自动播放(ios)
0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.c ...
随机推荐
- npm 安装与常用命令
下载nodejs并安装,会附带安装npm工具https://nodejs.org/en/download/ npm 常用命令#在执行命令时需要管理员权限,mac请用sudo来执行,windows请使用 ...
- 七个开法者经常忽略或误用的JavaScript基本知识
七个开法者经常忽略或误用的JavaScript基本知识 翻译自 http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-ar ...
- tag标签记录
看到项目代码中有一个自定义的tag标签,想起以前自己写过的标签,竟然忘记的差不多了,手一痒,自己写个简单的tag标签,回顾一下历史知识 首先建一个servlet工程,然后写个index.jsp,项目跑 ...
- launch failed.Binary not found
1.在eclipse官网中下载已经集成了CDT的eclipse.(http://www.eclipse.org/downloads/download.php?file=/technology/epp/ ...
- Android与js交互实例
Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true Android(Java)与JavaScript(HTML) ...
- C语言序列点浅析
摘要: 现行国内的C语言教材普遍不介绍序列点,这使得读者只能“死记硬背”有序列点表达式的求值顺序,不仅造成了读者对C语言知识的认知残缺不全,而且也影响了读者学习的积极性.本文总结了序列点的作用,即表达 ...
- C语言之printf函数
一 基本用法 格式化控制符:%d %c %ld %lf 意思是:相当于在要输出的语句里面挖了一个坑,也就是在内存中开辟空间,然后再那个坑的位置(也就是开辟好的空间),填上你想要显示的值 printf ...
- AI(三):微信与luis结合(上)
目录 基本原理 公众号申请及配置 验证服务器有效性 微信请求消息类型 基本原理 基本原理如上图:腾讯微信服务器就相当于一个转发服务器,终端(手机.Pad等)发起请求至微信服务器,微信服务器然后将请求转 ...
- SqlServer创建数据表描述及列描述信息
SqlServer创建数据表描述及列描述信息 Intro Q: 为什么要创建描述信息? A: 鼠标悬停在对应表和列上时,会出现描述信息,可以提高工作的效率,借助工具我们根据数据表可以生成Model,可 ...
- jq屏蔽f5
//屏蔽F5 $(document).ready(function () { $(document).bind("keydown", function (e) { e = wind ...