The internet is a highly interactive environment. As HTML authors, we might be given a media file and be told to put it on the internet. How can we display media inside of a web page and make sure that it's viewable to the most people possible on the most devices? That will be the focus of this lesson.
In the early days of HTML, media elements were more difficult to use. They would often require the user to download and install a plugin. Media plugins you might recall were Macromedia Flash, Adobe Shockwave, and Java. This commercial plugin approach brings about a number of problems.
For these reasons and others, the W3C added media support in HTML5.
To include audio in a website, use the
<audio> element. Inside the element,
<source> elements whose
src attributes point to a file on the
server and whose
type attributes specify what type of media it is.
Let's take a deeper look at
type name is the "MIME standard" for
the filetype. MDN provides a long list of MIME types. A few
You might recall that files fit into two big buckets: binary and text.
Sometimes we need to be more specific within those groups. We want to say this
is a text file, but also HTML (
text/html). Or we want to say this is a binary
file, but also an MPEG movie (
video/mpeg). A MIME type is a way to note, for
the computer, exactly what type of file is present. It will help the
computer find the right player. It's also a bit more precise than a simple file
To pull it all together, the
type attribute should be set to the "MIME type"
for the media pointed to by the
src attribute for each
Let's look at an example:
<audio controls> <source src="purrr.mp3" type="audio/mp3"> <source src="purrr.ogg" type="audio/ogg"> <p>Sorry your browser doesn't support HTML5 Audio! Please <a href="http://browsehappy.com/?locale=en">upgrade your browser</a>.</p> </audio>
On the first line we open the
<audio> tag with the
present. This is required to display the audio controls to start and pause
playback, adjust the recording's volume, etc. The presence of the
attribute name itself is sufficient, no other properties are needed. There are
optional attributes you can provide such as
loop. These start
the audio on page load and repeat the audio after it ends. The
documentation lists all available options.
In lines two and three, we provide two different source files for playback. If
the browser does not recognize the first file type, it will ignore it and move
on to the next. If neither of the formats are supported it will instead display
the paragraph on line four. If the browser is able to play one of the source
files it will ignore any other code below until it reaches the closing
Embedding a video is very similar to embedding audio. This can be done by
<video> tag. Inside the video tag are source tags that point to
the location of various video file formats and specify their MIME types.
<video controls> <source src="real-estate.mp4" type="video/mp4"> <source src="real-estate.ogv" type="video/ogg"> <p>Sorry your browser doesn't support HTML5 Video! Please <a href="http://browsehappy.com/?locale=en">upgrade your browser</a>.</p> </video>
<audio>, we will open the
<video> tag with the controls attribute.
For the full list of accepted attributes, you can check the MDN documentation.
On lines two and three we provide two different source files for playback. If
the browser does not recognize the first filetype it will ignore it and move on
to the next just the same as it does for the audio element. If neither of the
formats are supported it will display the paragraph instead on line four. If
the browser is able to play one of the source files, it will. The others
sources within the
<video> tag will be ignored.
video tags, the W3C gives us an open way to ensure that
media remain accessible and open to all platforms.