HTML5 Game - Displaying a Placeholder Image for video element

  1. HOME
  2. HTML5 Game
  3. Video
  4. Video Element

Introduction

You can present the user with a placeholder image using the poster attribute.

This image will be shown in place of the video until the user starts playback.

The following code shows the poster attribute in use.

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>

<head>
    <title>Example</title>
</head>//  w w w.  j  ava  2  s .co  m

<body>
    <video width="360" height="240" src="http://java2s.com/style/demo/your.webm" controls preload="none" poster="http://java2s.com/style/download.png">
        Video cannot be displayed
    </video>
    <img src="http://java2s.com/style/download.png" />
</body>

</html>

Related Topic