Skip to content Skip to navigation

Connexions

You are here: Home » Content » Adding Multimedia to Your Connexions Content

Navigation

Recently Viewed

This feature requires Javascript to be enabled.

Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

Adding Multimedia to Your Connexions Content

Module by: Adan Galvan, Mark Husband. E-mail the authors

User rating (How does the rating system work?)
Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

:
(0 ratings)

Summary: An explanation of how to add various types of multimedia objects to your Connexions content. Examples of some of the more common multimedia objects are included.

Note: You are viewing an old version of this document. The latest version is available here.

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:

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:

Figure 1: A graphic image displayed as a figure.
Example Figure
Example Figure (envelope-taller.png)

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:

Figure 2: Two images displayed horizontally in one figure.
Tall Icon and EnvelopeSmall Icon and Envelope
(a) Subfigure 1. (b) Subfigure 2.
Tall Icon and Envelope (envelope-taller.png)Small Icon and Envelope (envelope.png)

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:

  1. Create an eps format version of your image files. The image should be sized to the appropriate dimensions.
  2. 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)
  3. 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:

  1. Create a thumbnail-sized version of your image file.
  2. Insert a media type entry for the full-sized and thumbnail images, as shown in the following example.
  3. 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: Photograph of the Taj Mahal taken by Steve Evans. It is licensed for public use under the Creative Commons Attribution License.
Figure 3 (TajMahal_medium.jpg)

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 4: "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 5: 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 6: 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:

Figure 7: A chromatic scale performed on clarinet by Michael Lawrence.
Audio File: chromatic_slurred.wav

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>

Content actions

Give Feedback:

E-mail the module authors | Rate module ( How does the rating system work?)

Rating system

Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

(0 ratings)

Download:

Module PDF

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections directly in Connexions. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need a Connexions account to use 'My Favorites'.

| A lens (?)

Definition of a lens

Lenses

A lens is a custom view of Connexions content. You can think of it as a fancy kind of list that will let you see Connexions through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to Connexions materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual Connexions member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks