基础播放器（最简单）
这个模板展示了在网页中嵌入视频最基本的方法,使用浏览器默认的播放控件。
（图片来源网络，侵删）
特点：
- 代码极简。
- 使用原生
<video>- 播放控件由浏览器提供,样式在不同浏览器中可能不一致。
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">基础视频播放器</title>
<style>
/* 让视频填满整个容器 */
video {
width: 100%;
max-width: 800px; /* 限制最大宽度 */
height: auto;
display: block; /* 移除视频下方的空白间隙 */
margin: 20px auto; /* 居中显示 */
}
</style>
</head>
<body>
<h1>我的视频</h1>
<video src="your-video.mp4" controls>
<!-- 如果浏览器不支持 video 标签，显示此段文字 -->
您的浏览器不支持 HTML5 视频，请升级您的浏览器。
</video>
</body>
</html>
使用说明：
- 将
your-video.mp4替换为你自己的视频文件路径。 - 确保视频文件和 HTML 文件在同一目录下，或者提供正确的相对/绝对路径。
controls属性是关键，它告诉浏览器显示播放、暂停、音量等控件。
自定义样式与背景
这个模板在基础之上,增加了自定义的 CSS 样式，让视频页面看起来更美观。
特点：
（图片来源网络，侵删）
- 自定义视频容器样式（如圆角、阴影）。
- 添加了页面背景色。
- 视频居中,并有最大宽度限制，在桌面和移动设备上都有良好体验。
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">自定义样式视频页面</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f2f5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
h1 {
color: #333;
margin-bottom: 30px;
}
.video-container {
width: 100%;
max-width: 900px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
overflow: hidden; /* 确保圆角效果不被视频覆盖 */
padding: 20px;
box-sizing: border-box;
}
video {
width: 100%;
height: auto;
border-radius: 8px; /* 视频本身的圆角 */
display: block;
}
</style>
</head>
<body>
<h1>探索自然之美</h1>
<div class="video-container">
<video src="your-nature-video.mp4" controls poster="video-poster.jpg">
您的浏览器不支持 HTML5 视频。
</video>
</div>
</body>
</html>
新增/修改说明：
poster属性：在视频加载或用户点击播放前，显示一张图片作为封面，这能极大地提升用户体验。.video-container：我们创建了一个包裹<video>的<div>，通过为这个div添加样式（如背景色、阴影、圆角），实现了更丰富的视觉效果。- CSS Flexbox：使用
display: flex轻松实现了内容的垂直和水平居中，使布局更灵活。
功能丰富的播放器（使用 JavaScript）
这个模板结合了 HTML5、CSS 和 JavaScript，实现了一个功能更强大的自定义播放器。
特点：
- 隐藏原生控件，使用自己设计的控件。
- 自定义播放/暂停按钮。
- 自定义进度条（可拖动）。
- 自定义音量控制。
- 自定义全屏按钮。
- 显示当前时间和总时长。
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">功能丰富的自定义播放器</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #111;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.video-wrapper {
width: 90%;
max-width: 800px;
background-color: #000;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
video {
width: 100%;
display: block;
}
/* 自定义控件容器 */
.custom-controls {
padding: 15px;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
display: flex;
align-items: center;
gap: 15px;
}
/* 播放/暂停按钮 */
.play-pause-btn {
width: 40px;
height: 40px;
border: none;
background: none;
color: #fff;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.3s;
}
.play-pause-btn:hover {
background-color: rgba(255,255,255,0.2);
}
/* 进度条容器 */
.progress-container {
flex-grow: 1;
height: 8px;
background: rgba(255,255,255,0.3);
border-radius: 4px;
cursor: pointer;
position: relative;
}
/* 已播放的进度 */
.progress {
height: 100%;
background: #e50914;
border-radius: 4px;
width: 0%;
transition: width 0.1s linear;
}
/* 时间显示 */
.time {
font-size: 14px;
min-width: 100px;
text-align: center;
}
/* 音量控制 */
.volume-container {
display: flex;
align-items: center;
gap: 8px;
}
.volume-slider {
width: 70px;
height: 5px;
-webkit-appearance: none;
appearance: none;
background: rgba(255,255,255,0.3);
outline: none;
opacity: 0.7;
transition: opacity 0.2s;
border-radius: 5px;
}
.volume-slider:hover {
opacity: 1;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
background: #e50914;
cursor: pointer;
border-radius: 50%;
}
/* 全屏按钮 */
.fullscreen-btn {
width: 30px;
height: 30px;
border: none;
background: none;
color: #fff;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<div class="video-wrapper">
<video id="myVideo">
<source src="your-video.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频。
</video>
<div class="custom-controls">
<button id="playPauseBtn" class="play-pause-btn">▶</button>
<div class="progress-container" id="progressContainer">
<div class="progress" id="progress"></div>
</div>
<div class="time">
<span id="currentTime">0:00</span> / <span id="duration">0:00</span>
</div>
<div class="volume-container">
<span>🔊</span>
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.1" value="1">
</div>
<button id="fullscreenBtn" class="fullscreen-btn">⛶</button>
</div>
</div>
<script>
const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progressContainer');
const currentTimeEl = document.getElementById('currentTime');
const durationEl = document.getElementById('duration');
const volumeSlider = document.getElementById('volumeSlider');
const fullscreenBtn = document.getElementById('fullscreenBtn');
// 1. 播放/暂停
playPauseBtn.addEventListener('click', togglePlayPause);
video.addEventListener('click', togglePlayPause); // 点击视频区域也可以播放/暂停
function togglePlayPause() {
if (video.paused) {
video.play();
playPauseBtn.textContent = '⏸';
} else {
video.pause();
playPauseBtn.textContent = '▶';
}
}
// 2. 更新进度条
video.addEventListener('timeupdate', updateProgress);
function updateProgress() {
const { currentTime, duration } = video;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
// 更新时间显示
currentTimeEl.textContent = formatTime(currentTime);
durationEl.textContent = formatTime(duration);
}
// 3. 点击进度条跳转
progressContainer.addEventListener('click', setProgress);
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = video.duration;
video.currentTime = (clickX / width) * duration;
}
// 4. 音量控制
volumeSlider.addEventListener('input', (e) => {
video.volume = e.target.value;
});
// 5. 全屏控制
fullscreenBtn.addEventListener('click', toggleFullscreen);
function toggleFullscreen() {
if (!document.fullscreenElement) {
video.requestFullscreen().catch(err => {
alert(`Error attempting to enable fullscreen: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
// 辅助函数：格式化时间 (秒 -> MM:SS)
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
}
// 视频加载完成后，设置总时长
video.addEventListener('loadedmetadata', () => {
durationEl.textContent = formatTime(video.duration);
});
</script>
</body>
</html>
如何选择和使用？
- 快速展示：如果你的需求只是快速放一个视频在网页上，用 模板一。
- 追求美观：如果你想让视频页面看起来更专业、更美观，用 模板二，这是大多数网站的标准做法。
- 深度定制：如果你需要完全控制播放器的样式和行为，打造独特的用户体验，用 模板三，这需要你理解一些 JavaScript 的知识，但提供了最大的灵活性。
通用建议：
（图片来源网络，侵删）
- 视频格式：为了兼容性最好，建议使用
MP4格式（H.264 编码，AAC 音频）。 - 响应式设计：所有模板都考虑了响应式设计，确保在手机和电脑上都能正常显示。
- 性能优化：对于大视频文件，考虑使用视频托管服务（如 YouTube, Vimeo, Bilibili）或视频云服务，它们能提供更好的加载速度和全球 CDN 加速。
