The PDF Developer Junkie Blog

Here’s another tool for those of you interested in playing video inside of Acrobat.

The standard Video Tool in Acrobat 9 allows you embed a single video the PDF file or stream it from a URL and allows you to play a video in your PDF file. But what if you wanted to play more than one? What if you wanted to embed a small, low resolution video but provide the option to stream an HD version with the click of a button. Using the default video player, you would need to add separate widgets which may not be the behavior you really want.

The Video Player Plus Widget for Acrobat allows you to…

• Embed multiple videos in the same video widget
• Programmatically switch between the embedded videos and streaming content
• Programmatically switch between embedded player skins
• Programmatically change the skin color and behavior

You can even use the Video Player Plus Widget to replace the default video player that ships with Adobe Acrobat 9.

Using the Video Player Plus:

There are two ways to use the Video Player Plus Widget for Acrobat. You can use the Flash Tool or you can replace the VideoPlayer.swf that ships with Acrobat 9 and access it though the Video Tool . There are advantages to each so if you work with video a lot, you’ll probably have use for both methods.

Locating the video skins and replacing the default video player with the Video Player Plus.

Before you can use the Video Player Plus Widget with the Video Tool you’ll need to replace the default video player that ships with Acrobat 9. This change will affect all users so if you are sharing your machine with others you might want to just use the Flash Tool method.

Windows:

1. Download VideoPlayerPlus.swf
2. Locate the VideoPlayer.swf file in the directory below

   C:\Program Files\Adobe\Acrobat 9.0\Acrobat\Multimedia Skins\Players

3. Copy the existing VideoPlayer.swf to a safe location as a backup.
4. Move VideoPlayerPlus.swf into the "Players" directory and rename it to VideoPlayer.swf – just remove the word "Plus".
5. Go back to the "Multimedia Skins" directory and copy the skin files to another folder on your computer. You’ll need them for the Flash Tool method.

Macintosh:

1. Download VideoPlayerPlus.swf
2. Locate "Adobe Acrobat Pro.app" in your Applications folder
3. Show the Package Contents and then navigate to the folder below

   Contents/MacOS/Multimedia Skins/Players

4. Copy the existing VideoPlayer.swf to a safe location as a backup.
5. Move VideoPlayerPlus.swf into the "Players" directory and rename it to VideoPlayer.swf – just remove the word "Plus".
6. Go back to the "Multimedia Skins" directory and copy the skin files to another folder on your computer. You’ll need them for the Flash Tool method.

Using the Video Player Plus with Video Tool

1. Add your video as normal.

Seriously – it’s that easy – but you’ll be able to do a few more things with it. Read the Additional Functionality section below. What you won’t be able to do with this method is embed multiple videos in the same widget. You will be able to direct the source of the video to a stream. One of the examples below illustrates this nicely.

Using the Video Player Plus with Flash Tool

You’ll want to have all of the video files, the skin files and a poster image ready before you start.

Figure 1: Click to zoom

Figure 2: Click to zoom

1. Open the PDF file and select the Flash Tool from the Multimedia Task button.
2. Drag or double-click to select the area on the page where you want the video to appear.
3. Check the box for "Show Advanced Options"
4. Click "Choose…" to find the "VideoPlayerPlus.swf" file, and then click Open.
5. In the "Resources" tab, add at least one skin file and all of the video files that you’d like to embed in this widget. (See figure 1).
6. Switch to the "Flash" tab.
7. Copy the text under the word Parameters below and paste it into the area for "FlashVars"
8. Edit the string so that the name of the video that you want to be the default is the "source". Don’t add any line breaks, this string needs to be interpreted as though it were at the end of a URL. (See figure 2)

   Note: If you have spaces in your file name, you’ll need to escape them. You may want to just rename your video files before you embed them, it’s easier and less error prone.

9. Edit the string so that the name of your skin file is the "skin"
10. Edit the string for the remaining parameters or just use these as the default. They’re pretty self explanatory.
11. In the "Launch Settings" tab, you may want to add a "Poster" that will display when the video is deactivated. The Video Tool creates this for you automatically but with the Flash Tool you’ll need to do this yourself.

Parameters:

source=VIDEOFILENAME.flv&skin=SKINFILENAME.swf&skinAutoHide=true&skinBackgroundColor=0x7F0000&skinBackgroundAlpha=0.75&volume=1.

Additional Functionality:

The following table lists the ActionScript methods that can be used in the callAS method that are available with the default video player for Acrobat 9.

The Video Player Plus Widget for Acrobat adds four additional methods.

Examples:

Two Embedded Videos:
In the example file below I have two videos and one skin file embedded in the Video Player Plus Widget for Acrobat. There are two buttons under the widget that allow you to play either of the videos. The buttons’ mouseUp action contains some simple JavaScript that changes the source of the video and the background color of the skin file. The code for one of the buttons is below. The code for the other button is identical except for the color in line 3 and the filename in line 4. Because I needed to embed more than one video, I used the Flash Tool method described above.

RMA = this.getAnnotsRichMedia(this.pageNum)[0]
RMA.activated = true;
RMA.callAS("multimedia_skinBackgroundColor", "0x7F0000")
RMA.callAS("multimedia_source", "ThomasBookerWelcome.flv")
RMA.callAS("multimedia_play");

Example with Two Embedded Videos

Low Resolution plus Streaming HD:
In the example file below I have embedded a low resolution video with the goal of keeping the PDF file under 5 megabytes and easily sent around via email. However, I have a high resolution HD version of the video available on a server. If the end user is conected to the internet, they can click the "Play HD" button which runs a JavaScript that redirects the video source to the URL of the HD video; very similar to the code above. The only difference is that the filename is replaced by a URL.

Example of Embedded Video Plus Streaming HD