视频标签 - <video>
什么是 <video> 标签？
<video> 标签用于在HTML页面中嵌入视频内容。它允许你播放来自服务器或本地文件的视频，支持多种视频格式。
基本语法
<video src="video.mp4" controls>
您的浏览器不支持视频元素。
</video>
核心属性
src 属性
src 属性用于指定视频文件的URL：
示例：
<!-- 基本视频播放 -->
<video src="movie.mp4" controls></video>
controls 属性
controls 属性用于显示浏览器默认的视频控件，包括播放/暂停按钮、音量控制、进度条和全屏按钮：
示例：
<!-- 带控件的视频 -->
<video src="trailer.mp4" controls></video>
autoplay 属性
autoplay 属性用于在页面加载完成后自动播放视频：
示例：
<!-- 自动播放视频 -->
<video src="intro.mp4" autoplay></video>
loop 属性
loop 属性用于使视频循环播放：
示例：
<!-- 循环播放视频 -->
<video src="background-video.mp4" loop controls></video>
muted 属性
muted 属性用于默认静音播放视频：
示例：
<!-- 默认静音播放 -->
<video src="demo.mp4" autoplay muted></video>
preload 属性
preload 属性用于指定视频的预加载行为：
| 值 | 描述 |
|---|---|
auto |
默认值，浏览器应该预加载视频 |
metadata |
浏览器只预加载视频元数据（如时长、尺寸） |
none |
浏览器不应预加载视频 |
示例：
<!-- 只预加载元数据 -->
<video src="large-video.mp4" preload="metadata" controls></video>
width 和 height 属性
width 和 height 属性用于指定视频的显示尺寸，以像素为单位：
示例：
<!-- 设置视频尺寸 -->
<video src="movie.mp4" width="640" height="360" controls></video>
poster 属性
poster 属性用于指定视频加载前显示的封面图像：
示例：
<!-- 带封面图像的视频 -->
<video src="movie.mp4" poster="movie-poster.jpg" controls></video>
支持的视频格式
<video> 标签支持以下视频格式：
| 格式 | 视频编解码器 | 音频编解码器 | MIME类型 | 浏览器支持 |
|---|---|---|---|---|
| MP4 | H.264 | AAC | video/mp4 | 所有现代浏览器 |
| WebM | VP8/VP9 | Vorbis/Opus | video/webm | Chrome, Firefox, Safari, Edge |
| OGG | Theora | Vorbis | video/ogg | Chrome, Firefox, Edge |
使用多种视频格式
为了确保视频在所有浏览器中都能播放，你可以使用多个 <source> 标签提供不同格式的视频：
示例：
<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持视频元素。
</video>
全局属性
<video> 标签支持所有HTML全局属性，包括 class、id、style 等。
示例：
<!-- 使用class样式的视频 -->
<video src="movie.mp4" controls class="custom-video"></video>
JavaScript 控制
你可以使用JavaScript控制视频播放：
<!-- HTML -->
<video id="myVideo" width="320" height="240">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频元素。
</video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<button onclick="toggleFullScreen()">全屏</button>
<!-- JavaScript -->
<script>
const video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function toggleFullScreen() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
}
</script>
最佳实践
-
提供多种视频格式：使用多个
<source>标签确保浏览器兼容性 -
使用有意义的提示文本：在
<video>标签内提供浏览器不支持时的替代文本 -
谨慎使用autoplay：自动播放可能会影响用户体验，大多数浏览器要求用户交互后才能播放视频
-
考虑文件大小：优化视频文件大小以提高页面加载速度
-
提供控件：除非有特殊需求，否则应该提供视频控件让用户控制播放
-
设置宽高：指定视频尺寸可以帮助浏览器在加载视频之前预留空间
-
使用封面图像：为视频提供有意义的封面图像提升用户体验
示例
<!-- 基础视频播放器 -->
<video src="movie.mp4" controls></video>
<!-- 带多种格式的视频 -->
<video controls width="800" height="450">
<source src="documentary.mp4" type="video/mp4">
<source src="documentary.webm" type="video/webm">
您的浏览器不支持视频元素。请下载<a href="documentary.mp4">MP4文件</a>。
</video>
<!-- 自动播放的静音背景视频 -->
<video src="background.mp4" autoplay muted loop playsinline></video>
<!-- 带封面图像的视频 -->
<video src="concert.mp4" poster="concert-poster.jpg" controls width="640" height="360"></video>
浏览器兼容性
<video> 标签在所有现代浏览器中都得到支持，但不同浏览器对视频格式的支持有所不同。使用多种格式可以确保最大兼容性。
总结
<video> 标签是HTML中用于嵌入视频内容的元素，它通过 src、controls 等属性控制视频的播放和行为。正确使用视频标签可以为网站添加丰富的视频体验，同时确保兼容性和良好的用户体验。