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 ...
随机推荐
- Linux 查看进程
1.ps 显示进程信息,参数可省略 -aux 以BSD风格显示进程常用 -efH 以SystemV风格显示进程 -e , -A 显示所有进程 a 显示终端上所有用户的进程 x 显示无终端进程 u显示详 ...
- 使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序
使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻 ...
- 项目管理svn
https://nchc.dl.sourceforge.net/project/tortoisesvn/1.9.6/Application/TortoiseSVN-1.9.6.27867-x64-sv ...
- webservice中jaxws:server 和jaxws:endpoint的区别
今天在学习使用spring+cxf发布webservice时遇到个问题,我原来是用 <jaxws:endpoint id="helloWorld" implementor=& ...
- [ASP.NET MVC]笔记(二) 数据注解和验证
验证注解的使用 1.Required:必须字段 [Required] public string FirstName() { get; set; } 2.StringLength:长度限制,或是可选项 ...
- 四,ESP8266 TCP服务器
我要赶时间赶紧写完所有的内容....朋友的东西答应的还没做完呢!!!!!!!没想到又来了新的事情,,....... 配置模块作为TCP服务器然后呢咱们连接服务器发指令控制继电器吸合和断开 控制的指令呢 ...
- 软工+C(2017第5期) 工具和结构化
// 上一篇:Alpha/Beta换人 // 下一篇:最近发展区/脚手架 工具/轮子 软件工程/计算机相关专业的一个特点是会使用到众多的工具,工具的使用是从程序猿进化到程序员的一个关键要素.软件工程师 ...
- 【集美大学1411_助教博客】团队作业7——Alpha冲刺之事后诸葛亮
写在前面的话 alpha阶段都顺利完成了,大家这次作业完成得都很认真.我觉得通过这些问题,大家既可以回顾自己的alpha阶段,又可以给beta阶段做一些指引.但看了所有组的博客,没有一个组在这些问题之 ...
- 团队作业4——第一次项目冲刺(Alpha版本)2017.4.28
2017.04.28 天气晴朗 东风3级. 时间:上午 9:35 ---10:10分 地点:陆大二楼 会议内容:实验室报修系统项目冲刺Alpha版的的最后一天,大家对现在项目的进程进行了讨论,阐述了各 ...
- Java学习5——标识符和关键字
标识符: 1.Java对各种变量.方法和类等要素命名时使用的字符串序列称为标识符.凡是自己可以起名字的地方都叫标识符,都要遵守标识符的规则. 2.Java标识符命名规则: 标识符由字母.下划线&quo ...