This is where your skills come together – Web page creation skills, interview skills, audio and video editing skills, and storytelling skills all converge at this point. Inserting media into Web pages is a bit more difficult than creating plain old HTML with graphics, but if you’ve mastered the other tutorials in this site, you’ll do fine.
Before you can begin inserting audio and video into Web pages, you must first have some audio and video content to work with. This tutorial assumes that have already edited your audio or video in ProTools, iMovie, Final Cut, or other media application, and that you’ve alrady exported your audio or video as web-ready compressed QuickTime files.
Finally, you’ll need to decide how the media should “appear” to the user of your web site. Should your audio or video start playing as soon as the page is loaded, with no start/stop controls? Should a separate window launch with the playback controls inside? Should you launch the Real or QuickTime player application itself? For the sake of this exercise, we’ll first create a link that launches a separate player, then we’ll get a bit fancier and embed a QuickTime controller directly into the web page.
Linking to Quicktime Media
It’s now time to decide whether you want to want to simply link to your audio or video file (easy) or embed it in the web page (somewhat harder).
We’ll now assume that you’ve exported your edited audio or video with the compression settings discussed, given it an appropriate filename, and placed it in a folder with your HTML document.
Note: When working on the Macintosh and creating files for use on other platforms or on the Internet, always remember to append an appropriate three- or four-letter extension on your filename(s). In other words, be sure to call a QuickTime file “abc.mov” or “abc.qtl” rather than simply “abc.” If you leave off the extension, the web server won’t know what type of file it is and thus won’t know how to serve it properly.
There are two different ways of linking to a QuickTime movie, resulting in two different methods of viewing for the user. If you name your movie file “abc.mov” and link to it in the standard way, the movie will play in a new browser window when the user clicks the link.
Watch an excerpt from Angel Gonzalez’ Visit To Buenos Airies in a browser window.
Listen to Babatunde Olatunji’s drums.
With this method, the movie uses the QuickTime browser plugin. The user cannot resize the movie, and if the user clicks the Back button in the browser, they’ll lose the playback window.
The other option is to have your movie launched in the external QuickTime player from a link on your web page (as opposed to using the browser plugin). Doing this is simple — just rename “abc.mov” to “abc.qtl” (and link to the .qtl file rather than to the .mov).
Watch an excerpt from Angel Gonzalez’ Visit To Buenos Airies in the QuickTime player.
Listen to Babatunde Olatunji’s drums.
The advantage of this technique is that, because the player is not embedded in the browser window, the user can resize the movie however s/he likes, or even run the movie full-screen. In addition, the user can now click the Back and Forward buttons in their browser without losing connection to the movie.
If the .qtl technique does not work on your web server (you’ll know if you see raw data in the browser rather than seeing the movie come up in QuickTime Player), you may need to ask your ISP or sysadmin to add the following MIME type to the server’s configuration:
If your provider is unwilling to do this, you can probably add the handler to an .htaccess file in your web server document root:
AddType application/x-quicktimeplayer .qtl
Regardless whether you use the .mov or .qtl techniqe, it is as easy to create a link from a graphic to the external movie file as it is to link from text. Click on the image below for an example of how a JPEG image can link to a movie played in the external QuickTime player.
Click image to see video.
Embedding Media in Web Pages
For a more cohesive user experience, you’ll want to embed the video directly into the web page rather than linking to an external file. This method has a pre-requisite — creating a “poster frame,” which is a one-frame QuickTime movie (unfortunately, you can’t use a standard, untreated JPEG image as your poster frame).
Creating a Poster Frame
Because we don’t want the video to load automatically when the page loads, we need to tell the QuickTime plugin to display a static image first — a “poster frame.” Only when the poster frame is clicked by the user should the video be downloaded from the server and displayed in place of the static image.
So we have two tasks before us:
Creating a poster frame
Embedding the poster frame and linking it to embedded video.
In order to create a poster frame, you need to first grab an image, then turn that image into a one-frame QuickTime movie. Here’s how:
Double-click the finished movie file to launch it in QuickTime Pro. Note: You must register the QuickTime player to turn it into QuickTime Pro. The free version does not include the Export options we need to create a poster frame. All J-School computers have QuickTime Pro installed.
Scrub to the frame you want to use and pull down File | Export.* For the type, choose “Export Movie to Picture.” Save the picture to your desktop (not to your site’s project folder).
In QuickTime, pull down File | Open File… and navigate to the image you just exported. You should now be looking at a one-frame movie.
Pull down File | Export again and select “Movie to QuickTime Movie.” Export your one-frame movie to your project folder – the same folder where the movie file lives). Give it an intuitive filename. For example if your movie is called sadplanet.mov, call the still image sadplanet_still.mov.
These instructions assume that you want your poster frame to come from the movie itself. This, of course, is not a requirement. You can use any still image you like — eg. one you create in Photoshop. If you use an image from another source, make sure it’s saved at the same dimensions as your movie (e.g. 320×240) and skip steps 1 and 2 above.
* If you export your movie and notice the file is not showing up, you may have to click “settings” during the export process and make sure the “video” box is checked.
Embedding Video Into the Page
Now you need to embed your poster frame into the web page as an ActiveX object and link the object to the movie file. Here’s how to do that from within Dreamweaver.
Streaming Audio and Video
The instructions on the previous pages pertain to pseudo-streaming. The audio or video files are placed on a standard web server and linked to with fairly standard methods. When the user goes to play the media, the web browser or playback application does not need to download the whole media file before playback begins. Instead, it downloads just enough to create a buffer (think of “headroom”) and begins playback. This method works out well for shorter audio and video files, and simplifies technology needs greatly. Just link and go.
There is one big drawback to pseudo-streaming: Because the file is being downloaded and played back in real time, the user cannot skip ahead to a point, say, 14 minutes into the presentation. To allow this, an actual streaming media server must be set up alongside the normal http/web server – a task far beyond the scope of this tutorial. Here at the J-School we use Apple’s free QuickTime Streaming Server.
If you do have longer audio / video files to present and have access to a genuine streaming server, note that you’ll generally have to take an extra step when preparing your media. For QuickTime Streaming, you must add what’s called a “hint track” which is a small track embedded alongside the audio and video tracks. The hint tracks tell the server how to “package” media data for the network. Without a hint track, QuickTime files will not stream from the streaming server.
To add a hint track when exporting from iMovie or Final Cut Pro, look for the checkbox “Hint for Streaming Server” in the export panel.
If you have an existing movie you want to add a hint track to, open it in QuickTime Pro and re-export it, this time adding a hint track. Doing so will not recompress your video, i.e. quality will not be degraded.
This is the end of the Multimedia Elements tutorial.
This content may not be republished in print or digital form without express written permission from Berkeley Advanced Media Institute. Please see our Content Redistribution Policy at multimedia.journalism.berkeley.edu/content_redistribution/.
This workshop was incredibly valuable — I now have a solid foundation for new kinds of Web and multimedia journalism and an idea of where I want to go from here and what I want to take back to my news organization. I want to come up with ideas to better my news organization and the news/digital experience for other reporters and to train others in all the techniques I have learned.