IRT Logo

Guide to the IRT Flash Video Player

To use this help file, you should be comfortable with editing your page's code with Dreamweaver. Contact Web Help if you need assistance.

IRT has a special player that can be used by any SoM Web site to provide a formatted presentation featuring an initial title card, and the ability to provide description text and links to multiple progressive videos.

5 Questions Video Player

The player file is located at:

http://med.stanford.edu/media/5questions/VideoPlayer.swf

Working with VideoPlayer does not require modifications to the VideoPlayer file itself. Instead, you will manage the page-level HTML code that brings the player onto the page, and the XML file which controls the size and configuration of the player.

Sample 5 Questions Video Player Page

How to Set up a New Video Player Page

NOTE: If viewing page will be under a different domain than med.stanford.edu: You should use absolute paths for all video, xml and graphic references. Sample versions are provided below.

First we'll get our file structure set up and a rough XML in place so we can view the video in the player. Then we'll capture an image from the video and use it to manufacture a title card, and finish up the installation.

Step 1: Establish your hosting folder for the videos and support files. Example: http://med.stanford.edu/media/5questions/lebaron/ (you can download these files and duplicate them as a starting point for your project).

Step 2: Gather up your .flv Flash video files and put them to your hosting folder, along with your XML file and a title card file.

Step 3: Build a demo page for testing and screen capture. You can begin by copying the following embed code, pasting it into your page's code, and then modifying the URLs to reference your own video and XML files. Upload the page and files.


Step 4: View your demo player in your browser. You can adjust height and position values in the XML file at this point and tweak as needed based on how it displays in the browser. IMPORTANT: Mac and Win display and lengths of text in the player will vary. Check in both and adjust for best compromise. Here is a view of a sample XML file, with comments on the variables you can change below.


Node/line What to change Explanation
screen / Line 3 vWidth="240" vHeight="180" Change values proportionately, if you want a larger or smaller player. The rest of the player will self-adjust
screen / Line 3 path="http://med.stanford.edu/media/ 5questions/lebaron/question1.flv" Initial file path to first video; will be duplicated on question 1
screen / Line 3 titleCard="http://med.stanford.edu/media/ 5questions/lebaron/titlecard.jpg" Initial file path to title card; use a default one when roughing out
description / Line 5 vHeight="110" depth of description area
description / Line 5 Stanford professor Samuel LeBaron... Text of description
toc / line 6 vHeight="160" depth of questions area; if too short will scroll
tocItem <tocItem>[question subnodes]</tocItem> delete or duplicate tocItem sets, as needed
pos <pos>45</pos> starting point of each question or chapter; adjust as needed (typically in increments of 15)
title <title>How busy were you?</title> text of question or chapter
path <path>http://med.stanford.edu/media/ 5questions/lebaron/question2.flv</path> path to .flv video file

Step 5: Build titlecard. View the video segments and scan for the best looking image you can find. Capture the screen (Mac: command-shift-3; Win: "print screen" key followed by paste) and take into Photoshop. A layered photoshop file is included in the example directory in /media/, or you can download this Example. Export the titlecard.jpg file to your media folder.

Step 6: Upload all your files. Test in your browser. Adjust as needed.

Step 7: Follow the steps in the guide to Plugin-detection to finish.

Sample players

It is also possible to configure the player to only display the video, or video and description. You can use View Source steal code from the following samples and set up your own video instance:

Full 5 Questions Setup | No questions/chapters | Just the video

See also:
Convert/Encode Flash Video | Install Video With Dreameaver | Flash Plugin-detection