From Files (.mp4, .mov, .flv)

You can upload an .mp4, Quicktime movie (.mov), or Flash video (.flv) to your site and play any of them with a Flash-based video player that we've hosted for your convenience. As it uses Flash, it's not accessible to users on iPads, iPhones, etc. So, for maximum accessibility, it's recommended that you also provide a direct download link to the video file.

Before You Begin

Icon IdeaTips

  • Make sure you contact us at webhelp@med.unc.edu to to verify that the appropriate HTML tags for embedding have been allowed (<object> and <param> for the Flash-based player, and <iframe> for YouTube videos).
  • To preserve the alternate content provided below for devices without Flash, you must edit and save without the visual editor.

To  play video files within the School of Medicine web system, we currently host a Flash-based solution called JW Player. There's no need to download anything—just use the code below, and the player will work on any browser with the Adobe Flash player installed.

 

Note Your Video's Height and Width

If you do not already know the height and width parameters of your video, check your video's dimensions.

  1. Open your file in Quicktime (all formats but .flv).
  2. On the file menu, select Window > Show Movie Inspector.
  3. Your video dimensions will be listed (in pixels) under 'Normal Size.'

[top]

Upload Your Video

It's ideal that particularly very large files (100MB+) be hosted outside of your site, for optimum performance.  OIS has a dedicated video server for this purpose. For help uploading to it, contact the OIS Web Team. If needed, we'll handle format conversion, and will provide a link to such a video for inclusion within your embed code.

In these instructions we refer to the URL, or location of this file, as  "yourvideolocation".  If uploading a video to your site, you can refer the full address of 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

Paste the Code

This requires some knowledge of editing HTML source code. You can embed formats such as .wmv, but we highly recommend a format that's encoded with the H.264 standard (Quicktime 7+ .mov, or .mp4), which is what JW Player works with.  Once you are on the edit screen of your page:

  1. Click the Edit without visual editor link below the Body Text field. 
  2. Within the source code, paste the following snippet where you want the video to be located:
    <object data="http://www.med.unc.edu/webguide/files/player.swf" width="320" height="260" type="application/x-shockwave-flash">
    <param name="data" value="http://www.med.unc.edu/webguide/files/player.swf" />
    <param name="src" value="http://www.med.unc.edu/webguide/files/player.swf" />
    <param name="flashvars" value="file=yourvideolocation.mov" />
    <param value="true" name="allowFullScreen" />
    <param value="always" name="allowscriptaccess" />
    <param value="wmode" name="opaque" />
    <!-- Alternate content for devices without Flash -->
    <p style="padding:1em; border:1px solid #e3e2da; background:#f1f0ec;">To access
    this player, please revisit with a web browser that has the latest version of
    <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player</a> installed.</p>
    <!-- End alternate content -->
    </object>
  3. Make sure to change the part that says "yourvideolocation.mov" to the actual video URL.  An example video location would look something like:
    <param name="flashvars" value="file=http://www.med.unc.edu/site/files/video.mp4" />

warning Important: To preserve the alternate content provided above for devices without Flash, you must edit without visual editor, and save the page from this mode for all changes. Otherwise, the visual editor will strip out content contained within the opening and closing <object> tags—a known issue.

[top]

Adjust Height and Width Parameters

You will need to adjust the height and width to match the height and width (in pixels) of your video. In addition, you must add 20 pixels to the height of your vide, to factor in additional space for your video’s control buttons. You will change 2 attributes in the code.  For example, a video 300 x 200 pixel video becomes:

width="300"
height="220"
type="application/x-shockwave-flash">

[top]

Create a Preview Image

Any still frame you like can be the video preview.  An easy way to capture a frame is to use the "Print Screen" function of your keyboard (Windows).

To access this player, please revisit with a web browser that has the latest version of Adobe Flash Player installed.

A sample video, with preview image. (Direct download link)
  1. 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: Press Shift+Cmd+3, or use the Grab utility, within Applications > Utilities.
  3. Now you can open the image editing program of your choice, and paste/open the image.
  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 'Images' folder in your site's home directory.
  8. Finally, change the code of your embedded video. To do this, you will change one attribute:

value="file=yourvideolocation.mov" />

to:

value="file=yourvideolocation.mov&image=yourimagelocation.jpg" />

Again, make sure to change yourvideolocation and yourimagelocation to the actual URLs for those files (e.g. http://www.med.unc.edu/site/images/yourimagename.jpg).

[top]

Add an Autostart Function

No Preview Image

If you would like your video to start automatically when a visitor arrives, you can add an autostart functionality by changing the line which reads:

value="file=yourvideolocation.mov" />

to:

value="file=yourvideolocation.mov&autostart=true" />

As always, make sure you change yourvideolocation to the actual address you created for your video.  If you set autostart to true, you will not need to create a preview image.

[top]

Change the Background Color of the Video Player

If you don't wish to create a preview image, you can change the background color of the video player's start screen fairly easily.  By default, the start screen is black; but by adding another parameter, along with a hexadecimal color code, this can be changed to virtually any color.

Black Preview White Preview Blue Preview
Black background (default).
White background (value="#FFFFFF").
Blue background (value="#336699"). 

To change the background color, simply add another param to the list:

<param name="bgcolor" value="#FFFFFF" />

If you'd like the background to be any color other than white, swap out FFFFFF for any HEX color.

  • For more information (and some examples) of HEX color code, visit the W3Schools' HTML Colors page.
  • The code for the blue used in much of the School of Medicine Web System is 336699.

[top]

Save and Test

You won't be able to see the end result until you save and view the page. From that point, you can see what adjustments, if any, you need to make to your code or page layout.  If you want to experiment with a page that's currently published, you may want to check out a working copy of the page.  If your video does not play at all, please contact the OIS Web Team at webhelp@med.unc.edu or call 966-3519 for assistance.

    [top]

    yourvideolocation
    Related content
    Adding Files