• KB Home |
• Need Help?

Learning Levels

• Digest
• Concept
• Technical

Announcements

Embedding Adobe Flash® or other rich media that use the <embed> or <object> tags can be accomplished in Cascade server in two ways:

1. The correct <embed> or <object> tags can be copied and pasted into the WYSIWYG's HTML Source View. Often the embed code can be directly copied and pasted from a site like YouTube or Vimeo.
2. A Data Definition can be created that allows a business user to enter a "video ID" for a particular media site or server or choose a Flash (SWF) File Asset stored in Cascade Server. Cascade Server then uses a Format to automatically generate the appropriate <embed> or <object> tags.

Copying Embed Code into the WYSIWYG

1. Copy or create the appropriate HTML code to embed the Flash movie. For this example, we'll use a video from YouTube.
   
2. Edit any Page in Cascade Server that contains a WYSIWYG editor. Your Group settings and the WYSIWYG's settings must allow you to see the Edit HTML Source button. If you can't see the  button, contact your Cascade Server administrator.
   
   
3. Paste the HTML code into the HTML Source Editor window. In many cases, the page layout will look best if the <embed> or <object> tag is pasted inside of an existing <p> (paragraph) tag. Click Update when you are satisfied with the HTML code.
    
4. In Cascade Server 6.0 and later, the WYSIWYG editor will show a placeholder graphic where your embedded movie will be.
   

Creating an Embed Data Definition

Flash and other rich media plugins can also be embedded in a page by using a combination of a Structured Data Definition and Format. This method can be more tightly controlled than simply pasting HTML code into the WYSIWYG editor. It allows the developer to prescribe how the flash movie should look or even where the content should be loaded from. The example Data Definition and Format below give the user fields for selecting a location to load the movie from, specify the video ID, and control the size and quality of the movie.

Screenshot of User Interface

Data Definition

<system-data-structure> <text identifier="source" label="Source" type="dropdown"> <dropdown-item value="YouTube"/> <dropdown-item value="Vimeo"/> <dropdown-item value="File Asset (use override)"/> <dropdown-item value="Custom (use override)"/> </text> <text identifier="id" label="Clip ID (source-specific)"/> <text identifier="quality" label="Clip Quality" type="radiobutton"> <radio-item value="Standard"/> <radio-item value="High Definition"/> </text> <group identifier="size" label="Default Size"> <text default="320" identifier="width" label="Width (px)" size="5"/> <text default="240" identifier="height" label="Height (px)" size="5"/> </group> <asset identifier="asset" label="File Asset Override" type="file"/> <text identifier="custom" label="Custom Override" wysiwyg="true"/> </system-data-structure>

XSLT Format

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/system-data-structure"> <xsl:apply-templates mode="embed" select="."/> </xsl:template> <xsl:template match="system-data-structure[source = 'YouTube']" mode="embed"> <xsl:param name="width"> <xsl:choose> <xsl:when test="size/width != ''"> <xsl:value-of select="size/width"/> </xsl:when> <xsl:otherwise>640</xsl:otherwise> </xsl:choose> </xsl:param> <xsl:param name="height"> <xsl:choose> <xsl:when test="size/height != ''"> <xsl:value-of select="size/height"/> </xsl:when> <xsl:otherwise>385</xsl:otherwise> </xsl:choose> </xsl:param> <xsl:variable name="hd"> <xsl:if test="quality = 'High Definition'">&amp;hd=1</xsl:if> </xsl:variable> <object height="{$height}" width="{$width}"> <param name="movie" value="http://www.youtube.com/v/{id}&amp;hl=en&amp;fs=1&amp;color1=0x5d1719&amp;color2=0xcd311b{$hd}"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/> <embed allowfullscreen="true" allowscriptaccess="always" height="{$height}" src="http://www.youtube.com/v/{id}&amp;hl=en&amp;fs=1&amp;color1=0x5d1719&amp;color2=0xcd311b{$hd}" type="application/x-shockwave-flash" width="{$width}"/> </object> </xsl:template> <xsl:template match="system-data-structure[source = 'Vimeo']" mode="embed"> <xsl:param name="width"> <xsl:choose> <xsl:when test="size/width != ''"> <xsl:value-of select="size/width"/> </xsl:when> <xsl:otherwise>640</xsl:otherwise> </xsl:choose> </xsl:param> <xsl:param name="height"> <xsl:choose> <xsl:when test="size/height != ''"> <xsl:value-of select="size/height"/> </xsl:when> <xsl:otherwise>385</xsl:otherwise> </xsl:choose> </xsl:param> <object height="{$height}" width="{$width}"> <param name="allowfullscreen" value="true"/> <param name="allowscriptaccess" value="always"/> <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id={id}&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=c42026&amp;fullscreen=1"/> <embed allowfullscreen="true" allowscriptaccess="always" height="{$height}" src="http://vimeo.com/moogaloop.swf?clip_id={id}&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=c42026&amp;fullscreen=1" type="application/x-shockwave-flash" width="{$width}"/> </object> </xsl:template> <xsl:template match="system-data-structure[source = 'Custom (use override)']" mode="embed"> <xsl:copy-of select="custom/node()"/> </xsl:template> <xsl:template match="system-data-structure[source = 'File Asset (use override)' and asset/content]" mode="embed"> <xsl:param name="width"> <xsl:choose> <xsl:when test="size/width != ''"> <xsl:value-of select="size/width"/> </xsl:when> <xsl:otherwise>640</xsl:otherwise> </xsl:choose> </xsl:param> <xsl:param name="height"> <xsl:choose> <xsl:when test="size/height != ''"> <xsl:value-of select="size/height"/> </xsl:when> <xsl:otherwise>385</xsl:otherwise> </xsl:choose> </xsl:param> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="{$height}" id="{asset/name}" width="{$width}"> <param name="movie" value="{asset/link}"/> <param name="quality" value="high"/> <param name="bgcolor" value="#FFFFFF"/> <embed bgcolor="#FFFFFF" height="{$height}" href="{asset/link}" name="{asset/name}" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" type="application/x-shockwave-flash" width="{$width}"/> </object> </xsl:template> </xsl:stylesheet>

© 2001-2012 Hannon Hill Corporation

Site Index | HH Internet | KB Feedback

Contact Us: Online Form | +1.678.904.6900