最简单的用法：直接播放
只需要一个 <video> 标签，并指定 src 属性指向你的视频文件即可。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">简单视频播放器</title>
</head>
<body>
<h1>我的第一个 HTML5 视频</h1>
<video src="my-video.mp4" width="600"></video>
</body>
</html>
代码解释：
<video>: 这是 HTML5 中专门用于嵌入视频内容的标签。src="my-video.mp4":src属性指定了视频文件的路径，这里假设my-video.mp4文件和 HTML 文件在同一个目录下。width="600": 设置视频播放器的显示宽度（单位是像素），高度会根据视频的原始比例自动调整。
推荐用法：使用 <source>
由于不同的浏览器对视频编码格式的支持不同（主要是 MP4, WebM, Ogg），为了确保你的视频能在所有现代浏览器上播放，最佳实践是使用 <source> 标签来提供多个格式的视频文件，浏览器会按顺序尝试加载，直到找到它能播放的第一个格式。
<video width="600" controls>
<source src="my-video.mp4" type="video/mp4">
<source src="my-video.webm" type="video/webm">
<source src="my-video.ogv" type="video/ogg">
<!-- 如果浏览器不支持 video 标签，会显示这段文字 -->
您的浏览器不支持 HTML5 视频，请升级您的浏览器。
</video>
代码解释：
<video> 标签不再需要 src 属性。<source>: 为同一个视频提供不同格式的源文件。
src: 视频文件路径。type: 非常重要！ 告诉浏览器这个文件的 MIME 类型，这可以避免浏览器下载了不支持的格式又丢弃，从而节省带宽。
- 标签内的文字：如果用户的浏览器非常古老，完全不支持
<video> 标签，那么它会忽略 <source> 标签，并显示这段备用文本。
常用属性
通过给 <video> 标签添加属性，你可以控制视频的播放行为。
（图片来源网络，侵删）
属性
值
描述
controlscontrols必须，向用户显示播放控件（如播放/暂停、音量、进度条、全屏等）。
autoplayautoplay视频在就绪后马上自动播放。注意： 现代浏览器通常要求视频必须是静音 (muted) 才能自动播放，以避免打扰用户。
mutedmuted设置视频音频为静音。
looploop视频播放结束后，重新开始播放。
posterimage.jpg指定一张图片，在视频下载完成前或用户点击播放前显示，这能提升用户体验。
preloadauto, metadata, none建议浏览器如何加载视频。auto (默认) 建议加载整个视频；metadata 只加载视频的元数据（如时长、尺寸）；none 不建议加载。
width像素值设置播放器的宽度。
height像素值设置播放器的高度。
示例：一个功能更丰富的播放器
<video
width="800"
height="450"
controls
autoplay
muted
loop
poster="video-poster.jpg"
preload="metadata">
<source src="my-video.mp4" type="video/mp4">
<source src="my-video.webm" type="video/webm">
您的浏览器不支持 HTML5 视频。
</video>
通过 JavaScript 控制
你可以使用 JavaScript 来更精细地控制视频的播放，例如在特定事件发生时播放或暂停视频。
给 <video> 标签一个 id，这样我们就可以在 JS 中选中它。
<video id="myVideo" width="600" controls>
<source src="my-video.mp4" type="video/mp4">
</video>
<button id="playPauseBtn">播放/暂停</button>
在 <script> 标签中编写控制逻辑：
（图片来源网络，侵删）
<script>
// 获取 video 元素和按钮元素
const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
// 为按钮添加点击事件监听器
playPauseBtn.addEventListener('click', function() {
// 如果视频已暂停，则播放它
if (video.paused) {
video.play();
playPauseBtn.textContent = "暂停";
} else {
// 如果视频正在播放，则暂停它
video.pause();
playPauseBtn.textContent = "播放";
}
});
// 监听视频的 'ended' 事件
video.addEventListener('ended', function() {
console.log('视频播放完毕！');
playPauseBtn.textContent = "播放";
});
// 监听视频的 'play' 事件
video.addEventListener('play', function() {
console.log('视频开始播放。');
});
</script>
常用的 JavaScript 属性和方法：
-
属性:
video.paused: 返回视频是否处于暂停状态。video.ended: 返回视频是否播放完毕。video.currentTime: 获取或设置视频的当前播放时间（秒）。video.duration: 获取视频的总时长（秒）。video.volume: 获取或设置音量（0.0 到 1.0）。video.muted: 获取或设置是否静音。
-
方法:
video.play(): 播放视频。video.pause(): 暂停视频。video.load(): 重新加载视频。
最佳实践和注意事项
- 提供多种格式 (MP4, WebM, Ogg): 这是确保兼容性的黄金法则，MP4 是兼容性最好的，WebM 是现代浏览器（Chrome, Firefox, Edge）推荐的高效格式。
- 始终添加
controls: 除非你有非常特殊的需求（比如背景视频自动播放），否则一定要提供 controls 属性，让用户可以控制播放。
- 使用
poster 属性: 一个吸引人的预览图可以大大提升用户体验，尤其是在视频加载较慢时。
- 考虑移动端: 确保你的视频和播放器在手机上也能良好显示，使用响应式设计（用
max-width: 100% 代替固定宽度）。
- 视频文件大小: 视频文件通常很大，会影响网页加载速度，请务必对视频进行压缩和转码，可以使用 HandBrake 等工具。
- 字幕: 为了提升可访问性，你可以使用
<track> 标签为视频添加字幕。<video controls>
<source src="my-video.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
</video>
.vtt 文件是 WebVTT 格式的字幕文件。
创建一个网页视频播放器非常简单,核心就是 <video> 标签，从最基础的 src 属性，到推荐的多格式 <source>，再到通过 controls 属性提供用户界面，最后用 JavaScript 实现高级交互，遵循最佳实践，你的视频就能在绝大多数设备和浏览器上流畅播放。
由于不同的浏览器对视频编码格式的支持不同（主要是 MP4, WebM, Ogg），为了确保你的视频能在所有现代浏览器上播放，最佳实践是使用 <source> 标签来提供多个格式的视频文件，浏览器会按顺序尝试加载，直到找到它能播放的第一个格式。
<video width="600" controls>
<source src="my-video.mp4" type="video/mp4">
<source src="my-video.webm" type="video/webm">
<source src="my-video.ogv" type="video/ogg">
<!-- 如果浏览器不支持 video 标签，会显示这段文字 -->
您的浏览器不支持 HTML5 视频，请升级您的浏览器。
</video>
代码解释：
<video>标签不再需要src属性。<source>: 为同一个视频提供不同格式的源文件。src: 视频文件路径。type: 非常重要！ 告诉浏览器这个文件的 MIME 类型，这可以避免浏览器下载了不支持的格式又丢弃，从而节省带宽。
- 标签内的文字：如果用户的浏览器非常古老，完全不支持
<video>标签，那么它会忽略<source>标签，并显示这段备用文本。
常用属性
通过给 <video> 标签添加属性，你可以控制视频的播放行为。
（图片来源网络，侵删）
| 属性 | 值 | 描述 |
|---|---|---|
controls |
controls |
必须，向用户显示播放控件（如播放/暂停、音量、进度条、全屏等）。 |
autoplay |
autoplay |
视频在就绪后马上自动播放。注意： 现代浏览器通常要求视频必须是静音 (muted) 才能自动播放，以避免打扰用户。 |
muted |
muted |
设置视频音频为静音。 |
loop |
loop |
视频播放结束后，重新开始播放。 |
poster |
image.jpg |
指定一张图片，在视频下载完成前或用户点击播放前显示，这能提升用户体验。 |
preload |
auto, metadata, none |
建议浏览器如何加载视频。auto (默认) 建议加载整个视频；metadata 只加载视频的元数据（如时长、尺寸）；none 不建议加载。 |
width |
像素值 |
设置播放器的宽度。 |
height |
像素值 |
设置播放器的高度。 |
示例：一个功能更丰富的播放器
<video
width="800"
height="450"
controls
autoplay
muted
loop
poster="video-poster.jpg"
preload="metadata">
<source src="my-video.mp4" type="video/mp4">
<source src="my-video.webm" type="video/webm">
您的浏览器不支持 HTML5 视频。
</video>
通过 JavaScript 控制
你可以使用 JavaScript 来更精细地控制视频的播放，例如在特定事件发生时播放或暂停视频。
给 <video> 标签一个 id，这样我们就可以在 JS 中选中它。
<video id="myVideo" width="600" controls>
<source src="my-video.mp4" type="video/mp4">
</video>
<button id="playPauseBtn">播放/暂停</button>
在 <script> 标签中编写控制逻辑：
（图片来源网络，侵删）
<script>
// 获取 video 元素和按钮元素
const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
// 为按钮添加点击事件监听器
playPauseBtn.addEventListener('click', function() {
// 如果视频已暂停，则播放它
if (video.paused) {
video.play();
playPauseBtn.textContent = "暂停";
} else {
// 如果视频正在播放，则暂停它
video.pause();
playPauseBtn.textContent = "播放";
}
});
// 监听视频的 'ended' 事件
video.addEventListener('ended', function() {
console.log('视频播放完毕！');
playPauseBtn.textContent = "播放";
});
// 监听视频的 'play' 事件
video.addEventListener('play', function() {
console.log('视频开始播放。');
});
</script>
常用的 JavaScript 属性和方法：
-
属性:
video.paused: 返回视频是否处于暂停状态。video.ended: 返回视频是否播放完毕。video.currentTime: 获取或设置视频的当前播放时间（秒）。video.duration: 获取视频的总时长（秒）。video.volume: 获取或设置音量（0.0 到 1.0）。video.muted: 获取或设置是否静音。
-
方法:
video.play(): 播放视频。video.pause(): 暂停视频。video.load(): 重新加载视频。
最佳实践和注意事项
- 提供多种格式 (MP4, WebM, Ogg): 这是确保兼容性的黄金法则，MP4 是兼容性最好的，WebM 是现代浏览器（Chrome, Firefox, Edge）推荐的高效格式。
- 始终添加
controls: 除非你有非常特殊的需求（比如背景视频自动播放），否则一定要提供controls属性，让用户可以控制播放。 - 使用
poster属性: 一个吸引人的预览图可以大大提升用户体验，尤其是在视频加载较慢时。 - 考虑移动端: 确保你的视频和播放器在手机上也能良好显示，使用响应式设计（用
max-width: 100%代替固定宽度）。 - 视频文件大小: 视频文件通常很大，会影响网页加载速度，请务必对视频进行压缩和转码，可以使用 HandBrake 等工具。
- 字幕: 为了提升可访问性，你可以使用
<track>标签为视频添加字幕。<video controls> <source src="my-video.mp4" type="video/mp4"> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default> <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文"> </video>.vtt文件是 WebVTT 格式的字幕文件。
创建一个网页视频播放器非常简单,核心就是 <video> 标签，从最基础的 src 属性，到推荐的多格式 <source>，再到通过 controls 属性提供用户界面，最后用 JavaScript 实现高级交互，遵循最佳实践，你的视频就能在绝大多数设备和浏览器上流畅播放。
