目录
- 基础篇：HTML5
<video>- 基本结构
- 常用属性
- 美化篇：CSS 视频样式
- 基础样式（宽高、边框、圆角）
- 自定义播放控件
- 响应式视频
- 交互篇：CSS & JavaScript 进阶效果
- 悬停显示播放按钮
- 自定义进度条
- 视频封面图
- 高级篇：现代 CSS 技巧
- 视频作为背景
- 视频滤镜效果
- 视频遮罩效果
- 资源篇：免费视频素材与播放器库
- 免费视频网站
- 视频播放器库
基础篇：HTML5 <video>
这是在网页中嵌入视频最核心、最标准的方法。
（图片来源网络，侵删）
基本结构
直接使用 <video> 标签，并指定视频文件的 src。
<video src="my-video.mp4" controls></video>
常用属性
controls: 显示浏览器默认的播放控件（播放/暂停、音量、进度条等）。autoplay: 视频在就绪后自动播放。注意：现代浏览器通常要求视频必须静音 (muted) 才能自动播放。muted: 视频静音。loop: 视频播放结束后循环播放。width / height: 设置视频的宽度和高度（单位：像素）。poster: 指定视频加载时显示的封面图片路径。
示例：
<!-- 带控件、自动播放、静音、循环、有封面的视频 -->
<video
src="path/to/your/video.mp4"
controls
autoplay
muted
loop
poster="path/to/your/poster.jpg"
width="600">
<!-- 如果浏览器不支持 video 标签，这里的内容会显示 -->
您的浏览器不支持 HTML5 视频。
</video>
美化篇：CSS 视频样式
使用CSS可以轻松改变视频的外观,使其与你的网页设计融为一体。
基础样式
设置视频的宽高、边框、圆角等。
（图片来源网络，侵删）
.video-container {
max-width: 800px;
margin: 0 auto;
}
.video-wrapper video {
width: 100%; /* 视频宽度自适应容器 */
height: auto; /* 视频高度自适应，保持比例 */
border: 2px solid #333;
border-radius: 8px; /* 圆角 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}
HTML:
<div class="video-container">
<div class="video-wrapper">
<video src="my-video.mp4" controls></video>
</div>
</div>
自定义播放控件
隐藏默认控件,然后用HTML和CSS/JS创建自己的控件。
HTML:
<div class="custom-player">
<video id="myVideo" src="my-video.mp4"></video>
<div class="custom-controls">
<button id="playPauseBtn">▶️</button>
<input type="range" id="progressBar" min="0" max="100" value="0">
<span id="timeDisplay">0:00 / 0:00</span>
</div>
</div>
CSS:
（图片来源网络，侵删）
.custom-player {
max-width: 800px;
margin: 0 auto;
position: relative; /* 为绝对定位的控件提供参考 */
}
.custom-player video {
width: 100%;
display: block; /* 移除视频下方的空隙 */
}
.custom-controls {
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
border-radius: 0 0 8px 8px;
display: flex;
align-items: center;
gap: 10px;
}
#playPauseBtn {
background: none;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
}
#progressBar {
flex-grow: 1; /* 进度条占据剩余空间 */
}
JavaScript (控制逻辑):
const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const timeDisplay = document.getElementById('timeDisplay');
// 播放/暂停
playPauseBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
playPauseBtn.textContent = '⏸️';
} else {
video.pause();
playPauseBtn.textContent = '▶️';
}
});
// 更新进度条
video.addEventListener('timeupdate', () => {
const value = (video.currentTime / video.duration) * 100;
progressBar.value = value;
// 更新时间显示
const currentMinutes = Math.floor(video.currentTime / 60);
const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
const durationMinutes = Math.floor(video.duration / 60);
const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0');
timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
});
// 点击进度条跳转
progressBar.addEventListener('input', () => {
const time = (progressBar.value / 100) * video.duration;
video.currentTime = time;
});
响应式视频
使用 max-width: 100% 和 height: auto 确保视频在不同屏幕尺寸下都能正确缩放。
video {
max-width: 100%;
height: auto;
}
交互篇：CSS & JavaScript 进阶效果
通过CSS和JavaScript结合,可以实现更丰富的用户体验。
悬停显示播放按钮
当用户鼠标悬停在视频上时,显示一个半透明的播放按钮。
HTML:
<div class="video-hover-container">
<video src="my-video.mp4" controls></video>
<div class="play-overlay">▶️</div>
</div>
CSS:
.video-hover-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.video-hover-container video {
width: 100%;
display: block;
}
.play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4em;
color: rgba(255, 255, 255, 0.8);
opacity: 0; /* 默认隐藏 */
transition: opacity 0.3s ease;
pointer-events: none; /* 鼠标可以穿透点击视频 */
}
.video-hover-container:hover .play-overlay {
opacity: 1; /* 悬停时显示 */
}
自定义进度条（更高级版）
隐藏默认进度条,用CSS完全自定义一个。
HTML (与“自定义播放控件”部分类似):
<div class="custom-player">
<video id="myVideo" src="my-video.mp4"></video>
<div class="custom-controls">
<div class="progress-container">
<div class="progress-bar">
<div class="progress-filled"></div>
</div>
</div>
</div>
</div>
CSS:
.custom-player {
position: relative;
}
.custom-controls {
background: rgba(0, 0, 0, 0.7);
padding: 5px;
}
.progress-container {
width: 100%;
height: 8px;
background: #555;
cursor: pointer;
border-radius: 4px;
}
.progress-bar {
width: 100%;
height: 100%;
position: relative;
}
.progress-filled {
height: 100%;
background: #007bff;
width: 0%; /* 初始宽度为0 */
border-radius: 4px;
}
JavaScript (更新 progress-filled 的宽度):
// ... (前面的JS代码) ...
const progressFilled = document.querySelector('.progress-filled');
// 更新进度条
video.addEventListener('timeupdate', () => {
const value = (video.currentTime / video.duration) * 100;
progressFilled.style.width = value + '%';
});
// 点击进度条跳转
document.querySelector('.progress-container').addEventListener('click', (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const percentage = x / rect.width;
video.currentTime = percentage * video.duration;
});
视频封面图
封面图在视频加载或暂停时显示,点击后开始播放。
HTML:
<div class="video-thumbnail-container">
<video id="myVideo" src="my-video.mp4"></video>
<img src="poster.jpg" alt="Video Thumbnail" class="thumbnail">
<div class="play-button-overlay">▶️</div>
</div>
CSS:
.video-thumbnail-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.video-thumbnail-container video,
.video-thumbnail-container .thumbnail {
width: 100%;
display: block;
}
.thumbnail {
position: absolute;
top: 0;
left: 0;
z-index: 1; /* 位于视频之上 */
}
.play-button-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4em;
color: rgba(255, 255, 255, 0.8);
z-index: 2; /* 位于封面图之上 */
cursor: pointer;
}
JavaScript:
const video = document.getElementById('myVideo');
const thumbnail = document.querySelector('.thumbnail');
const playButton = document.querySelector('.play-button-overlay');
// 点击播放按钮或封面图开始播放
playButton.addEventListener('click', () => {
video.play();
thumbnail.style.display = 'none'; // 播放时隐藏封面
playButton.style.display = 'none'; // 隐藏播放按钮
});
// 视频结束时重新显示封面
video.addEventListener('ended', () => {
thumbnail.style.display = 'block';
playButton.style.display = 'block';
});
高级篇：现代 CSS 技巧
视频作为背景
使用 object-fit 和 position 属性创建全屏视频背景。
HTML:
<div class="video-background">
<video autoplay muted loop playsinline>
<source src="background-video.mp4" type="video/mp4">
</video>
<div class="content">
<h1>欢迎访问</h1>
<p>这是一个带有视频背景的页面</p>
</div>
</div>
CSS:
.video-background {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.video-background video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: -1; /* 将视频置于内容之下 */
object-fit: cover; /* 确保视频覆盖整个区域，可能会裁剪 */
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 20vh;
}
object-fit: cover 是关键，它让视频像背景图片一样填充整个容器。playsinline 是移动端播放内联视频的必要属性。
视频滤镜效果
使用 filter 属性为视频添加各种视觉效果。
/* 灰度效果 */
.grayscale-filter video {
filter: grayscale(100%);
}
/* 模糊效果 */
.blur-filter video {
filter: blur(5px);
}
/* 褐色怀旧效果 */
.sepia-filter video {
filter: sepia(100%);
}
/* 亮度/对比度调整 */
.brightness-contrast-filter video {
filter: brightness(1.2) contrast(1.1);
}
HTML:
<div class="grayscale-filter">
<video src="my-video.mp4" controls></video>
</div>
视频遮罩效果
使用 clip-path 属性创建独特的视频形状。
/* 圆形遮罩 */
.circle-mask video {
clip-path: circle(50% at 50% 50%);
}
/* 多边形遮罩（例如六边形） */
.hexagon-mask video {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* 不规则波浪遮罩 */
.wavy-mask video {
clip-path: polygon(
0% 15%, 15% 0%, 85% 0%, 100% 15%,
100% 85%, 85% 100%, 15% 100%, 0% 85%
);
}
HTML:
<div class="circle-mask">
<video src="my-video.mp4" controls></video>
</div>
资源篇：免费视频素材与播放器库
免费视频素材网站
- Pexels Videos: https://www.pexels.com/videos/ - 高质量、可免费用于商业用途的视频。
- Pixabay Videos: https://pixabay.com/videos/ - 另一个优秀的免费素材库。
- Coverr: https://coverr.co/ - 专为网站背景设计的精美短片。
- Videvo: https://www.videvo.net/ - 提供免费视频和动态图形，部分需要署名。
视频播放器库
如果你不想从头开始写,可以使用这些成熟的库，它们提供了丰富的功能和自定义选项。
- Video.js: https://videojs.com/ - 非常流行、功能强大、可扩展性强的视频播放器，支持广告、插件等。
- Plyr: https://plyr.io/ - 现代化、轻量级、易于使用的播放器，对移动端支持很好。
- Clappr: https://clappr.io/ - 由大公司（Globo）开源的模块化播放器。
希望这份“CSS网页免费视频代码大全”能帮助你从入门到精通，轻松地在你的网页中嵌入和控制视频！
这是在网页中嵌入视频最核心、最标准的方法。
（图片来源网络，侵删）
基本结构
直接使用 <video> 标签，并指定视频文件的 src。
<video src="my-video.mp4" controls></video>
常用属性
controls: 显示浏览器默认的播放控件（播放/暂停、音量、进度条等）。autoplay: 视频在就绪后自动播放。注意：现代浏览器通常要求视频必须静音 (muted) 才能自动播放。muted: 视频静音。loop: 视频播放结束后循环播放。width/height: 设置视频的宽度和高度（单位：像素）。poster: 指定视频加载时显示的封面图片路径。
示例：
<!-- 带控件、自动播放、静音、循环、有封面的视频 -->
<video
src="path/to/your/video.mp4"
controls
autoplay
muted
loop
poster="path/to/your/poster.jpg"
width="600">
<!-- 如果浏览器不支持 video 标签，这里的内容会显示 -->
您的浏览器不支持 HTML5 视频。
</video>
美化篇：CSS 视频样式
使用CSS可以轻松改变视频的外观,使其与你的网页设计融为一体。
基础样式
设置视频的宽高、边框、圆角等。
（图片来源网络，侵删）
.video-container {
max-width: 800px;
margin: 0 auto;
}
.video-wrapper video {
width: 100%; /* 视频宽度自适应容器 */
height: auto; /* 视频高度自适应，保持比例 */
border: 2px solid #333;
border-radius: 8px; /* 圆角 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}
HTML:
<div class="video-container">
<div class="video-wrapper">
<video src="my-video.mp4" controls></video>
</div>
</div>
自定义播放控件
隐藏默认控件,然后用HTML和CSS/JS创建自己的控件。
HTML:
<div class="custom-player">
<video id="myVideo" src="my-video.mp4"></video>
<div class="custom-controls">
<button id="playPauseBtn">▶️</button>
<input type="range" id="progressBar" min="0" max="100" value="0">
<span id="timeDisplay">0:00 / 0:00</span>
</div>
</div>
CSS:
（图片来源网络，侵删）
.custom-player {
max-width: 800px;
margin: 0 auto;
position: relative; /* 为绝对定位的控件提供参考 */
}
.custom-player video {
width: 100%;
display: block; /* 移除视频下方的空隙 */
}
.custom-controls {
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
border-radius: 0 0 8px 8px;
display: flex;
align-items: center;
gap: 10px;
}
#playPauseBtn {
background: none;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
}
#progressBar {
flex-grow: 1; /* 进度条占据剩余空间 */
}
JavaScript (控制逻辑):
const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const timeDisplay = document.getElementById('timeDisplay');
// 播放/暂停
playPauseBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
playPauseBtn.textContent = '⏸️';
} else {
video.pause();
playPauseBtn.textContent = '▶️';
}
});
// 更新进度条
video.addEventListener('timeupdate', () => {
const value = (video.currentTime / video.duration) * 100;
progressBar.value = value;
// 更新时间显示
const currentMinutes = Math.floor(video.currentTime / 60);
const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
const durationMinutes = Math.floor(video.duration / 60);
const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0');
timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
});
// 点击进度条跳转
progressBar.addEventListener('input', () => {
const time = (progressBar.value / 100) * video.duration;
video.currentTime = time;
});
响应式视频
使用 max-width: 100% 和 height: auto 确保视频在不同屏幕尺寸下都能正确缩放。
video {
max-width: 100%;
height: auto;
}
交互篇：CSS & JavaScript 进阶效果
通过CSS和JavaScript结合,可以实现更丰富的用户体验。
悬停显示播放按钮
当用户鼠标悬停在视频上时,显示一个半透明的播放按钮。
HTML:
<div class="video-hover-container">
<video src="my-video.mp4" controls></video>
<div class="play-overlay">▶️</div>
</div>
CSS:
.video-hover-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.video-hover-container video {
width: 100%;
display: block;
}
.play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4em;
color: rgba(255, 255, 255, 0.8);
opacity: 0; /* 默认隐藏 */
transition: opacity 0.3s ease;
pointer-events: none; /* 鼠标可以穿透点击视频 */
}
.video-hover-container:hover .play-overlay {
opacity: 1; /* 悬停时显示 */
}
自定义进度条（更高级版）
隐藏默认进度条,用CSS完全自定义一个。
HTML (与“自定义播放控件”部分类似):
<div class="custom-player">
<video id="myVideo" src="my-video.mp4"></video>
<div class="custom-controls">
<div class="progress-container">
<div class="progress-bar">
<div class="progress-filled"></div>
</div>
</div>
</div>
</div>
CSS:
.custom-player {
position: relative;
}
.custom-controls {
background: rgba(0, 0, 0, 0.7);
padding: 5px;
}
.progress-container {
width: 100%;
height: 8px;
background: #555;
cursor: pointer;
border-radius: 4px;
}
.progress-bar {
width: 100%;
height: 100%;
position: relative;
}
.progress-filled {
height: 100%;
background: #007bff;
width: 0%; /* 初始宽度为0 */
border-radius: 4px;
}
JavaScript (更新 progress-filled 的宽度):
// ... (前面的JS代码) ...
const progressFilled = document.querySelector('.progress-filled');
// 更新进度条
video.addEventListener('timeupdate', () => {
const value = (video.currentTime / video.duration) * 100;
progressFilled.style.width = value + '%';
});
// 点击进度条跳转
document.querySelector('.progress-container').addEventListener('click', (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const percentage = x / rect.width;
video.currentTime = percentage * video.duration;
});
视频封面图
封面图在视频加载或暂停时显示,点击后开始播放。
HTML:
<div class="video-thumbnail-container">
<video id="myVideo" src="my-video.mp4"></video>
<img src="poster.jpg" alt="Video Thumbnail" class="thumbnail">
<div class="play-button-overlay">▶️</div>
</div>
CSS:
.video-thumbnail-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.video-thumbnail-container video,
.video-thumbnail-container .thumbnail {
width: 100%;
display: block;
}
.thumbnail {
position: absolute;
top: 0;
left: 0;
z-index: 1; /* 位于视频之上 */
}
.play-button-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4em;
color: rgba(255, 255, 255, 0.8);
z-index: 2; /* 位于封面图之上 */
cursor: pointer;
}
JavaScript:
const video = document.getElementById('myVideo');
const thumbnail = document.querySelector('.thumbnail');
const playButton = document.querySelector('.play-button-overlay');
// 点击播放按钮或封面图开始播放
playButton.addEventListener('click', () => {
video.play();
thumbnail.style.display = 'none'; // 播放时隐藏封面
playButton.style.display = 'none'; // 隐藏播放按钮
});
// 视频结束时重新显示封面
video.addEventListener('ended', () => {
thumbnail.style.display = 'block';
playButton.style.display = 'block';
});
高级篇：现代 CSS 技巧
视频作为背景
使用 object-fit 和 position 属性创建全屏视频背景。
HTML:
<div class="video-background">
<video autoplay muted loop playsinline>
<source src="background-video.mp4" type="video/mp4">
</video>
<div class="content">
<h1>欢迎访问</h1>
<p>这是一个带有视频背景的页面</p>
</div>
</div>
CSS:
.video-background {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.video-background video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: -1; /* 将视频置于内容之下 */
object-fit: cover; /* 确保视频覆盖整个区域，可能会裁剪 */
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 20vh;
}
object-fit: cover是关键，它让视频像背景图片一样填充整个容器。playsinline是移动端播放内联视频的必要属性。
视频滤镜效果
使用 filter 属性为视频添加各种视觉效果。
/* 灰度效果 */
.grayscale-filter video {
filter: grayscale(100%);
}
/* 模糊效果 */
.blur-filter video {
filter: blur(5px);
}
/* 褐色怀旧效果 */
.sepia-filter video {
filter: sepia(100%);
}
/* 亮度/对比度调整 */
.brightness-contrast-filter video {
filter: brightness(1.2) contrast(1.1);
}
HTML:
<div class="grayscale-filter">
<video src="my-video.mp4" controls></video>
</div>
视频遮罩效果
使用 clip-path 属性创建独特的视频形状。
/* 圆形遮罩 */
.circle-mask video {
clip-path: circle(50% at 50% 50%);
}
/* 多边形遮罩（例如六边形） */
.hexagon-mask video {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* 不规则波浪遮罩 */
.wavy-mask video {
clip-path: polygon(
0% 15%, 15% 0%, 85% 0%, 100% 15%,
100% 85%, 85% 100%, 15% 100%, 0% 85%
);
}
HTML:
<div class="circle-mask">
<video src="my-video.mp4" controls></video>
</div>
资源篇：免费视频素材与播放器库
免费视频素材网站
- Pexels Videos: https://www.pexels.com/videos/ - 高质量、可免费用于商业用途的视频。
- Pixabay Videos: https://pixabay.com/videos/ - 另一个优秀的免费素材库。
- Coverr: https://coverr.co/ - 专为网站背景设计的精美短片。
- Videvo: https://www.videvo.net/ - 提供免费视频和动态图形，部分需要署名。
视频播放器库
如果你不想从头开始写,可以使用这些成熟的库，它们提供了丰富的功能和自定义选项。
- Video.js: https://videojs.com/ - 非常流行、功能强大、可扩展性强的视频播放器，支持广告、插件等。
- Plyr: https://plyr.io/ - 现代化、轻量级、易于使用的播放器，对移动端支持很好。
- Clappr: https://clappr.io/ - 由大公司（Globo）开源的模块化播放器。
希望这份“CSS网页免费视频代码大全”能帮助你从入门到精通，轻松地在你的网页中嵌入和控制视频！
