HTML <video> Tag – Properties and Events
The <video> tag in HTML5 enables embedding video content into a web page. It comes with the DOM (Document Object Model), which provides various properties (attributes and states) and events (JavaScript triggers) to control video playback, interaction, and behavior.
Properties of <video> Tag
These properties can be accessed using JavaScript, such as document.getElementById("myVideo").play();.
Basic Properties of <video> Tag
- currentSrc → Returns the URL of the current video resource.
- currentTime → Gets/sets the current playback time (in seconds).
- duration → Total length of the video (in seconds). Returns NaN if not available.
- paused → Boolean value that shows whether the video is paused.
- ended → Boolean value, true if playback has finished.
Playback Control Properties
- autoplay → Boolean; if true, video plays automatically on load.
- controls → Boolean; specifies whether video controls (play, pause, etc.) are visible.
- loop → Boolean; if true, video restarts automatically after ending.
- muted → Boolean; whether the video’s audio is muted.
- volume → Number between 0.0 (silent) and 1.0 (full volume).
- playbackRate → Sets the speed of playback (e.g., 1.0 normal, 2.0 double speed).
- defaultMuted → Indicates whether the video is muted by default.
Media Loading Properties
preload → Suggests how the browser should load the video (auto, metadata, none).
readyState → Returns the readiness state of the video (0 to 4).
- 0 = HAVE_NOTHING
- 1 = HAVE_METADATA
- 2 = HAVE_CURRENT_DATA
- 3 = HAVE_FUTURE_DATA
- 4 = HAVE_ENOUGH_DATA
buffered → Returns the time ranges of the video that have been buffered.
networkState → Returns the current network status of the video:
- 0 = NETWORK_EMPTY
- 1 = NETWORK_IDLE
- 2 = NETWORK_LOADING
- 3 = NETWORK_NO_SOURCE
Dimension Properties
- videoWidth → Returns the actual width of the video file.
- videoHeight → Returns the actual height of the video file.
- width / height → The CSS-defined width/height of the <video> element.
Events of <video> Tag
Events allow JavaScript functions to trigger when something happens with the video.
Playback Events
- play → Triggered when video starts playing.
- pause → Triggered when video is paused.
- playing → Triggered when video resumes after being paused or buffered.
- ended → Triggered when video playback finishes.
- seeking → Triggered when the user starts moving to a new playback position.
- seeked → Triggered when seeking ends.
- ratechange → Triggered when playback speed changes.
- volumechange → Triggered when volume or mute state changes.
Loading & Buffering Events
- loadstart → Fires when the browser starts loading the video.
- loadedmetadata → Fires when metadata (duration, dimensions) is loaded.
- loadeddata → Fires when the first frame of the video is available.
- progress → Fires while the browser downloads the video.
- canplay → Fires when the video is ready to start playing (but not guaranteed to play smoothly).
- canplaythrough → Fires when the video can play through to the end without buffering.
- waiting → Fires when playback is paused because of buffering.
- stalled → Fires when the browser is trying to fetch data, but none is available.
- suspend → Fires when the browser intentionally halts downloading (e.g., user stopped playback).
Error & Status Events
- error → Triggered when an error occurs while loading/playing video.
- abort → Triggered if the loading of the video is aborted.
- emptied → Fires when video becomes empty (e.g., network error).
Time Events
- timeupdate → Fires when the playback position changes (commonly used to track progress).
- durationchange → Fires when the duration of the video changes.