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 ...
随机推荐
- 又一流氓推广Microsoft Edge,我勒个去
最新的Windows10 的升级也是醉了,不得不吐槽一个非常流氓的浏览器推广:Microsoft Edge(这小婊砸). 为了将之前的历史包袱IE干掉,这次微软也是蛮拼的,直接把IE从电脑里干掉了,你 ...
- Java基础---GUI
第一讲 GUI(用户图形界面) 一.概述 1.GUI:GraphicalUser Interface,即图形用户界面,用于计算机与用户交互的一种方式. 2.计算机与用户交互的两种方式:GUI和 ...
- java锁机制
2.4 锁机制 临界区是指,使用同一个锁控制的同一段代码区或多段代码区之间,在同一时间内最多只能有一个线程在执行操作.这个概念与传统的临界区有略微的差别,这里不想强调这些概念上的差别,临 ...
- mysql 批量插入优化之rewriteBatchedStatements
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt397 介绍MySQL Jdbc驱动的rewriteBatchedStatem ...
- 记一次wiki数据爬取过程
最近有个爬取各国领导人信息的奇怪需求,要求百度和维基两种版本的数据,最要命的还要保持数据的结构不变.正好印象中隐约记得维基有专门的领导人列表页,不考虑爬取下来的格式不变的话应该很好爬的样子. 首先思路 ...
- centos6.6配置rsync+sersync实现实时同步分布式多客户端分发同步
1.sersync项目: sersync项目利用inotify与rsync技术实现对服务器数据实时同步到解决方案,其中inotify用于监控sersync所在服务器上文件系统的事件变化,rsync是目 ...
- CentOS 6.5安装部署Zabbix监控系统
CentOS 6.5安装部署Zabbix监控系统 先说一点废话,我没有用centos7做实验,讲真,centos 7我也不常用,喜欢新版本的同学其实可以尝试下,注意一点的就是centos 6.5只支持 ...
- 通过修改my.ini配置文件来解决MySQL 5.6 内存占用过高的问题
打开后台进程发现mysql占用的内存达到400+M. 修改一下my.ini这个配置文件的配置选项是可以限制MySQL5.6内存占用过高这一问题的,具体修改选项如下: performance_schem ...
- 201521123121 《JAVA程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 所有泛型方法声明都有一个类型参数声明部分(由尖括号分隔),该类型参数声 ...
- 201521123113《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. 使用NetB ...