Getting Your Videos on the Web with the Adobe Production Studio
BY RICHARD HARRINGTON & MARCUS GEDULD
Last time we showed you how to export Flash Videos (FLV files) from the Adobe Production Studio. But once that FLV pops out of After Effects or Premiere Pro, how do you prep it so that it’s playable on the Web. Alas, you can’t just throw an FLV onto the Web; it needs several support files to help it play. Luckily, there are many solutions, some involving other Adobe programs, such as Flash or Dreamweaver, but in this article, we’ll focus on a free solution (for non-commercial use) that you can download from the Web: Jeroen Wijering’s Flash Video Player 3.3.
STEP 1 Download Flash Video Player
In your Web browser, visit www.jeroenwijering.com/?item=Flash_Video_Player, and download the Flash Video Player 3.3. Right-click the download link and choose your browser’s save option. The download is a ZIP file. When you unzip it, you’ll find a folder full of goodies.
STEP 2 Open Flvplayer.html in Notepad
You must embed your Flash Video in a webpage (an HTML file), such as the flvplayer.html file that comes with Flash Video Player 3.3. To customize the code in the flvplayer.html file so that it displays your movies, open it in Windows Notepad (Start>Program Files>Accessories>Notepad). By default, the Open dialog for Notepad only shows you files ending in a .txt extension, so after choosing File>Open, make sure to select All Files from the Files of Type drop-down.
STEP 3 Select and Delete Unwanted Players
Flvplayer.html displays three video players on the same page: an automatically playing single video player on the top, a paused single video player in the middle, and a playlist-based player (that plays multiple videos) on the bottom. You’ll probably only want one of these players on your webpage, so you’ll have to carefully delete the code for the players you don’t want. If you only want the auto-play single video player, select the code for the bottom two players. Start selecting the text at <h2>with logo and preview image and end after the second </script>. Delete that code.
STEP 4 Keep Paused or Playlist Player
If you only want to display the paused player, select the code sections above and below it and delete them (<h2>playing a single media file through </script> and <h2>playing a playlist file through </script>). To display just the playlist player for playing multiple videos, delete the top two sections of code: <h2>playing a single media file through the second </script> (as shown above).
STEP 5 Insert Name of FLV into Code
If you want to use one of the single video versions (paused or unpaused), edit the code that reads file=video.flv to file=yourVideo.flv. In other words, if your video is called “clouds.flv,” change the code to file=clouds.flv. Be careful not to change or delete any other code. There must be a quotation mark before the word “file,” and there must be an ampersand (&) after the filename of your FLV file. Note: The paused player displays an image while the video is paused. To set it to display a specific image, change the code that reads &image=preview.jpg& to &image=yourImage.jpg& (e.g., &image=clouds.jpg&). Don’t touch the ampersands!
STEP 6 Enter FLV Dimensions into Code
You may want to set the width and height of the player so that it matches the dimensions of your video(s). In the code for one of the single version players or the playlist version (whichever you kept), update the width and height data. Make sure you only alter the numbers for width and height and not any of the surrounding code (be careful to leave the quotation marks around the numbers).
STEP 7 Player Preferences
In the code for any version of the players, there’s a section that starts with the word “flashvars.” This section contains preferences for the player, such as whether or not it should automatically play when the page loads into the browser. Note that each preference has a name, such as “autostart.” Immediately following the name of the preference is an equal sign, followed by the setting for that preference: “autostart=true.” After each preference, there’s an ampersand (&) that separates it from the next preference.
STEP 8 Add or Alter Preferences
A great feature of Flash Video Player 3.3 is the huge list of preferences you can add or alter to customize the player. To see a complete list, visit www.jeroenwijering.com/embed/readme.html. You can add (or remove) any of these preferences to the code using this format: file=yourVideo.flv&preference1=setting1&preference2=setting2&preference3=setting3. It’s vital that all the preferences lie between quotation marks (see the screenshot for Step 7).
STEP 9 Open Playlist.xml
Once you’ve set your preferences, save and close the file. If you want to use the playlist version of the player (see Step 4), open playlist.xml in Notepad (remember to choose All Files in the Open window).
STEP 10 Edit Tags in Playlist.xml
Edit this playlist.xml so that it contains the titles for your videos. This info goes between the title “tags.” Tags look like this: <tag name> and </tag name>. Make sure you only change the info between the tags—not the tags themselves (e.g., change <title>Afraid</title> to <title>cloudy</title>). You can add more videos to the playlist by copying-and-pasting a set of tags and then altering the info between the tags so it reflects the video you’re adding. Make sure you copy the whole set, starting with <track> and ending with </track>.
STEP 11 Copy FLV Files into Folder
Congratulations! You’re done editing code. Now, in preparation for uploading to the Web, copy all of your FLV files into the Flash Player 3.3 folder (the folder containing flvplayer.html and playlist.xml). To test the player, open flvplayer.html in a Web browser. (Note: If you would like to change the text on the webpage, open flvplayer.html in Notepad again and change either <h2>playing a single media file:</h2>, <h2>with logo and preview image:</h2>, or <h2>playing a playlist file:</h2> to <h2>Your Text Here</h2>.)
STEP 12 Use FTP Program
To transfer your files to the Web, you’ll need an FTP (File Transfer Protocol) program. There are many available, including CoreFTP, which you can download for free at www.coreftp.com.
In whatever FTP program you use, you’ll have to enter your login information (the information that allows you to access the Web server you’re using to host the files), including your username and password.
STEP 13 Drag-and-Drop Your Files
Most FTP programs allow you to drag files from your hard drive and drop them on the Web as easily as dragging files from one folder into another. For your player to work, you must drag over all your FLV files plus flvplayer.html, playlist.xml, flvplayer.swf (the actual video player), and ufo.js (some programming code that ties everything together).
STEP 14 Watch the Action
The final step is the fun one! Call all your friends and ask them to visit your site. Here you can see both the auto-play and the playlist versions of the player running on a single page. If you want to add other items to the page, besides the video player, you can do so in a program such as Dreamweaver or GoLive.
