HTMLVideoElement : HTMLMediaElement

HTMLVideoElement is an element that displays a video. It corresponds to the <video> tag. See HTMLMediaElement for the properties, methods and events available on the video element.

Spec

Instance Properties

height : Number

The display height of the video. If no display size is specified, the videoHeight will be used.

Example:

<video id='video' src='fireworks.ogv' width='150' height='100'></video><br>
<button onclick='video.paused ? video.play() : video.pause()'>Play/Pause</button>
<script>
  var video = document.getElementById('video');
  console.log(video.height);
</script>

Run

Results:

poster : String

The url of an image to display while the video is loading.

videoHeight : Number readonly

The height of the video data. The video may be displayed at a different size by setting width and height.

Example:

<video id='video' src='/fireworks.ogv' width='150' height='100'></video><br>
<button onclick='video.paused ? video.play() : video.pause()'>Play/Pause</button>
<script>
  var video = document.getElementById('video');
  video.addEventListener('loadedmetadata', function() {
    console.log(video.videoHeight);
  });
</script>

Run

Results:

videoWidth : Number readonly

The width of the video data. The video may be displayed at a different size by setting width and height.

Example:

<video id='video' src='/fireworks.ogv' width='150' height='100'></video><br>
<button onclick='video.paused ? video.play() : video.pause()'>Play/Pause</button>
<script>
  var video = document.getElementById('video');
  video.addEventListener('loadedmetadata', function() {
    console.log(video.videoWidth);
  });
</script>

Run

Results:

width : Number

The display width of the video. If no display size is specified, the videoWidth will be used.

Example:

<video id='video' src='fireworks.ogv' width='150' height='100'></video><br>
<button onclick='video.paused ? video.play() : video.pause()'>Play/Pause</button>
<script>
  var video = document.getElementById('video');
  console.log(video.width);
</script>

Run

Results:

home license contribute feedback toggle light/dark mode