微信h5,背景音乐自动播放
移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐。
既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码:
html:
<audio src="../audio/one.mp3" id="audioPlay"></audio> js:
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: data.configMap.appId, // 必填,公众号的唯一标识
timestamp: data.configMap.timestamp, // 必填,生成签名的时间戳
nonceStr: data.configMap.nonceStr, // 必填,生成签名的随机串
signature: data.configMap.signature,// 必填,签名,见附录1
jsApiList: [
"onMenuShareTimeline",//分享朋友圈接口
"onMenuShareAppMessage"//分享给朋友接口
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function(){
var audio = document.getElementById("audioPlay");
audio.play()
})
wx.config配置成功之后执行wx.ready,在ready里让音乐播放就可以达到自动播放的要求,遗憾的是这个方法只能让音乐自动播放,视频还是需要触发才能自动播放...
微信h5,背景音乐自动播放的更多相关文章
- 新版微信h5视频自动播放
微信最近升级了新版本,直播视频不能自动播放,经过了一番探索,发现下列方法可以实现自动播放. if (typeof WeixinJSBridge == "undefined") { ...
- 解决 iPhone 微信 H5 无法自动播放音乐问题
使用 wx sdk 在html导入sdk js文件.(如果网站是https导入的sdk也要使用https!) 然后在 wx.ready 中设置 play 方法并复制给全局变量 fm,当需要使用的时候再 ...
- H5背景音乐自动播放(兼容微信IOS,进程后台切换自动停止播放,本文例子为Vue写法)
<template> <audio src="./static/music.mp3" id="bgMusic" preload="a ...
- video 在iphone手机的ios系统和微信端无法自动播放
描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...
- iOS 微信 音频 视频自动播放
iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5的audio在ios系统的微信上不能自动播放的问题
前几天有个需求,要在H5页面中添加背景音乐,本以为很easy,却也踩了一些坑,废话不多说,进入正题: 撸完代码测试的时候才发现在安卓手机上背景音乐可以正常播放,但在iphone里的微信和safari中 ...
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...
- HTML5中的audio在手机端和 微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...
随机推荐
- 《程序设计入门——C语言》翁恺老师 第五周编程练习记录
1 素数和(5分) 题目内容: 我们认为2是第一个素数,3是第二个素数,5是第三个素数,依次类推. 现在,给定两个整数n和m,0<n<=m<=200,你的程序要计算第n个素数到第m个 ...
- java第7次作业
interface Pet{ public String getName() ; public String getColor() ; public int getAge() ; } class Ca ...
- vmware克隆虚拟机后进行网络配置
1.首先将虚拟机网络模式选为NAT模式 2.点击高级,查看MAC地址 然后编辑:/etc/udev/rules.d/70-persistent-net.rules 其中teh是网卡的名称,每一次克隆新 ...
- 活代码LINQ——03
一.主模块代码: 'Fig.4.13:GradeBookTest.vb 'GradeBook constructor used to specify the course name at the 't ...
- .NET界面控件DevExpress发布v18.2.8|附下载
DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...
- C# XML反序列化与序列化举例:XmlSerializer(转)
using System; using System.IO; using System.Xml.Serialization; namespace XStream { /// <summary&g ...
- Beta冲刺四
1.团队TSP 团队任务 预估时间 实际时间 完成日期 对数据库的最终完善 120 150 12.2 对学生注册功能的完善--新增触发器 150 140 11.29 对教师注册功能的完善 150 13 ...
- 使用PuTTY软件远程登录root被拒:access denied
PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件. 使用PuTTY软件远程登录root时,提示:ACCESS DENIED,很有可能是由sshd的默认配置造成的. 可以 ...
- puts方法要点
puts是print string的缩写.尽管没有直观的表示会调用换行符,但是puts会这样做:如同print,打印用户的数据,之后自动地转到新一行.假如让puts打印已经以换行符结束的一行,它不会再 ...
- Beta冲刺 3
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10116813.html 作业博客:https://edu.cnblogs.com/campus ...