1. Home
  2. Ideas and tools for improving
  3. Ideas and tools for improving
  4. Adding multimedia to your

Adding multimedia to your connexions content  (Page 10/10)

<< Chapter < Page
  Ideas and tools for improving     Page 10 / 10
Chapter >> Page >

The final CNXML code for embedding this presentation is as follows:

<figure id="slidesharefigure"><media id="slidesharemedia" alt="Slide show introducing the ideas behind Connexions."><iframe src="http://www.slideshare.net/slideshow/embed_code/1888644?rel=0" width="425" height="355"/></media></figure>

And results in the following:

Connexions: create globally, educate locally

Though the steps described above may look intimidating, the actual process isn't actually that hard. To embed your SlideShare presentation, just perform the following steps:
  1. Copy the example code above into your module.
  2. Replace the URL with the one provided in the<embed>element in the HTML snippet provided by SlideShare.
  3. Escape the ampersand characters in the URL by replacing & with &amp; .
  4. Adjust the height and width parameters to change the size of the presentation (optional).
If you are including more than one SlideShare presentation and are using the code provided, don't forget to change the id for the <figure> , <media> , and <flash> elements each time you add a new video.

Embedding prezi presentations

If you choose to include Prezi presentations in your module, you will need to first copy the information provided in the Embed HTML snippet provided by Prezi for the presentation you wish to use. As an example, consider this presentation taken from a presentation developed by UniqU . The Embed snippet for this presentation is as follows: <div class="prezi-player"><style type="text/css" media="screen">.prezi-player { width: 550px; } .prezi-player-links { text-align: center; }</style><object id="prezi_n5c7h_bctk1c" name="prezi_n5c7h_bctk1c" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400"><param name="movie" value="http://prezi.com/bin/preziloader.swf"/><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="bgcolor" value="#ffffff"/><param name="flashvars" value="prezi_id=n5c7h_bctk1c&lock_to_path=1&color=ffffff&autoplay=no"/><embed id="preziEmbed_n5c7h_bctk1c" name="preziEmbed_n5c7h_bctk1c" src="http://prezi.com/bin/preziloader.swf" type="application/x-shockwave-flash" allowfullscreen="true"allowscriptaccess="always" width="550" height="400" bgcolor="#ffffff" flashvars="prezi_id=n5c7h_bctk1c&lock_to_path=1&color=ffffff&autoplay=no"></embed></object><div class="prezi-player-links"><p><a title="How to think about Connexions!" href="http://prezi.com/n5c7h_bctk1c/">UniqU: Making Connexions Easy!</a>on<a href="http://prezi.com">Prezi</a></p></div></div> Since this code is designed for use on websites and not the CNXML language, the majority of this snippet is not necessary. The part that is important is the embed tag and the param tags : <param name="movie" value="http://prezi.com/bin/preziloader.swf"/><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="bgcolor" value="#ffffff"/><param name="flashvars" value="prezi_id=n5c7h_bctk1c&lock_to_path=1&color=ffffff&autoplay=no"/><embed id="preziEmbed_n5c7h_bctk1c" name="preziEmbed_n5c7h_bctk1c" src="http://prezi.com/bin/preziloader.swf" type="application/x-shockwave-flash" allowfullscreen="true"allowscriptaccess="always" width="550" height="400" bgcolor="#ffffff" flashvars="prezi_id=n5c7h_bctk1c&lock_to_path=1&color=ffffff&autoplay=no"></embed> The CNXML example below illustrates how to embed a Prezi player in your module. Notice that it is implemented like a standalone flash object, with a few key features:

  • The src attribute is set to the embed URL for the slideshow, not the URL for the page on the Prezi website . The embed URL is the one found in the code snippet as shown above and is of the form "http://prezi.com/bin/preziloader.swf ).
  • Copy all param tags from the embed snippet.

The final CNXML code for embedding this presentation is as follows:


<media id="slidesharemed345234524352345ia" alt="Slide show introducing the ideas behind Connexions."><flash id="slidesharefldfadsfasfash" height="400px" width="550px"mime-type="application/x-shockwave-flash" src="http://prezi.com/bin/preziloader.swf"><param name="movie" value="http://prezi.com/bin/preziloader.swf"/><param name="allowfullscreen" value="true"/><param name="allowscriptaccess" value="always"/><param name="bgcolor" value="#ffffff"/><param name="flashvars" value="prezi_id=n5c7h_bctk1c&lock_to_path=1&color=ffffff&autoplay=no"/></flash></media>

And results in the following:

Though the steps described above may look intimidating, the actual process isn't actually that hard. To embed your Prezi presentation, just perform the following steps:
  1. Copy the example code above into your module.
  2. Replace the URL with the one provided in the<embed>element in the HTML snippet provided by Prezi.
  3. Replace the param tags from the example with those that are provided in the<embed>element in the HTML snippet provided by Prezi.
  4. Escape the ampersand characters in the URL by replacing & with &amp; , if any are present.
  5. Adjust the height and width parameters to change the size of the presentation (optional).
If you are including more than one Prezi presentation and are using the code provided, don't forget to change the id for the <figure> , <media> , and <flash> elements each time you add a new video.
<< Chapter < Page Page > Chapter >>

Read also:

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Ideas and tools for improving connexions modules and collections. OpenStax CNX. Mar 22, 2010 Download for free at http://cnx.org/content/col11184/1.2
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Ideas and tools for improving connexions modules and collections' conversation and receive update notifications?

Ask