How To Add A Playable Video Or Movie To A Web Page Using HTML5

Now in-order to add playable videos or movies to your web pages using HTML5. You will need to use the new <video> element for HTML5.

The new <video> element for HTML5 is considered a media element, that embeds a video file in a web page without requiring a plugin. You may also place content between the <video> element's start tag and end tag, which is intended for older Web browsers that do not support the <video> element, so that legacy video plugins can be tried, or the <video> element's contents displayed to the users that still use the old browsers that don't support the <video> element, informing them on how to access the video data, like a movie clip for example. Now user agents, like a browser for instance, that support the <video> element will not display the contents placed between the <video> element's start tag and end tag.

The <video> element requires both a start tag and an end tag.

When the controls attribute is used with the <video> element, the <video> element can not be placed inside an <a> element or <button> element.

The <video> 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 <video> element can also use the attributes autoplay, preload, controls, loop, poster, height, width, audio and src. I will explain about these attributes in detail later on, after I show you how to code in the <video> element. But for now I will briefly explain the src and controls attributes, since we will be using them in our first example. The src attribute will specify the location of the media file to be played. And the controls attribute will specify that the playback controls should be displayed.

You should take note that your video or movie file will still display without the controls attribute, also most browsers will allow you to right mouse click the video or movie file in-order to view the controls menu for the video or movie file with or without the controls attribute present in the <video> element.

If the <video> element does not have an src attribute, the contents of the <video> element must follow a specific ordered structure, which starts with one or more <source> element's, then zero or more <track> element's, then followed by flow content or phrasing content. I will explain what flow content and phrasing content is and when you should use each one of them later on this tutorial.

So basically, if you do not place an src attribute in the <video> element, your <video> element's content structure should follow the following order below.

1. One or more <source> element's.
2. Then zero or more <track> element's.
3. Followed by flow content or phrasing content.

Now if the <video> element includes an src attribute, it's important to remember that the contents of the <video> element must follow a specific ordered structure which starts with zero or more <track> element's, followed by flow content or phrasing content. I will explain when you should use flow content or phrasing content later on in this tutorial.

So in-other words, if you include an src attribute in the <video> element, your <video> element's content structure should follow the following order below.

1. Zero or more <track> element's.
2. Followed by flow content or phrasing content.

Now let me explain when you should and should not use flow content or phrasing content below.

When the <video> element is placed inside another element that is allowed to contain flow elements, then the contents of the <video> element may also contain flow elements.

And when the <video> element is placed inside another element that restricts other elements that are placed in it to only being phrasing elements, then the contents of the <video> element is also restricted to containing only phrasing elements.

It's important to remember that not all the browsers support the same video file formats, for example the browser Firefox 3.5 and up and the browser Opera 10.5 and up don't support the .avi format, but they both support the .ogg format. In case you are wondering what is a video file format, it's basically a medium for storing digital video data like videos or movies on a computer system.

Here is how to code the <video> element with the src and controls attributes for HTML5 in the example below in-order to add a playable video file to your web page.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

And here is how to code the new <video> element with the src and controls attributes 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 src="movie.ogg" controls="controls"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

Now let me explain the <video> element's autoplay, preload, controls, loop, poster, height, width, audio and src attributes, which I will list and explain below.

autoplay

The autoplay attribute will play the media file automatically as soon as it is ready. So basically, the autoplay attribute instructs the user agent, for example a browser, to automatically begin playback of the video or movie as soon as it can without stopping.

The autoplay attribute is a boolean attribute, which means that the autoplay attribute needs no value for HTML5 web pages, all you have to do is include the word autoplay in the desired <video> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the autoplay attribute will need to have a value of autoplay, for instance autoplay="autoplay" in-order for the attribute to validate in XHTML.

Here is how to code the autoplay attribute for the <video> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls autoplay> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

And here is how to code the autoplay attribute for the <video> element 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 src="movie.ogg" controls="controls" autoplay="autoplay"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

preload

Before I discuss the preload attribute, you should know that the preload attribute used to be the autobuffer attribute but was changed to the preload attribute in the W3.org specifications. The autobuffer attribute is a boolean attribute, just in case you were wondering.

The preload attribute specifies whether or not the video or movie file should be loaded when the page loads. The preload attribute is an enumerated attribute, which means that it has a set list of values also known as keywords that you can choose from, which include none, metadata and auto. I will explain about these values below.

The first value is the none value. The value none informs the user agent, for example a browser, that either the web pages creator, in other words the author, does not expect the user to need the media resource, or that the server wants to minimize unnecessary traffic. A simpler way to put this, is that the none value suggests to the browser that it shouldn't preload the video or movie file until the user activates the controls, for instance, by pressing the play button.

The second value which is the metadata value, informs the user agent, for example a browser, that the user is not expected to need the video or movie file, but that fetching its metadata, for example its duration, first frame, track list, dimensions and so on, is the priority. So basically, the metadata value suggests to the browser that it should just prefetch the media files metadata, for example, the dimensions, track list, duration, first frame and so on, but that it should not download anything further until the user activates the controls, for instance, by pressing the play button.

Now the third value which is the auto value, informs the user agent, for example a browser, that it should download the entire video or movie when the web page loads. It's important to remember that the browser may ignore the auto value, because of the users browsers settings or because it detected that the user has a very slow internet connection.

You may also leave the preload attributes value empty, for instance for an HTML5 web page you will just have to state the name preload or preload="" which will act like the auto value. But for an XHTML5 web page you will have to state an empty preload attributes value in the following way, for example, preload="" in-order for your web page to validate. Leaving the preload attributes value empty is considered a valid keyword, which means your web page will still validate.

Another important thing that you should remember, is that if the autoplay attribute is stated it can override the preload attribute, this happens because if the media file plays, it naturally has to buffer first, regardless of the preload attributes value. However, including both the preload attribute and the autoplay attribute, will not result in an error.

Here is how to code the preload attribute using the metadata value for the <video> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls preload="metadata"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

And here is how to code the preload attribute using the metadata value for the <video> element 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 src="movie.ogg" controls="controls" preload="metadata"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

controls

The controls attribute indicates that the user agent, for instance a browser, should display its own set of playback controls for the video or movie file also known as a media file. The playback controls can include the play, pause, seeking, full-screen and volume controls, which are better known as the play, pause, seek, full-screen and volume buttons.

The controls attribute is a boolean attribute, which means that the controls attribute needs no value for HTML5 web pages, all you have to do is include the word controls in the desired <video> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the controls attribute will need to have a value of controls, for instance controls="controls" in-order for the attribute to validate in XHTML.

It's important to remember that when you use the controls attribute with the <video> element, the <video> element can not be placed inside an <a> element or <button> element.

Here is how to code the controls attribute for the <video> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

And here is how to code the controls attribute for the <video> element 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 src="movie.ogg" controls="controls"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

loop

The loop attribute indicates that the media file, for example a movie clip, should start playing again automatically once it reaches the end.

The loop attribute is a boolean attribute, which means that the loop attribute needs no value for HTML5 web pages, all you have to do is include the word loop in the desired <video> element and you're done. But in XHTML you need to include a value for all the attributes even for the boolean attributes, for example the loop attribute will need to have a value of loop, for instance loop="loop" in-order for the attribute to validate in XHTML.

Here is how to code the loop attribute for the <video> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls loop> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

And here is how to code the loop attribute for the <video> element 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 src="movie.ogg" controls="controls" loop="loop"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

poster

The poster attribute specifies the location of a graphic file or image file that the user agent, for instance a browser, will use to display as a placeholder while the video or movie is downloading, or before the video or movie begins to play, or until the user tells the video or movie to play.

The poster 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 poster="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 poster="/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 poster attributes URL value can have white space before and or after the URL value, for example poster=" http://www.example.com/movie.ogg ".

If you don't include the poster attribute, the browser will display the first frame of the video or movie.

Here is how to code the poster attribute for the <video> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls poster="image.jpg"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

And here is how to code the poster attribute for the <video> element 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 src="movie.ogg" controls="controls" poster="image.jpg"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

height

The height attribute specifies the height of the video player in pixels.

The height attributes value can be any non-negative integer also known as a number or digit, between 0 and 9. For example, 1 or 215 or 0 are all valid values, but a value of -13 is not a valid value.

It's considered good practice to specify both the height and width attributes together because the space indicated by the attributes values are reserved for the video or movie file when the web page is loaded.

If you decide to only include the height attribute but not the width attribute, the user agent, for example a browser, will adjust the size of the unspecified dimension to preserve the video or movie's aspect ratio. The aspect ratio is basically the width-to-height ratio of the video or movie file.

Here is how to code the height attribute for the <video> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls height="800"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

And here is how to code the height attribute for the <video> element 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 src="movie.ogg" controls="controls" height="800"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

width

The width attribute states the width of the video player in pixels.

The width attributes value can be any non-negative integer also known as a number or digit, between 0 and 9. For example, 1 or 215 or 0 are all valid values, but a value of -13 is not a valid value.

It's considered good practice to specify both the width and height attributes together because the space indicated by the attributes values are reserved for the video or movie file when the web page is loaded.

If you decide to only include the width attribute but not the height attribute, the user agent, for example a browser, will adjust the size of the unspecified dimension to preserve the video or movie's aspect ratio. The aspect ratio is basically the width-to-height ratio of the video or movie file.

Here is how to code the width attribute for the <video> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls width="624"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

And here is how to code the width attribute for the <video> element 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 src="movie.ogg" controls="controls" width="624"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

audio

The audio attribute indicates the default state of the the audio channel of the video or movie file, which may possibly override the users preferences.

The audio attribute currently only has one value to choose from which is the muted value. The muted value instructs the user agent, for example a browser, to override the user's preferences, if any, and always default the video or movie to muted. So basically, the muted value states that the audio for the video or movie should be muted by default.

Now let me show you how to code the audio attribute with the value muted for the <video> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="movie.ogg" controls audio="muted"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

And here is how to code the audio attribute with the value muted for the <video> element 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 src="movie.ogg" controls="controls" audio="muted"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

src

The src attribute specifies the location of the video or movie file, for instance a video 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 ".

It's important to remember that you can also indicate a video or movie file, for example a movie clip, by using the <source> element as well. I will explain about the <source> element in a future tutorial.

Now let me show you how to code the src attribute for the <video> element for HTML5 in the example below.

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <video src="http://www.example.com/movie.ogg" controls> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

And here is how to code the src attribute for the <video> element 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 src="http://www.example.com/movie.ogg" controls="controls"> 
  <p>This browser doesn't support the video element.</p> 
 </video> 

</body>
</html>

Read More

How To Specify Multiple Alternative Video Or Audio File Formats Using HTML5

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

Read More