Although I've been working on web sites since 1993, it's only been in the last year that I've started playing around with video on the Web on my own sites and on some of the sites I've designed. Now that standard web connections are faster than ever, video is more accessible than ever.
The following article is an excerpt from the second edition of my book, Learning Web Design, which is aimed at people who are brand new to web design and production. This excerpt is intended to be a starting point for understanding the basics of web video and is by no means the final word. See the excellent resources at the end of this article for further reading.
Video
How did they get a little movie to play right on their page?
When you see a video playing right on a web page, chances are it's a QuickTime movie that has been placed on the page with an <object> tag (the World Wide Web Consortium's [W3C] preferred method) along with an <embed> tag (Apple's recommended method for Netscape and older browsers) as shown in Figure 22-4). This method is discussed in detail in the next section. In order for the movie to display on the web page, the QuickTime plug-in must be installed on the user's browser. Fortunately, this plug-in is included in current browsers' installation packages. For Windows users, code in the <object> tag automatically installs the player necessary for viewing the movie.
Figure 22-4.Use the <embed> tag to place a movie and its player right on the page like an image. Note that I've added 16 pixels to the actual movie height (120 pixels) to accommodate the player controls.
As an alternative, you can provide a link to the movie file and let the user download it whenever they want (Figure 22-5). When the movie downloads, it can be viewed in the browser window with the QuickTime plug-in or it can be played with another movie-playing helper application.
TIP: When linking to an audio or video file, always provide the file size so users can make an informed decision about whether they want to commit to clicking the link.
Figure 22-5. You can also simply link to a movie file. When the user clicks the link, the movie opens in whatever movie player the browser has configured.
Using <object> and <embed>
To ensure that videos will play properly on all browsers, it is recommended that you place the movie on the page using both the <object> and <embed> tags. The standard, minimum code for doing this is as follows:
If you look carefully, you will see that the basic directions are repeated in both the <object> tag and its parameters and the <embed> tag. Let's take a look at the minimal movie settings.
Player information
Both tags contain code that prompts the browser to download the player necessary for displaying the movie on the page. In the
About the author:
In Learning Web Design: A Beginners Guide..., author Jennifer Niederst shares the knowledge she's gained from years of web design experience, both as a designer and a teacher. This book starts from the beginning-- defining the Internet, the Web, browsers, and URLs -- so you don't need to have any previous knowledge about how the Web works. After reading this book, you'll have a solid foundation in HTML, graphics, and design principles that you can immediately put to use in creating effective web pages.