HTML - 视频元素

欢迎，有抱负的网页开发者们！今天，我们将深入探讨 HTML5 中最激动人心的元素之一——视频元素。记得我们曾经依赖第三方插件来在线观看视频的日子吗？那些日子已经一去不复返了，多亏了这个小巧实用的标签。那么，让我们一起踏上这段旅程，解锁 HTML 视频元素的力量！

HTML - Video Element

语法

在我们进入有趣的部分之前，让我们从基础开始。HTML 视频元素有一个简单易记的语法：

<video src="movie.mp4" controls>
您的浏览器不支持视频标签。
</video>

这是视频元素的最基本形式。让我们来分解一下：

<video>：这是开启标签，告诉浏览器我们正在嵌入一个视频。
src="movie.mp4"：这个属性指定了我们的视频文件的来源。
controls：这个属性为视频播放器添加了播放、暂停、音量等控制。
开启和关闭标签之间的文本如果浏览器不支持视频元素将会显示。

现在，你可能在想，“就这样？”嗯，还不完全是这样！我们可以用这个强大的元素做更多的事情。让我们进一步探索！

HTML 视频元素示例

示例 1：基本视频嵌入

<video src="cute_kitten.mp4" controls width="320" height="240">
对不起，您的浏览器不支持嵌入式视频。
</video>

在这个示例中，我们添加了 width 和 height 属性来控制视频播放器的大小。这就像买电视一样——你可以选择你想要的大小！

示例 2：多个源文件

<video controls width="320" height="240">
<source src="cute_kitten.mp4" type="video/mp4">
<source src="cute_kitten.webm" type="video/webm">
<source src="cute_kitten.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>

这里有趣的事情来了！我们使用 <source> 元素提供了多个视频源。为什么？因为不同的浏览器支持不同的视频格式。通过提供多个源，我们可以确保视频在尽可能多的浏览器上播放。这就像带不同的小吃去聚会一样——每个人都能找到自己喜欢的！

示例 3：自动播放和静音

<video src="background_video.mp4" autoplay muted loop>
您的浏览器不支持视频标签。
</video>

这个示例介绍了三个新的属性：

autoplay：视频准备好后立即开始播放。
muted：视频播放时没有声音。
loop：视频播放结束后重新开始。

这种组合对于网站背景视频来说非常完美。就像是你的网页背景中有一个静音的循环电影！

示例 4：海报图像

<video src="movie_trailer.mp4" controls poster="movie_poster.jpg">
您的浏览器不支持视频标签。
</video>

poster 属性允许你指定一个在视频下载时或用户点击播放按钮之前显示的图像。这就像是 DVD 封面——它给观众预览他们即将观看的内容！

不同视频格式的浏览器支持

现在，让我们来谈谈浏览器支持。并非所有浏览器都支持所有视频格式，这就是为什么提供多个源很重要。下面是一个方便的表格，显示了哪些浏览器支持哪些格式：

视频格式	Chrome	Firefox	Safari	Edge	Internet Explorer
MP4	是	是	是	是	是 (9+)
WebM	是	是	否	是	否
Ogg	是	是	否	否	否

如你所见，MP4 是支持最广泛的格式。然而，包括 WebM 和 Ogg 版本的视频可以确保与旧版浏览器的兼容性。

最佳实践

除非你有充分的理由不这么做，否则总是包含 controls 属性。用户喜欢能够控制视频播放。
提供不同格式的多个源文件，以确保最大化的浏览器兼容性。
使用 poster 属性给用户视频预览。
对于自动播放要谨慎。虽然它对于背景视频很有用，但如果过度使用可能会让用户感到烦恼。
总是在 <video> 标签之间包含备用内容，以供不支持该元素的浏览器使用。

总之，HTML 视频元素是一个强大的工具，它允许我们轻松地将视频嵌入到我们的网页中，而无需依赖第三方插件。它灵活、广泛支持且易于使用。

记住，掌握网页开发的钥匙是实践。所以，继续尝试在你的网页中嵌入视频！尝试不同的属性，看看哪些最适合你的需求。谁知道呢？你可能会成为下一个网络视频流媒体的大人物！

快乐编码，未来的网页巫师们！

Credits: Image by storyset