The advantage of specifying multiple video or audio file formats is that if a user agent, like a browser for instance, doesn't support a file format the browser can go through the list of audio or video sources you specified, in order, to find and play a format that it supports. The browser will play the first supported file format it finds.
Now in order to add multiple alternative media resources to the <audio> and <video> element's, that the browser can choose from, you will need to use the new <source> element for HTML5.
The <source> element enables multiple media sources like a video file or audio file to be specified for the <audio> and <video> element's. The <source> element basically allows authors also known as the web pages creator to specify multiple versions of a media file.
User agents, like a browser for example, will go down the list of <source> element's until they find a file format that they are able to play.
Its very important to remember that if the <source> element is used, the src attribute should not be used with the <audio> and <video> element's. If the src attribute is used with the <audio> and <video> element's the <source> element or element's will be ignored.
Another important thing that you should remember when using the <source> element is that it must be placed in between the <video> element's or <audio> element's start tag and end tags, in other words the <source> element must be a child of the <video> element or <audio> element. The <source> element must also be placed before any <track> element's and flow content or phrasing content.
You may include one or more <source> element's. Each <source> element that you specify is a complete video file or audio file of its own.
The <source> element is considered a void element also known as an empty element, which means that the <source> element must have a start tag but must not have an end tag for HTML5 web pages. But for XHTML web pages all tags must be closed even void element's must be closed by adding a space which is optional and a trailing slash / to the end of the tag, for example <source src="music.ogg" /> in-order for the <source> element to validate in XHTML. You should note that the space added just before the slash is for backwards compatibility with older browsers.
The <source> element is allowed to use any global attribute, you can learn more about global attributes and how to use them in an earlier tutorial that I wrote called "What The Heck Are Global Attributes In HTML?". The <source> element can also use the attributes src, type and media. I will explain about these attributes in detail later on, after I show you how to code in the <source> element. But for now I will briefly explain the src attribute, since we will be using the src attribute in our first example. The src attribute will specify the location of the media file to be played.
Now let me show you how to code in the <source> element and the src attribute for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<audio>
<source src="music.mp3">
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
And here is how to code in the new <source> element with the src attribute for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<audio>
<source src="music.mp3" />
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
Now let me show you how to code in multiple <source> element's with the src attribute for HTML5 in the example below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<audio>
<source src="music.mp3">
<source src="music.ogg">
<source src="music.wav">
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
And here is how to code in multiple <source> element's with the src attribute for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<audio>
<source src="music.mp3" />
<source src="music.ogg" />
<source src="music.wav" />
<p>This browser doesn't support the audio element.</p>
</audio>
</body>
</html>
Now let me list and explain the <source> element's src, type and media attributes below.
- src
The src attribute specifies the location of the audio file or video file to be played, for instance a video or music clip.
The src attributes value can be any absolute or relative URL value. An absolute URL value is basically all the information that a server requires to find the file, for instance src="http://www.example.com/movie.ogg" is considered an absolute URL value. And a relative URL value is essentially a URL that points to a link on a server in a local manner, while basically leaving out the domain name from the URL, for example src="/movie.ogg" is considered a relative URL value. Both types of URL's can optionally have leading and/or trailing space characters, which essentially means that your src attributes URL value can have white space before and or after the URL value, for example src=" http://www.example.com/movie.ogg ".
Now let me show you how to code the src attribute for the <source> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <audio> <source src="music.mp3"> <p>This browser doesn't support the audio element.</p> </audio> </body> </html>And here is how to code the src attribute for the <source> element for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <audio> <source src="music.mp3" /> <p>This browser doesn't support the audio element.</p> </audio> </body> </html>- type
The type attribute specifies the video files or audio files MIME type to help the user agent, for example a browser, determine if it can play the media resource before fetching it.
If you are wondering what a MIME is, its short for Multipurpose Internet Mail Extensions which is a standard way of classifying file types on the Internet like audio files and video files.
The type attributes value must be a valid MIME type. A valid MIME type follows the following rules as defined in the RFC 2616. A valid MIME type value usually, starts with a required type, followed by a trailing slash "/" character, followed by a required subtype, and optionally followed by one or more instances of a semicolon ";" character followed by a parameter. So, for instance some valid MIME type values are, for example type="audio/wav" which is considered a valid MIME type value and type='video/ogg; codecs="theora, vorbis"' which is also considered a valid MIME type value with a parameter.
So the syntax for a valid MIME type value for the type attribute is type/subtype or in other words for example, video/ogg and the syntax for the parameter is attribute=value or in other words for instance, codecs="theora" where codecs is the parameter and theora is the value.
As I mentioned earlier you may also add an optional parameter to your MIME types value, which is known as the codecs parameter. The codecs parameter should be added to your MIME types value when more than a single codec is available. When you specify more than one codec value at a time you should use a comma "," to separate each codec value. The optional codecs parameter helps the user agent, for example a browser, determine if it can play the media resource before fetching it. Incase you are wondering what a codec is, its a technical name for "compression and decompression" also known as "compressor and decompressor" and "code and decode", which all mean the same thing. A codec is basically a computer program that encodes or in other words shrinks large video files and audio files, and then decodes them to make them playable on your computer.
You may have noticed that single and double quotes are used when specifying the type attribute and codecs parameter together. This is because using the same type of quotes as a string delimiter and inside the string doesn't work without escaping them.
Also when the codecs parameter has only one codec value you may leave out the double quotes for example, <source src="audio.ogg" type='audio/ogg; codecs=vorbis' /> but if the codecs parameter has more than one codec value you must include the double quotes for example, <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' /> in order for your code to validate.
If you specify a type attribute that does not match your video file or audio file source, the browser may refuse to play the media file.
There are many MIME type values to choose from for the type attribute, so I will just list some of them below.
- application/ogg
- application/ogg; codecs="bogus"
- application/mp4
- application/mp4; codecs="bogus"
- application/octet-stream
- application/octet-stream; codecs="bogus"
- audio/3gpp
- audio/3gpp2
- audio/aac
- audio/x-aac
- audio/aiff
- audio/x-aiff
- audio/ac3
- audio/x-ac3
- audio/basic
- audio/flac
- audio/x-flac
- audio/mid
- audio/midi
- audio/x-midi
- audio/mpeg
- audio/x-mpeg
- audio/mpegurl
- audio/x-mpegurl
- audio/mp4
- audio/mp4; codecs="bogus"
- audio/ogg
- audio/ogg; codecs="bogus"
- audio/wav
- audio/wav; codecs="0"
- audio/wav; codecs="1"
- audio/wav; codecs="2"
- audio/wave
- audio/wave; codecs="0"
- audio/wave; codecs="1"
- audio/wave; codecs="2"
- audio/x-wav
- audio/x-wav; codecs="0"
- audio/x-wav; codecs="1"
- audio/x-wav; codecs="2"
- audio/x-pn-wav
- audio/x-pn-wav; codecs="0"
- audio/x-pn-wav; codecs="1"
- audio/x-pn-wav; codecs="2"
- video/3gpp
- video/3gpp2
- video/avi
- video/mpeg
- video/x-mpeg
- video/mp4
- video/mp4; codecs="bogus"
- video/msvideo
- video/x-msvideo
- video/quicktime
- video/ogg
- video/ogg; codecs="bogus"
- video/mp4; codecs="avc1.42E01E, mp4a.40.2"
- video/mp4; codecs="avc1.58A01E, mp4a.40.2"
- video/mp4; codecs="avc1.4D401E, mp4a.40.2"
- video/mp4; codecs="avc1.64001E, mp4a.40.2"
- video/mp4; codecs="mp4v.20.8, mp4a.40.2"
- video/mp4; codecs="mp4v.20.240, mp4a.40.2"
- video/3gpp; codecs="mp4v.20.8, samr"
- video/ogg; codecs="theora, vorbis"
- video/ogg; codecs="theora, speex"
- audio/ogg; codecs="vorbis"
- audio/ogg; codecs="speex"
- audio/ogg; codecs="flac"
- video/ogg; codecs="dirac, vorbis"
- video/x-matroska; codecs="theora, vorbis"
- audio/webm
- audio/webm; codecs="vorbis"
- video/webm
- video/webm; codecs="vorbis"
- video/webm; codecs="vp8"
- video/webm; codecs="vp8.0"
- video/webm; codecs="vp8, vorbis"
First let me show you how to code the type attribute without the codecs parameter and then I will show you how to code the type attribute with the codecs parameter.
Here is how to code the type attribute for the <source> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <audio> <source src="music.mp3" type="audio/mpeg"> <p>This browser doesn't support the audio element.</p> </audio> </body> </html>And here is how to code the type attribute for the <source> element for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <audio> <source src="music.mp3" type="audio/mpeg" /> <p>This browser doesn't support the audio element.</p> </audio> </body> </html>Now let me show you how to code the type attribute with the codecs parameter for the <source> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <video> <source src="video.ogv" type='video/ogg; codecs="theora, speex"'> <p>This browser doesn't support the video element.</p> </video> </body> </html>And here is how to code the type attribute with the codecs parameter for the <source> element for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <video> <source src="video.ogv" type='video/ogg; codecs="theora, speex"' /> <p>This browser doesn't support the video element.</p> </video> </body> </html>You should know that even when you have multiple video files or audio files with the same MIME type, your codecs parameters value can be different. Let me show you what I mean in the example below which are all .ogg audio files with same MIME type but with different parameter values.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <audio> <source src="music.ogg" type='audio/ogg; codecs="vorbis"'> <source src="music.spx" type='audio/ogg; codecs="speex"'> <source src="music.oga" type='audio/ogg; codecs="flac"'> <p>This browser doesn't support the audio element.</p> </audio> </body> </html>
And here is how multiple video files or audio files with the same MIME type but with different codecs parameter values look like in XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <audio> <source src="music.ogg" type='audio/ogg; codecs="vorbis"' /> <source src="music.spx" type='audio/ogg; codecs="speex"' /> <source src="music.oga" type='audio/ogg; codecs="flac"' /> <p>This browser doesn't support the audio element.</p> </audio> </body> </html>
- media
The media attribute specifies the intended media type for the audio file or video file, in order to help the user agent, for example a browser, determine if the specified media resource, for instance the audio file or video file, is useful to the user before fetching it.
The media attributes value must be a valid media query. You may include one or more media queries, combined in a comma-separated list. Each media query consists of a media type and zero or more expressions that check for the conditions of particular media features. First let me explain the media type values and then I will explain what expressions are and how to add them to the media attribute.
In case you are wondering what a media query is, it's basically a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the output device like a computer or mobile phone for instance, where the user agent, for example a browser, is running and if all the expressions in the media query are true. Also, a media query which is otherwise false becomes true if the "not" keyword is present, I will explain about the allowed keywords later on in this tutorial.
The media attribute has eleven media type values you can choose from which include the all, aural, braille, embossed, handheld, print, projection, screen, speech, tty and the tv values which I will explain below in alphabetical order.
The first media type value is the all value which is the default value which will indicate that the media resource, for instance the audio file or video file, is suitable for all devices like a computer or mobile phone for example.
Now the second media type value is the aural value which has been deprecated, which basically means that you shouldn't use this value, instead you should use the media type value speech which I will explain later on in this tutorial. The aural value was intended for speech synthesizers.
The third media type value is the braille value which is intended for braille tactile feedback devices.
The fourth media type value is the embossed value which is intended for paged braille printers.
The fifth media type value is the handheld value which is intended for handheld devices that usually have a small screen and or limited bandwidth like a mobile phone for instance.
Now the sixth media type value is the print value which is intended for paged, opaque material like a printed page and for documents viewed on screen in print preview mode.
The seventh media type value is the projection value which is intended for projected presentations like for example, a projector.
Now the eighth media type value is the screen value which is intended mainly for color computer screens.
Now the ninth media type value is the speech value which is intended for speech synthesizers. You should know that the speech value replaced the aural value which has been deprecated in favor of the speech value.
The tenth media type value is the tty value which is intended for media using a fixed-pitch character grid, like for example, teletypes, terminals, or portable devices with limited display capabilities. Its important to remember that you should not use pixel units with the tty media type value.
The eleventh media type value is the tv value which is intended for television-type devices that usually have for example, low resolution, color, limited-scrollability screens and sound available.
All the media attributes media type name values are case-insensitive.
If you leave out the media attribute from the <source> element, the <source> element will act like if the media attributes all value is present meaning that the media resource, for instance the audio file or video file, is suitable for all devices like a computer or mobile phone for instance.
Now let me show you how to code the media attribute with the value of screen for the <source> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <audio> <source src="music.mp3" media="screen"> <p>This browser doesn't support the audio element.</p> </audio> </body> </html>And here is how to code the media attribute with the value of screen for the <source> element for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <audio> <source src="music.mp3" media="screen" /> <p>This browser doesn't support the audio element.</p> </audio> </body> </html>Now let me show you how to code in multiple media queries which must be separated by a comma "," when placed in the media attribute for the <source> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <audio> <source src="music.ogg" media="screen, print"> <source src="music.spx" media="speech, screen, embossed"> <source src="music.oga" media="handheld, braille, projection, tv"> <p>This browser doesn't support the audio element.</p> </audio> </body> </html>
And here is how to code in multiple media queries which must be separated by a comma "," when placed in the media attribute for the <source> element for HTML5 to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <audio> <source src="music.ogg" media="screen, print" /> <source src="music.spx" media="speech, screen, embossed" /> <source src="music.oga" media="handheld, braille, projection, tv" /> <p>This browser doesn't support the audio element.</p> </audio> </body> </html>
Now earlier I mentioned that you can also add expressions to your media attributes media query values. Now the media attribute can have zero or more expressions which can contain media features. There are thirteen different media features that you can choose from which include width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan and grid which I will list and explain below but first let me explain on how to add an expression to the media attributes media query value.
Now when expressions are placed inside the media attribute they can contain either a media feature, or a media feature followed by a colon : and a value which is some what like a property/value pair. The expression in a media query must be enclosed in parentheses (..) for example, (color) or (color: 24) which are both valid expressions. I will show you how to code both the media feature by itself and with the a colon : and a value later on in this tutorial.
If the media feature is placed inside the media attribute by itself for example, media="(color)" or media="(color: 24)", its assumed to apply to all media types. The examples I just stated make use of the shorthand syntax that you can use for media queries that apply to all media types. For instance, the examples I just specified are the same as declaring media="all and (color)" for our first example and media="all and (color: 24)" for our second example. The only difference is that our shorthand syntax allows us to leave out the all media type and the "and" operator from or media queries.
The first media feature is the width feature which describes the width of the targeted display area of the output device, like for example, the width of the browser window for screen media or the width of the page box on a printer for print media. The width features value should be a length value which basically means it should be a number immediately followed by a unit identifier, some unit identifiers are px, em, ex, gd, rem, vw, vh, vm, ch, in, cm, mm, pt and pc, what each unit identifier stands for is another tutorial for another day. So, in other words the width features value should look something like (width: 700px) when placed in the media attribute. The width features value cannot be a negative number like -2 for example. The width media feature may also use the optional min- or max- prefixes, I will explain how you should use these prefixes later on in this tutorial.
The second media feature is the height feature which describes the height of the targeted display area of the output device, like for example, the height of the browser window for screen media or the height of the page box on a printer for print media. The height features value should be a length value which basically means it should be a number immediately followed by a unit identifier just like the width feature, some unit identifiers are px, em, ex, gd, rem, vw, vh, vm, ch, in, cm, mm, pt and pc, what each unit identifier stands for is another tutorial for another day, but what I will tell you is that the unit identifier px stands for pixel. So, in other words the height features value should look something like (height: 640px) when placed in the media attribute. The height features value cannot be a negative number like -2 for example. The height media feature may also use the optional min- or max- prefixes, I will explain how you should use these prefixes later on in this tutorial.
The third media feature is the device-width feature which describes the width of the rendering surface of the output device, like for example, the width of the screen for screen media or the width of the page sheet for print media. The device-width features value should be a length value which basically means it should be a number immediately followed by a unit identifier, some unit identifiers are px, em, ex, gd, rem, vw, vh, vm, ch, in, cm, mm, pt and pc, what each unit identifier stands for is another tutorial for another day, but what I will tell you is that the unit identifier px stands for pixel. So, in other words the device-width features value should look something like (device-width: 640px) when placed in the media attribute. The device-width features value cannot be a negative number like -24 for example. The device-width media feature may also use the optional min- or max- prefixes, I will explain how you should use these prefixes later on in this tutorial.
The fourth media feature is the device-height feature which describes the height of the rendering surface of the output device, like for instance, the height of the screen for screen media or the height of the page sheet for print media. The device-height features value should be a length value which basically means it should be a number immediately followed by a unit identifier, some unit identifiers are px, em, ex, gd, rem, vw, vh, vm, ch, in, cm, mm, pt and pc, what each unit identifier stands for is another tutorial for another day, but what I will tell you is that the unit identifier px stands for pixel. So, in other words the device-height features value should look something like (device-height: 640px) when placed in the media attribute. The device-height features value cannot be a negative number like -24 for example. The device-height media feature may also use the optional min- or max- prefixes, I will explain how you should use these prefixes later on in this tutorial.
Now the fifth media feature is the orientation feature which indicates whether the device is in landscape mode or in portrait mode. A device is in landscape mode when the devices display is wider than it is tall. And the device is in portrait mode when the devices display is taller than it is wide. The orientation feature has two values to choose from which include the landscape value which will check if the device is in landscape mode or the portrait value which will check if the device is in portrait mode.
The sixth media feature is the aspect-ratio feature which describes the aspect ratio of the targeted display area of the output device, like for example, the browser window for screen media or the page box on a printer for print media. The aspect-ratio features value must consists of two positive integers also known as numbers that are separated by a forward slash "/" character. The aspect-ratio features value represents the number of horizontal pixels over the number of vertical pixels. The first number or numbers stated before the forward slash "/" character represent the horizontal pixels and the number or numbers stated after the forward slash "/" character represent the vertical pixels. So, in other words the aspect-ratio features value should look something like (aspect-ratio: 16/9) when placed in the media attribute. The aspect-ratio media feature may also use the optional min- or max- prefixes, I will explain how you should use these prefixes later on in this tutorial.
The seventh media feature is the device-aspect-ratio feature which describes the aspect ratio of the output device, like for example, the screen for screen media or the page sheet for print media. The device-aspect-ratio features value must consists of two positive integers also known as numbers that are separated by a forward slash "/" character. The device-aspect-ratio features value represents the number of horizontal pixels over the number of vertical pixels. The first number or numbers stated before the forward slash "/" character represent the horizontal pixels and the number or numbers stated after the forward slash "/" character represent the vertical pixels. So, in other words the device-aspect-ratio features value should look something like (device-aspect-ratio: 16/9) when placed in the media attribute. The device-aspect-ratio media feature may also use the optional min- or max- prefixes, I will explain how you should use these prefixes later on in this tutorial.
The eighth media feature is the color feature which indicates the number of bits per color component of the output device. The color feature can have any positive integer also known as a number as it's value for example, (color: 8) which when placed in the media attribute checks for any output device with 8 bits per color component. The color features value cannot be a negative number like -24 for example. If the color features output device is not a color device, the value of the color feature will be zero. The color media feature may also use the optional min- or max- prefixes, I will explain how you should use these prefixes later on in this tutorial.
You should note that if the color components of the output device have different numbers of bits per color component, the smallest number will be used. For example, if a color system uses 5 bits for red and 8 bits for green and 4 bits for blue, then the color features value will be 4. And if the output device uses indexed colors, the minimum number of bits per color component in the color lookup table is used.
Now the ninth media feature I will explain is the color-index feature which indicates the number of color entries in the color lookup table that the output device can handle, in other words, the total number of colors a device can run at the same time when displayed. The color-index feature can have any positive integer also known as a number as it's value for example, (color-index: 256) which when placed in the media attribute checks for any output device with 256 colors exactly. The color-index features value cannot be a negative number like -24 for example. And if the color-index features output device does not use a color lookup table, the value of the color-index feature will be zero. The color-index media feature may also use the optional min- or max- prefixes, I will explain how you should use these prefixes later on in this tutorial.
The tenth media feature is the monochrome feature which indicates the number of bits per pixel on a monochrome greyscale frame buffer device. The monochrome feature can have any positive integer also known as a number as it's value, for example, (monochrome: 8) which when placed in the media attribute checks for any output device with 8 bits per pixel. The monochrome features value cannot be a negative number like -24 for example. If the monochrome features output device is not a monochrome device, the value of the monochrome feature will be zero. The monochrome media feature may also use the optional min- or max- prefixes, I will explain how you should use these prefixes later on in this tutorial.
Now the eleventh media feature is the resolution feature which indicates the resolution, or in other words the density of the pixels of the output device. The resolution feature can have any positive integer also known as a number immediately followed by one of the unit identifiers that can be either dpi which means "dots per inch" or dpcm which means "dots per centimeter" as it's value, for example, (resolution: 600dpi). The resolution features value cannot be a negative number like -24dpi or -3002dpcm for example. The resolution media feature may also use the optional min- or max- prefixes, I will explain how you should use these prefixes later on in this tutorial.
Now the twelfth media feature I will explain now is the scan feature which describes the scanning process of television output devices. The scan feature can have one of two values which are the progressive or interlace values which I will explain below. The scan feature is meant to be used with the tv media type.
The scan features progressive value will check if the output device like a computer monitor or digital television screen uses progressive scanning. Progressive scanning is a way of displaying images on a screen by scanning each line or row of pixels one at a time in a sequential order. In other words the images horizontal lines or pixel rows are scanned in numerical order, for example, "1,2,3" and so on, down the screen from top to bottom.
And the scan features interlace value will check if the output device like a computer monitor or digital television screen uses interlace scanning. Interlace scanning refers to an image that is displayed on a screen by scanning or displaying each line or row of pixels that make up the image, in an alternate order between showing even and odd lines. For example, the images lines or pixel rows are scanned down the screen from top to bottom, in an alternate order from lines or rows like "1,3,5" and so on, followed by lines or rows "2,4,6" and so on.
Now the thirteenth and last media feature that I will explain is the grid feature which determines whether the output device is a grid device or a bitmap device. A grid device is something like a tty terminal or phone display with only one font. And a bitmap device is something like a computer monitor. The grid feature has two integer values also known as number values that you can choose from, the first number value is the number 1 which is for grid-based output devices, which simply means that the value of 1 is a positive match for grid-based displays. The second value is the number 0 which is for all other devices that are not grid-based. So, in other words our grid features value would look something like (grid: 1) when placed in the media attribute.
Now let me show you how to add an expression to the media attributes media query value using the aspect-ratio media feature for the <source> element for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <video> <source src="video.ogv" media="screen and (aspect-ratio: 1280/720)"> <p>This browser doesn't support the video element.</p> </video> </body> </html>And here is how to add an expression to the media attributes media query value using the aspect-ratio media feature for the <source> element for HTML5 to create our XHTML5 web page in the example below.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <video> <source src="video.ogv" media="screen and (aspect-ratio: 1280/720)" /> <p>This browser doesn't support the video element.</p> </video> </body> </html>Now most media features can also accept the optional min- or max- prefixes to express "greater or equal to" and "smaller or equal to" constraints. So, in other words the min- prefix basically means the minimum or lowest value possible and the max- prefix basically means the maximum or highest value possible. The min- and max- prefixes are used in-order to avoid using the less-than sign "<" and greater-than sign ">" characters which may cause problems with HTML and XML. Media features that use the min- or max- prefixes or in other words have the min- or max- prefixed to them cannot be used without a value. If a media feature uses one of the min- or max- prefixes and has no value stated the media query will not validate.
The following media features color, color-index, aspect-ratio, device-aspect-ratio, device-height, device-width, height, monochrome, resolution and width can all use the min- and max- prefixes. In order to use the min- and max- prefixes all you have to do is append one of the prefixes to the beginning of the media feature for example, (min-width: 600px) which means the width of the media feature should be at least 600px.
Now let me show you how to code in the <source> element's media attributes media features min- and max- prefixes for HTML5 in the example below.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <video> <source src="video.ogv" media="handheld and (min-width: 15em)"> <source src="video.avi" media="screen and (max-height: 1200px)"> <p>This browser doesn't support the video element.</p> </video> </body> </html>
And here is how to code in the <source> element's media attributes media features min- and max- prefixes for HTML5 to create our XHTML5 web page in the example below.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <video> <source src="video.ogv" media="handheld and (min-width: 15em)" /> <source src="video.avi" media="screen and (max-height: 1200px)" /> <p>This browser doesn't support the video element.</p> </video> </body> </html>
Okay, before I end this long boring tutorial let me just explain a few more things. If you have managed to stay up reading this tutorial you would have noticed that there are commas "," and the word "and" included in the values of the media attributes media queries. The commas "," and the word "and" are known as operators which you can use with your media queries, but their are also other operators that you can use with the media attributes media query values which include the "not" and "only" operators. I will list and explain what each operator does below for your convenience.
The and operator also known as the and keyword specifies an and operator which means the media queries expression or expressions must match or in other words be true.
The not operator also known as the not keyword specifies a not operator which means that the query is true when it doesn't match. User agents that only support the media types all, aural, braille, handheld, print, projection, screen, tty and tv which are described in HTML4 will not recognize the not keyword which will result in the media resource not begin played or displayed.
The only operator also known as the only keyword hides the media resource like an audio file or video file from browsers that don't support media queries. So, basically user agents, like a browser for instance, must process media queries starting with the only operator as if the only keyword was not present.
And the comma "," operator acts like an "or" operator which means one of the media queries must match or in other words be true.
Now let me show you how to code in the operators for the media attributes media query values for HTML5 in the example below and then I will explain what each media attributes value means.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Welcome To HTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)"> <source src="video.avi" media="screen and (color)"> <source src="video.mp4" media="not screen and (color)"> <source src="video.ogv" media="only projection and (color)"> <source src="video.mpeg" media="projection, screen and (color)"> <source src="video.wmv" media="screen and (min-width: 800px) and (max-width: 1280px)"> <p>This browser doesn't support the video element.</p> </video> </body> </html>
And here is how to code in the operators for the media attributes media query values for XHTML5 in the example below.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta charset="UTF-8" /> <title>Welcome To XHTML5</title> </head> <body> <video> <source src="video.ogv" media="screen, (color)" /> <source src="video.avi" media="screen and (color)" /> <source src="video.mp4" media="not screen and (color)" /> <source src="video.ogv" media="only projection and (color)" /> <source src="video.mpeg" media="projection, screen and (color)" /> <source src="video.wmv" media="screen and (min-width: 800px) and (max-width: 1280px)" /> <p>This browser doesn't support the video element.</p> </video> </body> </html>
Let me explain what each media attributes value means from the examples above so you can have a better understanding of what the operators can do.
First up is the first media attributes value "screen, (color)" which basically means that the media resource like a video file or audio file is intended for a screen or anything that supports color.
Now the value "screen and (color)" for the media attribute basically means that the media resource like a video file or audio file is intended for a color screen.
Now the third value "not screen and (color)" for the media attribute basically means that the media resource like a video file or audio file is not intended for a color screen but all other media types may be selected.
Now the fourth media attributes value "only projection and (color)" basically selects color projection media in user agents that implement media queries. User agents that only support the media types all, aural, braille, handheld, print, projection, screen, tty and tv which are described in HTML4, will ignore the operator only and hide the media resource as a result, the reason for this is because the only operator is not supported in HTML4. If the operator only were to be left out, old user agents like a browser would select all projection media, because it would just extract that first word which would be projection and will ignore the other entries which in are case is the and operator and media feature color for example, "and (color)".
The fifth media attributes value "projection, screen and (color)" will select all projection media or color screen media devices.
Now the sixth and final media attributes value "screen and (min-width: 800px) and (max-width: 1280px)" will select all screen-based devices with a width between 800 pixels and 1280 pixels.
