属性值:它包含一个值URL,用于指定源图像的链接。下面列出了两种类型的URL链接:● 绝对URL:它指向另一个网页。● 相对URL:它指向"/>

HTML的poster属性怎么用?

HTML的poster属性主要应用在<video>元素中,用于在视频下载或用户单击播放按钮时显示图像;如果未设置此图像,则会将第一帧视频作为海报图像。

HTML poster属性

语法:

<video poster="URL">

属性值:它包含一个值URL,用于指定源图像的链接。下面列出了两种类型的URL链接:

● 绝对URL:它指向另一个网页。

● 相对URL:它指向同一网页的其他文件。

示例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>

<body>
	<h3>没有设置poster属性</h3>
	<video width="400" height="200" controls>
		<source src="https://ss.html.cn/ueditor/php/upload/video/20190327/1553657855333112.mp4" 
		          type="video/mp4">
		<source src="https://ss.html.cn/ueditor/php/upload/video/20190327/1553657855333112.ogg" 
		          type="video/ogg">
	</video>
	<h3>没有设置poster属性</h3>
	<video width="400" height="200" controls 
	           poster="https://ss.html.cn/upload/article/000/000/006/5d2bed9f2e789818.webp">
		<source src="https://ss.html.cn/ueditor/php/upload/video/20190327/1553657855333112.mp4" 
		         type="video/mp4">
		<source src="https://ss.html.cn/ueditor/php/upload/video/20190327/1553657855333112.ogg" 
		         type="video/ogg">
	</video>
</body>

</html>

效果图:

浏览器支持

● Google Chrome 4.0

● Internet Explorer 9.0

● Firefox 3.5

● Apple Safari 4.0

● Opera 10.5

以上就是HTML的poster属性怎么用?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读