Content Actions

Edit this content (author only)
Save to del.icio.us

Multimedia Example

Summary: This is to demonstrate multimedia content in Vietnam OpenCourseWare. Multimedia content is collected from Connexions project at: http://cnx.org

Introduction

Connexions modules can contain many different types of multimedia. This document explains how you can add the following types of multimedia objects to a module:

Images
Flash objects
Movies
Java applets
Audio files
LabVIEW demonstrations

Any type of multimedia object that can be embedded in a Web page can be put into a Connexions module using the CNXML media tag. See the description of the media tag in the CNXML Language Specification for more information. The only requirement is that the object must have a valid MIME (Multipurpose Internet Mail Extension) type. MIME is a protocol that enables the transmission of data, such as sound or movies, over the Internet without first having to be translated into an ASCII format. See MIME Types for more information. This module contains examples of the CNXML entries and their resulting displays for the different multimedia objects.

Important Notes on Multimedia Additions

Please note the following items when you are working with multimedia additions to your module:

The CNXML examples shown in this module are specific to the media displays in this module. If you copy them into your module, please edit the CNXML for your situation.
The type attribute must match the MIME type for the media object you want to appear in the module. For example, if you are adding an image file that is in the Portable Networks Graphics (png file extension) format, the type attribute must be image/png. The entry would look like the following example:
```
	  	 
	  	    <media type="image/png" src="mypicture.png"/>
	  	
	  	
```
You can use any type of media object as long as it has a valid MIME type.
If you need assistance adding a multimedia object, or you have questions about an object not listed in this module, please contact Connexions technical support at techsupport@cnx.rice.edu.
You can pass controlling options or parameters to the multimedia objects with the param tag.

Images

Some of the image file types and their corresponding MIME types used in Connexions modules are:

eps - media type="application/postscript"
png - media type="image/png"
jpeg - media type="image/jpeg"
gif - media type="image/gif"

This list is not all inclusive. Any image with a valid MIME type can be used in a module.

To embed images in your module, insert CNXML entries similar to the following example into the "index.cnxml" file for your module:

	 
	  <figure id="figure-01">
	    <name>Example Figure</name>
	    <media type="image/png" src="envelope-taller.png"/>
	    <caption>A graphic image displayed as a figure.</caption>
	  </figure>

The src attribute in the media tag gives the location or source of the image that you want to appear in the module. The attribute can be a file name if you have uploaded the file into your module, or a full URL for an image file stored elsewhere on the Internet.

The actual display for the previous CNXML example is:

Example figure

Figure 1: A graphic image displayed as a figure.

You can place two images within the same figure using the subfigure tag. This is useful when you have two related images that you want to display side-by-side or one above the other. To display two images within the same figure, insert CNXML entries similar to the following example into the "index.cnxml" file for your module:

	 
     <figure id="figure-2" orient="horizontal">
        <subfigure id="subfigure-1">
          <name>Tall Icon and Envelope</name>
          <media type="image/png" src="envelope-taller.png"/>
          <caption>
          Subfigure 1.
          </caption>
        </subfigure>
        <subfigure id="subfigure-2">
          <name>Small Icon and Envelope</name>
          <media type="image/png" src="envelope.png"/>
          <caption>
            Subfigure 2.            
          </caption>
        </subfigure>
 	<caption>Two images displayed horizontally in one figure.</caption>
     </figure>

The actual display for the previous CNXML example is:

Blue on blue	Orange on white

Subfigure 2.1: Subfigure 1.	Subfigure 2.2: Subfigure 2.

Figure 2: Two images displayed horizontally in one figure.

	The attribute orient can have a value of 
	horizontal or vertical, and determines 
	how the images are arranged in the figure.
      

Including Images for Both On-Line and Print Versions of Your Module

	  If the images in your module are the appropriate size when you 
	  view them on-line, but when you print the module they appear too 
	  large for the page, Connexions lets you insert an additional 
	  image file in your module that can be formatted and sized 
	  specifically for the print version. Image files formatted in 
	  eps are the preferred format for printed versions 
	  of Connexions modules. If your module contains eps 
	  files and png files of the same image, Connexions 
	  uses the eps files when it generates a PDF file 
	  for printing and uses the png files when displaying 
	  the module on-line. 
	

Here is how to insert additional image files in your module for the print version:

Create an eps format version of your image files. The image should be sized to the appropriate dimensions.
Insert a media type entry for the eps image file in the "index.cnxml" file just above the entry for image file for the on-line display. The image files should have the same name, except that the extension should indicate the file type. For example: "image1.png" (for on-line) and "image1.eps" (for print)
Add the eps image file to the module.

Here is an example of the CNXML code required to include additional images:

	   
	    <figure id='printimage'>
	     <media type='application/postscript' src='image.eps'>
	      <media type='image/png' src='image.png'/>
             </media>
            </figure>

Note: The print image (eps) entry must appear above the on-line image (png) entry in the "index.cnxml" file. The on-line image entry should be indented and nested under the alternate image entry.

Creating an Image with a Link to a Larger Version

You can also display an image, that when clicked, displays a larger version of the image. Here is how to do it:

Create a thumbnail-sized version of your image file.
Insert a media type entry for the full-sized and thumbnail images, as shown in the following example.
Add the full-sized and thumbnail image files to the module.

Here is an example of the CNXML code required to include a thumbnail image that links to a full size version:

	   
	    <figure id='thumbnail'>
	     <media type='image/png' src='TajMahal_medium.jpg'>
	      <param name='thumbnail' value='TajMahal_Thumb.jpg'/>
             </media>
            </figure>

The actual display for the previous CNXML example is:

Figure 3: The photograph of the Taj Mahal in this figure and the following figures was taken by Steve Evans. It is licensed for public use under the Creative Commons Attribution License.

Adjusting the Size of the Image in the On-Line Version

You can also adjust the size of the image in the on-line version of your document by using param tags with name attributes for height and width.
        

Here is an example of the CNXML code required to adjust the size of the on-line version of an image:

<figure id="element-856">
  <media type="image/jpeg" src="TajMahal_medium.jpg">
    <param name="height" value="250"/>
    <param name="width" value="250"/>
  </media>
</figure>

The way this code would display is shown in Figure 4.

Figure 4

The original figure is shown in Figure 5.

Figure 5

Flash Objects

You can insert Flash objects in your module. Here is an example of the CNXML code required to include a Flash object:

	 
         <figure id='flashfig'>
	  <media type="application/x-shockwave-flash" src="flash.swf">
	    <param name='height' value='250'/>
            <param name='width'  value='250'/>
          </media>
	  <caption>"Welcome to Connexions" example Flash object.</caption>
         </figure>

The Flash object appears in your module, similar to the way in which a movie or an image appears.

Figure 6: "Welcome to Connexions" example Flash object.

Note: The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

Movies

The following is a list of some types of movies that you can include in your module. You can embed these types and any other type that can normally be inserted into a web page.

quicktime
mpeg

Movies can be added to your module by including code similar to the following:

	 
	<figure id='moviefig2'>
	  <media type="video/mpeg" src="Building_on_the_Past.mpg">
	    <param name="width" value="450"/>
	    <param name="height" value="400"/>
	    <param name="autoplay" value="false"/>
	  </media>
	  <caption>The Creative Commons movie: "Building on the Past". 
	 Click the Play button to start the movie.</caption>
	</figure>

The actual display for the previous CNXML example is:

Figure 7: The Creative Commons movie: "Building on the Past". Click the Play button to start the movie.

Note: The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

Java Applets

Java applets can be added to your module by including code similar to the following:

	 
	<figure id="javafig">
          <media type="application/x-java-applet" src="PhasorDemo.class">
            <param name="width" value="430"/>
            <param name="height" value="500"/>
	  </media>
          <caption>3D Animation of a Complex Sinusoid. Click the Run button 
           to start the animation.</caption>
        </figure>

The actual display for the previous CNXML example is:

Figure 8: 3D Animation of a Complex Sinusoid. Click the Run button to start the animation.

If the graphic does not appear in the figure above, you may need to install or upgrade the Java plug-in on your computer. Please go to java.com to download the latest version of the Java plug-in.

Note: The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

Audio Files

Audio files such as mp3, real audio, and wav files can be inserted into your module quickly and easily. To include audio files in your document, upload the corresponding audio file and include code similar to the following in your "index.cnxml" document:

	 
      	 <figure id='musicscale'>
      	  <media type="audio/x-wav" src="chromatic_slurred.wav"/>
      	  <caption>A chromatic scale performed on clarinet by Michael Lawrence.</caption>
         </figure>

The actual display for the previous CNXML example is:

Audio File: chromatic_slurred.wav

Figure 9: A chromatic scale performed on clarinet by Michael Lawrence.

Note: The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

LabVIEW Demonstrations

For information on including LabVIEW demonstrations in your module, please see Creating LabVIEW demonstrations for Connexions.

Media Type Parameters

Some multimedia objects need options or parameters to display properly. You can pass this information to the multimedia objects with the param tag. This tag is contained within the media tags and does not require modification of the media tag. See the description of the param tag in the CNXML Language Specification for more information.

Here is an example of a param tag entry for a video (mpg) object:

      	 
      	 <media type="video/mpeg" src="testmovie.mpg">
       	   <param name="width" value="300"/>
      	   <param name="height" value="300"/>
      	 </media>

Note: You should include the height and width parameters for any movie, Flash object, or Java applet that needs to display on-line in a specific size. The default units of height and width are pixels. In the previous example, the movie displays as a 300 pixel by 300 pixel box.

Different multimedia object types support and respond to different parameters. Examples of some of the parameters for the different multimedia object types are:

Images (image/*): height, width, title, alt
Flash (application/x-shockwave-flash): height, width, base
Video (video/*): height, width, classid, codebase, autostart
Java Applets (application/x-java-applet): height, width, code, codebase, archive
Audio (audio/*): title, volume
LabVIEW (application/x-labview): viinfo (See Creating LabVIEW demonstrations for Connexions for more information.)

Note: The param tag allows you to specify the run-time settings for an object inserted into XHTML documents.

Params and Alternate Images

If you are using nested media tags to provide for an alternate image display, such as a photograph that appears in the printed version of the module to replace a movie that appears in the on-line version, insert the param entries for the primary image before the nested media entry for the alternate image, as shown in the following example:

      	 
         <media type="video/mov" src="howto.mov">
           <param name="height" value="250" />
           <param name="width" value="250" />
           <media type="image/png" src="novideo.png />
         </media>

Comments, questions, feedback, criticisms?

Send feedback

More about this content: Metadata | Version History | Cite This Content

This work is licensed by Hung V. Tran. See the Creative Commons License about permission to reuse this material.

Last edited by Hung V. Tran on Sep 28, 2007 6:41 pm GMT-5.