The HTML poster attribute is used with the <video> tag to specify an image that is displayed before the video starts playing. It provides a preview or thumbnail for the video content.
- Displays an image before the video begins playback.
- Used only with the <video> element.
- Helps provide a visual preview of the video content.
Syntax:
<video poster="URL">Attribute Values
It contains a single value URL which specifies the link of source image. There are two types of URL link which are listed below:
- Absolute URL: It points to another webpage.
- Relative URL: It points to other files of the same web page.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>HTML video poster Attribute</title>
</head>
<!--Driver Code Ends-->
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>HTML video poster Attribute</h3>
<video width="400" height="200" controls poster=
"https://media.geeksforgeeks.org/wp-content/uploads/20190627130930/a218.png">
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
type="video/mp4">
<source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
type="video/ogg">
</video>
</center>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
Note: Always specify the width and the height of the video else web page will be confused that how much space that video will be required due to that reason web page become slow down.