HTML5 视频元素(video)技术教程
详细案例讲解
在HTML5中,`
基础语法
`
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
在上面的代码中:
- `controls` 属性添加内置的播放、暂停和音量控件。
- “ 元素定义了视频文件的路径和格式。
- 如果浏览器不支持 `
` 元素,它将显示“您的浏览器不支持 video 标签。”
案例讲解:在网页中嵌入视频
下面是一个具体的示例,展示了如何在网页上嵌入一个视频文件。假设我们有一个名为 `sample.mp4` 的视频文件。
HTML 代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>视频嵌入示例</title>
</head>
<body>
<h1>视频嵌入示例</h1>
<video width="640" height="360" controls>
<source src="sample.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</body>
</html>
将以上代码保存为一个 `.html` 文件并在浏览器中打开,您将会看到一个带有控件的视频播放器,可以播放 `sample.mp4` 文件。
样式调整
您还可以通过CSS对 `
<style>
video {
border: 2px solid #ccc;
border-radius: 8px;
max-width: 100%;
height: auto;
}
</style>
结论
通过本文的讲解,您应该已经了解了如何在网页上嵌入视频文件并使用HTML5的 `