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 ...
随机推荐
- [2014-12-29]使用Enum位模式进行多重状态(或权限)管理
前言 对于Enum在AspNet Mvc中的应用,我之前提到一种扩展,如何在 Asp.net Mvc 开发过程中更好的使用Enum.这里将介绍另一种更好的使用Enum的方法. Enum定义 以一个代表 ...
- JavaSE(八)之集合概述
前几天其实一直在学习关于linux的内容和kvm虚拟化的知识.今天有时间来回顾一下集合相关的知识,接下来我将带大家一起来回顾一起集合关联的知识. 不要辜负自己花费时间做的事情,只有用心才能得到真心的回 ...
- Vue相关(过渡动画)
Vue 过渡 && 动画 一.CSS过渡 1.transition标签可以用来封装需要过渡的元素,添加entering/leaving 过渡, 条件是: (1)使用条件渲染语句 v-i ...
- TFLearn构建神经网络
TFLearn构建神经网络 Building the network TFLearn lets you build the network by defining the layers. Input ...
- 记一次wiki数据爬取过程
最近有个爬取各国领导人信息的奇怪需求,要求百度和维基两种版本的数据,最要命的还要保持数据的结构不变.正好印象中隐约记得维基有专门的领导人列表页,不考虑爬取下来的格式不变的话应该很好爬的样子. 首先思路 ...
- VIN码识别对汽车行业的应用
汽车VIN码识别: 识别系统到底是什么呢?来~大家往下看,这是易泊时代科技有限公司通过多年的ocr识别技术,与汽车Vin码识别/车架号识别系统相结合,针对机动车配置参数等信息的查询及采集而推出的一款V ...
- 探索JSP中的 "9大内置对象!"
1.什么是JSP内置对象? jsp内置对象就是Web容器创建的一组对象,我们都知道Tomcat可以看成是一种Web容器,所以我们可以知道所谓的内置对象Tomcat创建的,使用内置对象时可以不适用new ...
- 关于C语言
对于C语言方面 觉得自己在数组方面比较薄弱,寒假之前也借了一些书关于C语言的希望能在家里好好看看,也看了差不多两三百页,视频没怎么看,看了七八集,希望学一些深入的语法或者说是算法.
- 201521123118《java程序与设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- Sublime Text 2 -Sidebar 背景色调整为黑色
Sublime Text 2 编辑器: Ctrl+` 输入安装代码,安装package control 插件 ctrl+shift+P : Package install 为什么装不上了呢?出现了什么 ...