关于video标签的使用心得

1、关于object-fit

如果需要视频能填充满容器，忽略视频是否被拉伸，可设置object-fit：fill
如果需要视频自适应于容器的宽高，忽略上下左右是否有黑边，可设置object-fit：contain

2、关于video本身的宽高问题

默认设置video宽高100%，object-fit：fill，此时视频是填充满容器的

3、如何实现放大视频的某个区域

想放大视频的某个区域，可以通过改变video的宽高来实现，逻辑如下：

• 获取被放大区域的宽、高以及定位的left、top值
• 计算出被放大区域与video本身的比例，得出video本身需要放大多少倍，重新给video的宽高以及top、left进行赋值即可，放大后video的样式可能如下：
  

4、放大操作全屏状态下失效的问题

在非全屏状态下，操作正常，但是如果进行了全屏操作后，在进行放大，有时候会出现放大不了的问题，有时候又会是正常的。控制台审查元素，发现，video标签的宽高以及定位数据都发生了改变，但是就是不会被放大，百思不得其解，一直怀疑是video标签是否是哪里用的不对，但是又不知道如何来解决。
最后发现，跟video外层的div设置了overflow：hidden有关，如果设置了overflow：auto或者是scroll，全屏状态下放大就正常。但是又不希望出现滚动条，此时想到的办法就是：
1、改变滚动条的样式，设置width：0；height：0；
2、禁用外层div的滚动条事件

let top = $('#'+this.containerid).scrollTop();
// 禁用滚动条
$('#'+this.containerid).on('scroll.unable',function (e) {
  $(this).scrollTop(top);
})

完美解决问题