H5页面解决IOS进入不自动播放问题(微信内)
废话少说,直接上代码。
主要还是调用微信的jdk做兼容处理。,安卓可自动播放。
($(function(){
$(function(){
/*
**
复选框*/
$('.ul-radio').on('click','li',function(){
$(this).addClass('li-on').siblings().removeClass('li-on');
});
//我知道了 按钮隐藏
$('.i-know').bind('click',function(e){
e.preventDefault();
$('#alert-content,#shadow, .lihua').hide();
});
getSong();
});
function toPercent(data){
var strData = parseFloat(data)*100;
var ret = strData.toString()+"%";
return ret;
}
var allTime , currentTime;
//获取歌曲链接并插入dom中
function getSong() {
var audio = document.getElementById("con-music");
audio.src="/output2/questionnaire/xn-images/audio1.mp3";
audio.loop = true; //歌曲循环
playCotrol(); //播放控制函数
}
//点击播放/暂停
function clicks() {
var audio = document.getElementById("con-music");
$('.icon-music').on('click',function(){
if($(this).hasClass('stop-music')){
$(this).removeClass('stop-music');
$('.img-CD').addClass('cd-rotate');
$('#con-music')[0].play();
dragMove();//并且滚动条开始滑动
}else{
$(this).addClass('stop-music');
$('.img-CD').removeClass('cd-rotate');
$('#con-music')[0].pause();
}
});
}
//播放时间
function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式
var timePlace = document.getElementById(timePlace);
//分钟
var minute = time / 60;
var minutes = parseInt(minute);
if (minutes < 10) {
minutes = "0" + minutes;
}
//秒
var second = time % 60;
seconds = parseInt(second);
if (seconds < 10) {
seconds = "0" + seconds;
}
var allTime = "" + minutes + "" + ":" + "" + seconds + "";
timePlace.innerHTML = allTime;
}
//播放事件监听
function playCotrol() {
var audio = document.getElementById("con-music");
audio.addEventListener("loadeddata", //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)
function() {
// $("#con-music").addClass("").removeClass("color_gray");
// addListenTouch(); //歌曲加载之后才可以拖动进度条
allTime = audio.duration;
// timeChange(allTime, "allTime");
setInterval(function() {
currentTime = audio.currentTime;
var lineWidth=(currentTime/allTime);
// console.log(toPercent(lineWidth));
var lineW=toPercent(lineWidth);
$('.red-line').css('width',lineW)
// console.log(lineWidth*100%);
timeChange(currentTime, "currentTime");
timeChange(allTime, "allTime");
}, 1000);
clicks();
}, false);
audio.addEventListener("pause",
function() { //监听暂停
$(".icon-music").addClass("stop-music");
// $("#control").html("点击播放");
if (audio.currentTime == audio.duration) {
audio.stop();
audio.currentTime = 0;
}
}, false);
audio.addEventListener("play",
function() { //监听播放
$(".icon-music").removeClass("stop-music");
// $("#control").html("暂停播放");
// dragMove();
}, false);
audio.addEventListener("ended", function() {
alert(0)
}, false)
}
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
if(is_weixn()){
wx.ready(function() {
document.getElementById('con-music').play();
autoPlayAudio1();
});
}else{
document.getElementById("con-music").play();
}
}))
// 等待30s
var countDown = 30;
function nextQuestion(obj)
{
// alert(8989);
if (countDown == 0)
{
obj.find('.gray-bg').hide();
obj.find('input[type=submit]').show();
}
else
{
obj.find('input[type=submit]').hide();
obj.find('.sec').text(countDown+'s');
--countDown;
}
setTimeout(function(){
nextQuestion(obj)
},1000)
}
var obj = $('#next');
nextQuestion(obj);
function autoPlayAudio1() {
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});
wx.ready(function() {
document.getElementById('con-music').play();
});
}
/*复选框*/
$('.ul-radio').on('click','li, input ',function(){
$(this).addClass('li-on').siblings().removeClass('li-on');
$(this).find('input[type=radio]').attr('checked','checked');
$(this).siblings().find('input[type=radio]').removeAttr('checked');
});
$('.i-know').bind('click',function(e){
e.preventDefault();
$('#alert-content,#shadow').hide();
});
$('#btn-submit').click(function(){
console.log($("input[name='join_help']:checked").length);
console.log($("input[name='join_clear']:checked").length);
var join_help = $("input[name='join_help']:checked").val(),
join_clear = $("input[name='join_clear']:checked").val();
if (!join_help || !join_clear)
{
$('#alert-content,#shadow').show();
return false;
}
else
{
$.ajax({
url:"<?=Url::to(['questionnaire/save-form'])?>",
type:'post',
dataType:'json',
data:{
_csrf: "<?= Yii::$app->request->csrfToken?>",
'join_help':join_help,
'join_clear':join_clear,
'join_source':'1',
'join_url':'<?=\yii\helpers\Html::encode(Yii::$app->request->getAbsoluteUrl());?>',
'join_type':'101',
'join_scenario':'one'
},
success:function(data)
{
if (data.state === 1)
{
window.location.href = '<?=Url::to('/questionnaire/combine-survey');?>';
}
else
{
alert(data.message);
}
}
})
}
})
</script>
H5页面解决IOS进入不自动播放问题(微信内)的更多相关文章
- 关于微信H5页面开发中音乐不自动播放的解决方法
我想应该有很多人在做H5场景应用.H5微刊.H5微杂志的时候加入背景音乐吧(客户需求),相信很多人一定碰过不能自动播放的时候,即使是相同的iPhone 5s也有不播放的时候,很蛋疼吧!? 之前我的解决 ...
- 微信h5页面audio标签在ios下不能自动播放
背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...
- iOS下Audio自动播放(Autoplay)音乐
前几天做了一个H5活动页面,产品要求初始化播放音乐,因晓得H5 Audio标签支持Autoplay就没在意. 完了在手机上测试,发现手机上打开页面死活就是不会自动播放,点击播放按钮才可以播放,很是纠结 ...
- 解决在ios下不能自动播放音频的问题
在ios下面是不允许自动播放音频这个操作的,不过我们可以使用微信提供的sdk来做到自动播放音乐的功能 wx.ready(()=>{}) 引入微信的sdk,之后在回调函数里面执行主动触发背景音乐播 ...
- 混合app开发,h5页面调用ios原生APP的接口
混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...
- iOS背景音乐不自动播放
iOS 内置浏览器safari不允许自动播放音乐.我们需要通过WeixinJSBridgeReady()函数实现自动触发 document.addEventListener("WeixinJ ...
- ios audio不能自动播放
今天做了一个简单的落地页项目,就是类似于手机微信上经常看到的滑动效果.因为公司要求需要自己开发,所以我就用swiper+swiper.animate开发,开发速度很快,只不过最后音乐哪里出现了一点小b ...
- 解决Chrome浏览器无法自动播放音频视频的问题,Uncaught (in promise) DOMException
转载自:http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许 ...
- H5页面在IOS下不会自动播放音乐的坑
document.addEventListener(‘DOMContentLoaded‘, function () { function audioAutoPlay() { var audio = d ...
随机推荐
- 求最长公共前缀和后缀—基于KMP的next数组
KMP算法最主要的就是计算next[]算法,但是我们知道next[]求的是当前字符串之前的子字符串的最大前后缀数,但是有的时候我们需要比较字符串中前后缀最大数,比如 LeetCode的shortest ...
- [2016-09-23]远程安装、更新windows服务bat脚本分享
话不多说,有兴趣的自己可以仔细研究下涉及的命令:net use.sc.robocopy 脚本 set BuildConfig=[ENV] set BuildExeName=[your_exe_name ...
- django模板(过滤器)
-------------------django内建的过滤器-------------------1.add 使用形式为:{{ value | add: "2"}} 意义:将va ...
- HDU 6184 Counting Stars 经典三元环计数
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6184 题意: n个点m条边的无向图,问有多少个A-structure 其中A-structure满足V ...
- ASP.NET Core 运行原理解剖[5]:Authentication
在现代应用程序中,认证已不再是简单的将用户凭证保存在浏览器中,而要适应多种场景,如App,WebAPI,第三方登录等等.在 ASP.NET 4.x 时代的Windows认证和Forms认证已无法满足现 ...
- 01-TypeScript概述
本篇文章向大家介绍新的TypeScript客户端脚本语言,主要涉及两个方面,一是传统JavaScript语言的弱点,二是TypeScript语言的优势. 一.JavaScript的弱点 1.弱类型,缺 ...
- ServletRequest的一些知识点
浏览器向服务器的请求(浏览器将数据发送给服务器时,数据存放的地方) 请求方式:GET和POST * GET:发送的数据,追加在请求的URL之上 * POST:发送的数据在HTTP请求体中 浏览器发送数 ...
- 团队作业4——第一次项目冲刺(Alpha版本)2017.4.22
昨天来不及编写,这是4月22日的日志,现在补上. 1.开完站立式会议后的合照 2.任务分解图 3.开会讨论的结果,任务分派 队员 今日进展 明日安排 陈鑫龙 原型设计图分析,设计登陆界面原稿 实现登陆 ...
- 团队作业1--团队展示&选题(SNS)
团队名称 SNS (SAME is Not Simple,期待和而不同.共同进步) MEMBER 201421123037(captain) 201421123032 201421123034 20 ...
- 201521123078《java程序设计》第四次总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 继承是面向对象最显著的一个特性.继承是从已有的类中派生出新的类,新的类能吸收已有类的数据属性 ...