中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑:

一:移动端的屏幕大小不能算作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自动播放问题的更多相关文章

  1. 关于移动端audio自动播放问题

    本人小白全栈一枚,给公司写了一个监控中心,要求严重报警的时候需要触发音频播放,于是就有了以下的折腾. 刚开始一切都很顺利,自然而然的写了以下代码. <audio id="myaudio ...

  2. video 在iphone手机的ios系统和微信端无法自动播放

    描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...

  3. HTML5中的audio在手机端和 微信端的自动播放

    再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...

  4. iOS下Audio自动播放(Autoplay)音乐

    前几天做了一个H5活动页面,产品要求初始化播放音乐,因晓得H5 Audio标签支持Autoplay就没在意. 完了在手机上测试,发现手机上打开页面死活就是不会自动播放,点击播放按钮才可以播放,很是纠结 ...

  5. html5 -audio-移动端如何自动播放

    最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用,对于audio相关的常用知识点以及一些相关的问题如下: <audio id="audios" ...

  6. ios设置音乐audio自动播放

    因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...

  7. autoplay移动端不能自动播放

    本文总结自:https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad 首先,自动播放 ...

  8. 微信audio自动播放(ios播放问题)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. audio标签的自动播放(ios)

    0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.c ...

随机推荐

  1. webservice 第一节 .net SoapHeader验证

    在工作中经常用到webservice,在.net 开发中经常用到webservice,在java开发经常用到cxf. 今天闲置没事就介绍下 .net webservice中常用到 soapheader ...

  2. HTML5学习+javascript学习:打飞机游戏简介以及Model层

    本着好记性不如烂博客以及分享成功的喜悦和分享失败的苦楚,今天我来分享下一个练手项目:打飞机游戏~从小就自己想做游戏,可是一直没有机会.HTML5给了我们这个平台,这个平台可以有很多以前想都不敢想的东西 ...

  3. 当ArcGIS10.2遇到Teradata

                                    随着计算机技术的不断发展,GIS技术也紧跟IT技术的热潮,从三维技术.到移动技术,从大数据技术到云计算技术,只要IT有的新技术,Esri ...

  4. 怎样清除SWAP里的文件

    在vim 编辑一个文件时断了网,文件就留在SWAP里,但我再vim这个文件保存后,再打开时又提示SWAP里有这文件了,此时swapoff -a后再ls -al查看,把文件所在目录里*.swp结尾的文件 ...

  5. MVC实现省级联动

    前言 省级联动的效果,网上现成的都有很多,各种JS实现,Jquery实现等等,今天我们要讲的是在MVC里面,如何更方便.更轻量的实现省级联动呢? 实现效果如下: 具体实现 如图所示,在HTML页非常简 ...

  6. 在React+Babel+Webpack环境中使用ESLint

    ESLint是js中目前比较流行的插件化的静态代码检测工具.通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误.使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大.越来越 ...

  7. Js-Html 前端系列--可伸缩菜单

    一个非常经典的Demo,自行开发可以扩展. <head> <title></title> <style type="text/css"&g ...

  8. MyBatis 框架笔记

    Mybatis 框架笔记   ------技术源于热爱! 获取更多内容请关注小编的个人微信公众平台 1       Mybatis入门 1.1     单独使用jdbc编程问题总结 1.1.1  jd ...

  9. 教你成为全栈工程师(Full Stack Developer) 一-各显神通总结八大类编程语言的区别

    为了能在最快的时间里理解更多语言的相同点和不同点,我用大家最熟悉的Hello World来展示一下各个语言的奥妙   请尊重原创,转载请注明来源网站www.shareditor.com以及原始链接地址 ...

  10. 学习Sass(一)

    一.什么是sass? 写过css的都知道,css是用来改变页面样式的.但它不是一种编程语言,没有变量,函数,继承等功能,只能一条条抒写样式语句很死板.在这个工具决定效率的时代,这是不能容忍的事情.怎样 ...