Media
HTML media event attributes handle events related to media elements like audio and video, enabling control over playback, loading, and other media interactions.
Media Event
HTML media event attributes are used to handle events related to media elements like audio and video. These events allow developers to track and respond to changes in the media's state, such as when it starts playing, pauses, or ends.
Common Media Event
onplay: Triggered when the media starts playing.
index.html
<video onplay="console.log('Media started playing!')">
onpause: Fired when the media is paused.
index.html
<video onpause="console.log('Media paused!')">
onended: Occurs when the media has finished playing.
index.html
<video onended="console.log('Media ended!')">
onloadstart: Activated when the media begins loading.
index.html
<audio onloadstart="console.log('Media started loading!')">
onprogress: Fired as the media is loading, typically used to show progress (like a loading bar).
index.html
<audio onprogress="console.log('Media loading progress!')">
onvolumechange: Triggered when the volume of the media changes.
index.html
<audio onvolumechange="console.log('Volume changed!')">
onseeked: Fired when the media has been seeked to a new position.
index.html
<video onseeked="console.log('Media seeked to new position!')">
These media event attributes allow developers to create interactive and responsive media experiences for users.
Conclusion
HTML media event attributes, such as onplay, onpause, and onended, help manage interactions with audio and video elements. These events provide control over playback, loading progress, volume changes, and seeking. By handling these events, developers can create responsive media-rich experiences.