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.
- One or more <source> element's.
- Then zero or more <track> element's.
- 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.
- Zero or more <track> element's.
- 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>
300Ribu Dapat Website
0 komentar:
Posting Komentar