发现一个更简单的解决方法，加上一条属性即可。x5-video-player-type=”h5″。通过设置这个属性，让video开启同层H5播放器。另外在X5内核里，video是单独的一个view，会覆盖在任何元素之上，据说是为了统一用户体验，加上这个属性之后，也可以让其他元素浮在video上面了。
经过测试，在IOS设备，依然还需要添加如下属性
1 x-webkit-airplay=”true” playsinline webkit-playsinline=”true”
<video id="video" src="mp4.mp4" x-webkit-airplay="true" playsinline webkit-playsinline="true" x5-video-player-type="h5"></video>
另外还有几个属性 x5-video-player-fullscreen=”true”，视频播放时将会进入到全屏模式。
x5videoorientation，声明播放器支持的方向，可选值： landscape 横屏, portraint竖屏 ，此属性只在声明了x5videoplayertype=”h5″情况下生效。
1 <video src="m.mp4" playsinline="true" webkit-playsinline="true" 2 x-webkit-airplay="true" x5-video-player-type="h5" x5-video-orientation="h5" 3 x5-video-player-fullscreen="true" preload="auto" style="object-fit:fill;"></video>
preload="auto" 开启视频缓冲，页面加载完即加载视频
webkit-playsinline="true" 控制当前视频在当前设置的div里面播放，不脱离文档流
x-webkit-airplay="true" 支持Airplay的设备
x5-video-player-type="h5" 开启同层播放器，取消播放器的默认的播放按钮和播放器控制器控制面板，整个页面只保留微信默认自带的返回和关闭菜单
x5-video-player-type="h5" x5-video-player-fullscreen="true" 同层播放器设置类型为h5和设置视频播放为全屏幕
style="object-fit:fill;" css3样式设置填充整个屏幕
通过属性的设置和样式的控制让视频全屏显示。
请看demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style>
*{margin:0;padding: 0}
html,body,video{ 100%;height: 100%; position: relative;overflow: hidden;}
video{ object-fit: cover;}
div,#endBtn{ position: absolute; 100px;height: 100px; left: 50%;top: 50%; margin-left: -50px;margin-top: -50px; background: red;z-index: 100;color: #fff;text-align: center;font-size: 14px; line-height: 100px;border:none;
transition: all 1s ease;-webkit-transition: all 1s ease;
}
div.move{
transform: translate3d(0,-688px,0);
-webkit-transform: translate3d(0,-688px,0);
}
#endBtn{
transition: all 1s ease;-webkit-transition: all 1s ease;
transform: translate3d(0,688px,0);
-webkit-transform: translate3d(0,688px,0);
}
#endBtn.move{
transform: translate3d(0,0px,0);
-webkit-transform: translate3d(0,0,0);
}
</style>
<body>
<div id="div">点击播放</div>
<video id="video" src="http://itakeo.com/down/video/mp4.mp4" poster="poster.jpg" muted x-webkit-airplay="true" playsinline webkit-playsinline="true" x5-video-player-type="h5" ></video>
<button id="endBtn">再次播放</button>
</body>
<script>
div.ontouchend = div.onclick = function(){
this.classList.add('move')
video.play()
}
endBtn.ontouchend = endBtn.onclick = function(){
this.classList.remove('move')
video.play()
}
video.addEventListener('ended',function(){
endBtn.classList.add('move')
})
</script>
</html>
更多关于关于iOS video标签限制和支持格式
请参考Apple文档
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1
2017-12-06 23:54:32