Displaying a Placeholder Image

The poster attribute presents the user with a placeholder image. This image will be shown in place of the video until the user starts playback.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
      <video width="360" height="240" src="yourVideo.webm" controls
            preload="none" poster="http://java2s.com/Book/HTML-CSSImages/star.png"> Video cannot be displayed
      </video>
      <img src="http://java2s.com/Book/HTML-CSSImages/star.png" />
</body>
</html>
Click to view this demo.
Home 
  HTML CSS Book 
    HTML  

video:
  1. Using the video Element
  2. Preloading the Video
  3. Displaying a Placeholder Image
  4. Setting the Video Size
  5. Specifying the Video Source (and Format)
  6. The source Element
  7. The track Element
Related: