Comprehensive Overview with Examples
HTML media event attributes enable interaction with media elements such as audio and video. These attributes help developers handle events like playback, buffering, and error handling. This guide covers all HTML media event attributes, their explanations, and concise examples.
1. onabort – Media Loading Aborted
Triggered when media loading is aborted.
<video src=”video.mp4″ onabort=”handleAbort()”></video>
<script>
function handleAbort() {
alert(“Media loading was aborted.”);
}
</script>
Use Case: Alert the user when the media loading is interrupted.
—
2. oncanplay – Media Can Start Playing
Triggered when the media can start playing but might need buffering.
<audio src=”audio.mp3″ oncanplay=”notifyPlayable()”></audio>
<script>
function notifyPlayable() {
alert(“Audio is ready to play!”);
}
</script>
Use Case: Inform users when media is ready to start playing.
—
3. oncanplaythrough – Media Can Play Without Buffering
Triggered when media can play to the end without stopping for buffering.
<video src=”video.mp4″ oncanplaythrough=”playSmoothly()”></video>
<script>
function playSmoothly() {
alert(“Media can play without interruptions!”);
}
</script>
Use Case: Optimize playback experience by ensuring smooth playback.
4. ondurationchange – Duration of Media Changed
Triggered when the media duration changes.
<video src=”video.mp4″ ondurationchange=”showDuration(this)”></video>
<script>
function showDuration(media) {
alert(`Media duration is: ${media.duration} seconds.`);
}
</script>
Use Case: Display media duration dynamically.
—
5. onemptied – Media Emptied
Triggered when the media resource is emptied.
<video src=”video.mp4″ onemptied=”handleEmptied()”></video>
<script>
function handleEmptied() {
alert(“Media source has been emptied.”);
}
</script>
Use Case: Reset the UI when the media source is removed.
—
6. onended – Playback Finished
Triggered when playback ends.
<video src=”video.mp4″ onended=”handlePlaybackEnd()”></video>
<script>
function handlePlaybackEnd() {
alert(“Media playback has ended.”);
}
</script>
Use Case: Automatically transition to the next media or reset controls.
—
7. onerror – Media Playback Error
Triggered when an error occurs during media playback.
<video src=”invalid.mp4″ onerror=”handleMediaError()”></video>
<script>
function handleMediaError() {
alert(“Error occurred while loading the media.”);
}
</script>
Use Case: Provide fallback content or notify users of errors.
—
8. onloadeddata – Media Data Loaded
Triggered when the media’s current data is loaded.
<video src=”video.mp4″ onloadeddata=”dataLoaded()”></video>
<script>
function dataLoaded() {
alert(“Initial media data loaded.”);
}
</script>
Use Case: Display media controls when data is ready.
—
9. onloadedmetadata – Metadata Loaded
Triggered when media metadata (duration, dimensions) is loaded.
<video src=”video.mp4″ onloadedmetadata=”showMetadata(this)”></video>
<script>
function showMetadata(media) {
alert(`Video dimensions: ${media.videoWidth}x${media.videoHeight}`);
}
</script>
Use Case: Display video dimensions or duration.
—
10. onloadstart – Media Loading Started
Triggered when media loading starts.
<video src=”video.mp4″ onloadstart=”loadingStarted()”></video>
<script>
function loadingStarted() {
alert(“Media loading has started.”);
}
</script>
Use Case: Display a loading spinner when media starts loading.
—
11. onpause – Playback Paused
Triggered when media playback is paused.
<video src=”video.mp4″ onpause=”notifyPaused()”></video>
<script>
function notifyPaused() {
alert(“Media playback paused.”);
}
</script>
Use Case: Save playback state when paused.
—
12. onplay – Playback Started
Triggered when media playback starts.
<video src=”video.mp4″ onplay=”notifyPlaying()”></video>
<script>
function notifyPlaying() {
alert(“Media is now playing.”);
}
</script>
Use Case: Update UI to indicate playback.
—
13. onplaying – Playback in Progress
Triggered when media begins playing after being paused or buffered.
<video src=”video.mp4″ onplaying=”updateStatus()”></video>
<script>
function updateStatus() {
console.log(“Playback is progressing smoothly.”);
}
</script>
Use Case: Log playback progress.
—
14. onprogress – Media Loading in Progress
Triggered when media is downloading.
<video src=”video.mp4″ onprogress=”showBuffering()”></video>
<script>
function showBuffering() {
console.log(“Media is buffering…”);
}
</script>
Use Case: Display buffering progress.
—
15. onratechange – Playback Rate Changed
Triggered when playback speed changes.
<video src=”video.mp4″ onratechange=”handleRateChange(this)”></video>
<script>
function handleRateChange(media) {
alert(`Playback speed changed to: ${media.playbackRate}x`);
}
</script>
Use Case: Adjust UI for different playback speeds.
—
16. onseeked – Seeking Completed
Triggered when seeking ends.
<video src=”video.mp4″ onseeked=”notifySeeked()”></video>
<script>
function notifySeeked() {
alert(“Seeking completed.”);
}
</script>
Use Case: Resume playback after seeking.
—
17. onseeking – Seeking Started
Triggered when seeking starts.
<video src=”video.mp4″ onseeking=”notifySeeking()”></video>
<script>
function notifySeeking() {
alert(“Seeking started.”);
}
</script>
Use Case: Pause media during seeking.
—
18. onstalled – Media Stalled
Triggered when media loading is stalled.
<video src=”video.mp4″ onstalled=”handleStall()”></video>
<script>
function handleStall() {
alert(“Media loading stalled.”);
}
</script>
Use Case: Alert users of buffering issues.
—
19. onsuspend – Media Loading Suspended
Triggered when media loading is suspended.
<video src=”video.mp4″ onsuspend=”notifySuspended()”></video>
<script>
function notifySuspended() {
alert(“Media loading has been suspended.”);
}
</script>
Use Case: Free resources or display a warning.
—
20. ontimeupdate – Playback Time Updated
Triggered when playback position updates.
<video src=”video.mp4″ ontimeupdate=”updateTime(this)”></video>
<script>
function updateTime(media) {
console.log(`Current time: ${media.currentTime}`);
}
</script>
Use Case: Update progress bars.
—
21. onvolumechange – Volume Changed
Triggered when the volume changes.
<video src=”video.mp4″ onvolumechange=”notifyVolumeChange(this)”></video>
<script>
function notifyVolumeChange(media) {
alert(`Volume level: ${media.volume * 100}%`);
}
</script>
Use Case: Display volume level to users.
—
22. onwaiting – Playback Paused for Buffering
Triggered when playback is paused due to buffering.
<video src=”video.mp4″ onwaiting=”handleWaiting()”></video>
<script>
function handleWaiting() {
console.log(“Media is waiting for more data.”);
}
</script>
Use Case: Display a buffering indicator.
The article above is rendered by integrating outputs of 1 HUMAN AGENT & 3 AI AGENTS, an amalgamation of HGI and AI to serve technology education globally.