Home > Ektron > Embedding Videos in Ektron

Embedding Videos in Ektron

July 2nd, 2009

video_icon_fullAlmost every other day what seems to be a simple task will reveal itself as a mini project. Perhaps a side-effect of the paste of which things change in the web development world. This is exactly what happened when I tried to embed a movie from backlight.tv in to an Ektron site. It did not work and the issue was not trivial.

This is the code that needed to be embedded into the body of the page which will trigger a flash player and stream a flash movie in to the browser:

<object class="cantaloupe_video" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="480" height="294" id="backlight_player" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="http://player.backlight.tv/player/?video_code=VDF2upIPH8s6239EQ90L" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="flashvars" value="" />
<embed src="http://player.backlight.tv/player/?video_code=VDF2upIPH8s6239EQ90L" flashvars="" quality="high" bgcolor="#000000" width="480" height="294" name="backlight_player" align="middle" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Well, after I open a new content block and paste this code in the richtextarea/html input field and publish it, no video is displayed on the front page. After various debugging sessions I discovered that Ektron automatically strips out the <embed> tag. This is done probably because Ektron is trying to produce valid XHTML/HTML code and the embed tag is not.

How do we overcome the issue? We really have two options:

  1. Force Ektron’s new WYSIWYG editor to accept the invalid code and display it with the embed tag (not recommended, will not be covered here).
  2. Find a better way to embed the video with valid code.

While option one is not recommended and I’ll not cover it here, option two is quite easy and clean. To produce clean code use the following few lines of HTML instead, you can edit the original video code manually in an editor and then insert it into the content block:

<object type="application/x-shockwave-flash" style="width:454px; height:278px;"
data="http://player.backlight.tv/player/?video_code=VDF2upIPH8s6239EQ90L">
<param name="movie" value="http://player.backlight.tv/player/?video_code=VDF2upIPH8s6239EQ90L" />
<param name="wmode" value="transparent" />
</object>

What you need to focus on in the object tag which includes the width and height in the style element and the data element which includes the URL to the movie itself. Only one parameter is really required here: ‘movie’ which has the same URL to the actual movie. Everything else is not required and may not be necessary.

So, after cleaning up the original code, I inserted this new one into the content block, published it and vuala! it worked.

Thanks to Jeff Martinez for pointing it out on the Ektron Fourms.

Ektron

  1. | #1

    Another approach would be to use jQuery (or your favorite js library) to dynamically build out the required tag(s) based on a link to the video file within the content. Then you can simply add a link to the flv and the js code will replace it with your generated markup. Additionally, you could add a class that the js library can find and work with.

    Doing it this way allows your editors the ability to add embedded video into their pages without having to mess with the actual markup. This also has the added benefit of degrading rather well… if JS is off, the user will simply get a link to the media file itself. With a little more cleverness, you can use your “first frame” image as the link, thus maintaining your document flow (assuming the image is the same size as the player).

  2. | #2

    Thanks for these great suggestions. What I was trying to achieve is a simple copy and paste of the embedding code provided by video hosting websites like YouTube and, in this case, the backlight.tv website.

Comments are closed.