CSS音频和视频属性和用法

1.**object-fit：**该属性用于调整视频元素的内容适应其容器的方式。它有以下几个取值：

**fill：**将视频拉伸以填充容器，可能会导致视频的宽高比被破坏。

**contain：**保持视频的宽高比，将视频缩放至完全适应容器，可能会在视频周围留有空白区域。

**cover：**保持视频的宽高比，将视频缩放至完全覆盖容器，可能会导致部分视频被裁剪。

**none：**保持视频的原始大小，可能会导致视频显示超出容器。

**scale-down：**将视频缩小至完全适应容器，如果可行的话。

2.**object-position：**该属性用于定义视频元素在容器中的位置。你可以使用像

素值或百分比来指定位置。

video {
    object-fit: cover;
    object-position: center;
}

3.width 和 height：这些属性用于设置视频元素的宽度和高度。你可以使用具体的像素值、百分比或其他长度单位。

video {
    width: 100%;
    height: auto;
}

4.background：你可以将视频作为元素的背景，并使用 background 属性进行设置。注意，这种方式无法使用视频的控制功能。

div {
    background: url(example.mp4) no-repeat center center / cover;
}

5. filter：你可以使用 filter 属性对视频应用各种效果，例如亮度、对比度、饱和度等。

```html
video {
    filter: brightness(50%) contrast(200%);
}

6.布局调整与层叠效果

使用 position 和 z-index 属性调整音视频元素的位置和层叠顺序。
利用 display 属性来控制音视频元素的显示方式，如 inline-block、flex 等。

video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

7.自定义控件样式

使用伪元素和伪类来自定义音视频播放控件的样式，提升用户体验。
利用 CSS3 的特性，如渐变、阴影等，美化控件按钮的外观。

video::-webkit-media-controls-play-button {
    background-color: #fff;
    border-radius: 50%;
}

video::-webkit-media-controls-volume-slider {
    background: linear-gradient(to right, #ccc, #333);
}

8.响应式设计与媒体查询

利用媒体查询调整音视频元素在不同设备和屏幕尺寸下的布局和样式。
使用 @media 查询来针对不同的屏幕大小或方向应用不同的样式。

@media (max-width: 768px) {
    video {
        width: 100%;
        height: auto;
    }
}

9.动画效果与过渡

利用 CSS 动画为音视频元素添加过渡效果，如淡入淡出、缩放等，增强用户交互体验。
使用 transition 属性控制播放控件的状态切换动画，如播放按钮的颜色变化、进度条的平滑过渡等。

video:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}