<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Video 示例</title>
</head>
<body>
<h1>HTML5 Video 示例</h1>
<video width="640" height="360" controls>
<source src="sample.mp4" type="video/mp4">
<source src="sample.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
在这个示例中，<video> 元素包含了两个 <source> 子元素，每个 <source> 元素指定了不同格式的视频文件（MP4 和 WebM）。浏览器将自动选择支持的第一个格式进行播放。controls 属性添加了一个默认的视频控制面板，使用户可以播放、暂停、调整音量和全屏等。
<video> 元素的一些重要属性和事件：
- src：
- 指定视频文件的 URL。
- width 和 height：
- 指定视频播放区域的宽度和高度。
- controls：
- 启用默认的控制面板。
- autoplay：
- 指定在页面加载时自动播放视频。
- loop：
- 指定循环播放视频。
- preload：
- 指定在页面加载时是否预加载视频。
- poster：
- 指定视频加载前显示的封面图片。
- currentTime：
- 获取或设置当前播放的时间。
- play() 和 pause() 方法：
- 控制视频的播放和暂停。
- ended 事件：
- 在视频播放结束时触发。
HTML5 视频支持多种视频格式，例如 MP4、WebM、Ogg 等。通过提供多个 <source> 元素，你可以确保在不同的浏览器中选择合适的视频格式。视频在 Web 开发中广泛应用于教育、娱乐、广告等领域。
转载请注明出处：http://www.zyzy.cn/article/detail/12430/HTML