HTML5 引入了内置的 <video> 标签，使得在网页中嵌入和播放视频变得更加简单和直观。以下是对 HTML5 视频的详解，包括使用方法、常用属性、示例代码等。
1. 基本语法
基本的 HTML5 视频标签如下：
<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
2. 常用属性
- controls: 显示播放控件，如播放/暂停按钮、音量控制等。
- autoplay: 视频在加载后自动播放。
- loop: 视频播放完后自动重新开始。
- muted: 视频默认静音。
- poster: 视频加载前显示的图像。
- width: 视频的宽度。
- height: 视频的高度。
3. 示例代码
以下是一个简单的 HTML5 视频示例，其中包含控件和其他属性：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频示例</title>
</head>
<body>
<h1>HTML5 视频示例</h1>
<video controls width="640" height="360" poster="poster.jpg" muted>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>
</body>
</html>
4. 使用注意事项
- 浏览器兼容性: 不是所有浏览器都支持所有视频格式，最常用的格式是 MP4 (使用 H.264 编码)，也可以使用 OGG 和 WebM 格式。
- 跨域请求: 如果视频文件来自不同的域，确保正确配置 CORS（跨源资源共享）来避免安全问题。
- 自适应设计: 可以使用 CSS 来使视频响应式调整大小，例如使用
width: 100%; height: auto;。
5. JavaScript 控制视频
您还可以使用 JavaScript 来控制视频的播放，例如：
const video = document.querySelector('video');
// 播放视频
video.play();
// 暂停视频
video.pause();
// 切换静音
video.muted = !video.muted;
6. 小结
HTML5 视频标签简化了在网页中加入视频的过程，同时提供了丰富的自定义选项和良好的浏览器支持。通过学习和实践，可以更好地利用这一功能提升用户体验。
