如何制作一个完美的全屏视频H5
写在前面的话：
最近一波H5广告火爆整个互联网圈，身为圈内人，我们怎能 不！ 知！道！
:( 嘘！真不知道的也继续看下去，有收获 ↓ ）
So，搞懂这个并不难。
这篇文章将带你从头到尾了解H5广告的实现。
本文主要讲一下几个关键点
一、视频内联播放。
-- 想要营造一种文字与视频混排的现象，视频不要影响其他模块
二、视频去控件。
-- 交互视频，不能点击快/慢进或暂停哦
三、去控件全屏播放。
-- 想要模拟 明星给我打电话的体验，不能看到明显的视频播放器
四、视频自动播放。
-- 想要释放用户操作，打开链接就自动播放
五、黑屏问题。
-- 开始播放时，有一段黑屏时间，不能无缝衔接
六、其他属性和方法。
-- 喜欢一个技术，就要了解“她”的全部，这些你也看看呗
一、video 标签内联播放
Video 标签内联播放，需要添加属性：
webkit-playsinline="true" playsinline=“true”
通过上述代码可以达到苹果手机非全屏（内联）播放的效果，安卓上退出全屏后也可以通过底部的播放按钮非全屏播放。
而在 iphone上 默认是全屏播放的。
需要在 Obj-C 里，webview设置allowsInlineMediaPlayback属性为YES
webview.allowsInlineMediaPlayback = YES;
这个需要客户端的同学注意一下。
iOS 10 之前的版本支持 webkit-playsinline，但是加了这个属性后，在 iOS 9 上出现只能听到声音不能看到画面的问题。
为了 兼容ios8、9 需要再加上这个库 iphone-inline-video 一起使用。
[https://github.com/bfred-it/iphone-inline-video]
这里补充一下 iphone-inline-video 使用方法：
1.npm install --save iphone-inline-video
2.使用
iphone-inline-video在iOS 10上会自动禁用。
确保你使用这个playsinline属性。
二、播放视频去控件
实现上图效果，可添加CSS:
此方法仅适用于 非全屏下去掉控件。
三、去控件全屏播放
实现去控件全屏播放步骤：
1、全屏实现：将video视频宽高设置为 100% （全屏）
2、去控件参照上面说的第二步
当然，如果想要实现真正的全屏（顶部的导航消失），针对x5内核的可以使用 同层播放器。
新版的 TBS 内核（>=036849）支持同层播放器的视频播放器，且不需要申请白名单。
只需给 video 设置两个属性 x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"，播放效果自然服帖，效果如上图。
四、视频自动播放
设置属性 autoplay
But , Android始终不能自动播放，需要手动调用：
开发中，遇到一个问题，在微信中始终无法实现自动播放，因为IOS和微信都是要求用户有操作后才能自动播放影音视频。
这里，找到了一个hack方法：
微信中，可以监听 WeixinJSBridgeReady 事件，来实现视频的自动播放
五、黑屏问题
ios 在播放视频时，会出现短暂的黑屏（透屏），再正常显示。
为了避免不正常显示，我们可以这样做：
在视频上层覆盖一个 使用视频第一帧的图片填充的“div 块”，制造播放假象。然后监听事件 timeupdate ，视频播放有画面时移除这个“div块”
六、常用属性和事件
video 支持的属性和事件很多，但在有些属性和事件在不同的系统上跟预想的表现不一致，在尝试比较之后，以下基本可以满足需求：
1、autoplay 属性
<video autoplay="true" />
设置此属性，视频将自动播放。
2、preload 属性
<video preload="auto” />
规定是否预加载视频。
可能的值：
* auto - 当页面加载后载入整个视频
* meta - 当页面加载后只载入元数据
* none - 当页面加载后不载入视频
如果设置了 autoplay 属性，则忽略该属性。
3、timeupdate 事件
监听音频/视频（audio/video）的播放位置发生改变时触发。通常与 video.currentTime 一同使用
4、ended 事件
监听视频播放结束
后记：
网上关于video介绍的文章也挺多，通过搜集和自己的开发经验，这里整理了一些问题：
因为视频是一边播放一边加载，因此不但视频的大小会影响加载体验，视频的清晰度对加载体验影响更大。
建议视频1S平均大小范围控制在0.09~0.17M
视频格式建议使用mp4
如果 在android 环境中，想要隐藏 video 播放器，style属性 这样写：{ position: relative; display: none; z-index: -1; }
参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
https://x5.tencent.com/tbs/guide/video.html