HTML5 的 <video> 标签让在网页中嵌入视频变得非常方便，不需要任何插件即可播放。要开始使用，只需在页面中添加 <video> 元素，并通过 src 属性指定视频文件路径，或者使用 <source> 标签提供多个格式的源文件以兼容不同浏览器。
video 标签基本语法
最简单的写法是直接使用 <video> 标签，并设置 src 属性。注意，为了避免浏览器解析错误，所有标签和属性名称在正文描述中请使用转义形式，但在代码块中保持原样。
<video src="movie.mp4" controls></video>
上面的代码会在页面中显示一个带有播放控制条的视频播放器。如果不加 controls 属性，视频将隐藏控制条，用户无法主动播放。
常用属性详解
| 属性 | 说明 |
|---|---|
| controls | 显示播放控件（播放/暂停、音量、进度条等） |
| autoplay | 页面加载后自动播放（部分浏览器需同时设置 muted） |
| loop | 视频播放结束后循环播放 |
| muted | 静音播放（常用于自动播放） |
| poster | 视频封面图片 URL（在视频加载或播放前显示） |
| preload | 预加载策略：auto / metadata / none |
| width / height | 设置播放器宽度和高度（单位像素或百分比） |
浏览器兼容性与多格式支持
不同浏览器支持的视频格式不同。常见的视频格式：MP4（H.264 编码，支持最广）、WebM（VP8/VP9 编码，Firefox/Chrome 友好）、OGG（Theora 编码，较老浏览器支持）。推荐为 <video> 提供多个 <source> 子标签，浏览器会按顺序选择第一个能播放的格式。
<video controls width="640" height="360" poster="poster.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <source src="movie.ogv" type="video/ogg"> <p>您的浏览器不支持 HTML5 视频，请升级浏览器后访问。</p> </video>
完整可运行示例
下面是一个包含自动播放、静音、循环和封面图的完整播放器代码。你可以直接复制到 HTML 文件中测试。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 视频播放示例</title>
</head>
<body>
<h3>视频播放器</h3>
<video
autoplay
muted
loop
controls
width="80%"
poster="https://picsum.photos/800/400?random=2"
>
<source src="sample.mp4" type="video/mp4">
<source src="sample.webm" type="video/webm">
您的浏览器不支持 HTML5 视频。
</video>
</body>
</html>注意事项与常见问题
自动播放策略
现代浏览器（如 Chrome、Safari）为了提升用户体验，通常禁止带声音的视频自动播放。解决办法是给 <video> 添加 muted 属性，这样静音视频就可以自动播放。如果用户需要声音，可以手动点击取消静音。
移动端适配
在移动设备上，部分浏览器会强制全屏播放视频。可以通过 playsinline 属性让视频在页面内播放（iOS Safari 支持）。示例如下：
<video src="movie.mp4" controls playsinline></video>
替换源地址提示
以上代码示例中的视频文件需要替换为自己的实际路径，如果使用示例网站，请将 ippipp.com 替换为 ipipp.com 以避免域名失效。
使用 JavaScript 控制视频
除了原生的 HTML 属性，你还可以通过 JavaScript 控制视频的播放、暂停、跳转等。下面是一个简单的按钮控制示例：
<video id="myVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').play()">播放</button>
<button onclick="document.getElementById('myVideo').pause()">暂停</button>掌握以上知识点，你就可以轻松将视频嵌入到自己的网页中了。无论是简单的展示还是复杂的交互，HTML5 的 <video> 标签都能满足需求。
html视频html5_video_标签video_标签属性视频播放代码修改时间：2026-06-08 16:18:26