video是HTML5的一个视频媒体标签，其作用是在网页中嵌入指定的视频，video标签的代码结构及参数如下。
HTML代码结构：
<video
controls
autoplay
loop
preload="auto"
poster="img/popup-img.png"
webkit-playsinline="true"
playsinline="true"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x-webkit-airplay="allow"
x5-video-orientation="portraint"
style="object-fit:fill">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg; codecs=dirac, speex">
<p>你的浏览器不支持 <code>video</code> 标签.</p>
</video>参数说明：
controls – 显示标准的 HTML5 视频/音频播放器控制条、控制按钮。
autoplay – 让文件自动播放。
loop – 让文件循环播放。
preload – 属性是用来缓存大体积文件的。它有三个可选值："none" 不缓存、"auto" 缓存、"metadata" 只缓存文件元信息
poster – 视频封面
webkit-playsinlin="true" – 这个属性在 ios 10中设置有用，其他的目前还不起作用，让视频在小窗内播放，也就是不是全屏播放
playsinline="true" – IOS微信浏览器支持小窗内播放
x5-video-player-type="h5" – 启用H5播放器，是wechat安卓版特性
x5-video-player-fullscreen="true" – 全屏设置，设置为 true 是防止横屏
x5-video-orientation="portraint" – 播放器屏幕的方向，landscape横屏，portraint竖屏，默认值为竖屏。
source – 标签是为了能够兼容各种浏览器对不同媒体类型的支持，我们可以用多个<source></source>元素来提供多个不同的媒体类型。支持mp4格式视频流的浏览器可以播放mp4文件，如果不支持，可以播放Ogg文件。
codecs=dirac, speex – 是用来指定播放使用的解码器(codecs); 这样就可以更精确的让浏览器如何播放提供的视频。
特别说明：
1、 webkit-playsinline 和 playsinline 参数使视频播放时局域播放，不脱离文档流，但是前提是需要嵌入网页的APP（比如WeChat微信）中UIwebview的 allowsInlineMediaPlayback = YES 、 webview.allowsInlineMediaPlayback = YES 时才能生效。也就是说如果APP不设置，标签中加入了这两个属性也是无效的，这也就是为什么安卓手机WeChat播放视频时总是全屏，因为APP不支持 playsinline ，而ISO的WeChat支持。
2、如果做全屏直播或者全屏H5体验的用户，ISO需要删除 webkit-playsinline 标签，因为并不支持 false 的属性值，而安卓默认全屏，所以不需要设置。另外，全屏是有播放控件的，无论你是否设置 control 。
