HTML5的<video>标签通过controls属性实现播放控制，支持autoplay/muted自动播放、JavaScript动态控制、响应式布局；录制需MediaRecorder API配合getUserMedia()。
如果您希望在网页中嵌入视频并实现播放控制功能，HTML5 的 <video> 标签提供了原生支持。以下是使用 <video> 标签添加 controls 属性来实现视频播放的具体方法：
一、基础视频播放结构
<video> 标签是 HTML5 中用于嵌入视频内容的标准元素，通过设置 controls 属性可显示浏览器默认的播放控件（如播放/暂停、音量、进度条等）。该方式不涉及录制功能，仅用于播放已存在的视频文件。
1、在 HTML 文件中插入 <video> 标签，并设置 width 和 height 属性以定义显示尺寸。
2、为 <video> 标签添加 controls 属性，启用内置控制栏。
立即学习“前端免费学习笔记（深入）”；
3、使用 <source> 子标签指定视频源文件路径及格式，建议提供 mp4、webm 两种格式以提升浏览器兼容性。
4、在 <source> 标签后添加备用文本，当浏览器不支持 <video> 标签时显示该提示。
二、添加自动播放与静音属性
某些场景下需要视频在页面加载后立即开始播放，此时需结合 autoplay 和 muted 属性。现代浏览器普遍要求自动播放必须配合静音，否则将被阻止。
1、在 <video> 标签中添加 autoplay 属性，触发自动播放行为。
2、同步添加 muted 属性，确保音频通道处于静音状态。
3、保留 controls 属性，允许用户后续手动取消静音或调整音量。
4、建议同时设置 loop 属性，使视频循环播放，避免播放结束后控件失效。
三、使用 JavaScript 控制播放状态
通过 DOM 操作获取 <video> 元素引用，可利用 JavaScript 方法动态控制播放、暂停、跳转等行为，增强交互能力。
1、为 <video> 标签设置 id 属性，例如 id="myVideo"。
2、在 script 标签中使用 document.getElementById("myVideo") 获取该元素。
3、调用 play() 方法启动播放，pause() 方法暂停播放。
4、修改 currentTime 属性值（单位为秒）实现视频时间轴跳转，例如 video.currentTime = 30。
四、响应式视频布局设置
为适配不同屏幕尺寸，需确保视频容器随视口缩放而自适应，避免出现横向滚动条或比例失真。
1、为 <video> 标签设置 width="100%" 和 height="auto"，保持宽高比不变。
2、将 <video> 标签包裹在具有 max-width 限制的父容器中，例如 div 设置 style="max-width: 800px;"。
3、添加 CSS 规则 video { display: block; }，消除默认内联元素带来的底部空白。
4、对移动端可额外添加 @media 查询，在小屏幕下进一步约束最大高度。
五、本地录制视频的替代方案说明
HTML5 原生 <video> 标签本身不支持视频录制功能。若需实现录制，必须借助 MediaRecorder API 配合 getUserMedia() 获取媒体流，再结合 <video> 标签进行预览和回放。
1、调用 navigator.mediaDevices.getUserMedia({ video: true }) 请求摄像头权限。
2、将返回的 MediaStream 对象赋值给 <video> 元素的 srcObject 属性，实现实时预览。
3、创建 MediaRecorder 实例，传入该 MediaStream，调用 start() 开始录制。
4、录制完成后调用 stop()，监听 dataavailable 事件获取 Blob 数据并生成可播放 URL。
