PerformerMag : Services : Web Video Production Part II

Web Video Production for Musicians - Pt II

by Chris Florio

Last month we discussed the basics involved in producing digital video using software like Apple’s iMovie. In this article we will look at the process of getting those video files onto the web.

Once you have a project completed in your video application there are three additional steps before it can be viewed on the web:

1.export the file in a compressed streaming format

2. integrate the file into a website on your local machine

3. upload the video file and related files to your server

1. Exporting the file in a compressed streaming format

There are four major streaming video players today; Quicktime, RealMedia, WindowsMedia and Flash (this and all other information about web video changes rapidly, if you are reading this more than twelve seconds after it was printed look at the latest info on the web). All four players are free and available for Macintosh and Windows (some like Flash are also available for Linux, Palm, Pocket PC and even cell phones). There are a wide variety of file formats and compressors available for these four players but to make life easier we are going to focus on four file formats:

• Quicktime (.mov)

• Windows Media (.wmv)

• Flash Video (.flv)

• MPEG4 files (.mp4)

Quicktime files are supported by the Quicktime player and the Real Media Player. Quicktime supports a variety of compressors. In addition to video and audio. Quicktime can include 3D, virtual reality and MIDI and much more. Quicktime produces great quality files for the web (The MPEG4 format is based on Quicktime).Quicktime files can be produced by iMovie, Quicktime Player, Final Cut, Premiere, Flash and most other video applications (excepting MovieMaker).

Windows Media Files can be made be Movie Maker and other applications. They are the native video format on Windows (along with older .AVI files). They are played with the Windows Media player on both Mac and Windows.

Flash Video use Sorenson video compression and can be integrated into a Flash Movie that includes animation, graphics, text, sound and very rich interactivity. Flash video may be the most reliable way to put video on a website as the Flash Player is part of all major browsers and operating systems. However creating Flash movies requires the expense ($699 list) and learning curve of the Flash MX2004 application. If you are interested in checking out Flash, a free fully functional 30-day demo that includes tutorials is available at macromedia.com.

MPEG4 files are the only format supported by the Quicktime, Real and Windows Media Players. MPEG4 offers excellent video and audio quality at very small file sizes. The MPEG (Moving Pictures Experts Group) folks also created the MP3 standard which we all use for compressed audio, as well as the MPEG2 standard which is used for all commercial DVDs. The AAC audio format which is the default for Apple’s iPod and iTunes is also part of the MPEG4 spec. If you are not using Flash than MP4 files are probably the best format for your web video.

Below is a description of the settings used to create an MPEG4 movie for the web using Apple’s free iMovie software. The process is similar in most other video software.

• When your video project is finished being edited and you wish to create a version of it for the web, choose “Share” from the File Menu (In other programs the command is often “Save As” or “Export”).

• Choose the Quicktime Tab from the Sharing Menu and choose “Expert” from the “compress movie for” menu (see image 1).

• In the “save exported file” window give your movie a name and choose “Movie to MPEG-4” from the export menu, then click the options button (see image 2).

• In the general options choose “Improved” for the video track and “Music” for the audio track. Pick the size that you wish to your movie to be keeping in mind that larger sizes equal larger files (see image 3).

• In the video settings choose “improved” for the video track. The kbits/second slider will determine how compressed the video in your file will be. Larger numbers mean the image will look better but will take longer to download. Try different settings and check out the results, the goal is to get a file that is small enough to be realistic on the web and still look and sound acceptable to you. For frames per second, 15 is usually a good number for the web. Less than 10 starts to look jerky. For fast moving video with quick edits you can set the number higher keeping in mind that the more frames per second the larger the file (see image 4).

• In the Audio Settings leave “Music” for the audio track. Choose stereo if it is important to your music but mono will cut the file size of the audio in half. Set the kbits per second to somewhere between 86 and 164, the sample rate to 44.1, and the encoding quality to Best. (see image 5). Leave the rest of the settings as they are and click “Save” to create your movie.

2. Integrate the file into a website on your local machine

Once your video is an MP4 file, it can be embedded into an HTML page to place on the web. There are many tools and techniques to do this. If you already have an existing website than you can probably turn the video file over to your web designer and they can add the video to your site in a matter of minutes.

If you are building your site from scratch, the best two programs for developing a website are Macromedia’s DreamWeaver (www.macromedia.com) and Adobe’s GoLive (www.adobe.com). Some web hosting services offer wizards and templates that let you easily create web pages and add video, sound and graphics without learning web design skills or buying additional software.

As a last resort, you can get your video into a web page by typing the following code into a word processor. Change “myvideo.mp4” to your video files name and change “VideoPage” to whatever title you wish to appear at the top of the browser window:

<html>

<head>

<title>VideoPage</title>

<body>

</body>

</html>

Give the file any name you want as long as it has no spaces and ends with the suffix .htm. . Choose “Save As” and save it as a plain text file (not a microsoft word document or RTF file) to the same folder as your .MP4 video file.

your browser has a recent version of the quicktime plug-in or another plug-in that plays MP4 files you can now open the html page you created in your browser and view your video. If the video doesn’t play you may need to download the free Quicktime Player from Apple (www.apple.com/quicktime/download/).

3. Upload the video and html file to the website on your server

Once the video and html pages are working all you need to do to let the world see them is to upload the html file and mp4 to the same location on your server. This is usually just a case of dragging and dropping from your local machine to a window displaying the remote server. If you have an existing website you can use the FTP tools that you used to upload the rest of the site(both DreamWeaver and GoLive come with FTP site management tools).

Once the files are uploaded you can create links from your homepage and other places on your site to the html page that plays your video.

If you are creating a site from scratch you will need to register a domain name and find a web hosting server.

Remember there is no reason to take on all of these tasks yourself. If you can do it all-great. If your band is willing to split the work of creating video and developing your website - wonderful. However there are lots of people that already do this well and they are not all expensive. Nearly every college or university offers a web design and new media program. There are hundreds of students that would love to do a band website as a final project or portfolio piece either inexpensively or free.

If you do choose create your own web video it can be great fun and give you creative freedom over your website. The sidebar has a list of URLs with lots of free information and tutorials on all aspects of this process.

Sidebar - Resources for video and web development

Quicktime:

www.apple.com/quicktime/

Flash:

www.macromedia.com/software/flash/

Flash video info:

www.macromedia.com/devnet/mx/flash/video.html

Windows Media:

www.microsoft.com/windows/windowsmedia/default.aspx

Real Media:

www.real.com/

MPEG 4:

www.m4if.org

Streaming Media:

http://www.streamingmedia.com/

Digital Filmmakers Resources :.uemedia.com/CPC/2-pop/

Web Design Resources and Flash Links (provided be Colin Moock)