什么是 HTML 视频？
HTML 视频指在网页中嵌入视频文件并实现播放的功能。
通过使用 HTML5 提供的<video>标签，可以轻松地将视频内容集成到网页中。
<video> 基本用法
要在网页中嵌入视频文件，可以使用<video>标签。以下是一个简单的例子：
<h1>视频示例</h1>
<video src="/uploads/20250322/video.mp4" controls>
您的浏览器不支持视频标签。
</video><video> 属性解释
| 属性 | 解释 |
|---|---|
| src | 指定视频文件的路径（可以是相对路径或绝对路径）。 |
| controls | 添加播放、暂停、音量控制等控件到视频播放器中。 |
| autoplay | 视频在加载后自动播放（某些浏览器可能需要与muted属性一起使用）。 |
| loop | 视频播放结束后重新开始播放。 |
| muted | 视频静音播放。 |
| poster | 指定视频封面图片，在视频播放前显示。 |
| width 和 height | 设置视频播放器的宽度和高度。 |
| 标签内文本内容 | 如果浏览器不支持<video>标签，将显示标签内的文本内容（通常用于提供备用信息或下载链接）。 |
<video> 多格式支持
不同浏览器支持的视频格式可能不同，可以通过<source>标签提供多种格式的视频文件：
<video controls>
<source src="/uploads/20250322/video.mp4" type="video/mp4">
<source src="/uploads/20250322/video.ogg" type="video/ogg">
<source src="/uploads/20250322/video.wav" type="video/webm">
您的浏览器不支持视频元素。
</video>浏览器会按顺序尝试播放第一个支持格式的视频。
<video> 设置视频尺寸
使用 width 和 height 属性设置视频的显示尺寸：
<h1>视频示例</h1>
<video src="/uploads/20250322/video.mp4" controls width="320" height="340">
您的浏览器不支持视频元素。
</video><video> 自动播放
如果你希望视频在页面加载时自动播放，可以使用autoplay属性：
<h1>视频示例</h1>
<video src="/uploads/20250322/video.mp4" controls autoplay>
您的浏览器不支持视频元素。
</video>注意：许多浏览器会阻止自动播放，尤其是带有声音的视频。
<video> 循环播放
如果你希望视频循环播放，可以使用loop属性：
<h1>视频示例</h1>
<video src="/uploads/20250322/video.mp4" controls loop>
您的浏览器不支持视频元素。
</video><video> 静音播放
使用muted属性让视频静音播放：
<h1>视频示例</h1>
<video src="/uploads/20250322/video.mp4" controls muted>
您的浏览器不支持视频元素。
</video><video> 封面图片
使用poster属性设置视频封面图片：
<h1>视频示例</h1>
<video src="/uploads/20250322/video.mp4" controls poster="/uploads/20250322/poster.jpg">
您的浏览器不支持视频元素。
</video><video> 预加载
使用preload属性控制视频的预加载行为：
auto：浏览器会自动预加载视频文件（默认值）。metadata：只预加载视频文件的元数据（如时长）。none：不预加载视频文件。
<h1>视频示例</h1>
<video src="/uploads/20250322/video.mp4" controls preload="auto">
您的浏览器不支持视频元素。
</video><video> 响应式视频
使用 CSS 使视频在不同设备上自适应：
<h1>视频示例</h1>
<style>
video {
max-width: 60%;
height: auto;
}
</style>
<h1>视频示例</h1>
<video src="/uploads/20250322/video.mp4" controls>
您的浏览器不支持视频元素。
</video><video> JavaScript控制
可以通过 JavaScript 控制视频的播放、暂停等操作：
<h1>视频示例</h1>
<video id="myVideo" src="/uploads/20250322/video.mp4" controls>
您的浏览器不支持视频标签。
</video>
<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<script>
var video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
</script>
<video> 事件监听
可以通过 JavaScript 监听视频事件，如播放结束：
<h1>视频示例</h1>
<video id="myVideo" src="/uploads/20250322/video.mp4" controls>
您的浏览器不支持视频标签。
</video>
<script>
var video = document.getElementById("myVideo");
video.addEventListener("ended", function() {
alert("视频播放结束！");
});
</script>
评论区 0
发表评论
教程介绍
HTML 超文本标记语言，一种用于创建网页的标准标记语言，在浏览器上运行和解析。
60
章节
112
阅读
0
评论