实现视窗裁剪效果与视窗保留效果

先看下炫酷的效果（推荐在电脑上观看）

https://lanhuapp.com/ts_video

视频大概会持续上线一个月，为防止链接失效，我贴下页面大致

播放前的预览视频视角居中自适应：

在进行缩放时视角跟随屏幕中心，宽度过小时两边被裁减，保留中间部分，让整体视觉感受非常流畅舒适，我称之为视窗裁剪效果，它的实现原理也很简单：

利用一个div包裹video，将div居中，并设置overflow：hidden；此外还要保证视窗缩放时，保持video的高度与视窗高度一致，其宽度按原视频的宽高比例乘上视窗高度即可，方法可以写在window.onresize中：

        let ww=window.innerWidth
        let wh=window.innerHeight
        // 原视频的宽高比
        const k=1920/1080
        // console.log(_this)
        if(this.bg_view){
            if(ww/wh<k){
                div.style.height=wh+'px'
                div.style.width=wh*k+'px'
            }else{
                div.style.width=ww+'px'
                div.style.height=ww/k+'px'
            }
        }

window.innerWidth即是视窗的宽度，

window.innerHeight为视窗的高度。
这样就保证了无论视窗怎么变化，div始终居中，原视频高度与视窗一致，宽度按比例乘高度后即使溢出屏幕，也会因overflow：hidden的效果而被裁减掉。同样，如果出现视窗过长的情况，会保证视频宽度与视窗一致，而高度的上下两边会被裁减掉。从而使视角始终剧中。

缩放小于一定像素时缩小图标

 

 

 这个效果可以用media配合vwvh实现，也可以根据图标的宽高比在window.onresize中动态计算图标的大小

视频自适应视窗

 

 

如图：

这是和裁剪完全相反的效果，我称之为视窗保留效果，即在视窗过长时，把视频的宽度和视窗进行适配，，上下并不裁剪而是留出空余，从而保证窗口在无论多大或多小的宽高比之下都能展现出视频的全貌，代码如下：

            let dw=ww/1920
            let dh=wh/1080 
            if(dw>dh){  //当视窗过宽时，根据高度进行适配
                div.style.height=wh+'px'  
                div.style.width=wh*k+'px'
            }else{     //当视窗过长时，根据宽度进行适配
                div.style.width=ww+'px'
                div.style.height=ww/k+'px'
            }