html tutorial - poster Attribute in HTML - html5 - html code - html form
Learn html - html tutorial - Poster attribute in html - html examples - html programs
- The poster attribute is used to show an image until the user hit the play button, or the video is downloading.
- If the poster attribute not present the first frame of the video is displayed.
Syntax for poster attribute in HTML:
<video poster="URL">Difference between HTML4.01 and HTML 5 for poster attribute in HTML:
HTML 4.01:
- HTML4 does not support the <video> tag.
HTML 5:
- The <video> tag is new to HTML5.
Applies to:
| Element | Attribute |
|---|---|
| <video> | poster |
Attribute values :
| Value | Description |
|---|---|
| URL | Used to Specify the URL of the image file. |
Sample coding for poster attribute in HTML:
Tryit<!DOCTYPE html>
<html>
<head>
<title>Wikitechy poster attribute</title>
</head>
<body>
<video poster="https://www.wikitechy.com/images/logo.png"
width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
</body>
</html>Code Explanation for poster attribute in HTML:
- poster attribute used to set a poster image for a video.
- Source file of the poster image is specified as “https://www.wikitechy.com/images/logo.png”.
- Source file of video is specified as “video.mp4”.
Sample Output for poster attribute in HTML:
- The output shows poster image in the video player.
- When the user hit the play button the poster image disappears and the video starts playing.
Browser Support for poster attribute in HTML :
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 4.0 | 9.0 | 3.6 | 4.0 | 10.5 |