People upload their video to a website that specializes in video hosting or use videos that other people have uploaded and then copy and paste the code those sites provide for embedding
Trang 1Embedding Video the Simple Way
There’s a lot to be learned about embedding video: tags for embedding video in web
pages, new audio and video elements in HTML5, and browser incompatibilities First,
however, it’s worth discussing the way the vast majority of videos are embedded in web
pages these days People upload their video to a website that specializes in video hosting
or use videos that other people have uploaded and then copy and paste the code those
sites provide for embedding the videos in their own sites
The two most popular video hosting sites, YouTube and Vimeo, provide the code to
embed the videos they host on the web pages for each video You can see the form that
allows you to generate the embed code for YouTube in Figure 12.1
FIGURE 12.1
The embed form
on YouTube.
If you want to add a video hosted on YouTube, you just click the Embed button and the
form shown in the figure displays Choose your customization options, and then copy the
HTML code from the box into your own page The result is shown in Figure 12.2
YouTube (and other sites) automatically generate the markup that you can paste into your
own web pages to embed their videos There’s nothing magic about it; I’ll describe the
tags they use when I discuss embedding video later
Trang 2Advantages and Disadvantages of Hosting Videos on
YouTube
You can upload your own videos to YouTube and embed them in your pages, too Other
sites, like Vimeo (http://vimeo.com/) also offer free hosting for video There are a
num-ber of advantages to hosting your videos on YouTube For one thing, video files tend to
be rather large, and hosting them on YouTube means that you don’t have to figure out a
place to put them You also get to take advantage of YouTube’s video player, which
sup-ports multiple quality levels and full-screen playback It’s used by millions of people and
is widely tested There’s are also YouTube applications for mobile platforms like Apple
iOS and Google Android, so YouTube videos can be viewed on them, whereas they
can-not be with other Flash players As you’ll see, acan-nother advantage is that it’s easy to start
with YouTube You just upload your video file, go to the new page for the video, and
then copy the embed code and paste it on your own site to get things working
Another advantage of hosting your video on YouTube is that you can take advantage of
YouTube’s audience in addition to the audience at your own website When you upload a
video to YouTube and make it public, it shows up in search results and on the lists of
related videos when people watch other videos on the site So in the end, using YouTube
for video hosting can lead more people to your website than hosting videos on your own
The disadvantages of using YouTube are that you cede some control over your video and
how it is presented The YouTube player works well, but it’s obvious to your users that
it’s the YouTube player You may want to host the video yourself if you don’t want them
12
FIGURE 12.2
A YouTube video
embedded in a
web page.
Trang 3Uploading Videos to YouTube
YouTube provides a number of ways to upload video to the site You can take video with
your webcam and upload it directly, or even send video taken on a smart phone to
YouTube In this case, I’m going to upload an existing video file using the web interface
To start the process, go to http://upload.youtube.com/my_videos_uploada and click the
Upload Video button When you do so, a file selection box will appear that you can use
to locate and select the video file you want to upload
YouTube supports a wide variety of video formats, including those used by most camcorders Supported formats include MP4, MOV, AVI, MWV, and FLV
After you’ve selected a file, you’ll immediately be taken to the file upload page, shown
in Figure 12.3 The page shows a progress indicator that lets you know how long your
video is going to take to upload and enables you to enter information about the video
you’ve uploaded Using the form you can enter a title, description, category, and tags for
your video, all of which are important if you want YouTube users to find your video
NOTE
FIGURE 12.3
The YouTube file
upload page.
Trang 4As you can see from the screenshot, you can also choose a privacy setting for your video
You can choose public, which allows people to find your video through YouTube, or
pri-vate, meaning that you can specify exactly who’s allowed to see it The third option is
unlisted This option makes the video publicly available, but only to people who know
the URL It’s useful if you want to embed the video on your own website, but you don’t
want people to find it by browsing YouTube
YouTube provides the URL and embed code for your video before it’s even finished
uploading, so you can link to it immediately
Customizing the Video Player
After you’ve uploaded your video, you can embed it in your own web pages Embedding
videos of your own is just like embedding other videos found on YouTube, you can just
click the Embed button and copy the code for your own page However, you can do some
things to customize the embedded player You can see all the embedding options in
Figure 12.4
12
FIGURE 12.4
Customization
options for
embed-ded YouTube
videos.
As you tweak the embed settings, the page automatically updates the embed code with
your new settings There are three check boxes you can select The first allows you to
disable the list of related videos that YouTube normally displays when a video finishes
playing You may want to disable these if you want your visitors to stick around on your
site after watching your video instead of wandering off to look at other videos on
YouTube Enabling Show Border adds a border to the YouTube player (and adjusts the
height and width to accommodate the border without shrinking the video)
Trang 5The remaining options enable you to alter the appearance of the video player You can
adjust the color scheme and the height and width of the video from this page After
you’ve chosen all of your customization options, you can copy the embed code and use it
in your page Later in this lesson, you’ll learn about what these customization options
change in the underlying markup
Other Services
YouTube is the most popular video hosting service, but there are many others, too
Vimeo (http://vimeo.com/) is a popular video hosting service that’s a lot like YouTube
YouTube offers unlimited uploads but limits the length of video uploads to 10 minutes
Vimeo offers a professional (paid) account that enables subscribers to upload videos of
any length Many people also think that Vimeo’s video player, shown in Figure 12.5, is
more attractive than YouTube’s because the controls disappear entirely when you’re
watching the video
FIGURE 12.5
Vimeo’s video
player.
The process of uploading video files to Vimeo is nearly identical to the process for
YouTube You just choose your file and information like the name and description Both
sites will convert video from nearly any common format to the format used by their
player
Trang 6Here’s a list of some other popular video hosting services:
n blip.tv—http://blip.tv/
n Dailymotion—http://www.dailymotion.com/
n Flickr—http://flickr.com/
n SmugMug—http://www.smugmug.com/
n Viddler—http://www.viddler.com/
n VideoPress—http://videopress.com/
Which video hosting site you choose is a matter of taste and ease of use Each site has its
own video player and its own community, and you should choose whichever suits you
best Be sure to check out the restrictions on video length and video resolution when
choosing For example, the maximum length of videos on Flickr is 90 seconds, and only
users with Pro accounts are allowed to view them in high definition (HD) There’s also
no rule that says that you can’t upload your videos to more than one site You may want
to upload your videos to Vimeo for the purpose of embedding them on your own site and
upload them to YouTube to make them available to YouTube’s audience
Hosting Your Own Video
For any number of reasons, you might want to host video yourself instead of relying on a
third-party service such as Vimeo or YouTube to host it for you For one thing, you can
use your own player rather than using the one they provide You also may not want to
include branding or advertising from a third party on your own site, and you might not
want to distract your users with a link to YouTube As is the case with most third-party
services on the Web, hosting your own video gives you more control over the end result
but requires more work and expertise on your part
At one time, a wide variety of methods were used to embed video in web pages, each
with its own browser plug-in and file format These days, just two common methods are
in use The first is to use a Flash movie to play back the video, and the second is to use
the HTML5 <video>tag to play the video using the browser itself I’ll explain how to
use both approaches, and how to combine the two to support as many browsers and
plat-forms as possible
Before diving into the tags used to publish video on the Web, it’s important to first
explain how to create video files that can be played in a browser Understanding how to
12
Trang 7Video and Container Formats
Before discussing how to embed video within a web page, it’s important to discuss video
formats All video files are compressed using what’s known as a codec, short for
coder/decoder After a video has been encoded, it must be saved within a container file,
and just as there are a number of codecs, there are a number of container file formats,
too To play a video, an application must understand how to deal with its container file
and decode whatever codec was used to compress the video For example, H.264 is one
of the most popular video codecs and is supported by a number of container formats,
including FLV (Flash Video) and MP4
It’s not uncommon to run into situations where a video player can open the container file
used to package the video but does not support the codec used to encode the video
Likewise, if a video player doesn’t recognize the container file used to package the
video, it won’t play it back, regardless of the codec used Whereas many, many video
codes and container formats exist, only a few are relevant in terms of video on the Web
The extension for a video file indicates its container format, not the codec of the video in
it For example, the extension for Apple’s QuickTime container format is .mov,
regard-less of which codec is used to encode the video
H.264 is a commercial format that is supported natively by Microsoft Internet Explorer 9,
Apple Safari, and Google Chrome It’s also supported by Flash The problem with H.264
is that it is patented, and there are license fees associated with the patents Companies
that implement the codec must pay for a license as must companies that use the codec to
deliver H.264 video to users Mozilla has decided not to support H.264 in Firefox
because of the patent licenses required H.264 is the most popular format for delivering
video content over the Web by far It’s also used for satellite and cable television and to
encode the video on Blu-ray discs
Most commonly, H.264 video is associated with MP4 (.mp4) containers or occasionally
Flash Video (.flv) containers MP4 files are supported by the Flash player and by all the
browsers that support H.264 video, making it the most widely supported container for
distributing video on the Web
Theora is an open, freely licensed video codec released by the Xiph.org Foundation
Mozilla Firefox and Google Chrome offer Theora support, but Apple and Microsoft have
no plans to support it It’s usually associated with the Ogg container format, and the files
are usually referred to as Ogg Theora files Ogg files that contain video usually have the
extension .ogv There’s also an associated audio codec, Vorbis Ogg Theora files have
the extension .oga
Trang 8In 2010, Google released a new container format called WebM WebM files use the VP8
codec for video and the Vorbis codec for audio VP8 was originally created by a
com-pany called On2, which was acquired by Google, who then released the codec to the
public without any licensing requirements WebM is supported by Google Chrome and
will also be supported by Mozilla Firefox, Microsoft Internet Explorer, and Adobe Flash
Currently, if you want to encode your video only once, you can use H.264/MP4 and play
it natively in browsers that support it using the <video>tag Other browsers can play the
same video file using a Flash video player If you want to avoid using a Flash-based
player, the safest bet is to encode your video using Ogg Theora, as well, so that it will
play in Firefox
Converting Video to H.264
One of the nicest features of video hosting services is that they free you from worrying
about codecs and container formats, because they do the conversion for you It’s up to
you to create a video file with the desired resolution, but they take it from there If you’re
hosting video yourself, you’ll need to convert your video to MP4 and perhaps Ogg
Theora, too
A number of tools are available for dealing with video, but when it comes to converting
video from other formats to H.264, there’s only one you need to worry about:
Handbrake Handbrake is a free, open source application that enables you to convert
video stored in pretty much any format to H.264 There are versions for Windows, OS X,
and Linux that all work basically the same You can download the Handbrake at
http://handbrake.fr/
If you just want to convert your video to H.264, you can open it in HandBrake and click
Start However, you’ll probably want to tweak some of the settings to optimize your
video for use on the Web Check out the interface for HandBrake in Figure 12.6 I’ll
walk you through the options you’ll want to set to optimize your video for the Web
First, choose a filename for your video using the Destination field You’ll also want to
stick with the default output format, MP4 The four tabs at the bottom enable you to
optimize the video output for your purpose First, though, check the Web Optimized
but-ton for your video It enables your video to start playing immediately as it’s being
down-loaded and makes it easier for players to skip around in the video The only cost is
slightly longer encoding time
12
Trang 9Under the video options, the default codec is H.264 Keep that Under Framerate, the
default is to stick with the framerate in the video you’re converting, but you can choose
another option The higher the framerate, the larger the resulting file If you change the
framerate, you can enable two-pass encoding, which causes encoding to take longer (by
adding the additional pass), but results in higher-quality video for a given file size
Finally, you’ll tweak the Quality settings Video encoding is all about trade-offs The
higher the picture quality, the larger the resulting file Larger files take up more space on
the server and take longer to download On the other hand, they look better There are
three variables you can change that affect the overall size of the file—the height and
width of the video (a 320x240 video will be much smaller than a 640x480 video), the
framerate, and the quality If your video will be played in a small box embedded on a
web page, you can afford to lower these settings to create smaller videos If your video
will be played on a 42-inch television, you’ll probably want to raise the quality settings
There are three ways to specify the quality for your video, and understanding them
requires that you know about bit rate The bit rate of a video is the amount of data used
by one second of video The bigger the number, the more space the video will use The
default method of specifying quality is “constant quality.” What this means is that the
entire video will be compressed by the same factor H.264 is like the JPEG image
for-mat, in that some data is lost when the video is compressed The Constant Quality setting
FIGURE 12.6
The interface for
HandBrake.
Trang 10applies the same compression factor to the whole video When you set a video to
Constant Quality, the video uses whatever bit rate is required to provide that quality, so
the bit rate will vary throughout depending on how well the video can be compressed at
the specified quality level
The Average Bit Rate option varies the quality of the video to satisfy the bit rate that you
specify Both it and the target file size option are more predictable—the video will be the
size you expect when you get to the end
Instead of manipulating the settings on your own, you can use one of the presets that
HandBrake provides To view the presets, click the Toggle Presets button on the upper
right The list of settings in Figure 12.7 will appear (I’ve fully expanded the list.) These
presets are already optimized for certain uses The one that works best for web video is
the iPhone & iPod Touch preset The simplest approach, if you’re starting out, is to select
it and then click the Web Optimized check box
12
FIGURE 12.7
The list of
HandBrake
presets.
You’ll also want to click the Picture Settings button in the toolbar to specify the height
and width of your video 320x240 is a pretty standard size for smaller videos 640x480 is