- Make sure you contact us at email@example.com 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.
If you do not already know the height and width parameters of your video, check your video's dimensions.
- Open your file in Quicktime (all formats but .flv).
- On the file menu, select Window > Show Movie Inspector.
- Your video dimensions will be listed (in pixels) under 'Normal Size.'
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".
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:
- Click the Edit without visual editor link below the Body Text field.
- 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" />
<!-- 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 -->
- 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" />
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.
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:
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).
|A sample video, with preview image. (Direct download link)
- 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.
- 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.
- Now you can open the image editing program of your choice, and paste/open the image.
- 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.
- Resize your image so its height and width match the height and width of your video. (Example: 320x240)
- Save this as a JPEG (yourimagename.jpg).
- Upload your .jpg file to the 'Images' folder in your site's home directory.
Finally, change the code of your embedded video. To do this, you will change one attribute:
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).
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:
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.
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 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.
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 firstname.lastname@example.org or call 966-3519 for assistance.