Writing HTML | About | FAQ | References | Tags | Lessons | previous | next |

29b. Movie Time

Adding Movies to Your Web Page         please pass the popcorn!

Objectives

After this lesson you will be able to:

• Identify the types of content appropriate for using video
• Describe the issues related to using video over the web
• Write the HTML to insert a digital video file into your web page

Lesson

Blame it on television, Hollywood, MTV, etc, but we are a society tuned to video. And with the web, we can also include information in a video format.

But just be cause you can does not mean that you should. Why not? Very simply, video is a lot, a lot, of data to send across the internet, and likely your experiences to date are those "tiny" squares of herky jerky video segments where the voices seem horribly out of synch with the action. If you think about it, to make a "moving picture" means sending a lot of still images (like the frames of old movie film) to create the sense of movement, not to mention adding a layer of audio information.

So until high speed internet access is the norm (and it might be some day), we use technology to compensate via some clever techniques that "compress" video to make the file sizes smaller, and other techniques that allow the video information to "stream" to us (meaning we see content as it is sent, not having to wait for a large file to download.

media type:	digital video
what it does well:	time-based information, sequences, historic events, places impossible or unsafe to experience
issue to consider	rating	comments
"hurdle" or barrier for creating media	low high	Special equipment needed to take video source material and convert it to digital computer files. There are low cost solutions, but they still call for special hardware, a lot of disk space, and video editing software.
"breadth" of audience that can view media	narrow wide	To view video, you typically need a web browser "plug-in", but most newer browsers come with one already installed.
bandwidth consumption	low high	Can be quite large. Video represents a tremendous amount of information and is reduced quality over modem speeds. Options exist to "stream" content but it may require special servers.

We suggest you try to think about the use of video without comparing it to television or the movies. The worst uses are what we call "Talking heads", i.e. a person sitting still talking to you. The video adds very little, and as we see later, you can send the equivalent information using less bandwidth intensive media by combing still images and audio.

When might it be crucial to use video in your web page? Most likely will be to show something that is changes over time, like we saw in animation, but perhaps needs to have a more "real-world" look over as compared to graphics. Often it might be a historic event (the assassination of John F Kennedy). Video may be important to show us something that we cannot see easily because of location (landing on the Moon, the Mars rovers) or physical limitations/ safety considerations (deep ocean exploration, inside a nuclear reactor). Or video may be critical to demonstrating a procedure (surgery, welding a steel beam).

You can use a "digitized" movie simply to play back like video, non-stop, from start to finish. But you can also use a sliding "control" to quickly jump to any point in the movie sequence. This can allow you to explore "snapshots" of a time-based process.

Let's shift and talk about video technology. Traditionally, movies/films were recorded via a photographic process (think about movie reels) and played back through projector. To use video on a computer, all of the information must be digitized or turned into a data file, essentially a series of still images that when played back at an appropriate speed, looks to the human eye like actual motion. Generally, this is achieved when we see about 30 images every second (or "frames per second").

To create a video clip you must have some special computer hardware to take a video input (from a source such as a VCR, a television output, a video camera) to do the magic of making a video file. While several years ago this was considered high end equipment, there are many low end (i.e. cheap) tools to do this. You would also likely need some special software to edit video clips once they are on your computer, which again range from very cheap (simple) to expensive (complex, professional).

When we start talking about digital video, we enter a region of acronym soup for the various kinds of video files. Probably the most important and commonly used formats are Apple's QuickTime and Moving Picture Experts Group (MPEG). There are of course, many others, and we cannot really review all of them here. For more information visit the About.com guide to Desktop Video. For this tutorial, we will present the code to embed a QuickTime movie into your web page. While other video formats may used, such as MPEG, AVI, etc, QuickTime is the format to will be able to be used by the widest range of web browsers.

For more information on video, see the Web Developer's Virtual Library.

When the web first emerged, video clips were rarely used because, to watch them, you had to download the entire video file (which can be several megabytes for even short segments) before you could see anything. Later as web technology has evolved, solutions have emerged that allow video to be "streamed" to you, meaning when ask for video (clicking on a web page link), you will start to see the video information as soon as enough has been sent to show you a portion, and the rest continues to "stream" in as you watch the beginning parts. The leading technology here is RealNetworks; the limitation for you, the humble web page developer, is that RealVideo requires specialized servers to transmit streaming data. You can find great examples of RealVideo from the CNN news site.

It also takes some special web browser "add-ons" from the viewers end to see digital video. RealVideo and QuickTime require browser "plug-ins" to work. Fortunately, most web browsers now come with these technologies already included, but sometimes they may be updated. You should not, however count on everyone being ready to view video content!

Because video is a high bandwidth media format, as a design principle you should place video at a "click away", meaning that you present video as an option for your web site visitor to click to view, with some advance notice. We will demonstrate this in our lesson.

To include a digital video clip in a web page, we use the <EMBED> tag, which in some ways is similar to the <IMG) tag in that we specify a file source and the dimensions of the media we want inserted into the page:

 <EMBED src="video.mov" width="320px" height="240px"></embed>

There are other options to add to this tag to control the playback:

For more details on the EMBED parameters, see Apple's QuickTime Authoring site.

Adding Volcano Videos

Note: If you do not have the working documents from the previous lessons, download them now.

In this lesson, we will add a QuickTime movie file to our Volcano Web site. The QuickTime movie we use here has been saved in the format that allows it to start playing before the file is fully downloaded.

This movie was generated by a computer model of the AD79 eruption of the volcano Vesuvius, which destroyed the city of Pompeii. We obtained permission for use of this video from its creator-- see our request message.

1. Since we will be adding a new media type, first create a new folder/directory in your main workspace and name it movies. This should be at the same level of your computer files as the pictures folder/directory where we have been storing our image files.
2. Go to Lesson 29b Movie Theater to get a copy of the QuickTime movie needed for this lesson (If you cannot see the movie on this page, then you may have to download the software necessary to view it). This movie should be saved as a file called vesuvius.mov inside your "movies" folder.
3. Create a new HTML file in your text editor and save it as a file called vesuvius.html in the same folder/directory as your main volcano web site HTML files.
4. Enter the following HTML code into the new vesuvius.html file:

   
   <html>
   <head>
   <title>Vesuvius Simulation</title>
   </head>
   <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
   <center>
   <embed src="../movies/vesuvius.mov" width="301px" height="191px" 
          autoplay="false" controller="true" 
          href="http://tribeca.ios.com/~dobran/" target="_blank" 
          loop="false" 
          pluginspage="http://www.apple.com/quicktime/download/"> 
   </embed>
   <p>
   <h2>Computer Simulation of the A.D. 79 Pompeii Eruption</h2>
   This animation sequence simulates a <b>Plinian</b> type 
   eruption where the collapse of a tall eruption column 
   generates a high speed pyroclastic flow which travels 
   laterally along the ground. View the entire animation 
   sequence several times, and then use the slider to 
   identify the point where the pyroclastic flow is initiated.
   <p>
   <i>used with permission from Flavio Dobran</i><br>
   <a href="http://tribeca.ios.com/~dobran/">http://tribeca.ios.com/~dobran/</a>
   <p>
   <font face="verdana,arial,helvetica" size=2>
   Note: If the movie does not display in this page, try linking 
   directly to the <a href="../movies/vesuvius.mov">movie file</a></font>
   
   <form>
   <input type=button value="Return to Volcano Terminology" onClick="self.close()">
   </form>
   </center>
   </body>
   </html>
   

   NOTE: We have assigned a URL (href="http://tribeca.ios.com/~dobran/", target="_blank") so that any click inside the movie area will launch a connection to the Vesuvius web site that is the original source in a new browser window. In this movie we will not have the movie play automatically when the page loads (autoplay=false) because we want the person watching the page to drag the movie slider to any point in the movie file. This allows them to interactively explore the movie as a sequence of events in time. If they desire, they can click the play button and watch it play as a movie.
   
   We have also added a hyperlink near the bottom of the page for cases where the viewer may not have an appropriate plug-in to play the video embedded in the web page. A direct link may work for them by opening an external software program to play the video.

5. Save and Load this html file in your web browser. If the movie does not appear, first check that the file vesuvius.mov is stored inside a folder called movies.

By this point you should have a stand alone web page that includes a QuickTime movie file. We will now modify one of our existing web pages, "Volcano Terminology", so that it links to this new page, using some JavaScript to open it in a new window. We will link it using the same method we used in the previous lesson to launch a window with an animated GIF.

1. Open the file term.html in your text editor.
2. After the end of the <map>..</map> code, and after the line that reads <base target="_self"> add the following HTML:

   
   <h3>Volcanoes in Action</h3>
   <a href="vesuvius.html" onClick="window.open('vesuvius.html', 'plinian', 
   'width=400,height=400,status,menubar'); return false" 
   onMouseOver="window.status='view computer animation of Plinian eruption'; 
   return true"><img src="../pictures/projector.gif" alt="showtime!" 
   width="46" height="32px" align="left" border=0></a>  
   Watch a <a href="vesuvius.html" onClick="window.open('vesuvius.html', 
   'plinian', 'width=400,height=400,status,menubar'); return false" 
   onMouseOver="window.status='view computer animation of Plinian eruption'; 
   return true">computer animation of a Plinian style eruption</a>, 
   modeled after the AD 79 eruption of Vesuvius which destroyed 
   the city of Pompeii. Use the animation to understand the 
   formation of Plinian eruption columns and how their collapse 
   generates pyroclastic flows [295k QuickTime movie].
   

   NOTE: In this code we have linked both an icon of a movie projector and the adjacent text, some JavaScript code that will open our new vesuvius.html page in a new browser window. If you have trouble with this method, be sure to review lesson 27c where we introduced how to use JavaScript to open new windows.
   
   Also note how we provide information to our visitor that the link they may click in will load a file that is 295k in file size, so if they are using a slow Internet connection, they may choose whether they want to receive the content.

3. Save and Reload the term.html file in your web browser. Test the link to see if it opens the new page that includes the lava flow movie.

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor. Compare your work to the HTML of the samples (look for something like Source from your browser's View menu).

Review

Review topics for this lesson:

1. What are examples of types of information that might be worth presenting as video over the Internet?
2. What are some of the limitations of placing video in your web page?
3. What is the HTML code for including a digital video clip in your web page?
4. What would you write in an <embed> tag to have a video clip automatically start playing when the page loads?

More Information

Unfortunately the variety in types of digital movie formats makes it difficult to choose the right one. If the QuickTime file format is not a viable solution for you, you can try the same approach using two other video formats, AVI and MPEG. For these format, certain web browsers will not be able to display them embedded in the web page but can still be viewed via the direct link.

We have not included these other formats in the downloaded version of the tutorial, but you can find them from our main web site, as files:

• vesuvius.mpg (MPEG format)
• vesuvius.avi (AVI format)

Once you download these video clips from the Lesson 28b Movie Theater, you can simply substitute all HTML references to vesuvius.mov with the new file names.