How can I control audio and video in HTML using a JavaScript API7 min read

Not long ago, adding a video to a web page implied quite a lot of work (and a bit of luck) as videos were not supported by browsers. Instead of using  HTML or a native JavaScript API, developers had to rely on third-party plugins such as Adobe Flash Player (and later, Silverlight).

However, things changed since then. HTML5 introduced native support for audio and video elements.Using HTML5 video, you can embed a fully-featured video player on your web page, without requiring any third-party plugins or even resorting to JavaScript.

In its most basic form, adding an audio or video to your webpage with the HTML5 audio or video elements is done with a single line of HTML. Add the controls attribute, and users can control  playback.

Moreover, other attributes enable you to set the source file, add a poster (video placeholder image), or start playing the video automatically.

As with most HTML elements, you can use Cascading Style Sheets (CSS) to style and position the element and create innovative uses of video elements, such as placing them as a video page background.

Using HTML5 Media JavaScript API

The HTML5 API has methods, properties, and events for the <audio> and <video> elements. These allow you to manipulate and control <audio> and <video> elements using JavaScript.

For instance, you can use the API to play and pause a video using simple buttons and the play() and pause() API methods. In the example below, you can play with the JavaScript API, making the video play and pause, change the play rate (make it go faster or slower), control the volume and even change the video sources.

HTML:

Jquery:

API Summary

Below is a summary of the Media JavaScript API, containing a list of the available Properties, Methods and Events. As you can see, there’s a lot more than I showed you in the example. Get down and play!

HTML Audio/Video Properties

• audioTracks Returns an AudioTrackList object representing available audio tracks
• autoplay Sets or returns whether the audio/video should start playing as soon as it is loaded
• buffered Returns a TimeRanges object representing the buffered parts of the audio/video
• controller Returns the MediaController object representing the current media controller of the audio/video
• controls Sets or returns whether the audio/video should display controls (like play/pause etc.)
• crossOrigin Sets or returns the CORS settings of the audio/video
• currentSrc Returns the URL of the current audio/video
• currentTime Sets or returns the current playback position in the audio/video (in seconds)
• defaultMuted Sets or returns whether the audio/video should be muted by default
• defaultPlaybackRate Sets or returns the default speed of the audio/video playback
• duration Returns the length of the current audio/video (in seconds)
• ended Returns whether the playback of the audio/video has ended or not
• error Returns a MediaError object representing the error state of the audio/video
• loop Sets or returns whether the audio/video should start over again when finished
• mediaGroup Sets or returns the group the audio/video belongs to (used to link multiple audio/video elements)
• muted Sets or returns whether the audio/video is muted or not
• networkState Returns the current network state of the audio/video
• paused Returns whether the audio/video is paused or not
• playbackRate Sets or returns the speed of the audio/video playback
• played Returns a TimeRanges object representing the played parts of the audio/video
• preload Sets or returns whether the audio/video should be loaded when the page loads
• readyState Returns the current ready state of the audio/video
• seekable Returns a TimeRanges object representing the seekable parts of the audio/video
• seeking Returns whether the user is currently seeking in the audio/video
• src Sets or returns the current source of the audio/video element
• startDate Returns a Date object representing the current time offset
• textTracks Returns a TextTrackList object representing the available text tracks
• videoTracks Returns a VideoTrackList object representing the available video tracks
• volume Sets or returns the volume of the audio/video

HTML Audio/Video Methods

• play() Starts playing the audio/video
• pause() Pauses the currently playing audio/video
• addTextTrack() Adds a new text track to the audio/video
• canPlayType() Checks if the browser can play the specified audio/video type
• load() Re-loads the audio/video element

HTML Audio/Video Events

• abort Fires when the loading of an audio/video is aborted
• canplay Fires when the browser can start playing the audio/video
• canplaythrough Fires when the browser can play through the audio/video without stopping for buffering
• durationchange Fires when the duration of the audio/video is changed
• emptied Fires when the current playlist is empty
• ended Fires when the current playlist is ended
• error Fires when an error occurred during the loading of an audio/video
• loadeddata Fires when the browser has loaded the current frame of the audio/video
• loadedmetadata Fires when the browser has loaded meta data for the audio/video
• loadstart Fires when the browser starts looking for the audio/video
• pause Fires when the audio/video has been paused
• play Fires when the audio/video has been started or is no longer paused
• playing Fires when the audio/video is playing after having been paused or stopped for buffering
• progress Fires when the browser is downloading the audio/video
• ratechange Fires when the playing speed of the audio/video is changed
• seeked Fires when the user is finished moving/skipping to a new position in the audio/video
• seeking Fires when the user starts moving/skipping to a new position in the audio/video
• stalled Fires when the browser is trying to get media data, but data is not available
• suspend Fires when the browser is intentionally not getting media data
• timeupdate Fires when the current playback position has changed
• volumechange Fires when the volume has been changed
• waiting Fires when the video stops because it needs to buffer the next frame