HTML Audio and Video DOM Reference

The HTML Audio and Video DOM Reference provides a set of properties and methods for manipulating audio and video elements in HTML5 using JavaScript. This powerful feature allows developers to create interactive media experiences on web pages.

Audio and Video Elements

HTML5 introduced the <audio> and <video> elements, which are part of the HTML5 Media specification. These elements enable native multimedia playback without the need for plugins.

Common Properties

Both audio and video elements share several properties that can be accessed and modified through JavaScript:

• currentTime: Get or set the current playback position in seconds
• duration: Read-only property that returns the length of the media in seconds
• paused: Boolean indicating whether the media is paused
• volume: Get or set the volume level (0.0 to 1.0)

Common Methods

JavaScript provides methods to control media playback:

• play(): Start playing the media
• pause(): Pause the media
• load(): Reload the media element

Example: Controlling Audio Playback

Here's a simple example demonstrating how to control an audio element using JavaScript:

<audio id="myAudio" src="audio.mp3"></audio>
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>

<script>
function playAudio() {
    document.getElementById("myAudio").play();
}

function pauseAudio() {
    document.getElementById("myAudio").pause();
}
</script>

Video-Specific Properties

Video elements have additional properties:

• videoWidth and videoHeight: Read-only properties returning the intrinsic dimensions of the video
• poster: Get or set the URL of an image to display before the video plays

Example: Manipulating Video

This example shows how to work with video properties and methods:

<video id="myVideo" src="video.mp4" poster="thumbnail.jpg"></video>
<button onclick="togglePlay()">Play/Pause</button>

<script>
function togglePlay() {
    var video = document.getElementById("myVideo");
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}

// Get video dimensions
var videoWidth = document.getElementById("myVideo").videoWidth;
var videoHeight = document.getElementById("myVideo").videoHeight;
console.log("Video dimensions: " + videoWidth + "x" + videoHeight);
</script>

Event Handling

Audio and video elements emit various events that can be listened to:

• play: Fired when playback starts
• pause: Fired when playback is paused
• ended: Fired when playback reaches the end
• timeupdate: Fired when the current playback position changes

These events allow developers to create custom controls and synchronize other elements with media playback.

Best Practices

• Always provide fallback content for browsers that don't support HTML5 audio or video.
• Use the preload attribute to control how much of the media is loaded when the page loads.
• Implement custom controls for better accessibility and cross-browser consistency.
• Consider using the HTML Picture Element for responsive video posters.

By mastering the HTML Audio and Video DOM Reference, developers can create rich, interactive media experiences that enhance user engagement and accessibility on the web.