css制作网页视频

使用HTML5 video标签嵌入视频

在HTML中直接使用<video>标签嵌入视频文件，支持MP4、WebM、Ogg等格式。示例代码：

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持HTML5视频
</video>

自定义视频播放器样式

通过CSS覆盖默认播放器外观。关键样式属性包括：

video {
  background: #000;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 隐藏原生控件 */
video::-webkit-media-controls {
  display:none !important;
}

响应式视频布局

确保视频在不同设备上适配显示：

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9比例 */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

添加自定义控制按钮

通过JavaScript和CSS创建交互控件：

.custom-controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  padding: 0 15px;
  align-items: center;
}

.play-btn {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  cursor: pointer;
}

视频封面图设置

在视频加载前显示预览图：

video[poster] {
  object-fit: cover;
  transition: opacity 0.3s;
}

video.loaded {
  opacity: 1;
}

悬停效果增强

添加鼠标悬停交互效果：

.video-wrapper:hover .custom-controls {
  opacity: 1;
  transform: translateY(0);
}

.custom-controls {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

全屏样式优化

针对全屏模式的样式调整：

video:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

video:-moz-full-screen {
  width: 100% !important;
  height: 100% !important;
}

暗色模式适配

根据系统主题调整视频界面：

@media (prefers-color-scheme: dark) {
  video {
    filter: brightness(0.9);
  }

  .custom-controls {
    background: rgba(30,30,30,0.7);
  }
}