HTML - poster 属性_HTML 菜鸟教程

HTML poster 属性用于指定要显示的视频的图像/海报（缩略图），直到用户单击播放按钮。

如果未指定此属性，则在第一帧可用之前不会显示任何内容，然后第一帧将显示为视频的海报帧。

语法


<video poster = "posterlocation/url"></video>

海报位置可以是您的本地图片/海报的位置或任何 URL。

适用于

下面列出的元素允许使用 HTML poster 属性

元素	描述
<video>	HTML <video> 标签用于在网页上呈现视频。

HTML poster 属性示例

以下示例将说明 HTML poster 属性，我们应该在何处以及如何使用此属性！

为视频设置poster 属性

在以下示例中，我们在 video 元素中使用 HTML“poster”属性来指定视频的图像/海报，直到用户不单击播放按钮。


<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML 'poster' Attribute</title>
	 <style>
			video {
				 border: 3px solid rgb(86, 3, 3);
			}
	 </style>
</head>
<body>
	 <h3>Example of the HTML 'poster' Attribute</h3>
	 <video poster=
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRF50DmcEaJHWoz35nvXG7nirVaCNVqymt6Xw&s" 
					width="400" 
					height="250" 
					controls>
			<source src=
"https://static.videezy.com/system/resources/previews/000/019/695/original/pointing-pink.mp4"
			>
	 </video>
	 <p>You can notice that a black logo is displayed before playing video</p>
</body>
</html>

使用脚本设置poster 属性

让我们看一下以下示例，在该示例中，我们将使用 poster 属性运行脚本，并使用单独的函数来设置和删除 poster。


<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML 'poster' Attribute</title>
	 <style>
			video {
				 border: 5px solid rgb(123, 9, 200);
			}

			button {
				 padding: 7px;
			}
	 </style>
</head>
<body>
	 <h3>Example of the HTML 'poster' Attribute</h3>
	 <video width="400" height="250" controls id='demo'>
			<source type="video/mp4" 
							src="bgmi.mp4">
	 </video>

	 <br>
	 <button onclick="Add()">
				 Set poster
	 </button>
	 <button onclick="Remove()">
				 Remove poster 
	 </button>
	 <script>
	 function Add() {
			document.getElementById('demo').poster = "download.png";
	 }

	 function Remove() {
			document.getElementById('demo').poster = "";
	 }
	 </script>
</body>
</html>

支持的浏览器

浏览器
是否支持	4.0	9.0	3.5	4.0	10.5

<< HTML - placeholder 属性 HTML - readonly 属性 >>