<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Video Example</title>
</head>
<body>
<h1>HTML5 Video Example</h1>
<video width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
在这个示例中：
- <video> 元素用于包含视频。
- width 和 height 属性设置视频播放区域的宽度和高度。
- controls 属性添加了播放控制按钮（播放、暂停、音量等）。
- <source> 元素用于指定视频文件的来源和类型。在这里，我们使用了 MP4 格式的视频文件。
如果浏览器不支持 <video> 元素，将显示 <video> 元素之间的文本内容，这可以包含一个备用的消息，提示用户使用支持 HTML5 视频的浏览器。
在实际应用中，你可能需要提供多个不同格式的视频文件，以确保在各种浏览器中都能正常播放。通常，MP4（H.264 编码）和 WebM（VP9 或 VP8 编码）是常见的格式。
<video width="640" height="360" controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
Your browser does not support the video tag.
</video>
上述代码中，如果浏览器支持 MP4，则播放 MP4 格式的视频；否则，如果支持 WebM，则播放 WebM 格式的视频。如果两种格式都不支持，将显示备用文本。
通过 JavaScript，你还可以与 <video> 元素进行交互，例如动态控制播放、暂停、获取当前播放时间等。
转载请注明出处：http://www.zyzy.cn/article/detail/3673/HTML5