HTML and CSS Reference
In-Depth Information
Inserting a video clip.
Video clips can add valuable content to a Web page. There are many uses for video clips.
Companies use clips for training or to convey messages from the CEO. Instructors use videos
to help students better understand complex topics in online classes. Many people use video
clips just for fun on their personal Web sites or on YouTube.
Utilize video clips that enhance the content of the Web page.
Plan
Ahead
•
In the chapter project, a
video clip of a historical home adds value to the Web page.
Determine whether to utilize the autostart parameter.
•
Sometimes you want to
encourage the user to read some material on the Web page first and then view the
corresponding video clip. In this case, you want to turn autostart off and require the user
to click play in order to watch the video.
Adding a Video Clip to a Web Page
Video Clips
Video clips can have a
large file size depending
on the length and the
quality of the clip. Search
for information about
rules-of-thumb for file
sizes when video clips
are incorporated into a
Web site.
The next step is to add a video file, longfellow-video.mp4, to the longfellow-video.html
file. You will use the new HTML5 <video> </video> container for this, similar to what you
did for the audio clip. Before discussing the new <video> tag, we will talk about the use
of the <object> tag for video insertion. As mentioned earlier in the audio section of the
chapter, you may use the object element in lieu of the video element to accommodate a
greater variety of video formats.
The following section of HTML code shows the statements that you use to add a
video clip using the <object> tag. Because we are using the object element in this example,
we can use a .wmv file as explained earlier in the chapter. You could not use the video
element with that type of video format (.wmv). We are showing this code in the event
that the Web developer only has access to the .wmv format. As discussed earlier, you can
convert that to an .mp4 (or other acceptable) format, then you can use the video element.
<object data="longfellow-video.wmv" width="400" height="400">
<param URL="longfellow-video.wmv" />
<param name="autostart" value="false" />
<param name="playcount" value="3" />
</object>
The parameters can be found in Table 8-4 on page HTML 372. You do not enter
the width and height attributes this time so that you can see what this movie clip looks like
at its default size. You can, however, add width and height attributes in the <object> tag.
This is something with which you can experiment.
The three parameters used for the video clip insertion are: URL, autostart, and
playcount. The source element is used in the same way for a video clip as it was for an
audio clip. It tells the name of the object that you want to insert. The default for the
autostart parameter is "true," which means that a clip will automatically start unless you
set autostart to "false" as seen in the code sample. With autostart turned off, your Web
site visitor has to click the play button on the video control panel to start the video clip.
The playcount is the number of times that the video will play. The default is 1 time. Just
as with other decisions that are made during the analysis phase of the Web development
life cycle, you have to decide what is best for your application. Do you want the video clip
to start as soon as the Web page is opened, or is it best to require your user to start it?
