HTML5 的video元素改变了网页中嵌入视频的方式——无需依赖 Flash 或第三方插件，直接用原生代码即可播放视频，并提供丰富的 JavaScript API 用于控制播放、监听事件、甚至实时处理视频帧。本文将从基本用法、支持的格式、属性与方法、事件、自定义控件、高级技巧到性能优化，全面解析video的使用。一、video元素基本用法1.1 最简单的嵌入video controls/videosrc：视频文件路径。controls：添加浏览器默认的播放控件（播放/暂停、音量、进度条等）。1.2 提供多个备用源（处理不同浏览器格式）不同浏览器支持的视频格式不同，使用source子元素可以指定多个格式，浏览器会选择第一个能播放的。video controls source type="video/mp4" source type="video/webm" source type="video/ogg" 您的浏览器不支持 video 标签。 /video1.3 设置宽度、高度与封面图video controls poster="poster.jpg"/videowidth/height：指定视频播放器尺寸（建议设置，避免布局抖动）。poster：视频加载前或未播放时显示的图片。二、支持的视频格式与编码HTML5 没有强制规定统一格式，但主流浏览器普遍支持以下三种组合：格式容器视频编码音频编码浏览器支持MP4.mp4H.264 / AVCAAC所有现代浏览器（首选）WebM.webmVP8 / VP9Vorbis / OpusChrome, Firefox, Edge, OperaOgg.ogvTheoraVorbis兼容较旧浏览器（Firefox, Chrome）最佳实践：提供 MP4 + WebM 即可覆盖 99% 的用户。MP4 作为主要格式，WebM 作为备选。注意：H.265（HEVC）虽然压缩率更高，但浏览器支持不统一（Safari 支持，Chrome 依赖硬件），目前不建议作为唯一格式。三、video元素的核心属性属性类型说明srcURL视频文件地址controls布尔显示内置控件autoplay布尔自动开始播放（现代浏览器通常要求视频静音才能自动播放）muted布尔默认静音loop布尔循环播放
