微信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 

?

1 2 3 4 5

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

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 

不保证哪天微信更新或系统更新后又失效。如果有问题，请留言