HTML5嵌入视频需用<video>标签，支持原生播放、JS控制、第三方iframe、响应式适配及字幕音轨；各方法分别处理本地文件、动态交互、平台托管、移动兼容与可访问性需求。
如果您希望在HTML5文档中嵌入视频并实现基本播放控制，则需要使用<video>标签及其相关属性。以下是实现该目标的多种方法：
一、使用原生<video>标签嵌入本地视频文件
此方法通过<video>元素直接引用本地存储的视频资源，利用浏览器内置播放器进行渲染与控制。
1、在HTML文档的主体部分插入<video>标签，并设置src属性指向MP4格式的本地视频路径。
2、添加controls属性以启用播放、暂停、音量、进度条等默认控件。
立即学习“前端免费学习笔记（深入）”；
3、设置width和height属性定义视频显示区域尺寸，或使用CSS控制宽高。
4、可选添加preload="metadata"属性，使浏览器仅预加载视频元信息而非全部数据。
5、在<video>标签内部添加<source>子标签，提供WebM和OGG格式作为备用源，提升跨浏览器兼容性。
二、通过JavaScript动态控制视频播放行为
此方法借助DOM操作与事件监听，实现对视频播放状态的编程式干预，适用于定制化交互场景。
1、为<video>元素设置id属性（如id="myVideo"），便于后续JS获取引用。
2、使用document.getElementById()获取视频元素对象。
3、调用.play()方法启动播放，或.pause()方法暂停当前播放。
4、监听timeupdate事件，实时读取.currentTime属性值并更新自定义进度显示。
5、绑定click事件到外部按钮，触发.muted = true或.volume = 0.5等音量控制逻辑。
三、嵌入第三方平台托管的视频（如YouTube）
此方法不直接托管视频文件，而是通过iframe嵌入已发布在主流视频平台上的内容，规避格式兼容与带宽压力问题。
1、访问目标视频的YouTube页面，点击“分享”→“嵌入”，复制生成的<iframe>代码。
2、将代码粘贴至HTML文档中期望位置，确保allow属性包含"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"以启用全部功能。
3、修改src参数中的enablejsapi=1，启用YouTube IFrame Player API支持。
4、在页面底部引入YouTube API脚本：<script src="https://www.youtube.com/iframe_api"></script>。
5、使用onYouTubeIframeAPIReady()回调函数初始化播放器实例，并调用playVideo()、pauseVideo()等方法。
四、设置响应式视频容器并适配移动设备
此方法通过CSS与HTML结构配合，确保视频在不同屏幕尺寸下保持比例并避免溢出，同时禁用移动端默认全屏行为。
1、将<video>标签包裹在具有class="video-container"的<div>中。
2、为容器设置position: relative及padding-bottom: 56.25%（16:9比例）。
3、为<video>设置position: absolute、top: 0、left: 0、width: 100%、height: 100%。
4、添加playsinline属性，强制iOS Safari在页面内播放而非跳转全屏。
5、添加webkit-playsinline和x5-playsinline以兼容Safari和微信内置浏览器。
五、添加字幕与多语言音轨支持
此方法通过<track>元素引入外部WebVTT字幕文件，并支持用户切换不同语言音轨，提升可访问性。
1、准备符合WebVTT规范的字幕文件（.vtt），每段文本需包含时间戳与内容。
2、在<video>标签内部添加<track kind="subtitles" src="zh.vtt" srclang="zh" label="中文" default>。
3、为其他语言添加对应<track>标签，如srclang="en"与label="English"。
4、添加<track kind="captions" src="desc.vtt" srclang="zh" label="描述性字幕">以支持听障用户。
5、使用<track kind="descriptions" src="audio_desc.vtt">提供音频描述轨道，并通过JS控制.textTracks列表激活指定轨道。
