video控件的显示与隐藏

需求：渲染页面时，隐藏video的控件，当鼠标hover时显示其控件

<video  controls
src="http://www.cdtf.gov.cn/cdtfxq/meiti/2021-07/30/4cfdc206c42a4b12bc166ba451e1767d/files/53c7207441d045118078f57411e70fb2.mp4"
></video> 

当给<video>标签加上controls属性时，其控件全部显示，如果想让某个控件隐藏，可以通过以下方式：

    //全屏按钮
    video::-webkit-media-controls-fullscreen-button {
        display: none;
    }
    //播放按钮
    video::-webkit-media-controls-play-button {
        display: none;
    }
    //进度条
    video::-webkit-media-controls-timeline {
        display: none;
    }
    //观看的当前时间
    video::-webkit-media-controls-current-time-display{
        display: none;            
    }
    //剩余时间
    video::-webkit-media-controls-time-remaining-display {
        display: none;            
    }
    //音量按钮
    video::-webkit-media-controls-mute-button {
        display: none;            
    }
    video::-webkit-media-controls-toggle-closed-captions-button {
        display: none;            
    }
    //音量的控制条
    video::-webkit-media-controls-volume-slider {
        display: none;            
    }
    //所有控件
    video::-webkit-media-controls-enclosure{ 
        display: none;
    }

所以，针对以开头的需求可以：

video {
  position: relative;
  width: 300px;
}
video::-webkit-media-controls-enclosure{
    display: none; //隐藏所有控件
}
video:hover::-webkit-media-controls-enclosure{
    position: absolute;
    display: block; //鼠标hover展示所有控件
}

所遇到的问题及其解决方式：

Q:隐藏控件后，当鼠标hover的时候展示控件时，控件的位置在视频的上方而非原位置。

A:给video的css样式设置定位，如上方代码。