HTML and CSS Reference
In-Depth Information
addinG a Video PLaye r
As with audio, the most popular plug-in for video playback is the Flash Player. And, like audio,
you'll need a specialized SWF file capable of playing your video. Rather than delving into the com-
plex world of Flash video programming, you can take advantage of one of the freely available play-
ers online. In this section, you learn how to work with a popular model called the JW Player from
Once you've downloaded and uncompressed the JW Player, you'll have a number of options for
implementing its functionality. In addition to the
<object>
and
<embed>
methods for working with
plug-ins, the JW Player also makes a JavaScript technique available. We want to take a look at both
of those methods, starting with the HTML tag approach.
The basic video player strategy is to create a generic player to which you pass the filename of the
video file you want to show, along with any specific parameters. In the following code, you can see
that the
movie
parameter is set to
player.swf
, which is the main video player. There is also sepa-
rate
<param>
named
flashvars
where the video to be played is specified,
Star2.flv
.
<object id=”player1” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”
width=”480” height=”270”>
<param name=”movie” value=”player.swf” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”opaque” />
<param name=”swfversion” value=”6.0.65.0” />
<param name=”flashvars” value=”file=Star2.flv&autostart=true” />
<param name=”allowfullscreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<embed flashvars=”file=Star2.flv&autostart=true” allowfullscreen=”true”
allowscriptaccess=”always” id=”player1” name=”player1” src=”player.swf”
width=”480” height=”270” />
</object>
To simplify the code, I moved both the
player.swf
file from the JW Player's
mediaplayer
folder and the video to be played to be in the same folder as my
HTML page. If you don't do this, you need to use either an absolute URL or a
site root path to player and video.
The video is also set up, through the
<param>
tags and attributes in the
<embed>
tag, to allow full
screen. A full-screen toggle can be seen on the far right of the controls in Figure 25-2.
One of the drawbacks of the
<object>
and
<embed>
technique is that it doesn't validate under any
HTML version 4
doctype
. As a workaround — and to give more flexibility to the web designer —
JavaScript methods were developed. So now it's time to take a look at the JW Player's JavaScript
technique for playing video.
