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

VLC, a video player that supports a wide variety of formats, can also be used to convert video to Ogg Theora.. To use it to convert video from one format to another, use the Open Capture

Trang 1

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 http://firefogg.org/ 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 http://www.videolan.org/vlc/ 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

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

Trang 2

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:

If the browser is capable of playing the video at the URL specified in the srcattribute, 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.

12

Trang 3

Because the video above doesn’t have the controlsorautoplayattributes, there’s no

way to get it to play Figure 12.8 shows the video, embedded using the following tag,

withcontrolsincluded:

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 heightandwidthattributes;

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=”http://www.yo-yo.org/mp4/yu.mp4” controls

width=”675” height=”375”>

CAUTION

Trang 4

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 preloadattribute, 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

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 srcattribute 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:

<source src=”movie.mp4”

type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’>

12

FIGURE 12.9

A <video> tag

with a different

aspect ratio than

the embedded

video file.

Trang 5

<source src=”movie.ogv”

type=’video/ogg; codecs=”theora, vorbis”’>

</video>

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 srcattribute out of my <video>tag Instead,

I’ve nested two <source>elements within the tag instead The srcattribute of <source>

contains the URL a video file, and the typeattribute 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 typeattribute 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 typeattribute are as follows:

n MP4/H.264—video/mp4; codecs=”avc1.42E01E, mp4a.40.2”

n Ogg Theora—theora, vorbis

n WebM—vp8, vorbis

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 tag works differently from browser to browser

Trang 6

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:

height=”420”>

</object>

Theheightandwidthattributes are necessary to define how much space the <object>

will take up The classidattribute 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

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, nameandvalue 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:

height=”420”>

</object>

For non-Internet Explorer browsers, you specify the plug-in to use with the typeattribute

and the URL of the movie to play with the dataattribute As you can see, the height

andwidthattributes are included here, too The typeattribute 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 dataattribute In the

sidebar, I explain exactly what Internet media types are

TIP

Trang 7

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>

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

Trang 8

A number of other attributes are supported by the <object>tag, too (see Table 12.2)

TABLE 12.2 <object> Attributes

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.

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.

12

Trang 9

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

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=”http://get.adobe.com/flashplayer/>Get Flash.</a></p>

</object>

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

Trang 10

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” />

Thesrcattribute contains the location of the multimedia file you want to embed in the

web page The typeattribute contains the content type (It’s the same as the type

attribute of the <object>tag.) The heightandwidthattributes 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

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.

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.

Finally, you can include the noembedelement 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” />

12

Định dạng
Số trang	10
Dung lượng	1 MB