一种解决h5页面背景音乐不能自动播放的方案
- 场景:微信、浏览器、App
- 普通解决方案:采用audio标签的autoplay属性
- 现象:
- 大部分IOS系统和少部分Android微信不支持自动播放
function audioAutoPlay() {
var audio = document.getElementById('bg-music');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});
- 部分Android浏览器和所有IOS下Safari浏览器不支持自动播放
- 部分App不支持webview音乐自动播放
function autoPlayMusic() {
// 自动播放音乐效果,解决浏览器或者APP自动播放问题
function musicInBrowserHandler() {
musicPlay(true);
document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
// 自动播放音乐效果,解决微信自动播放问题
function musicInWeixinHandler() {
musicPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
musicPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
var media = document.querySelector('#bg-music');
if (isPlay && media.paused) {
media.play();
}
if (!isPlay && !media.paused) {
media.pause();
}
}
一种解决h5页面背景音乐不能自动播放的方案的更多相关文章
- 【转】一种解决h5页面背景音乐不能自动播放的方案
原文:http://www.cnblogs.com/wmhuang/p/5452259.html --------------------------------------------------- ...
- H5中背景音乐无法自动播放问题
苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载 ...
- 关于h5中背景音乐的自动播放
音乐的自动播放属性,这里也介绍一下: <audio controls="controls" autoplay="autoplay"> <sou ...
- 解决ios下的微信打开的页面背景音乐无法自动播放
后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监 ...
- 解决ios下的微信页面背景音乐无法自动播放问题
在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误 ...
- 【转】h5页面audio不自动播放问题
1.audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload ...
- 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放
我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...
- H5页面背景音乐,C33 360°旋转效果
在做H5页面的时候,经常会需要用到背景音乐,比如电子贺卡.动态音乐相册等,右上角有个360°旋转的音乐图标,点击可以控制音乐是否播放,那这个效果是如何实现的呢?我现整理了一下代码: Demo 点击 ...
- PHP解决h5页面跨域
前端h5 页面请求后端接口会出现跨域, PHP 只需三行代码即可解决 //解决前端跨域(h5页面) header("Access-Control-Allow-Origin:*"); ...
随机推荐
- 微信平台BAE
http://www.2cto.com/kf/201405/299487.html http://blog.csdn.net/lyq8479/article/details/26104667 http ...
- QT显示如何减轻闪屏(双缓冲和NoErase)
很多同志在些QT 程序后会遇见闪屏的问题, 有时速度非常快,但毕竟影响了显示效果,如何做到减轻屏幕抖动或闪屏呢?我曾试过如下的办法:1.使用双缓冲. 比如我们在一个Widget里面绘多个图的话, 先创 ...
- java多线程同步
一篇好文:java多线程机制同步原则 概括起来说,Java 多线程同步机制主要包含如下几点:1:如果一个类包含一个或几个同步方法,那么由此类生成的每一个对象都配备一个队列用来容纳那些等待执行同步的线程 ...
- Openstack命令收集
查看rabbitmq 队列 rabbitmqctl list_queues 查看keystone的用户 keystone user-list 查看keystone endpoint keystone ...
- smarty如何处理状态值的显示
比如状态,有效或者无效.这个数据库中保存的是1或者2这样的字段. 显示在列表的时候不能是1或者2吧. 以前,我都是在后台foreach,处理的.感觉处理之后,前台就不灵活了.这个值就被替换成了文字. ...
- Android应用开发基础篇(1)-----Button
Android应用开发基础篇(1)-----Button 一.概述 Button,顾名思义就是按钮的意思,它主要的功能是响应用户按下按钮时的动作. 二.应用 新建一个工程, ...
- ios7 UIScrollView 尺寸问题
假设在UINavigationController内设置一个UIViewControlller,而UIViewController的第一个子视图是UIScrollView的话,UIScrollview ...
- c语言中重要函数
gets函数,从标准输入读取一行文本,一行输入由一串字符组成,以一个换行符结尾: gets函数丢弃换行符,并在该行的末尾存储一个NUL字符(类似‘\0’), 然后返回一个非NULL值. 当gets函数 ...
- if...else if...else
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace prog ...
- Codeigniter-实现权限认证
两种方法 钩子函数 集成核心Controller 方法一,钩子函数: 一直没找到CI的权限认证扩展,以前好像找到过一个老外的扩展,不过不怎么好用,现在记不清了,后来仿着jsp firter的方式用CI ...