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

不保證哪天微信更新或系統更新后又失效。如果有問題，請留言