With HTML5 there is a large change to make multimedia more responsive. In web terminology, responsive means working on mobile phones and other devices that might have different screen sizes and orientations.
The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>.
The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width. The browser will choose the first <source> it supports.
The important parts of the source tag are the attributes. These will be an attribute saying where the media is found and then an option to explain when the media should be used. To locate the file you use either src for audio or video clips, or srcset of images to get the right file to use for the media. To decide what media is played you use attributes like type or media.
The following examples will help to explain it.
Audio
The <audio> tag is used to play audio files using the built in browser player. The tag contains <source> tags that give the location of the file to load and a type attribute that tells the browser what format the file is in. The browser will work the way down the list of <source> tags until it finds a type it can play. If none of the types can be played then it will display the text inside the <audio> tag.
There are three supported audio formats in HTML: MP3, WAV, and OGG. Be advised that not all browsers support each format. Use MP3 if you can only choose one for the site.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>Here we can see source tags using a src attribute to show the location of the file, and type attributes to decide which to use if the browser supports that type.
Video
The <video> tag is play video files using the browser’s built in player. The tag contains <source> tags which point to video files of different types. The browser will go down the list checking if it knows how to display that type of video. If none of the options are supported then it will show the text between the <video> tags instead.
There are three supported video formats in HTML: MP4, WebM, and OGG. Be advised that not all browsers can support OGG.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Here we can see source tags using a src attribute to show the location of the file, and type attributes to decide which to use if the browser supports that type.
Images
The <img> tag is used to place an image on the page.
The <img> tag has two required attributes:
- src – the path to the image
- alt – the alternate text for the image, if the image for some reason cannot be display. Used if someone cannot see the image such as in a screen reader. You should explain what the image is showing.
You should also specify the width and height of an image. If width and height are not specified, the page content might move around as it is reordered around images as they load in. By specifying a height and width you tell the browser to set aside room for the image.
<img src="medium.png" alt="Abstract shapes" height="1200" width="1200">The <picture> tag lets you specify multiple source images files so that you can optimise which one is loaded for a given screen size.
The <picture> element contains one or more <source> tags and one <img> tag. The <img> element is required as a fallback option if none of the source tags matches and for older browsers that don’t understand the picture and source tags.
<picture>
<source media="(min-width: 1500px)" srcset="large.png">
<source media="(min-width: 1000px)" srcset="medium.png">
<source media="(max-width: 999px)" srcset="small.png">
<img src="medium.png" alt="Abstract shapes">
</picture>
Here we can see the source tags using the srcset attribute to show where the image file should be located, and the media attribute to determine which one should be used. The browser will start at the top and work down until it finds a match. In this case it will see if the screen has a minimum width of 2000px, if it does it will load large.png. If it doesn’t it checks if it has a minimum width of 1000px and loads medium.png. If that doesn’t work then it will use small.png up to screens of 999px wide. There is also an img tag for older browsers that don’t understand the picture and source combination.
Download the following images or make some images yourself to demonstrate loading different sizes of image.
Make a folder called images in the folder that houses your index.html file then upload these images into that new folder.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<script type="text/javascript" src="/script.js"></script>
<meta charset="UTF-8">
<meta author="Your name here">
<title>My first webpage</title>
</head>
<body>
<header>
This is my website name
</header>
<nav>
<a href="/index.html">Home</a>
</nav>
<main>
<h1>Welcome to my home page</h1>
<p>This is the main part of the page.</p>
<h2>To do list</h2>
<ul>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn Javascript</li>
<li>Make a website</li>
</ul>
<picture>
<source media="(min-width: 1500px)" srcset="images/test-image-large.png">
<source media="(min-width: 1000px)" srcset="images/test-image-medium.png">
<source media="(max-width: 999px)" srcset="images/test-image-small.png">
<img src="images/test-image-medium.png" alt="Abstract shapes">
</picture>
</main>
<footer>
This is the footer.
</footer>
</body>
</html>
