＜video＞ 标签基础用法
🎥 一、<video> 标签基础用法
✅ 基本语法：
<video src="example.mp4" controls></video>说明：
src: 指定视频文件的路径（可以是相对路径或绝对路径，如 MP4、WebM 等格式）。controls: 显示浏览器默认的视频控制条（播放/暂停、进度条、音量等）。
✅ 示例：最简单的视频播放
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Video Example</title>
</head>
<body><video src="sample.mp4" controls width="600"></video>
</body>
</html>📌 用户可以看到一个视频播放器，可以播放、暂停、拖动进度条等。
🛠️ 二、常用属性详解
| 属性 | 说明 | 示例 |
|---|---|---|
src | 视频文件路径（URL） | src="video.mp4" |
controls | 显示默认播放控件（播放/暂停、进度条、音量等） | <video controls> |
autoplay | 页面加载后自动播放视频（大多数浏览器会阻止有声音的自动播放） | <video autoplay> |
loop | 视频播放完毕后自动循环播放 | <video loop> |
muted | 静音播放（常与 autoplay 配合，因为浏览器通常禁止自动播放有声视频） | <video autoplay muted> |
width / height | 设置视频播放器的显示宽高（单位：像素） | width="640" height="360" |
poster | 在视频加载前或未播放时显示的封面图片 | poster="preview.jpg" |
preload | 指定视频预加载方式（可选值：none、metadata、auto） | preload="metadata" |
✅ 示例：带封面、自动静音循环播放
<videosrc="intro.mp4"controlsautoplaymutedloopposter="cover.jpg"width="800"
>
</video>- 用户打开页面时，视频会静音自动播放并循环，显示一张封面图，有完整的控制条。
📂 三、多格式视频兼容（推荐做法）
由于不同浏览器对视频格式支持不同，最佳实践是提供多种格式的视频源，让浏览器自动选择支持的格式。
✅ 使用 <source> 标签（推荐 👍）
<video controls width="640" poster="cover.jpg"><source src="video.mp4" type="video/mp4" /><source src="video.webm" type="video/webm" /><source src="video.ogg" type="video/ogg" />您的浏览器不支持 HTML5 视频播放。
</video>说明：
<source>标签用于指定备选视频资源。type属性告诉浏览器该视频的 MIME 类型，帮助浏览器判断是否支持。- 如果浏览器不支持任何
<source>，就会显示<video>标签内的后备文字（比如提示用户升级浏览器）。
✅ 常见视频格式及 MIME 类型
| 格式 | 文件扩展名 | MIME Type | 浏览器支持情况 |
|---|---|---|---|
| MP4 | .mp4 | video/mp4 | ✅ 所有现代浏览器（推荐） |
| WebM | .webm | video/webm | ✅ Chrome、Firefox、Edge |
| Ogg / Theora | .ogg, .ogv | video/ogg | ✅ Firefox、Opera |
✅ 推荐组合：MP4（主） + WebM（备用），兼容绝大多数浏览器。
🎮 四、使用 JavaScript 控制 Video
你可以通过 JavaScript 操作 <video> 元素，实现自定义播放控制、播放状态监听、全屏、播放进度控制等功能。
✅ 获取 video 元素
<video id="myVideo" src="video.mp4" controls></video>
const video = document.getElementById('myVideo');✅ 常用 JavaScript API
| 方法 / 属性 | 说明 | 示例 |
|---|---|---|
play() | 播放视频 | video.play() |
pause() | 暂停视频 | video.pause() |
currentTime | 当前播放时间（秒） | video.currentTime = 30; // 跳转到30秒 |
duration | 视频总时长（只读，单位秒） | console.log(video.duration); |
volume | 音量（0.0 ~ 1.0） | video.volume = 0.5; // 50% 音量 |
muted | 是否静音（布尔值） | video.muted = true; |
paused | 是否处于暂停状态（只读） | if (video.paused) { /* 视频是暂停的 */ } |
ended | 是否播放完毕（只读） | if (video.ended) { console.log('播放完了！'); } |
playbackRate | 播放速度（1.0 正常，0.5 慢放，2.0 快进） | video.playbackRate = 2; |
✅ 示例：自定义播放按钮
<video id="myVideo" src="video.mp4" width="600"></video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button><script>const video = document.getElementById('myVideo');function playVideo() {video.play();}function pauseVideo() {video.pause();}
</script>🖥️ 五、全屏播放
你可以通过 JavaScript 让视频进入全屏模式：
video.requestFullscreen(); // 进入全屏
document.exitFullscreen(); // 退出全屏🔒 注意：由于浏览器安全策略，requestFullscreen() 必须由用户手势（比如点击事件）触发，不能自动执行。
✅ 示例：点击按钮全屏
<video id="myVideo" src="video.mp4" width="600"></video>
<button onclick="toggleFullscreen()">全屏</button><script>const video = document.getElementById('myVideo');function toggleFullscreen() {if (!document.fullscreenElement) {video.requestFullscreen().catch(err => {console.log(`无法进入全屏: ${err.message}`);});} else {document.exitFullscreen();}}
</script>🛡️ 六、注意事项与最佳实践
| 项目 | 说明 |
|---|---|
| 跨域问题 | 如果视频文件放在其他域名下，确保服务器配置了正确的 CORS 头，否则可能无法播放或加载缩略图等 |
| 移动端自动播放限制 | iOS / Android 一般禁止自动播放有声音的视频，务必搭配 muted 使用 |
| 视频格式兼容性 | 推荐使用 MP4（H.264编码）为主，WebM 为备用，确保最大兼容性 |
| 视频加载优化 | 使用 preload="metadata" 只加载元数据，不自动加载全部视频内容，节省流量 |
| 封面图（poster） | 建议提供一张有意义的封面图，提升用户体验 |
| 无障碍（Accessibility） | 可以添加 title 或配合 <track> 字幕文件，提升无障碍体验 |
📜 七、字幕支持（可选） - <track> 标签
你可以为视频添加字幕，使用 <track> 标签：
<video controls width="600"><source src="video.mp4" type="video/mp4" /><tracksrc="subtitles.vtt"kind="subtitles"srclang="zh"label="中文字幕"default/>
</video>kind="subtitles"：表示是字幕srclang="zh"：字幕语言是中文label="中文字幕"：显示在字幕选择菜单中的名称default：默认启用该字幕
📎 字幕文件一般是 WebVTT 格式（.vtt）
✅ 总结：HTML5 <video> 标签核心知识点
| 功能 | 方法/属性/标签 |
|---|---|
| 基础播放 | <video src="video.mp4" controls> |
| 多格式兼容 | 使用多个 <source src="..." type="..."> |
| 常用属性 | controls, autoplay, loop, muted, poster, width, height |
| JavaScript 控制 | play(), pause(), currentTime, volume, paused, ended |
| 全屏控制 | video.requestFullscreen() |
| 字幕支持 | <track kind="subtitles" src="sub.vtt" srclang="zh" /> |
| 最佳实践 | 提供 MP4 + WebM，使用 preload="metadata"，移动端搭配 muted |