Embedding Video

In this tutorial we will walk through the process of placing video onto a web page. There are two basic ways to connect users to an online video via the web. The first, and easiest is to simply create a link using the usual <a href="videofile.mov">Video Link</a> syntax. On most user's systems this will open the video in the appropriate video viewing application. In some cases it will merely download the video file to their system. In most cases, however, you will want to present your video within the context of your web page. In that case you will need to take into account two factors: which browser the user is accessing your site with and what format your video is in.

Browser Compatibility

For maximum browser compatibility most web sites use the <object></object> tags as per W3C specs and then nest the <embed></embed> tags within that for backward compatibility with older browsers.

Video Format Compatibility

Below are examples of how one would embed videos in Windows Media, Real Media, Quicktime, MPEG-4, and Flash formats.

Windows Media

Here is an example of embedding a Windows Media file. On your page you would replace both instances of filename.wmv with your actual file path and name.

<object id="MediaPlayer" width="192" height="190" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
standby="Loading Windows Media Player..." TYPE="application/x-oleobject">
   <param name="FileName" VALUE="filename.wmv">
   <param name="ShowControls" VALUE="true">
   <param name="ShowStatusBar" value="false">
   <param name="ShowDisplay" VALUE="false">
   <param name="autostart" VALUE="false">
   <embed type="application/x-mplayer2" src="filename.wmv" name="MediaPlayer"
width="192" height="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </embed>
</object>

Real Media

The following example presents a real media file on a web page. Again, you would replace both instances of filename.rmvb with your actual file path and name.

<object id=rvocx classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa" width="180" height="159">
   <param name="src" value="filename.rm">
   <param name="autostart" value="false">
   <param name="controls" value="imagewindow">
   <param name="console" value="video">
   <embed type="audio/x-pn-realaudio-plugin" src="filename.rmvb" width="180" height="159" autostart="false" controls="all" console="video">
   </embed>
</object>

Note on Linking

If you create a link directly to a Real Media file it will download in its entirety before the user can start playing it. You would do that like this:

<a href="filename.rm">Download Video</a>

If you wish to stream the file such that the user can start watching it as soon as enough of the file is buffered, you must create a metafile. This metafile is a simple text file containing the URL of the video file, but with a .ram extension:

http://it.rit.edu/~rpv/local/tutorials/embeding_video/filename.ram

You would then link to this metafile:

<a href="filename.ram">Watch Video</a>

Quicktime

Embedding QuickTime is similar to the above two, again using both the <object></object> and <embed></embed> tags for maximum browser compatibility:

<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="320"height="180"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
   <param name="src" value="filename.mov">
   <param name="autoplay" value="true">
   <param name="controller" value="false">
   <embed src="filename.mov" width="320" height="180" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
   </embed>
</object>

If you turn the controller on, be sure to add 16 pixels to the height of the video clip to allow room for the controller as in the example below:

MPEG-4

You can present MPEG-4 video to your users via the QuickTime plug-in as well:

<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256" >
   <param name="src" value="filename.mp4" >
   <param name="autoplay" value="true" >
   <embed src="qtmimetype.pntg" type="image/x-macpaint"
      pluginspage="http://www.apple.com/quicktime/download" qtsrc="filename.mp4" width="320" height="256"       autoplay="true">
   </embed>
</object>

Flash

To place a Flash progressive download video on your web page you will need two files: An FLV video file and an SWF Flash application with which to play the video.

Embedding the video on the page is accomplished thusly:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="400" >
   <param name="movie" value="flashplayer.swf">
   <param name="quality" value="high" >
   <param name="LOOP" value="false">
   <embed src="flashplayer.swf" width="400" height="400" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed >
</object >

HTML5 Video Tag

HTML5 Supports video without plugins using the <video> tag, much like HTML supports images without plugins using the <img> tag. So, video is becoming much simpler!

So much for the good news. Now the bad news... At this point you have to provide two different formats of video because different browsers require different formats. Here's who supports what at this point:

Theora video and Vorbis audio (.ogg)

H.264 video and AAC audio(.mp4)

For browsers that do not support the <video> tag, Adobe Flash (9.0.60.184 and later) supports H.264 video and AAC audio (.mp4). You can insert the Flash object code inside the <video> tag. Browsers that support the video tag will ignore it and browsers that do not will ignore the video tag and see the flash player.

<video height="272" width="480" preload="auto" controls="controls">
    <source src="html5Demo.mp4" type='video/mp4; codecs="avc1.420E01E, mp4a.40.2"'/>
    <source src="html5Demo.ogg" type='video/ogg; codecs="theora, vorbis"'/>
    For browsers that do not support the HTML5 <video> tag you could insert a Flash player here.
</video>

Exercise

  1. Create a simple HTML5 web page into which you will embed a video clip using the HTML5 video tag. You may use any short video that you like. You will not be uploading and making this page available on the web because video files tend to be large and you have a limited disk allocation on Gibson and Kelvin. Here is an example of a generic HTML5 page:

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <title>HTML 5 Template</title>
       </head>
       <body>
          <p>Stuff goes here.</p>
       </body>
    </html>

  2. Make sure that your video clip is in MPEG-4 (.m4v) format. For complete compatibility you should also have a copy of the clip in .ogg format.

  3. Open up the MPEG-4 video clip in QuickTime Player. Test the video clip to make sure it plays correctly. If it does not, go back and find another.

  4. Under the Window menu in QuickTime Player choose Show Movie Inspector. In the window that opens you can find the actual size of the video clip. Write these down as you will need them to embed the clip. Quit QuickTime Player.

  5. Using the HTML5 <video> tag embed your video a second time. You will have to test this with Safari since you do not have an .ogg formatted video file for FireFox.

Online Reference Materials

Free Video Sources

Here are a few sources of free video clips you may use on your web pages without having to worry about copyright issues:

© 2008-2012 by Ronald P. Vullo, Ph.D.