ptg16476052396 LESSON 14: Integrating Multimedia: Video and Sound
Settings, you can also crop your video or adjust the filter settings. The HandBrake
documentation has more on the filter settings.
One option you have is to create multiple copies of your file and display them using
media queries. This allows you to create responsive versions of your videos. You’ll learn
more about how to do this in Lesson 16, “Using Responsive Web Design.”
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.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 properly
encoded movie and play it. As you’ll see later in this lesson, there are some Flash video
players that you can use to play videos that you host, too. With HTML5, browsers have
added 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 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 introduc-
ing 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 environm ent.