Tự học HTML và CSS trong 1 giờ - part 40 pdf

ptg
After you’ve specified the settings, just click the Start button to encode your video as
H.264. When the encoding is complete, preview the video, preferably in the player you’ll
be using on the Web, to make sure that the quality is sufficient. If it’s not, encode the
video again using different settings. Likewise, if the video file is larger than you’d like,
you may want to encode the video again with the compression turned up. Afterward,
watch the video and make sure that it still looks okay.
Converting Video to Ogg Theora
To convert video for use with Firefox and Chrome, you’ll need to convert it to Ogg
Theora. A number of tools can be used to do so. One popular, free option is Firefogg,
which can be found at Firefogg is an add-on for the Firefox web
browser. When it’s installed, you can go back to the Firefogg website to convert video
from other formats to Ogg Theora.
VLC, a video player that supports a wide variety of formats, can also be used to convert
video to Ogg Theora. It’s available for Windows, OS X, and Linux. You can download it
at To use it to convert video from one format to another,
use the Open Capture Device option in the File menu, select the file you want to convert,
and then use the Transcoding Options to choose the Theo video format and Vorb audio
format.
Embedding Video Using <video>
The methods used to embed video in web pages have changed a great deal over the
years. In the early days of the Web, to present video, the best approach was just to link to
video files so that users could download them and play them in an application other than
their browser. When browsers added support for plug-ins through the <embed> tag, it
became possible to embed videos directly within web pages. The catch was that to play
the video, the user was required to have the proper plug-in installed.
The tag used to embed plug-ins in pages changed from <embed> to <object>, but the
approach was the same. Plug-ins made embedding videos possible, but they didn’t make
it easy, because of the wide variety of video formats and plug-ins available. Publishing
video files that worked for all, or even most, users was still a problem.
In 2002, Adobe added support for video to Flash. Because nearly everyone had Flash

installed, embedding videos in Flash movies became the easiest path to embedding video
in web pages. Later, it became possible to point a generic Flash video player at a prop-
erly encoded movie and play it. This is how sites like YouTube work. As you’ll see later
in this lesson, there are some Flash video players that you can use to play videos that you
366
LESSON 12:Integrating Multimedia: Sound, Video, and More
Download from www.wowebook.com
ptg
host, too. Currently, Flash remains the most popular approach for presenting video on the
web, but with HTML5, browsers are beginning to add native support for video playback
through the <video> tag.
The current generation of mobile devices that are capable of video playback (like the
iPhone and phones based on Google’s Android operating system) support the HTML5
<video> tag and in most cases do not support Flash. So, the best approach for providing
video to the widest number of users is to use both the <video> tag and a Flash player.
After introducing the <video> tag, I’ll explain how to use it with a Flash movie in such a
way that users only see one video player—the appropriate one for their environment.
The <video> Tag
The <video> tag is new in HTML5. It is used to embed a video within a web page, and
to use the browser’s native video playback capabilities to do it, as opposed to Flash or
some other plug-in. Here’s a simple version of the <video> tag:
<video src=”myvideo.mp4”>
If the browser is capable of playing the video at the URL specified in the src attribute, it
will do so. Or it would, if there were some way of telling the browser to play the video.
In this case, the video will have no controls and won’t start playing automatically. To
take care of that, I need to use some of the attributes of the <video> tag, which are listed
in Table 12.1.
TABLE 12.1 <video> Attributes
Attribute Description
src The URL for the video to be played.

height The height of the element.
width The width of the element.
controls Boolean attribute that indicates that the browser should supply
its own controls for the video. The default is to leave out the
controls.
autoplay Boolean attribute that indicates that the video should play imme-
diately when the page loads.
loop Boolean attribute. If present, the video will loop when it reaches
the end, replaying until the user manually stops the video from
playing.
preload Boolean attribute. If present, the browser will begin downloading
the video as soon as the page loads to get it ready to play.
Ignored if autoplay is present.
Embedding Video Using <video>
367
12
Download from www.wowebook.com
ptg
Because the video above doesn’t have the controls or autoplay attributes, there’s no
way to get it to play. Figure 12.8 shows the video, embedded using the following tag,
with controls included:
<video src=”myvideo.mp4” controls>
368
LESSON 12:Integrating Multimedia: Sound, Video, and More
FIGURE 12.8
A video embedded
using the
<video> tag, with
controls.
When embedding a video, make sure that you give users some

way to control the video playback. Be conservative with
autoplay
and loop, too. Many users don’t want a video to start playing
immediately when they get to a page. If you include the
loop
attribute and you don’t include any controls, the user will have to
leave the page to stop the video.
By default, the <video> element will be the same size as the video in the video file. You
can change the size of the element on the page using the height and width attributes;
however, the browser will preserve the aspect ratio of the video file and leave blank
space where needed. For example, my movie was created using a 3:2 aspect ratio. If I
create a <video> element with a 9:5 aspect ratio, the movie will appear centered within
the element, as shown in Figure 12.9:
<video style=”background: black” src=” controls
width=”675” height=”375”>
CAUTION
Download from www.wowebook.com
ptg
I set the background color of the <video> element to black to make it clear where the
browser puts the extra space when the movie’s aspect ratio does not match the aspect
ratio of the element.
Finally, if you’re fairly certain that most people who come to your page will want to
view the video, but you want to let them play the video themselves, you may want to
include the preload attribute, which tells the browser to go ahead and download the
video when the page loads but to wait for the user to play the video. Usually this means
users will not have to wait as long to see the video after they try to play it, but the disad-
vantage is that you’ll use bandwidth sending the video to everyone, whether they actually
play the movie.
Using the <source> Element
There are two major drawbacks to using the <video> tag. The first is that all browser

support is limited. Versions 8 and earlier of Internet Explorer do not offer support for
<video>, nor does Firefox 3.0. The second is that even among browsers that support the
<video> tag, not all of them support the same video containers or codecs. As you’ve
seen, this problem requires you to encode your videos in multiple formats if you want to
reach most browsers, but the good news is that the <video> element provides a means of
dealing with this issue so that your users won’t notice.
To embed a single video file, you can use the src attribute of the video tag. To provide
videos in multiple formats, use the <source> element nested within your <video> tag.
Here’s an example, the results of which are shown in Figure 12.10:
<video width=”320” height=”240” preload controls>
<source src=”movie.mp4”
type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’>
Embedding Video Using <video>
369
12
FIGURE 12.9
A <video> tag
with a different
aspect ratio than
the embedded
video file.
Download from www.wowebook.com
ptg
<source src=”movie.ogv”
type=’video/ogg; codecs=”theora, vorbis”’>
</video>
370
LESSON 12:Integrating Multimedia: Sound, Video, and More
FIGURE 12.10
A video embedded

using the
<video> tag with
<source> tags
with controls.
As you can see, in this case I’ve left the src attribute out of my <video> tag. Instead,
I’ve nested two <source> elements within the tag instead. The src attribute of <source>
contains the URL a video file, and the type attribute provides information to the browser
about the format of that file. The browser examines the types of each of the movie files
and chooses one that is compatible.
The syntax of the type attribute can be a little bit confusing because of the punctuation.
Here’s the value:
video/ogg; codecs=”theora, vorbis”
The first part is the MIME type of the video container. The second part lists the codes
that were used to encode the audio and video portions of the file. So in this case, the con-
tainer type is video/ogg, the video codec is theora, and the audio codec is vorbis. If
the browser supports both the file type and the codecs, it will use that video file. The val-
ues for the type attribute are as follows:
n
MP4/H.264—video/mp4; codecs=”avc1.42E01E, mp4a.40.2”
n
Ogg Theora—theora, vorbis
n
WebM—vp8, vorbis
Embedding Flash Using the <object> Tag
The <object> tag is used to embed media of all kinds in web pages. Although it is most
often used to embed Flash movies, it can also be used for audio files, video files, images,
and other media types that require special players. Unlike all the other HTML tags
you’ve learned about so far, the <object> tag works differently from browser to browser.
Download from www.wowebook.com
ptg

The problem is that browsers use different methods to determine which plug-in should be
used to display the media linked to through the <object> tag.
First, the version of the <object> tag that works with Internet Explorer:
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=”780”
height=”420”>
<param name=”movie” value=”movie.swf” />
</object>
The height and width attributes are necessary to define how much space the <object>
will take up. The classid attribute identifies the ActiveX control that will be used to dis-
play the content in the browser. That long, random-looking collection of letters and num-
bers is the address of the ActiveX control in the Windows Registry. Your best bet is to
find an example of Flash embedding and copy it from there.
Embedding Flash Using the <object> Tag
371
12
When you’re specifying the height and width for a Flash movie, be
sure to take the size of the player into account, too. Some players
include a border, and nearly all of them provide controls for the
video playback. You need to account for these parts of the window
to make sure your video is shown at the resolution you anticipated.
The <param> element is used with <object> to provide additional information about the
content being embedded to the plug-in referenced by the <object> tag. The <param> ele-
ment has two attributes, name and value. This <param> element provides the Flash player
with the URL of the movie to be played.
The preceding markup will work in Internet Explorer, embedding the Flash movie named
movie.swf. Here’s the markup for the <object> tag for other browsers:
<object type=”application/x-shockwave-flash” data=”myContent.swf” width=”780”
height=”420”>
</object>
For non-Internet Explorer browsers, you specify the plug-in to use with the type attribute

and the URL of the movie to play with the data attribute. As you can see, the height
and width attributes are included here, too. The type attribute is used to provide an
Internet media type (or content type). The browser knows which content types map to
which plug-ins, so it can figure out whether you have the proper plug-in installed. If you
do, it can load it and render the content at the URL specified by the data attribute. In the
sidebar, I explain exactly what Internet media types are.
TIP
Download from www.wowebook.com
ptg
372
LESSON 12:Integrating Multimedia: Sound, Video, and More
Internet Content Types
Internet media types, also referred to as content types or MIME types, are used to
describe the format of a file or resource. They’re a more robust version of a file
extension. For example, a PNG image usually has the extension .png. The MIME
type for PNG files is
image/png. Microsoft Word documents have the extension .doc
(or more recently, .docx) and the MIME type application/msword. These types
were originally used to identify the types of email attachments—MIME is short for
Multipurpose Internet Mail Extensions—but these days, they’re used in other cases
where information about file types needs to be exchanged.
In the case of the
<object> tag, you specify an Internet media type so that the
browser can determine the best way to render the content referenced by that tag.
The Internet media type for Flash is
application/x-shockwave-flash, if that type
is specified, the browser knows to use the Flash plug-in.
There’s one other important use for these types when it comes to video and sound
files. When a web server sends a resource to the Web, it includes a
content type.

The browser looks at the
content type to determine what to do with the resource.
For example, if the content type is
text/html, it treats it as a web page.
When a web server sends files to users, it figures out the Internet media type using
the file extension. So if a user requests
index.html, the web server knows that an
extension of
.html indicates that the files should have the content type text/html.
Later in this lesson, I discuss how to make sure that your web server sends the
right content types for video and audio files that you use.
With most tags, you could just combine all the attributes and wind up with an <object>
that works with all the popular browsers. With <object>, it doesn’t work that way.
However, there’s a way around this problem. Here’s a version that will work:
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=”780”
height=”420”>
<param name=”movie” value=”movie.swf” />
<object type=”application/x-shockwave-flash” data=”myContent.swf” width=”780”
height=”420”>
</object>
</object>
In this example, one of the <object> tags is nested inside the other. This works because
browsers ignore tags they don’t understand, so browsers that aren’t Internet Explorer
ignore the outer <object> tag. Internet Explorer ignores tags nested inside an <object>
tag, except for the <param> tag, so it ignores the inner <object>. That’s the simplest
approach to using the <object> tag in a way that works with all browsers.
Download from www.wowebook.com
ptg
A number of other attributes are supported by the <object> tag, too (see Table 12.2).
TABLE 12.2 <object> Attributes

Attribute Description
align Aligns the element to the left, right, top, or bottom. This
attribute is superseded by the Cascading Style Sheets (CSS)
align property and is removed from HTML5.
archive A list of URLs for resources that will be loaded by the browser.
Removed from HTML5 because it was rarely used.
border The size of the border in pixels. Removed from HTML5 because
it is superseded by the CSS
border property.
classid Specifies the class ID value of the plug-in to be used. This is a
reference to the plug-in’s address in the Windows Registry.
Removed from HTML5.
codebase The URL where the plug-in can be downloaded if the user does
not have it installed. Only works with Internet Explorer. Removed
from HTML5.
codetype The MIME type of the code (plug-in) referenced by the codebase
attribute. This isn’t the type of the media, but rather of the plug-
in used to play the media. Removed from HTML5 and rarely
used.
data The URL for the data that will be presented in the <object> ele-
ment. Flash uses a
<param> to specify this instead.
declare Indicates that the object is only a declaration and should not be
created or displayed. Rarely used and removed from HTML5.
form New attribute in HTML5 that enables the element to be associ-
ated with a specific form.
height The height of the element.
hspace The horizontal padding around the object. Superseded by the
padding CSS property and removed from HTML5.
name A unique name for the element.

standby Contains text to be displayed while the object is loading.
Removed from HTML5, in favor of using CSS and JavaScript to
display a progress message.
type The MIME type of the content to be displayed in the object.
usemap Specifies the URL of a client-side image map to be applied to
the object.
vspace The vertical padding for the object. Superseded by the padding
CSS property and removed from HTML5.
width The width of the element.
Embedding Flash Using the <object> Tag
373
12
Download from www.wowebook.com
ptg
In HTML5, you may find yourself using the <video> tag rather than the <object> tag
for video files, but the <object> tag will still be used for other Flash movies, and for
other multimedia content, such as Microsoft Silverlight.
Alternative Content for the <object> Tag
What happens when a user hasn’t installed the plug-in that the <object> tag requires?
The browser will either display an error message or just display nothing at all. However,
you can provide alternative content that will be displayed if the browser cannot find the
correct plug-in. All you have to do is include the alternative content inside the <object>
tag. If the <object> tag works, it will be ignored. If it doesn’t, it will be displayed. Here
are the nested <object> tags with some alternative content included. You can see alterna-
tive content displayed in a browser that does not have Flash installed in Figure 12.11.
Here’s the code:
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=”780”
height=”420”>
<param name=”movie” value=”movie.swf” />
<object type=”application/x-shockwave-flash” data=”myContent.swf” width=”780”

height=”420”>
<p>You need the Flash player to view this page.
<a href=” Flash.</a></p>
</object>
</object>
374
LESSON 12:Integrating Multimedia: Sound, Video, and More
FIGURE 12.11
Alternative content
displayed in a
browser that
doesn’t support
Flash.
It’s often a good idea to make your alternative content the same
size as the
<object> tag to preserve the layout of your page. You
can style your alternative content with CSS or use an image of the
same size as a placeholder for the
<object>.
TIP
Download from www.wowebook.com
ptg
The <embed> Tag
The <embed> element has been added to HTML5, mainly as a recognition that it has been
in wide use since Netscape created it when it added plug-in support to their browser.
Browsers continue to support it, mainly because many pages out there still use it. The
default YouTube embed code includes the <embed> tag.
First, let’s look at the required attributes of the <embed> element:
<embed src=“a01607av.avi” height=“120” width=“160”
type=”application/x-shockwave-flash” />

The src attribute contains the location of the multimedia file you want to embed in the
web page. The type attribute contains the content type. (It’s the same as the type
attribute of the <object> tag.) The height and width attributes specify the dimensions of
the embedded file in pixels.
Table 12.3 summarizes the <embed> attributes supported by Internet Explorer.
TABLE 12.3 <embed> Attributes
Attribute Description
allowfullscreen Specifies whether the embedded element can occupy the full
screen. Values are
true or false.
allowscriptaccess Determines whether the embedded object can communicate with
external scripts or link to external pages. Values are
always,
samedomain, and never.
flashvars Used to pass configuration parameters to the Flash player. Only
used if the embedded object is Flash.
height The height of the element.
plug-inspage The URL of the page where you can download the plug-in used to
view this object.
src The URL of the multimedia file.
type The MIME type of the multimedia file indicated by the src
attribute.
width The width of the element.
Finally, you can include the noembed element to provide support for visitors who do not
have a web browser that can display plug-ins:
<noembed>This Web page requires a browser that can display objects.</noembed>
<embed src=“a01607av.avi” height=“120” width=“160” />
The <embed> Tag
375
12

Download from www.wowebook.com