一个视频项目引起的总结

最近一直忙着开发一下直播聊天室的功能，使用的是腾讯IMSDK，聊天功能都还算顺利，但是在实现视频在手机H5播放的时候，一个大坑慢慢的展现在眼前

网上各种答案，添加各种参数，但是好的的机器千篇一律，不好的机器各有各的不同（主要分布在天朝的各大Android），什么默认全屏，同层后视频全屏了，视频拉伸变形了，下面一一解决

• ios实现同层播放

同层播放在IOS端会非常的舒适 一个参数直接解决 webkit-playsinline="true"， 必须要有前缀

• android实现同层播放

天朝Android 已经放弃了，只是适配了一些机型，如果谁知道如何解决，一定要留言，我会舔的你非常舒服的，参数：playsinline="true"

• 微信实现同层播放

微信目前基于他自己的X5内核，还是比较好用的，适配也简单，添加下面的参数就可以实现：x5-video-player-type // 启用H5同层播放器

• 视频播放大小的控制

直播聊天室，可能会出现横竖屏的录制，当你拉流的时候一定要确定好你的视频录制方向，从而保证你的视频正常显示不变形
横屏的情况下，视频一半是 16:9 ，这就需要你计算你的视频控件的大小 我使用的实现方式如下：

// 横屏 16:9
$('video').css({
  'width': '100vw',
  'height': '56.25vw',
  'margin-top': '4rem',
  'object-fit': 'fill'
})
// 竖屏
$('video').css({
  'width': '100vw',
  'height': '100vh',
  'object-fit': 'fill'
})

可能有人发现了我里面都有一个参数 是 object-fill 这个参数是控制视频的显示区域，他的值分别是：
fill：填充满显示区域（因为我的显示去与控制了尺寸，所以我选择的填充）
contain：保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。
cover：保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容部分区域不可见。
none： 保持原有尺寸比例。同时保持替换内容原始尺寸大小，内容完全忽略设置在元素上的任何高度和权重。
scale-down：就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

• 下面是我使用的直播video

有不一样的的观点，请留下宝贵意见，反正我一定不听，但是给别人一个参考┗( ▔, ▔ )┛