Adding Video

• Before you begin
  
• Save your video in a Flash-compatible format (.f4v, .flv, .mp4, Quicktime 7 .mov)
• Upload your video
• Embed your video
  
• Adjust height and width parameters
• Create a preview image
• Add an Autostart function
• Save and test

Before You Begin

Make sure you contact the Office of Information Systems’ Web Development Team at webhelp@med.unc.edu to make sure your site’s security settings allow you to display videos within your pages. If your video does not show up after you use the embed tag, contact us and we will change the settings for you.

To play video files within the School of Medicine’s Content Management System, we use a video player called JW Player, which is free for non-commercial use. There's no need to download anything from the JW Player site--just use the embed code below, and the player will work in any browser with the Adobe Flash player installed.

JW Player is a Flash-based player.  Flash files are very compact, so your users will appreciate its quick load times.  Flash-based video can be accessed from a wide variety of platforms and operating systems, and since the introduction of Flash video in 2002, Flash Player has become the most widely installed Internet video client, running on over 96% of all Internet-connected personal computers.  Using JW Player ensures that your users see your videos exactly the way you intend them to be seen.

[top]

Save Your Video in a Flash-compatible Format (.f4v, .flv, .mp4, Quicktime 7 .mov)

To convert existing videos to the Flash video (.f4v, .flv) format, use Adobe Flash Video Encoder, which comes with Adobe Creative Suite. If you do not have access to Adobe Creative Suite, visit the Faculty Multimedia Lab at 67 MacNider Hall (966-3519) to access the lab’s software. If you do not already know the height and width of your video, check your video’s dimensions in Flash Video Encoder by clicking Settings -> Crop and Resize, then make note of your cropped video size (Example: 320 x 240). If your video is in either Quicktime 7 (.mov) or MP4 (.mp4) format,  you do not need to convert to Flash video.  These files share a compression standard that's supported by the Flash Player, so they will work automatically with no conversion!

Upload Your Video

At this time all video should be hosted outside of your SOM web system site (sites that look like this), like on one of our dedicated video servers. You can set this up by calling the Faculty Multimedia Lab at (919) 966-3519, or by emailing the OIS Web Team. If needed, we will handle format conversion, and we will provide a link to such a video for your inclusion within the embed tag.

You must upload your video in a Flash-compatible format (.f4v, .flv, .mp4, Quicktime 7 .mov). In these instructions we refer to the URL, or location of this file, as yourvideolocation.  If uploading a video to your site, you can access the full address for your video location at any time by browsing to the video through the contents of your folder, copying the link from the address bar, and removing the part of the address that says "/view".

[top]

Embed Your Video

Embedding video requires editing the source code of pages, and requires knowing or learning the <embed> tag. Do-it-yourself users can embed major formats such as .wmv, but we highly recommend Flash video (.flv, .f4v) or any other format that's encoded with the H.264 standard (Quicktime 7 or greater .mov, .mp4), which is what JW Player works with.  Once you are on the edit screen of your page, click “Source” in the top left corner. This is the way to edit web code using the Content Management System. Paste the following code where you want it to go on your site:

<embed
height="260"
width="320"
flashvars="file=yourvideolocation"
allowscriptaccess="always"
allowfullscreen="true"
quality="high"
bgcolor="#FFFFFF"
name="ply"
id="ply"
style=""
src="http://www.med.unc.edu/jwplayer.swf"
type="application/x-shockwave-flash">
</embed>

Make sure to change the part that says yourvideolocation to whatever your video file’s actual location is.  An example video location would look something like:

flashvars="file=http://www.med.unc.edu/webguide/video.flv"

Note: If you are uploading videos to a site which hasn't been launched yet, after the launch you will need to go back and change all of your http://wrp to http://www to reflect your site's change in status.

[top]

Adjust Height and Width Parameters

You will need to adjust the height and width in the code for your embedded video, to match the height and width (in pixels) of your video. In addition, you must add 20 pixels to the height of your video, to factor in additional space for your video’s control buttons. You will change 2 lines of your code. Change the lines of your code which read:

height="260"
width="320"

to whatever the actual dimensions of your video are, plus 20 on the height. For example, a video 300 x 200 pixels becomes:

height="220"
width="300"

[top]

Create a Preview Image

To create a preview screen for your video, you must capture a frame from your video. An easy way to do this is to use the “Print Screen” function of your keyboard.

A sample video preview screen (overlaid with the player controls)

1. First, play your video on your computer. Pause it when you locate the frame you would like to use as a video preview. Make sure your paused video is on top of any other windows which may be open.
2. PC: On most keyboards, the “Print Screen” key is located in the upper right corner, above the “Insert” key. It may be called “PrtSc.” Hold down the “Alt” key; then press “Print Screen.”
   Mac: Use the Grab utility, within Applications > Utilities.
3. Now you can open the image editing program of your choice, and paste the image generated by “Print Screen” or the Grab utility.
4. Crop off any excess material, until just the image from your video is left.  Crop off any controls (Example: Stop, Play, etc.) which may be visible, because JW Player will add its own to your final result.
5. Resize your image so its height and width match the height and width of your video. (Example: 320x240)
6. Save this as a JPEG (yourimagename.jpg).
7. Upload your .jpg file to the folder where the rest of your video files are located.

8. Finally, change the code of your embedded video. To do this, you will change one line of your code. Change the line which reads:

flashvars="file=yourvideolocation"

to:

flashvars="file=yourvideolovation&image=yourimagelocation"

Again, make sure to change yourvideolocation and yourimagelocation to the actual absolute addresses for those files (e.g. http://palmyra.med.unc.edu/yourimagename.jpg).

[top]

Add an Autostart Function

If you would like your video to start automatically when a visitor arrives at your page, you can add an autostart function to your embed code. Just change the line which reads:

flashvars="file=yourvideolocation"

to:

flashvars="file=yourvideolocation&autostart=true”

As always, make sure you change yourvideolocation to the actual address you created for your video.  If you choose an Autostart function, you will not need to create a preview image.

[top]

Save and Test

You won't be able to see the end result until you save and view the page. If while editing the page source, you press "Source" again to return to the normal editing mode, you'll see a rectangle with the Flash logo in it, which shows you where, and how large, your video will appear.  Once you view your saved page and play the video, you can see what adjustments, if any, you need to make to your code or page layout.

[top]