H5 video标签 全屏播放各属性测试+兼容处理记录

video标签真是个神奇的属性，每次处理兼容都搞得人很头疼，H5移动端视频处理个人理解可以拆分为单独的一块，不同与其他H5功能，好比canvas一样，往小了看是简单的小视频播放（快手、抖音之类）。进一步可以演变为播放器嵌套，比较有名的例如B站开源的flv.js，之前笔记详情使用过，解决了flv格式文件video标签不支持播放问题。再进一步可以演化为视频直播类H5，16年末的时候看过上海一家直播类H5招聘要求，三年以上视频直播类相关经验起薪20k~本次日记分享需全屏兼容合机型播放，相比之前做过兼容全机型不全屏播放，各端兼容调试时间减少了不少，算是个填坑的过程吧！记录在这，下一个人再做的时候可以节约大量跳坑时间正常video标签：           <video width="" height="">                <source src="myvideo.mp4" type="video/mp4"></source>                <
4000
source src="myvideo.ogv" type="video/ogg"></source>                <source src="myvideo.webm" type="video/webm"></source>                <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">                     <param name="movie" value="myvideo.swf" />                     <param name="flashvars" value="autostart=true&file=myvideo.swf" />                </object>                当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>           </video>一般简化：        <video src=""></video>需要什么属性自己往上加，现有项目中用到的属性如下：<video  id="videoALL"  src="video/01.mp4"  poster="images/1.jpg" /*视频封面*/  preload="auto"  webkit-playsinline="true" /*这个属性是ios 10中设置可以                     让视频在小窗内播放，也就是不是全屏播放*/  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/  x-webkit-airplay="allow"  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/  x5-video-player-fullscreen="true" /*全屏设置，                     设置为 true 是防止横屏*/>  x5-video-orientation="portraint" /*播放器支付的方向，                     landscape横屏，portraint竖屏，默认值为竖屏*/  style="object-fit:fill"
loop="loop"/*循环播放（不写不循环）*/

controls="controls" /*显示控制按键（不写不显示）*/

</video>之前的全机型不全屏播放属性配置如下，我记得是仿照的JD某流媒体，附上当时笔记配图一张：<video id="test" autoplay="" class="video-js jd-video" x5-video-player-type="h5" webkit-playsinline="" playsinline="" controls="" poster="sb20161211233221.png">        <source type="video/mp4" src="">    </video>


日记分享详情视频标签配置属性如下：
DOM：<video class="theVideo hide" preload="auto" type="video/mp4" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="portraint" loop="loop" onerror="window.VIDEO_FAILED=1"></video>

CSS:.theVideo {     display: block;     width: 100%;     height: 100%;     object-fit: fill;}此配置效果如下：



此方法会导致video样式拉称后来查API发现 是因为 object-fit: fill;导致 object-fit: fill;（被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。）
跟产品对照了下抖音的H5分享分享，分享出去的视频为适应手机屏幕部分被截取
于是改为.theVideo {     display: block;     width: 100%;     height: 100%;     /*object-fit: fill;*/     object-fit: cover;} object-fit: cover;（ 被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。）
效果如下：



嗯，还是拉称的显瘦啊！但是我们要 -=- 务真务实，实事求是
说另一个问题video标签点击暂停事件，起初测试阶段未发现该兼容BUG，后来android上点击可以暂停，ios上点击无效果，一般bug都是反过来的，可能video标签有它自己的想法吧！debug阶段：1.怀疑定位层级问题导致底部video没有触发，依次增加层级直到最高z-index元素video-play被覆盖，点击事件依然无法执行2.怀疑js未能获取DOM，js监听dom操作无alert弹出，改为后台交互数据加载完成后再次监听点击事件，依然无效果，再改为dom增加点击事件依然无效果。3.解决方案-后来反思：用户首次点击video-play元素可以操纵video播放，所以增加第三方元素覆盖video标签范围区域，监听此标签用户操作事件控制video播放/暂停

         object-fit属性参考可查看如下网址个人感觉写的比较明细：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit