Now let me explain when you should and should not use flow content or phrasing content below.
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.
- 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
