Javascript DOM HTML Video poster Property set

Introduction

Change the poster image of a video: 

document.getElementById("myVideo").poster = "image1.png";

Click the button to change the poster image.

View in separate window 

<!DOCTYPE html>
<html>
<body>

<video id="myVideo" width="100" height="100" poster="image1.png" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>/*from w w w . j  a v  a 2s  .c om*/
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  document.getElementById("myVideo").poster = "image1.png";
}
</script>

</body>
</html>

The poster property sets or gets the value of the poster attribute of a video.

The poster attribute sets an image to show while the video is downloading.

If this is not included, the first frame of the video will be used instead.

Value Description
URL Specifies the URL of the image file.

The poster property returns a String representing the URL of the poster image.

Returns the entire URL, including the protocol.




PreviousNext

Related