Media Types in HTML5

HTML5 Media Types

Since the advent of HTML5, it’s been much easier to add different media types to a webpage beyond just images. HTML5 has made it convenient to add audio, video, and other content types via the iframe element. While it has been possible to do this for a while, browser support for these media types has increased considerably over the years, making it widely acceptable to include in your homepage. This post will show how to add these various other media types to your webpage, as well as some of the different options available.

Audio

Audio files can easily be embedded into an HTML5 document using the audio element. Similar to the img element, you will need to supply the src for the file, typically hosted somewhere in your site directory:

<audio src="piano.mp3"></audio>

 

The audio element has several built-in attributes for some basic customization. These include autoplay, controls, loop, and preload.

autoplay controls and loop can all be considered Boolean attributes, which is to say they don’t require a value. Their mere presence in the audio tag will turn on that attribute:

<audio autoplay src="piano.mp3"></audio>

 

By default there will not be an audio player displayed on the page when using the audio element, so if you would like player controls to be displayed, use the controls attribute:

<audio controls src="piano.mp3"></audio>

 

The loop attribute will repeat the audio file repeatedly upon completion:

<audio loop src="piano.mp3"></audio>

 

The audio element accepts many different audio types, although different browsers have preferences over others, the most common being .ogg, .mp3, and .wav.

In order to provide a fallback for browsers that don’t accept the file type of your audio file, you can use the source element to provide backup options:

<audio autoplay controls>
    <source src="piano.mp3" type="audio/mp3">
    <source src="piano.wav" type="audio/wav">
    <source src="piano.ogg" type="audio/ogg">
</audio>

 

Video

Adding video to a page is very similar to adding audio. Many of the same attributes from the audio element (such as src, autoplay, controls, loop, and preload) all apply to the video element.

When adding in video, it is typically recommended to specify width and height dimensions, since the video’s original size will likely extend beyond the viewport:

<video id="piano-video" src="piano.ogv" controls></video>

 

#piano-video {
    height: 300px;
    width: 500px;
}

 

Similar to audio, different browsers prefer different formats, the most common being .ogv and .mp4. To mitigate any compatibility issues, it is recommended to use the source element here too:

<video autoplay controls>
    <source src="piano.ogv" type="video/ogg">
    <source src="piano.mp4" type="video/mp4">
</video>

 

Inline Frames

Inline Frames, or the iframe element, is often used to display maps, excepts from another website and other forms of content. You will often see this used on Google Maps, YouTube and other sites:

<iframe src="https://www.google.com/maps/embed?..."></iframe>

 

The iframe element includes default styles for border, width, and height, depending on the browser. These styles can be adjusted either via the frameborder, width, and height HTML attributes, or the border, width, and height CSS properties.

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC