前几天做了一个H5活动页面,产品要求初始化播放音乐,因晓得H5 Audio标签支持Autoplay就没在意。 完了在手机上测试,发现手机上打开页面死活就是不会自动播放,点击播放按钮才可以播放,很是纠结。 然后网上查了下发现iOS上禁止了Audio的Autoplay属性,原因如下:

User Control of Downloads Over Cellular Networks

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

This plays the movie: <input type="button" value="Play" onclick="document.myMovie.play()">

This does nothing on iOS: <body onload="document.myMovie.play()">

详细查看Safari HTML5 Audio and Video Guide

借助Google翻译了解到:苹果为了用户着想,禁止了Autoplay和JS "onload" 加载播放。

官方禁用,和产品沟通了下,产品发了"友站"网页给我说是可以让我参考下,确实可以,但代码太多,弃之。

还是去http://search.yahoo.com找答案了,在IBM开发者找到了答案:

// run on page load
var audio = document.getElementById('audio');
jQuery.ajax({
url: 'ajax.js',
async: false,
success: function() {
audio.play(); // audio will play in iOS before 4.2.1
}
});

详细查看IBM开发者

但iOS4.2.1以后就失效了,现在都iOS8了,真是无语了,但也没找到其它方法,就死马当活马医试一下,结果,神奇的一幕出现了,打开竟然自动播放音乐了,哈哈哈...

不是说失效了么,这是为何呢?哦,刚才只是在微信里打开的,我再用Safari打开就不会自动播放音乐了,还好,我们H5活动仅限微信里面打开。

好了,不过Bug马上又来了,测试发现一台安卓机在微信里打开也不能自动播放,我拿来试了下,确实如此,然后打开"友站"的发现也是不能自动播放,产品确认了下,让参考"友站"的优化一下,就是触摸一下就会自动播放。

document.addEventListener('touchstart', function(){
audio.play();
}, false);

这次是真的好了,除了那台Android5.x系统的手机,其它在微信打开都可以自动播放了。

总结一下吧:

移动端Audio Autoplay
  1. 苹果认为这是种不友好的行为
  2. 安卓同上
  3. 我同上

国内流量很贵的,哎哟我的钱啊。 我们通过"投机"绕过系统限制而达到了目的,这样真的好吗?

这样对用户的体验真的好吗?

我们真的值得这样做么?

iOS下Audio自动播放(Autoplay)音乐的更多相关文章

  1. 微信h5页面audio标签在ios下不能自动播放

    背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...

  2. 解决在ios下不能自动播放音频的问题

    在ios下面是不允许自动播放音频这个操作的,不过我们可以使用微信提供的sdk来做到自动播放音乐的功能 wx.ready(()=>{}) 引入微信的sdk,之后在回调函数里面执行主动触发背景音乐播 ...

  3. 解决ios下audio不能正常播放的问题

    解决ios下audio不能正常播放的问题 ios系统下会自动屏蔽audio标签的自动播放,需要使用一个事件来驱动音频播放 this.$refs.startaudio.addEventListener( ...

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

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

  5. html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)

    // html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...

  6. iOS背景音乐不自动播放

    iOS 内置浏览器safari不允许自动播放音乐.我们需要通过WeixinJSBridgeReady()函数实现自动触发 document.addEventListener("WeixinJ ...

  7. 移动端audio自动播放问题

    中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑: 一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网 ...

  8. H5页面解决IOS进入不自动播放问题(微信内)

    废话少说,直接上代码. 主要还是调用微信的jdk做兼容处理.,安卓可自动播放. ($(function(){ $(function(){ /* ** 复选框*/ $('.ul-radio').on(' ...

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

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

随机推荐

  1. KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序

    在大多数情况下,数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型. 然而,事件处理是一个常常会导致详细数据绑定属性的领域,因为匿名函数通常是传递参数的推荐技术. 例如: <a href=& ...

  2. DPI深度包检测

    最近在读网络协议方面的论文,接触到DPI技术.博主是个小白,这里写些查到的笔记. 原文出处因为比较多,杂乱.百度文库和许多地方都有,就不贴链接了. 1. DPI 全称为"Deep Packe ...

  3. 由于Replication,DBCC Shrink不能收缩Log File

    使用Backup创建测试环境之后,发现testdb的Log File过大,达到400GB,由于测试环境实际上不需要这么大的Log Space,占用400GB的Disk Space实在浪费Disk Re ...

  4. 处理UnicodeDecodeError: ‘XXX' codec can't decode bytes in position...的问题

    错误信息: UnicodeDecodeError: ‘XXX' codec can't decode bytes in position 2-5: illegal multibyte sequence ...

  5. 数据结构:C_链表队列的实现

    数据结构链表形式队列的实现(C语言版) 1.写在前面 队列是一种和栈相反的,遵循先进先出原则的线性表. 本代码是严蔚敏教授的数据结构书上面的伪代码的C语言实现代码. 分解代码没有包含在内的代码如下: ...

  6. AngularJS源码分析之依赖注入$injector

    开篇 随着javaEE的spring框架的兴起,依赖注入(IoC)的概念彻底深入人心,它彻底改变了我们的编码模式和思维.在IoC之前,我们在程序中需要创建一个对象很简单也很直接,就是在代码中new O ...

  7. hibernate笔记--cascade级联以及inverse属性

    cascade : 不管是单向多对一还是一对多,或者是双向的一对多关系,在一的一端映射文件中有一个set标签,在多的一端有many-to-one标签,拿前几篇笔记里讲的Grade和Student举例, ...

  8. 用大白话聊聊JavaSE -- 自定义注解入门

    注解在JavaSE中算是比较高级的一种用法了,为什么要学习注解,我想大概有以下几个原因: 1. 可以更深层次地学习Java,理解Java的思想. 2. 有了注解的基础,能够方便阅读各种框架的源码,比如 ...

  9. String的按值传递,java传参都是传值

    java中对象作为参数传递给一个方法,到底是值传递,还是引用传递? String和int参数传递是按值传递还是引用传递? 一道面试题目,String的传递: public String change( ...

  10. 分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库:ExcelUtility (续篇)

    上周六我发表的文章<分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库:ExcelUtility>受到了大家的热烈支持与推荐,再此表示感谢,该ExcelUtility ...