HTML - 视频元素

上一页
下一页

HTML<video> 标签用于在网页中启用视频播放支持。

它的工作方式与 <img> 元素非常相似，因为它还需要在 src 属性中添加视频的路径或 URL。HTML 仅支持 MP4、WebM 和 Ogg 视频格式。<video> 元素也支持音频，但是，<audio> 元素更适合此目的。我们将在下一章中介绍音频元素。

语法


<video width="450" height="250" controls>
	 <source src="url/of/video" type="video/webm">
</video>

<video> 标签的示例

以下是一些示例代码，用于说明在网页中使用视频元素。

在 HTML 中嵌入视频

要在网页中嵌入视频，我们需要在指定视频路径或 URL 的 <video> 元素中设置 src 属性。网页使用各种类型的浏览器向各种用户提供内容。如前所述，每个浏览器都支持不同的视频格式（MP4、WebM 和 Ogg）。因此，我们可以通过在 <video> 元素中包含多个 <source> 标签来提供 HTML 支持的所有格式。我们让浏览器决定哪种格式更适合视频播放。

我们还可以启用内置控件，借助控件属性来控制对用户的音频和视频播放（如果需要）。它提供了一个界面，使用户能够管理视频播放功能，例如音量调节、视频导航（前进和后退）以及播放或暂停操作。

下面的示例演示如何在 video 元素中插入视频的路径或 URL。


<!DOCTYPE html>
<html>
<head>
	 <title>HTML Video Element</title>
</head>

<body>
	 <p>Playing video using video element</p>
	 <p>
			The browser is responsible for determining 
			the appropriate format to use.
	 </p>
	 <video width="450" height="250" controls>
			<source src="/html/media/video/sampleTP.webm" 
							type="video/webm">
			<source src="/html/media/video/sampleTP.mp4" 
							type="video/mp4">
			<source src="/html/media/video/sampleTP.ogv" 
							type="video/ogg">
			<p>Sorry, video element is not supported!</p>
	 </video>
</body>
</html>

设置视频显示区域的尺寸

要设置视频显示区域（也称为视口）的尺寸，我们可以使用 <video> 元素的 height 和 width 属性。这些属性定义视频视口的高度和宽度（以像素为单位）。

请注意，视频将调整其纵横比（例如 4：3 和 16：9）以与指定的高度和宽度对齐。因此，建议匹配视口的尺寸，以获得更好的用户体验。

让我们看一下下面的示例代码，以便更好地理解。


<!DOCTYPE html>
<html>
<head>
	 <title>
			HTML Video Element
	 </title>
</head>
<body>
	 <p>Playing video using video element</p>
	 <video width="450" height="250" controls>
			<source src="/html/media/video/sampleTP.mp4" 
							type="video/mp4">
	 </video>
</body>
</html>

视频的自动播放和循环播放

我们可以使用 autoplay 和 loop 属性将视频配置为在循环中自动播放。请记住，除非使用 muted 属性，否则 Chrome 70.0 等一些浏览器不支持自动播放功能。因此，建议同时使用自动播放和静音属性。

以下示例演示了视频的自动播放和循环播放


<!DOCTYPE html>
<html>
<head>
	 <title>HTML Video Element</title>
</head>
<body>
	 <p>Playing video using video element</p>
	 <video width="450" 
					height="250" 
					autoplay 
					muted 
					loop>
			<source src="/html/media/video/sampleTP.mp4" 
							type="video/mp4">
	 </video>
</body>
</html>

使用视频的缩略图

我们可以在 <video> 元素的 poster 属性中传递图像的 URL，该 URL 可用作视频的缩略图。它将显示指定的图像，直到视频开始播放。

在下面的示例中，我们演示了 poster 属性的使用


<!DOCTYPE html>
<html>
<head>
	 <title>HTML Video Element</title>
</head>
<body>
	 <p>Playing video using video element</p>
	 <video width="450" 
					height="250" 
					controls 
					muted 
					poster ="html/images/logo.png" >
			<source src="/html/media/video/sampleTP.mp4" 
							type="video/mp4">
	 </video>
</body>
</html>

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

下表说明了不同浏览器支持的各种视频格式

浏览器 OGG WebM MP4
Chrome Yes Yes Yes
Edge Yes Yes Yes
Safari No Yes Yes
Firefox Yes Yes Yes
Opera Yes Yes Yes
打印本页
上一页
下一页