HTML Audio & Video
HTML DOM Video Object
The Video object represents an HTML <video> element and implements the HTMLVideoElement interface. It extends HTMLMediaElement with extra read-only properties for the intrinsic size of the video, videoWidth and videoHeight.
Definition and Usage
A Video object lets JavaScript control a video just as the Audio object controls sound: play, pause, mute, change the playback rate, seek to a time and listen for events. In addition it exposes the natural pixel dimensions of the decoded frames through videoWidth and videoHeight, which stay 0 until enough metadata has loaded.
There is no dedicated new Video() constructor the way there is for Audio, so a dynamic video element is created with document.createElement("video") instead.
Syntax
// Access an existing <video> element
let video = document.getElementById("myVideo");
// Create a video element dynamically
let video = document.createElement("video");Example
This complete page shows a playable video, a Play/Pause toggle, and a button that reads the intrinsic size and duration into an output box. Try it in the editor.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Video Object Demo</title></head>
<body>
<h2>Controlling a <video> with JavaScript</h2>
<video id="myVideo" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>
<button onclick="toggle()">Play / Pause</button>
<button onclick="showInfo()">Show info</button>
</p>
<p id="output">Metadata not loaded yet.</p>
<script>
const video = document.getElementById("myVideo");
const out = document.getElementById("output");
function toggle() {
if (video.paused) { video.play(); } else { video.pause(); }
out.textContent = video.paused ? "Paused" : "Playing";
}
function showInfo() {
out.textContent =
"Natural size: " + video.videoWidth + "x" + video.videoHeight +
", duration: " + video.duration.toFixed(1) + "s";
}
// videoWidth/videoHeight are only known after metadata loads
video.addEventListener("loadedmetadata", () => {
out.textContent = "Loaded " + video.videoWidth + "x" + video.videoHeight;
});
</script>
</body>
</html>More Examples
Because the element has the controls attribute the browser shows its own player, but you can still drive everything from code. Here we mute the video and jump forward 5 seconds.
<!DOCTYPE html>
<html>
<body>
<video id="v" width="320" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<p>
<button onclick="v.muted = !v.muted">Toggle mute</button>
<button onclick="v.currentTime += 5">Skip +5s</button>
</p>
<script>
const v = document.getElementById("v");
</script>
</body>
</html>Video-only Properties
| Name | Description |
|---|---|
| videoWidth | Returns the intrinsic (decoded) width of the video in pixels |
| videoHeight | Returns the intrinsic (decoded) height of the video in pixels |
| width | Gets or sets the displayed width of the element |
| height | Gets or sets the displayed height of the element |
| poster | Gets or sets the poster image shown before playback starts |
videoWidth and videoHeight are the decoded pixel dimensions of the video itself, which may differ from the CSS width and height you set on the element. They are 0 until the loadedmetadata event fires.
Key Takeaways
- The Video object implements HTMLVideoElement, which extends HTMLMediaElement.
- Use document.createElement("video") to build one dynamically; there is no new Video() constructor.
- videoWidth and videoHeight give the natural pixel size; wait for loadedmetadata before reading them.
- All the media playback members (play, pause, muted, currentTime, duration) work exactly as they do for audio.
- The poster property sets the placeholder image shown before playback.