McMaster University

Faculty of Health Sciences
Web Design

Scope of Search

How to embed a video in a player on a web page

Most websites now use Flash video as the standard format for the web.  You can see it on news and sports websites such as nhl.com.  The wrapper is a skin that you choose when you import the video into flash.  Then you embed the code into your web page.  Here’s an example:

//fhs.mcmaster.ca/main/video/degroote_institutes/degroote_institutes_grand_opening.html

Is this what you are looking for?  You don’t’ have to choose the same skin or the same functions, but the process will be the same.

The process is as follows:

  1. Start Flash.
  2. Create a new flash project.
  3. Select File > Import > Import Video

  4. Search for and select the video file that you want to import.
  5. Select progressive download from the deployment dialog box.

  6. Choose encoding settings.  I usually leave it at medium quality and resize the video to 640 wide by 480 high.
  7. Choose the skin, the functions you want on the skin, and the colour of the skin (I use #990033 which is the mcmaster maroon).

  8. Click Finish and name the .swf file.
  9. Save the Flash file: filename.fla
  10. Click File > Publish.  Flash will produce 4 files: filename.swf, filename.html, skin.swf and AC_RunActiveContent.js
  11. Copy the javascript and object code for the Flash video from filename.html to a web page.
  12. Change the wmode parameter to transparent in the javascript code.  If you don’t, the drop down menu and any other dynamic content will appear under the movie.  Also, add wmode=”transparent” to the object tag version that is executed if the javascript is turned off.
  13. Put the file.swf, skin.swf and AC_RunActiveContent.js in the same folder as the web page where you copied the code.

Other website may use other skins.  For the future, it would be better to have an XML-driven version that would allow movies to be switched by changing a value in the XML file.