Video poster Property - Javascript DOM HTML Element

Javascript examples for DOM HTML Element:Video

  1. HOME
  2. Javascript
  3. DOM HTML Element
  4. Video

Description

The poster property sets or gets the poster attribute of a video, which sets an image to be shown while the video is downloading.

Set the poster property with the following Values

Value Description
URL Sets the URL of the image file.

Return Value

A String, representing the URL of the poster image. Returns the entire URL, including the protocol (like http://)

The following code shows how to change the poster image of a video:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<video id="myVideo" width="320" height="240" poster="http://java2s.com/resources/a.png" controls>
  <source src="your.mp4" type="video/mp4">
  <source src="your.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>//from  ww  w  . ja v  a 2 s.c  o  m

<button onclick="myFunction()">Test</button>

<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("myVideo").poster ='http://java2s.com/resources/b.png';
    
}
</script>

</body>
</html>

Related Tutorials