html5的audio标签无法再移动设备上自动播放

做了个微信应用,想加一个背景音乐,使用html5的audio标签在电脑浏览器上上可以自动播放,而在移动设备上无论是设置autoplay属性还是使用js调用play()方法,都不能自动播放,请问有何解决方案。

原因分析

HTML5中的autoplay属性是设置为自动播放。如果设置了该属性,视频或音频将自动播放。
但是需要注意的是部分浏览器比如Safari屏蔽了autoplay属性。因为autoplay在移动网络环境下可能会造成用户流量费剧增。

iOS 3.2之前可以通过js模拟一个点击事件来触发,但在之后的版本中就不再有效了,Safari完全屏蔽了autoplay,除非用户自己点击播放,目前没有其他任何办法可以实现autoplay

在Android的机子是可以实现自动播放的,在iOS的机子里没有办法,可以通过为页面绑定touchstart事件来实现播放。

曲线救国,比如:

 代码如下 复制代码

Create an iframe and set its source to the media file's URL and append the iframe to the body.
var ifr=document.createElement("iframe");
ifr.setAttribute('src', "http://cms.hovertree.com/hovertreesound/hovertreesnow.mp3");
ifr.setAttribute('width', '1px');
ifr.setAttribute('height', '1px');
ifr.setAttribute('scrolling', 'no');
ifr.style.border="0px";
document.body.appendChild(ifr);

时间: 2024-09-20 17:53:07

html5的audio标签无法再移动设备上自动播放的相关文章

关于html5的audio标签音频兼容性问题

问题描述 关于html5的audio标签音频兼容性问题 <!DOCTYPE html> 音频播放测试 您的浏览器不支持 audio 标签. 同样一段代码放桌面测试是没有问题的,放到项目底下,播放器就不好用了(出不来),求前辈们指点一二 解决方案 HTML5中主流的音频格式为:".wav .mp3"两个即可 如果想兼容低一点IE版本,可能会用上".ogg" HTML5不被低版本的浏览器所支持 音频格式由于浏览器有版权原因有不同要求 当前兼容性最好解决方案是

视频-html5的video标签不能再苹果手机中播放是怎么回事

问题描述 html5的video标签不能再苹果手机中播放是怎么回事 我在页面中使用video标签,电脑浏览器和安卓的都能正常播放,在ios下面只播放了5秒让后页面就一直卡住过不去了,是新版的ios不支持video标签了吗,还是ios下要改动兼容性,下面是我的简写代码... <video width="600" height="450" controls="controls" preload="preload" poste

html5使用Audio标签打造音乐播放器的例子

这个是我们今天的重头戏,也是一切的根源,使用HTML5的audio标签去打造播放器,在用这个之前我们需要了解些audio标签的基本用法. 你可以这样: <audio controls>   <source src="horse.ogg" type="audio/ogg">   <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio

Android EMError中那一个错误是用户在别的设备上更改了密码, 导致此设备上自动登陆失败;

问题描述 error == EMError.USER_REMOVED是账号被移除,那请问EMError中哪一个错误是用户在别的设备上更改了密码,导致此设备上自动登陆失败? 解决方案 修改密码只能调rest来重置,没有对应的密码修改的错误,重置后,重新进入应用,会提示连接不到服务器.

解决video标签在安卓webview下无法自动播放问题_Android

在安卓webview下 html5 的 video 设置autoplay 属性 或在document ready中使用play方法 都不能使它自动播放 只能用webview的onPageFinished方法来解决此问题,代码如下: 复制代码 代码如下: mPlayer.setWebViewClient(new WebViewClient() { // autoplay when finished loading via javascript injection public void onPag

解决video标签在安卓webview下无法自动播放问题

在安卓webview下 html5 的 video 设置autoplay 属性 或在document ready中使用play方法 都不能使它自动播放 只能用webview的onPageFinished方法来解决此问题,代码如下: 复制代码 代码如下: mPlayer.setWebViewClient(new WebViewClient() { // autoplay when finished loading via javascript injection public void onPag

HTML5 Audio标签方法和函数API介绍

 问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数API介绍 问说网 • 2014-06-19 09:53:52 • 3561 浏览 文章目录 audio常用属性 audio音乐格式的支持 audio属性 参数说明 最近想弄一个类似在线播放MP3的应用,刚开始想用flash播放器,但是已经很就没有弄flash了,用起来很老火,于是想到了HTML5的audi

HTML5音频audio详解

直到现在,仍然不存在一项旨在网页上播放音频的标准. 目前,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频的标准方法. audio 元素能够播放声音文件或者音频流. 当前,audio 元素支持三种音频格式:   IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis   √ √ √   MP3 √     √ √ Wav   √ √  

html5-linux系统下的audio标签中文问题

问题描述 linux系统下的audio标签中文问题 我有一个网页用的是html5的audio标签播放音乐,是在我自己的windows服务器下可以正常播放中文音乐,上传到服务器后就不可以了,服务器系统为linux,我试了服务器上的英文名音乐可以播放,但是中文就不可以了,由于是虚拟主机,应该是不可以修改系统设置的,只有修改自己的javascript代码了,纠结了好多天了,网上办法都试了,没找到答案,到底应该怎么做啊!!!! 解决方案 没有人吗? 解决方案二: 不清楚是不是字符集的问题