html tutorial - poster Attribute in HTML - html5 - html code - html form




Poster attribute in html

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 Code Explanation

  1. poster attribute used to set a poster image for a video.
  2. Source file of the poster image is specified as “https://www.wikitechy.com/images/logo.png”.
  3. Source file of video is specified as “video.mp4”.

Sample Output for poster attribute in HTML:

poster Attribute Output part-1

  1. The output shows poster image in the video player.
  2. poster Attribute Output part-2 user hit play button poster image disapper video playing

  3. 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

Related Searches to poster Attribute in html

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×