Playing media on your website is no longer something that is just nice – it’s something you need to do. Consumers of content are accustomed to seeing fancy graphics and audio and video content as well. HTML5 makes it easy to put a media player onto your site with the <audio> and <video> tags.
The JavaScript API for dealing with these elements is pretty uniform, too, so you can deal with them in a similar way. For instance, if you have a use case where you want to play media on a page and the media may be either audio or video, it’s straightforward to use a variable to control a player of either type. This could be a result of allowing users to select something they’d like to play, perhaps based upon a list of available media from a database or something like that. In this fiddle, I am demonstrating selection of different types of media using a dropdown list and playing them in a media player, selected based on the type of media. The parts that are interesting are the selection of which media player element to use and the controlling of the media player via a uniform API regardless of the one selected. I can acquire a reference to a media player element with something like one of the following:
var mediaPlayer = document.getElementsByTagName(‘audio’)[0];
var mediaPlayer = document.getElementsByTagName(‘video’)[0];
With a reference to a media player, it is straightforward to play and pause the media via javascript:
mediaPlayer.play();
mediaPlayer.pause();
or even a function to toggle between playing and pausing regardless of the current state:
function togglePlayPause(mediaPlayer) {
mediaPlayer.paused ? mediaplayer.play() : mediaPlayer.pause();
}
A summary in the HTML5 specifications of the common functions and attributes available to media elements can be found here.
It is convenient that much customization can be done of the player, whether audio or video, via attributes on the media player element. The controls attribute gives the creator of the content control over whether the consumer of the content sees the built-in controls of the browser for being able to play/pause/seek/etc the media or whether the media are controlled entirely via JavaScript. The autoplay attribute controls whether the medium selected begins playing immediately or whether an explicit start is needed. There are many other attributes for controlling looping, buffering, and other aspects of playing media. The properties and events of the objects are also rich in what is exposed, such as duration, current time, and events for play, pause, completion, and download status. Playing media in the browser works very well and the cross-browser compatibility story is pretty good with modern, HTML5-enabled browsers. Google Chrome has some differences vs. others in how it handles streaming of media, and that will be addressed in another blog post. Put simply, <video> and <audio> make it easy to play media in your pages the way you want to.