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

一:移动端的屏幕大小不能算作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. ios学习笔记(一)之Object-C

    一:Objective-C语言基础 二:Objective-C类与继承和协议 一:Objective-C语言基础: 1.1)#import 包含头文件  与#include 作用相同 1.2)Obje ...

  2. jquery animate 详解

    一.前言 继上一篇文章jquery stop的探索之后,我们继续对jquery动画animate的研究. 从stop给出参数我们就知道,它适合你去立即停止或者立即结束当前动画,清除或者继续非当前的动画 ...

  3. Redis协议详解

    smark Beetle可靠.高性能的.Net Socket Tcp通讯组件 支持flash amf3,protobuf,Silverlight,windows phone Redis协议详解 由于前 ...

  4. Closures in OOC

    Closures in OOC 接上一篇Complexity Behind Closure,这次来专注于Rock是如何在C里实现Closure的. 这篇文章同时发布在Github上. Block as ...

  5. GetWindowRect和GetClientRect的区别详解

    一:关于坐标 MFC中绘图时经常涉及到坐标计算,GetWindowRect和GetClientRect这两个函数,是获取逻辑坐标系中窗口或控件(其实也是窗口)大小和坐标的常用函数了,有什么不一样的? ...

  6. PostgreSQL9.1 with PostGIS 2.1.4 for mapping coordinates on linux/ubuntu 已经打包成deb 可下载

    For location based service, I try to use postgresql with postgis. You can download postgis from here ...

  7. MySQL模式 : Strict Mode

    I. Strict Mode阐述 根据 mysql5.0以上版本 strict mode (STRICT_TRANS_TABLES) 的限制: 1).不支持对not null字段插入null值 2). ...

  8. Android NDK 开发中 adb logcat 命令的使用

    一.LogCat 存储在一个叫做 circular memory buffers 的缓冲中. 平时常用的都是通过eclipse 自带的 logcat 插件查看 logcat ,其实也可以通过命令来导出 ...

  9. qt的安装及连接sql使用注意

    qt安装与使用 今天写下qt使用的注意事项,qt-project.org上已经更新了qt5的相关库,但是建议不是很熟系qt的朋友,或者说想使用传统qt api而不是qml的朋友, 继续下载老版本4.8 ...

  10. dll导出命名空间下的c风格函数陷阱

    1.编译阶段,如果不是重载,那么C风格的同名函数与C++风格的同名函数,就会报编译错误.error C2084: function 'int Test(void)' already has a bod ...