最近做微信内H5分享页<内嵌视频>，适配移动端时，欲哭无泪，各种坑。来，现在开始填坑。
移动设备：iPhone 6s(ios 11.1)，GIONEE S10(Android 7.0)。
自动播放
PC端视频自动播放，在video标签里加上“autoplay”属性即可；但该属性在移动端不兼容（移动端为了避免浪费用户的网络流量，默认不允许媒体文件自动播放）。
<video
id="video" autoplay
style="position: absolute; width: 70%; height: 70%; top: 15%; left: 15%;"
src="http://qn.media.epub360.com/materials/video/75d5c1fe97ac5d6af2f4ff3d851353b0.mp4_origin.mp4"
poster="http://qn.media.epub360.com/materials/video/75d5c1fe97ac5d6af2f4ff3d851353b0.mp4_video0.png">
</video>
☆ 对于Android手机来说，即使 video.play() 也是不能自动播放的，必须有用户的主动触发，比如触摸了屏幕，有click或者touch事件产生。播放时，video 显示默认控制条（如图），Andriod手机控制条样式各有不同。
☆ 但上面的代码，对于iPhone手机来说，即使触发了click或touch事件，也不能够自动播放。要想让视频在iPhone手机微信里自动播放，必须在微信JSAPI的WeixinJSBridgeReady 里调用 video.play() 才能生效。（默认全屏播放；Android手机不适用）
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('video').play();
}, false);
☆ 或者video标签加上 controls 属性，调出控制条，也可播放。iPhone上默认全屏播放，Android上默认在video大小区域内播放（Android 6.0以上，可以实现视频非全屏播放）。
☆ 比较好的办法是，设置封面，引导用户点击封面，触发click或touch事件，调用video.play() 播放视频，给用户自动播放的错觉。iPhone手机上默认全屏播放，Android手机上默认在video大小区域内播放。此时，如果在video上层摆放UI元素，无论是Android还是iPhone，video播放时video默认显示在最上层。
<div id="play"></div>
#play {
position: absolute;
left: 50%;
top: 50%;
z-index: 10;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: skyblue;
}
document.getElementById('play').onclick = function() {
video.play();
}
非全屏播放 (IOS)
webkit-playsinline playsinline：视频播放时局域播放，不脱离文档流（也就是UI控件可以呈现在视频层上）。但这个属性比较特别，需要嵌入网页的APP，比如WeChat中的UIwebview设置 allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。也就是说，如果APP中不设置，在页面中加了webkit-playsinline playsinline属性也无效。IOS中的WeChat支持。Android 不支持。 但Android 6.0以上，可以实现视频非全屏播放。
同层H5播放器(Android)
☆ 隐藏播放器控件
x5-video-player-type：启用同层H5播放器，就是在视频全屏的时候，UI控件可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放也叫做沉浸式播放，播放时类似全屏，但已经除去了control和微信的导航栏，只剩下“X”“>”两个按键。目前同层播放器只在Android(包括微信)上生效，暂时不支持IOS。IOS中，video标签去掉controls 属性即可隐藏播放控件。（Android默认全屏会使一些界面操作被阻拦，并且UI控件在视频层下面，类似直播弹幕的功能就无法实现，此时可以使用同层播放器来解决这个问题。）
☆ 横竖屏
x5-video-orientation：声明播放器支持的方向，默认portraint 竖屏，landscape 横屏。直播或全屏H5一般都是竖屏播放，这个属性需要 x5-video-player-type 开启H5模式(x5-video-player-type = "h5")。
☆ 全屏设置
x5-video-player-fullscreen：设为true的时候，按照视频本身宽高比例(以宽度为准)播放，若想让视频填充整个video区域，需要添加 style= "object-fit: fill;" 属性；不设置该属性时，视频默认撑满video区域，但上下左右会有白边或黑边，添加 style= "object-fit: fill;" 属性时，上下还会有肉眼可见白边。
x-webkit-airplay= "true"，该属性暂时不知道作用。
了解
☆ preload ：规定在页面加载后载入视频。如果设置了autoplay属性，则忽略该属性。
属性值：auto — 当页面加载后载入整个视频；
meta — 当页面加载后只载入元数据；
none — 当页面加载后不载入视频。
☆ muted：设置该属性后，规定视频的音频输出为静音模式。
☆ poster ：设置播放器初始默认显示图片。
☆ autobuffer ：设置为浏览器缓冲方式，true为即使没有设置自动播放也会自动开始缓存，一直缓存到资源缓存完整；不设置autoplay属性才有效。
☆ timeupdate 方法：当第一次播放视频时(IOS)，如果网络慢，视频从开始播到能展现画面会有短暂的黑屏(处理视频源数据的时间)，为了避免这个黑屏，可以在视频上加个div浮层(可以是假的视频第一帧)，然后用timeupdate方法监听，视频播放及有画面的时候再移除浮层。
video.addEventListener('timeupdate', function() {
if(!video.isPlayed && this.currentTime>0.1) {
$('.pageStart').fadeOut(500);
video.isPlayed = !0;
}
})
最后，来个完整版：
<video
id="video"
preload="auto"
autobufer="true"
webkit-playsinline playsinline
x5-video-player-type="h5"
x5-video-orientation="portraint"
x5-video-player-fullscreen="true"
x-webkit-airplay="allow"
style="object-fit:fill;position: absolute; width: 70%; height: 70%; top: 15%; left: 15%;"
src="http://qn.media.epub360.com/materials/video/75d5c1fe97ac5d6af2f4ff3d851353b0.mp4_origin.mp4"
poster="http://qn.media.epub360.com/materials/video/75d5c1fe97ac5d6af2f4ff3d851353b0.mp4_video0.png">
</video>