HTML视频标签有哪些常用属性？

HTML5引入的<video>标签让网页嵌入视频资源变得十分便捷，不需要依赖第三方插件就能实现视频播放功能，而该标签的各类属性则决定了视频的播放行为、展示效果和资源加载方式，掌握这些属性是前端开发的基础技能之一。

HTML视频标签基础常用属性

基础属性是几乎所有视频嵌入场景都会用到的属性，主要用来指定视频资源、控制播放状态和设置展示尺寸。

src属性

src属性用于指定视频资源的路径，支持相对路径和绝对路径，是视频标签必须配置的属性之一，如果只设置src不设置其他属性，视频会默认隐藏播放控件。

<video src="movie.mp4"></video>

controls属性

controls是布尔属性，添加该属性后浏览器会显示默认的播放控件，包括播放暂停按钮、进度条、音量调节、全屏按钮等，用户可以通过这些控件操作视频播放。

<video src="movie.mp4" controls></video>

width和height属性

这两个属性用来设置视频播放区域的宽度和高度，值可以是像素值也可以是百分比，如果不设置，视频会按照原始尺寸展示，设置后视频会按比例缩放适配指定区域。

<video src="movie.mp4" controls width="800" height="450"></video>

HTML视频标签进阶播放控制属性

进阶属性用来调整视频的播放规则，满足不同的业务场景需求。

autoplay属性

autoplay是布尔属性，添加后视频加载完成后会自动开始播放，不过目前大部分浏览器为了用户体验，会阻止带有声音的视频自动播放，通常需要配合muted属性使用才能实现自动播放。

<video src="movie.mp4" controls autoplay muted></video>

loop属性

loop是布尔属性，添加后视频播放结束后会自动重新播放，适合需要循环展示的视频场景，比如背景视频、广告视频等。

<video src="movie.mp4" controls loop></video>

muted属性

muted是布尔属性，添加后视频会默认静音，结合autoplay属性可以解决浏览器禁止有声视频自动播放的问题，用户也可以手动点击控件开启声音。

preload属性

preload属性用来设置视频的预加载策略，有三个可选值：none表示不预加载任何数据，metadata表示只预加载视频的元数据（比如时长、尺寸），auto表示浏览器自行决定是否预加载全部数据，默认值是auto。

<video src="movie.mp4" controls preload="metadata"></video>

HTML视频标签资源兼容属性

由于不同浏览器支持的视频格式不同，source子标签配合视频标签可以解决格式兼容问题，而poster属性则可以设置视频加载前的封面图。

source子标签

可以在<video>标签内部添加多个<source>标签，每个标签指定不同格式的视频资源，浏览器会按顺序尝试加载，直到找到支持的格式为止。

<video controls width="800">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <p>您的浏览器不支持视频播放，请升级浏览器</p>
</video>

poster属性

poster属性用来指定视频加载完成前或者视频播放前展示的封面图片路径，如果视频加载失败，也会一直显示该封面图。

<video src="movie.mp4" controls poster="cover.jpg"></video>

属性使用注意事项

在使用HTML视频标签属性时，需要注意以下几点：

• 布尔属性不需要设置值，只要出现在标签中就会生效，比如<video controls>和<video controls="controls">效果一致。
• 自动播放属性在移动端浏览器的限制更严格，部分移动端浏览器即使设置了autoplay和muted也无法自动播放，需要用户触发交互后才能播放。
• 如果同时设置了width和height，且比例和视频原始比例不一致，视频会拉伸变形，建议只设置其中一个属性，让浏览器自动按比例计算另一个值。

通过合理组合这些属性，就能满足绝大多数网页视频嵌入的需求，开发者可以根据实际业务场景选择对应的属性配置。

HTML_video_tagvideo_attributesHTML5_videoweb_video_playback修改时间：2026-06-04 05:48:29