当前位置：首页 > CSS

div css制作网页视频

2026-02-26 22:16:19CSS

使用HTML5视频标签嵌入视频

在HTML中使用<video>标签嵌入视频，支持MP4、WebM、Ogg等格式。设置宽度、高度、控制条等属性。

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

通过CSS定制视频样式

为视频容器添加CSS样式，实现响应式布局、阴影效果等视觉增强。使用object-fit属性控制视频填充方式。

.video-container {
  max-width: 100%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin: 20px auto;
}

video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #000;
}

创建响应式视频布局

使用CSS百分比或视口单位实现自适应布局，确保在不同设备上正常显示。通过媒体查询调整不同屏幕尺寸下的视频尺寸。

div css制作网页视频

@media (max-width: 768px) {
  .video-container {
    width: 90vw;
    height: 50.625vw; /* 16:9比例 */
  }
}

添加自定义播放控制按钮

通过JavaScript和CSS创建自定义视频控制界面。隐藏原生控件，使用play()、pause()等方法控制视频播放。

const video = document.querySelector('video');
const playBtn = document.querySelector('.play-btn');

playBtn.addEventListener('click', () => {
  if(video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

实现视频背景效果

将视频设置为全屏背景，使用固定定位和z-index控制层级。注意添加备用背景图片和移动端优化。

div css制作网页视频

.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.video-background video {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

优化视频加载性能

使用preload属性控制视频加载行为，添加封面图减少初始加载时间。考虑使用懒加载技术延迟非关键视频的加载。

<video preload="metadata" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

添加视频字幕和字幕样式

通过<track>标签添加字幕文件，使用CSS自定义字幕外观。支持SRT、WebVTT等字幕格式。

<video>
  <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
</video>

<style>
video::cue {
  color: white;
  background: rgba(0,0,0,0.5);
  font-size: 16px;
}
</style>