TUTORIAL:  
Make an Auto Starting, Multimedia CD with a Video Embedded in an HTML File
By Dan Conklin
   
Why would you want to make an auto-starting, multimedia CD with a video embedded in an HTML file? Well, this type of multimedia project fulfills a specific need: to drive people to your web site, or other HTML content. It may be the easiest way to make a simple, interactive, multimedia CD, because it takes advantage of the multimedia capabilities already built into most web browsers. You probably already have the tools you need, so there’s no need to buy and learn expensive, new application programs. And, you probably already have most of the knowledge you need. This tutorial is your guide to using that knowledge.

What tools and skills do I need to do this? [an error occurred while processing this directive]
  • You need an application to make the graphic shell. Actually, you may need two application programs for this. I use Adobe Illustrator to design the graphics, and Adobe Photoshop to prepare them for inclusion in the HTML file. However, you can use any graphics program that you are comfortable with that will make web ready images.
  • You need a video to embed. Therefore, you may need the editing application to create the video, such as Adobe Premiere, Apple iMovie, etc.
  • You need an application to compress and prepare the video for inclusion on your CD. This may be included already in your video editing program, or it may be a separate application, like Real Producer, Windows Media Encoder, QuickTime Pro, or Media Cleaner.
  • You need an HTML editing application, like Adobe Go Live, Macromedia Dreamweaver, and/or some working knowledge of HTML.

    First: Prepare your graphic shell. (This entire project is a non-linear process, so

    feel free to start anywhere you wish!) The design is dependant upon your imagination (for an example see my web site: www.theimage-center.com/videoguy.htm). The only restrictions are file size, and the dimensions of your video. You should plan on slicing your graphic into nine segments. One of those segments will contain your video, so it should be a blank space the size of your video’s rectangular dimensions.

    Hints:

  • Your video’s dimensions will be restricted depending on several factors, including the format you shot the video in, your compression algorithm, and the bandwidth available to you for delivery. MPEG 1, for example, must have both height and width dimensions that are a multiple of 16.

  • You can make your video appear to have any shape you like by placing a mat over it in the final render of your editing process. The mat can have the same colors as your surrounding graphic, and the transparent cutout can be any shape you can think of.

  • The movie doesn’t have to be the exact size of the part of the graphic where you are placing it, but it cannot be larger in any dimension, or it will push the pieces out of place in the HTML file.

    Second: Slice your graphic into nine pieces.

    I use Adobe Photoshop’s guides to do this. I have my rectangular selection tool snap to the boundaries made by the four guidelines. Then I cut the piece from my mother graphic. Next, open a new window in Photoshop. This window automatically opens to the dimensions of the cut piece that is currently in the clipboard. Paste the cut piece into this window and select “save for web” in your pull down menu under “File.” Give it some appropriate sequential name, and optimize for the smallest size you can without visible artifacts. I always set the dpi to 72 because I intend this to be displayed on a computer monitor. I also try to make sure all of the pieces are the same format to avoid any anomalies in the final displayed graphic. For example, if I intend to make one of the pieces an animated GIF, then I make all of the graphic pieces into GIFs. You do not need to save the piece that is located in the block where your movie will be unless you intend to use that piece to make an image mat for your video.
    This example shows the Photoshop guides, my selection of a piece, and the layers, which will form the foundation for my animated GIF (the star shapes in the projector reels). To view a sample QuickTime, visit www.theimage-center.com/MMpage/index.html


    Third: Lay out an HTML file with a table that has three rows and three columns.

    If you are laying it out manually you will need to define the table’s total dimensions, and each of the cell’s dimensions to be the same size as the graphic pieces that go into them. The cell padding and spacing should be “zero.” Feel free to be creative in making your HTML page! You can add animated GIFs, or anything else that is supported by the latest web browsers. (In my example, I animated the projector to look like it is running a movie.) You can also link each piece of the graphic to a web site or other HTML page on your CD. Also, if your multimedia design is for CD, then you are not as limited in file size, so you can use more complicated, and higher resolution graphics. Remember to test your layout by opening the HTML file in as many types of browsers as you can find as you work to make sure all the graphic pieces go together properly.

    Copy the following code and place it into the empty cell, where you want to embed your video. This code is to embed a QuickTime 5 file (some of the long lines are truncated for this page, so put together any lines between the<> marks):

    < OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160"

    HEIGHT="144" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

    <PARAM name="SRC" VALUE="myvideo.mov">

    <PARAM name="AUTOPLAY" VALUE="true">

    <PARAM name="CONTROLLER" VALUE="false">

    <EMBED SRC="myvideo.mov" WIDTH="160" HEIGHT="144"
    AUTOPLAY="true"

    CONTROLLER="false"

    PLUGINSPAGE="http://www.apple.com/quicktime/download/">

    </EMBED>

    </OBJECT>

    (Replace “myvideo.mov” with your QuickTime file name, and the height and width tags with the height and width of your video.)

    If you are using Windows Media, then use the following code (some of the long lines are truncated for this page, so put together any lines between the<> marks):

    <OBJECT ID="mediaPlayer"
    CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

    CODEBASE=http://activex.microsoft.com/activex/controls/

    mplayer/en/nsmp2inf.cab#Version=5,1,52,701
    STANDBY="Loading Microsoft Windows Media Player components..."
    TYPE="application/x-oleobject">
    <PARAM NAME="fileName" VALUE="myvideo.wmv">
    <PARAM NAME="autoStart" VALUE="true">
    <PARAM NAME="showControls" VALUE="true">
    <EMBED type="application/x-mplayer2"

    pluginspage =“http://www.microsoft.com/Windows/MediaPlayer/”

    SRC="myvideo.wmv” name="MediaPlayer1"
    width=160
    height=162
    AutoStart=”true” controller = “false”>
    </EMBED>
    </OBJECT>

    (Replace “myvideo.wmv” with the filename of your Windows Media file, and the height and width tag dimensions
    with the dimensions of your video.)

    You now should have an HTML file that automatically plays your video inside your graphic when you open it in a browser.

    Fourth: Make your HTML file auto start when the CD is inserted in your computer.

    If compatibility is an issue for you and you want your CD to run on both Macintosh computers and Windows computers, then you will need to burn your CD as a Mac/Windows hybrid with a CD creation program that can do this, like Roxio Toast 5. The following method is the easiest, and the most compatible with the most different computers. Hey, I’m just trying to save you a lot of trouble!

    Windows users will need a file called “autorun.inf” in the root directory of the CD. To make this file, open Notepad in Windows, and write these three lines:

    [AutoRun]

    ICON=MyIcon.ico

    OPEN=ShellExecute.bat MyHTML.html

    Replace MyIcon and MyHTML with the filenames of your files (you can make a nice icon with any of the shareware or freeware icon editor programs available on the Web). Save it as “autorun.inf” (without the quotations).

    Since this auto run file will not automatically open your HTML file in your browser by itself (it only opens program files), you need another little program to do this. That’s where the “ShellExecute.bat” file comes in.

    Open Notepad again and copy this line:

    Start %1

    Then save it as “ShellExecute.bat” (without the quotes).

    Burn everything to the root directory of a CD in Windows (ISO 9660 Joliet extension) format.

    The combination of these two files will automatically open your HTML file in whatever browser you have on your computer when the CD is inserted into your Windows computer’s CD ROM drive.

    To make it auto play on a Macintosh you will need to make a hybrid CD that includes an HFS volume with all of your files in it (except the Windows auto start files), and assign it to automatically open your HTML file when it’s inserted. Only certain Macintosh CD creation programs, such as Roxio Toast, can do this.

    Well, that’s about it for this tutorial. I’ve described how to make an auto starting, auto playing multimedia CD in the simplest way possible, using tools that you probably already have at your disposal. OK, it’s still not that simple, but at least you do not need to be a rocket scientist, or even a computer programmer to do it. Just follow these four steps.

    If you would like to dig a little deeper into this process, you can look as some of the same resources that I looked at.

    hotwired.lycos.com/webmonkey/01/49/index2a.html?tw=multimedia
    visualbasic.about.com/library/weekly/aa021201a.htm
    www.microsoft.com/msj/0499/win32/win320499.htm

    www.roxio.com/en/support/toast/toasthybrid.html

    www.macromedia.com/support/director/ts/documents/autostart_cd_qt20.htm

    developer.apple.com/quicktime/compatibility.html









    •  Related Forums: •
     Related Sites: • Corporate Media News • Digital Producer
    [an error occurred while processing this directive]