APP、M站下的H5Video标签问题
- 全屏播放、竖屏和横屏
- 封面图问题
- 自动播放
- 直播
- html5和flash的播放源选择
全屏播放：
APP下，Android手机不支持全屏，IOS只支持竖全屏
M站下，根据不同浏览器，可能有不同表现：例如UC浏览器是支持横竖全屏的，但是原生Safari则不支持
结论：Video标签全屏依靠浏览器（APP）的控制，需要关注APP是否设置禁用了相应的接口。否则只能用CSS或者JS来监测全屏再Hack处理。
video全屏的处理
IOS自动竖全屏
ios下设置了webkit-playsinline="true" playsinline 以后，就可以不全屏播放
封面图问题
在ios下，视频被嵌入后，媒体的元数据加载完成后，会以全屏的形式显示出来，或者加个poster，可以看到画面。但在android下，多数机子是不显示视频画面的，要不就是显示一个黑色的还不是全屏的播放控件，即使及加个poster封面也不济于是。因为poster在android兼容的并不好，不如在视频上层加个div铺张图片，这个比较好的处理方式应该是：视频上加一层div做封面，由于android不允许视频上层有东西，所以首先将视频设为的width：1px，当播放后，上层的封面remove掉，同时width：100%或者你想要的宽度。
自动播放：
在Android下无法通过设置autoplay，在IOS上，除非是无声音，否则无法自动播放。（IOS新法案）。如果想用js控制播放，也必须要用户第一次点击了屏幕后才可以进行(touchstart事件)
至于「用户主动操作」具体指的是哪些行为，苹果官方有详细的说明：
- 点击视频播放按钮；
- 触发
touchend、click、doubleclick或keydown事件，且在事件处理函数中直接调用video.play()方法。显然，button.addEventListener('click', () => { video.play(); })满足要求；而video.addEventListener('canplaythrough', () => { video.play(); })不满足要求；值得注意的是，上面讨论的是 iOS 自带 Safari 的视频播放政策。对于 iOS APP 而言，开发者在给 webview 设置
mediaPlaybackRequiresUserAction和allowsInlineMediaPlayback属性之后，页面中的` 标签就可以通过autoplay和webkit-playsinline` 属性来启用自动播放和内联播放功能。
使用折中方案：当用户第一次touch的时候，触发play，让视频播放。同时设置playsinline和autoplay方法，提供给安卓全屏
window.addEventListener('touchstart', function videoStart() {
hidePlayIcon();
$('#videosrc')[0].play();
this.removeEventListener('touchstart', videoStart);
});其他问题：
直播场景下尝试过优酷打通，但是没试过直接做成直播平台的方案。
HTML5和Flash选择，通常而言，flash播放是做为HTML的降级处理。也可以通过组件库（像video.js）来帮忙解决。
附：友军的播放器选择~
手淘的历程 — 参考FED文章
- 原生 HTML5 video 标签
- Android 5.3.2 版本之后的 UC 内核增强 SAC 播放器
- Android 5.4.9 版本之后的 UC HAC 播放器
- Android 5.3.2 版本之前的 Glue native 播放器
- Android 5.3.2 版本及其之后的 PlayBuddy 播放器
附：Video标签的增强库~
video的组件vedio.js 和 player.js