HTML5 提供了原生的视频播放能力，通过 <video> 标签可以轻松嵌入视频并控制播放行为。相比早期依赖 Flash 的方式，HTML5 视频更轻量、兼容移动端，且支持多种自定义功能。
使用 <video> 标签基础播放
要在网页中添加视频，只需使用 <video> 标签，并通过 src 属性指定视频文件路径：
<video controls width="640" height="360"><source src="example.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
controls 属性会显示播放、音量、全屏等默认控件。建议提供多种格式（如 mp4、webm、ogg）以提升浏览器兼容性：
<source src="example.webm" type="video/webm"><source src="example.ogg" type="video/ogg">
常用属性定制播放行为
通过设置不同属性，可以灵活控制视频的行为：
立即学习“前端免费学习笔记（深入）”；
- autoplay：自动播放（部分浏览器限制静音才能自动播放）
- muted：静音，常与 autoplay 搭配使用
- loop：循环播放
- preload：控制预加载行为（"none"、"metadata"、"auto"）
- poster：设置视频封面图
示例：
<video width="640" controls muted autoplay loop poster="cover.jpg"><source src="bg-video.mp4" type="video/mp4">
</video>
JavaScript 控制播放状态
通过 JavaScript 可以实现更精细的控制，比如播放、暂停、跳转时间、调节音量等。
获取视频元素并操作：
const video = document.querySelector('video');// 播放
video.play();
// 暂停
video.pause();
// 跳转到第10秒
video.currentTime = 10;
// 设置音量（0.0 到 1.0）
video.volume = 0.5;
// 监听播放事件
video.addEventListener('play', () => {
console.log('视频开始播放');
});
自定义播放控件样式
默认控件样式受限，可通过隐藏原生 controls 并用 HTML + CSS + JavaScript 构建自定义控件。
基本思路：
- 移除 controls 属性
- 添加自定义按钮（播放/暂停、进度条、音量滑块等）
- 用 JS 绑定事件响应用户操作
例如自定义播放按钮：
<video id="myVideo" width="640"><source src="demo.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').play()">播放</button>
<button onclick="document.getElementById('myVideo').pause()">暂停</button>
结合 CSS 可美化界面，实现现代化播放器外观。
基本上就这些。HTML5 视频功能强大又灵活，掌握标签属性和 JS API 后，就能实现从简单嵌入到高级定制的各类需求。注意兼容性和用户体验，比如避免自动播放干扰用户、提供备用格式等。
