微信iphone7、 ios10播放视频解决方案 2016.11.10
2017.09.15更新android 自动播放,无控制条,可以设置层级
请查看 http://www.cnblogs.com/luoeeyang/p/7524824.html
2016.11.10日更新以下方法
微信最新出同层播放规范
即使是官方的也无法解决所有android手机的问题。
另外iphone 5 、5s 某些手机始终会弹出播放,请继续采用 “以下是老的解决办法”
文档下载地址:
http://pan.baidu.com/s/1i5uN9Al
==================================以下是老的解决办法======================================
目前主要问题出现在IP7,IOS10的 视频播放问题:主要表现为 无法播放,黑屏,只有声音
以下做法可以解决以上问题:(safira下也可以内嵌播放)
请熟读以下代码,不要直接拿去就用 (完整文件包下载 在文末)
div 请自行引入jQuery 或zepto
<div id="vdBox" class="abs" style="top:0px;width:640px; height:1040px; overflow:hidden; background:#000;"> <canvas id="vdCvs" class="abs" width="640" height="1040"></canvas> <video id="vdDom" class="abs" webkit-playsinline muted style="display:none;top:0px;"><source type="video/mp4"></video> </div> <button id="pp" class="abs" style="top:480px; width:640px; height:60px; font-size:24px; display:none;" >无法自动播放时出现:点我播放</button>
js
function cvPlayer(_vd,_cvs,_fps,_autoPlay,_src) { var _s=this; var ios,ua=navigator.userAgent.toLowerCase(); _s.play=function() { if(ios) { _s.vd.load(); _s.ad.play(); inter=setInterval(function() { _s.vd.currentTime=_s.ad.currentTime>0.1?_s.ad.currentTime:0.1; ctx.clearRect(0,0,640,1040); ctx.drawImage(_s.vd,0,0,640,1040); if(_s.vd.currentTime>=_s.vd.duration) { _s.endF(); } },1000/_fps); //IOS无法自动播放 if(_s.ad.paused){$("#pp").css("display","block");} } else { _s.vd.play(); //Android无法自动播放 if(_s.vd.paused){$("#pp").css("display","block");} else{_s.vd.style.display="block";} } $("#vdBox").css("visibility","visible"); } _s.pause=function() { ios?_s.ad.pause():_s.vd.pause(); } _s.endF=function(e) { if(ios) { clearInterval(inter); document.getElementById(_vd).getElementsByTagName("source")[0].setAttribute("src",""); document.getElementById("_cvsAud").remove(); } else { $("#"+_vd).css("display","none"); } $("#vdBox").css("visibility","hidden"); alert("end") } if(ua.indexOf("android")>=0||ua.indexOf("mobile")<0) { $("#"+_vd).attr("src",_src+"_l.mp4") $("#"+_vd).css({"width":640,"height":1210}) _s.vd=document.getElementById(_vd); _s.vd.addEventListener("ended",_s.endF) ; } else { document.getElementById(_vd).getElementsByTagName("source")[0].setAttribute("src",_src+".mp4") _s.vd=document.getElementById(_vd); _s.ad=document.createElement('audio'); _s.ad.setAttribute("id","_cvsAud"); _s.ad.innerHTML = _s.vd.innerHTML; _s.vd.parentNode.insertBefore(_s.ad, _s.vd); _s.vd.currentTime=0.1 var inter; var ctx=document.getElementById(_cvs).getContext("2d") ios=true; } _autoPlay?_s.play():null return this; }
代码包:(包里的视频压缩比较大有点糊)
http://pan.baidu.com/s/1o7ZCrQ6
不保证哪天微信更新或系统更新后又失效。如果有问题,请留言