TI:ME 2B Internet Authoring Resource Pages

Embedding Media Files

Image Files

GIF, JPG, and PNG image formats may be embedded in Web pages. The width and height attributes should be included in the code to make it easier for the Web browser to allocate space correctly as the page loads. The alt attribute should be included for compliance with XHTML specifications and accessibility for those with vision problems or those who browse with image loading turned off in their browser.

GIF files are limited to 256 colors so GIF is best for simple images. GIF files can have a transparent background. Here is the same GIF file displayed on three different backgrounds.

logo logo logo
GIF on White Background GIF on Blue Background GIF on Green Background

JPG files may contain millions of colors. JPG is the most common file format for photographs on the Web. Compare the same photo saved in GIF and JPG formats. The JPG image has smoother gradients and a more realistic appearance.

Photo in GIF format
Photo in JPG format

PNG is a more recent file format that was created to replace GIF. Like GIF, PNG files may have a transparent background. PNG files, however, may contain millions of colors. That makes PNG a nice alternative to GIF for displaying higher resolution images. Almost every new Web browser supports PNG.

logo logo logo
PNG on White Background PNG on Blue Background PNG on Green Background

It is customary to store images in a separate folder. The code to embed an image will therefore contain a pathname that includes the folder name.

Code for embedding an image:

<img src="images/operahousesmall.jpg" alt="opera house photo" width="200" height="150" />

Embedded Files that Require Browser Plugins

Web browsers require additional software to play audio, video, Flash animation, and other file formats. The other software may take the form of a Web browser plugin or ActiveX control that allows a particular media type to be displayed within a Web browser window. For example, Flash animations play easily in almost every Web browser because the plugin software for Flash is usually distributed and installed with the browser. When a new version of the Flash player plugin is released, however, the visitor must often download and install the new version to continue to have access to the latest Flash media. QuickTime movies, Windows Media Player files, RealPlayer files, and other media formats each have their own plugin software. Plugin software often gives the developer the option to embed the media into an existing XHMTL page rather than have the media file open in a separate window. Here are some simple examples of embedded media.

A Flash Animation with Audio

A Short QuickTime Movie

A MIDI File Embedded using QuickTime

An MP3 File Embedded using QuickTime

The code to embed audio, video, and animation media is different for each media type. The most common type of media to embed is Flash (SWF). Internet Authoring software packages make it easy to embed Flash media without the need for coding by hand. The code, as you can see, is lengthy so it is best to have the Internet Authoring software generate the code whenever possible. If you must type the code yourself, however, be aware that both the <object> and <embed> tags are needed for compatibility with all major browsers on both Macintosh and Windows. Notice how the <embed> tag is nested within the <object> tag in the examples below. If you look at the code carefully, you can see that parameters such as width and height are included in both the <object> and <embed> tags. This redundancy is necessary because browsers that support the <object> tag ignore the <embed> tag and browsers that support the <embed> tag ignore the <object> tag.

Code to embed Flash media:

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

Code to embed QuickTime media:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="160" height="140" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="videos/fingering1.mov" />
<param name="autoplay" value="false" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<embed src="videos/fingering1.mov" width="160" height="140" autoplay="false" controller="true" loop="False" pluginspage="http://www.apple.com/quicktime/download/"> </embed>

Embedding with the QuickTime Poster Technique

Embedding a large media file on a Web page is a bit of an inconvenience for visitors with slow Internet connections. To avoid subjecting unsuspecting visitors to long download times, you can use the Quicktime poster movie technique. The QuickTime plugin allows the designer to embed a small section of a movie (usually one frame), called a poster movie, and link it to the original, larger movie. The target and href attributes in the embed tag are set to load the new movie in the same space on the screen as the poster movie. In the code below, note that the autoplay attribute has been removed because it is irrelevant for a still image. Also note that the HREF URL is relative to the location of the movie not the location of the page. Since the poster frame is displayed without a controller, it is necessary to specify a white background color to mask the extra 20 pixels allocated in the code for the controller needed for the full movie. The audio example uses a small QuickTime movie called audiostub.mov that contains a still image of a playback controller.

Code to embed QuickTime media using the Poster Technique:

<div align="left">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="200" height="40" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="sounds/audiostub.mov" />
<param name="controller" value="false" />
<param name="loop" value="false" />
<param name="href" value="joplin.mp3" />
<param name="bgcolor" value="#ffffff" />
<param name="target" value="myself" />
<embed src="sounds/audiostub.mov" width="200" height="40" controller="false" loop="false" href="joplin.mp3" bgcolor="#ffffff" target="myself" pluginspage="http://www.apple.com/quicktime/download/">

ShearSpire, Inc. has developed a QuickTime Code Generator and has licensed it to TI:ME for use in this course. Use the QuickTime Code Generator to create the QuickTime embedding code you need for your projects.

Sibelius Files Embedded with the Scorch Plugin

Sibelius introduced the Scorch plugin in the late 1990s to allow musicians to share their scores easily online. Many sites, such as the Vermont MIDI Project, use the Sibelius Scorch plugin to help students share their work with mentors. Creating Scorch files is easy. Create a notation file using Sibelius, then choose Save As from the file menu. Save the file as a Web page. Then upload the new .htm file along with the original .sib (Sibelius) file to your Web server. Here is an example of a Sibelius Scorch page created this way.

All Through the Night (Scorch file)

If you code it yourself, however, you can embed a Sibelius file in any page using the code below.

Code to embed Sibelius files with the Scorch plugin:

<object id="ScorchPlugin"
<param name="src" value="scorch/AllthroughtheNight.sib" />
<param name="type" value="application/x-sibelius-score" />
<param name="scorch_minimum_version" value="3000" />
<param name="scorch_preferred_version" value="3000" />
<param name="scorch_shrink_limit" value="90" />
<embed src="scorch/AllthroughtheNight.sib"

<p>If you can't see the score, <a href="http://www.sibelius.com/scorch/">get the Sibelius Scorch
plug-in here</a></p>