HTML and CSS Reference
In-Depth Information
The video format that you choose depends on the visitors you expect to visit your
Web site. Are most of your Web site visitors users of Macs or PCs? What is the level of
computer (e.g., amount of RAM or cache) and connection speed (e.g., broadband) for
your average user? In this project, you will insert an .mp4 file on a Web page.
Table 8-2 Common Video File Formats
Format
File Extension
Description
•
Audio / Video Interleaved
AVI
.avi
•
Developed by Microsoft to use with Windows
•
Can contain both audio and video data
•
Small Web Format
Flash
.swf
•
Can contain audio, video, or animations
•
Requires Adobe Flash Player
•
Developed by Adobe
.flv
.f4v
Flash Video
•
Format of choice for embedded video on the
Web
•
Used by YouTube and Hulu
.mpg
.mpeg
.mp3
•
Moving Picture Experts Group
MPEG
•
Can be highly compressed resulting in small file size
•
Supported by most major browsers
•
Created on basis of QuickTime format; used for audio and video
MP4*
.mp4
•
Is a quicker, faster, high-quality media
•
not supported by Windows Media Player
•
Maintained by xiph.org Foundation
•
Designed to provide for efficient streaming and high-quality digital
Ogg*
.Ogg
multimedia
Can be used with HTML5 <video> tag
•
•
Developed by Apple for both Windows and Mac operating systems
•
File compression can result in smaller file size
QuickTime
.mov
•
Requires QuickTime Player or Adobe Flash Player, which are easily
downloaded
.rm
.rv
•
Proprietary video format developed by Realnetworks
RealVideo
•
Requires RealPlayer
•
Developed by Google
WebM*
.webm
•
Royalty free, open format
•
Can be used with HTML5 <video> tag
•
Developed by Microsoft
Windows Media
.wmv
•
Originally designed for Internet streaming applications
•
Requires Windows Media Player or RealPlayer
*Supported by HTML5 <video> tag
Adding an Audio File to a Web Page
Audio Clips
Many good Web design
sites discuss the use
of audio clips in Web
development. Search for
ideas of how you can
most effectively utilize an
audio clip.
Mr. Garcia's English literature class Web site consists of three files. The first Web page,
longfellow.html, is the home page, which contains an image of the Longfellow home
and a horizontal navigation bar. This Web page will not change. The next Web page,
longfellow-audio.html, is the Web page file into which you will insert an audio file,
longfellow-audio.mp3. The third page, longfellow-video.html, will contain the video
clip, longfellow-video.mp4. All Web pages in this Web site are linked to the external style
sheet, stylesch8.css. The external style sheet file is also not changed. Please review the file,
however, so that you are familiar with the styles used in the Web site. Pay special attention
to the classes that are named in the external style sheet and review how those classes are
used in the longfellow-audio.html and longfellow-video.html files.
