HTML Av (Audio & Video) DOM Reference
HTML AV DOM Reference
Here, we’re discussing references to Av Dom. In HTML5, audio <audio> and video <video> elements have events, methods, and properties.
This table contains all the information about HTML for AV Doms.
HTML AV DOM Reference
The HTML Audio/Video DOM Reference provides a set of properties and methods for working with audio and video elements in HTML. Some of the advantages of using this reference include:
- Consistent APIs: The Audio/Video DOM Reference provides a consistent API for working with audio and video elements, regardless of the specific media format. This makes it easier for developers to work with different media types and ensures a consistent experience for users.
- Improved interactivity: The Audio/Video DOM Reference allows developers to add interactivity to audio and video elements, such as pausing or rewinding a video, or adjusting the volume of an audio track. This improves the user experience and makes it easier for users to interact with media elements.
- Accessibility: The Audio/Video DOM Reference includes properties and methods that can improve the accessibility of audio and video elements, such as captions or subtitles for users with hearing impairments. This helps ensure that media content is accessible to all users.
- Cross-browser compatibility: The Audio/Video DOM Reference is designed to work across different web browsers, ensuring that media elements will work consistently regardless of the user’s browser choice.
- Integration with JavaScript: The Audio/Video DOM Reference can be easily integrated with JavaScript, allowing developers to create dynamic and interactive media experiences on web pages. This allows for more engaging and immersive media content on the web.
Audio/Video Methods in HTML
HTML provides a range of methods for controlling audio and video playback on a web page. These methods allows you to customize the behavior of audio and video elements, such as controlling playback speed, volume, and position within the media file. With the Audio/Video methods in HTML, developers can create dynamic and interactive media experiences that engage users and enhance the overall user experience on a web page.
| Method | Overview |
|---|---|
| load() | Audio/video elements are reloaded. |
| addTextTrack() | A new text track is inserted into the audio/video. |
| canPlayType() | Tests if the browser is able to play the selected audio/video type in Ref Av Dom. |
| play() | Video/audio playback begins. |
| pause() | It pauses the audio/video being played. |
HTML Audio/Video Properties
HTML provides a variety of properties that can be used to customize the behavior and appearance of audio and video elements on a web page. These properties include attributes for controlling playback, adjusting volume and playback speed, and displaying captions and other visual elements. By leveraging the power of these properties, developers can create compelling audio and video experiences that enhance the overall user experience of their web applications.
| Property | Overview |
|---|---|
| currentSrc | This method returns the active video/audio URL. |
| audioTracks | An AudioTrackList object that represents available audio tracks is returned. |
| controller | This method returns the MediaController object that corresponds to the current audio/video media controller. |
| crossOrigin | Provides the audio/video CORS settings or returns them. |
| controls | Provides a way to configure or return if controls will appear on the audio/video (like play/pause etc.) |
| autoplay | In the event that the audio or video is loaded, it is ready to begin playing or not. |
| buffered | The compressed audio/video pieces are returned as TimeRanges objects. |
| currentTime | Provides a way to specify or return the current audio/video playback position (in seconds). |
| defaultMuted | The initial muted condition of audio/video is specified or returned. |
| defaultPlaybackRate | A default audio/video playback speed can be specified or returned in Ref Av Dom. |
| error | It returns a MediaError object that indicates the audio or video error. |
| muted | A function for audio/video for specifying or returning whether it is muted or not. |
| networkState | Provides an updated network state for audio/video. |
| paused | The paused state of audio/video can be determined by this function. |
| duration | This function returns the duration of the present audio/video (in seconds). |
| ended | This function indicates if the audio or video has ended playing. |
| seeking | The user’s current audio/video seek condition is returned. |
| loop | In Ref Av Dom specifies or returns if the audio/video should start again after finishing. |
| mediaGroup | Provides the audio/video’s group (in order to connect multiple audio/video elements) by defining or returning it. |
| src | Specifies or returns the audio/video element’s current source. |
| textTracks | This method returns a TextTrackList object containing the available text tracks. |
| playbackRate | Audio/video playback speed can be changed or returned. |
| played | This method gives back a TimeRanges object that indicates the parts of the audio/video that have been played. |
| videoTracks | Indicates the video tracks accessible by returning a VideoTrackList object. |
| volume | The volume of audio/video is altered or returned when it comes to Ref Av Dom. |
| preload | Sets or returns whether the audio/video should be loaded when the page loads in Ref Av Dom |
| readyState | Provides the audio/video’s current state of readiness. |
| seekable | Provides a TimeRanges object that indicates the seekable audio/video parts. |
| startDate | Provides a Date object indicating the current time offset. |
HTML Audio/Video Events
HTML offers various events that can be utilized to incorporate interactivity into audio and video elements on a web page. These events enable developers to create dynamic and responsive user experiences by activating actions based on user inputs or changes in the state of the media.
Some of the commonly used events for HTML audio and video include “play”, “pause”, “ended”, and “timeupdate”. The “play” event is initiated when the media starts playing, while the “pause” event is triggered when the media is paused. The “ended” event is initiated when the media completes playing, and the “timeupdate” event is activated periodically as the media playback advances.
Additionally, other events for HTML audio and video include “volumechange”, which is initiated when the volume is changed, and “loadedmetadata”, which is triggered when the metadata for the media, such as duration and dimensions, is loaded.
By utilizing these events, developers can create custom event listeners and event handling functions to add a wide range of interactive features to their audio and video elements, such as displaying playback progress bars, activating animations, or updating other page elements based on media playback.
| Event | Overview |
|---|---|
| loadeddata | This event occurs after the browser loads the current frame of video/audio. |
| abort | This event is triggered if video or audio loading is interrupted. |
| canplay | Activates as soon as the browser is ready to play audio or video. |
| play | An event occurs whenever audio/video begins or is unpaused. |
| playing | When audio/video has been paused or stopped for buffering, the event fires when it starts playing again |
| progress | Activates when the audio/video is being downloaded by the browser. |
| ratechange | When the speed of the audio/video changes, the event takes place. |
| seeked | This function executes once the user is done moving/skipping through the audio/video. |
| seeking | Whenever the user moves or skips to a new position in the video or audio this method is invoked. |
| stalled | This happens when the browser tries to get media data but it can’t. |
| pause | Activates the moment the audio/video is paused. |
| ended | Whenever the current playlist is ended, this method will run. |
| error | This event is fired if there is an error during the loading of audio or video. |
| suspend | Whenever the browser purposely doesn’t get media data in Ref Av Dom this event occurs |
| canplaythrough | This happens when the browser doesn’t need to buffer audio/video. |
| timeupdate | Whenever the playback position changes, this triggers. |
| volumechange | Whenever the volume changes, it executes. |
| waiting | Whenever the video stops, this triggers to buffer the next frame. |
| loadedmetadata | Whenever the browser loads meta data for audio/video in Ref Av Dom, it initiates. |
| durationchange | Whenever the audio/video duration is changed, this function executes. |
| emptied | In response to an empty playlist, this method is invoked. |
| loadstart | Whenever the browser starts searching for audio/video, this event occurs. |
