video css

/* 示例代码：使用 CSS 控制视频样式 */

/* 基本的视频容器样式 */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
    overflow: hidden;
}

/* 视频元素样式 */
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保视频充满容器并保持比例 */
}

/* 添加一些美化效果 */
.video-container video:hover {
    filter: brightness(80%); /* 鼠标悬停时调整亮度 */
}

/* 控制栏样式 */
.video-controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

/* 播放按钮样式 */
.play-button {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

/* 进度条样式 */
.progress-bar {
    width: 100%;
    height: 5px;
    background: #ccc;
}

.progress-filled {
    height: 100%;
    background: red;
    width: 0;
}

解释说明：

• .video-container：创建一个响应式的视频容器，确保视频在不同设备上都能保持 16:9 的比例。
• .video-container video：设置视频元素的样式，使其充满容器并保持比例。
• object-fit: cover：确保视频内容不会被拉伸或变形。
• .video-controls：为视频添加控制栏，并设置其位置和样式。
• .play-button 和 .progress-bar：分别为播放按钮和进度条添加样式。

这段代码可以帮助你通过 CSS 来控制视频的基本样式和布局。