Stanford Captioning System

Adding Captions to Web Pages

Providing accessible media presentations on Web pages is a two-part process. First, this requires that the audio or video includes the appropriate accessibility information, and second, that the content is presented using an accessible media player. Both issues are addressed when using the Stanford Captioning System. The steps outlined below assume that you have already submitted audio or video content to the Captioning System and are now ready to upload this content onto your Web page.

Step 1 - Download the Files

Login to the Stanford Captioning System and access your completed job page by clicking on the "Details..." hyperlink. Download the following files to your desktop by right-clicking on the appropriate hyperlink next to the file's name and choosing Save As....

Unzip the file "Player.zip" so that you have two separate files on your desktop - "player.swf" and "swfobject.js" .

Step 2 - Create the Web page

Using the authoring tool of your choice (e.g., Adobe Dreamweaver, Notepad, etc.), create the Web page that will include the video presentation. In the Captioning System, copy and paste the Web Page Code text into the HTML code of your Web page. The Web Page Code text is preformatted with the necessary variables and settings for the video to be displayed on your Web page.

Screenshot of the preset code to insert into a Web page.

The player region is currently set for 480 pixels wide by 340 pixels high (480x340).

Step 3 - Create a Web Directory

Open your FTP program (e.g., Fetch, CuteFTP, etc.) and navigate to your Website's folders. Create a new folder on your site. This is where you will put the video, the Web page, and associated files. You will need a separate folder for each video you are producing.

Screenshot of a FTP program with a video directory.

Step 4 - Upload the Files

Upload the following files into the Web directory that you have just created.

Open the Web page using your preferred Web browser and you should see a preview image of the Stanford University logo. Simply click on the Play button and the video will begin playing. To check the captions, press the "CC" button in the lower right side of the player to show or hide the captions.

If you would like to change the "preview" image, simply edit the appropriate code in the Web Page Code text. The Stanford Captioning System has preset an image, but this can be altered to another image of your preference. Just upload a JPG, PNG, or GIF file (size 480x320) of the new image to the same directory as the previous files.

In the <param name="flashvars"... field, change the code that says "&image=http://captioning.stanford.edu/images/startimage.png" to reflect the proper URL of your image. This code appears in two locations in the Web Page Code text - make sure you change the in both locations in order for the correct image to be displayed.