How to Embed a Screencast.com Video in HTML5

[cruitbuck]

Several tries, that's what it took to figure out how to use the embedded object provided by Screencast.com.

We host all our video streaming on TechSmith's screencast.com, since it is part of the Camtasia Studio and SnagIt! product line.

When I pasted the object tag code from screencast.com, Flare's compiler immediately gagged and spewed chunks. It was by accident that I pasted the code into a raw html file (no XML tag) that things began to work. I tried to open the raw html file in Flare's XML editor. Of course it prompted me to convert the file to XML. I clicked Yes, OK, Do It, Have At It, whatever.

When the file displayed, to my surprise, the boys (and girls) at Madcap had known to parse the object and format it to XML standards. The video object worked!

Here's as sample object from Screencast.com:

<object id="scPlayer" width="640" height="378" type="application/x-shockwave-flash" data="http://content.screencast.com/users/OptimizationZornInc/folders/Default/media/84ca8921-3cbf-4005-b6e9-ef040789ea37/bootstrap.swf" > <param name="movie" value="http://content.screencast.com/users/OptimizationZornInc/folders/Default/media/84ca8921-3cbf-4005-b6e9-ef040789ea37/bootstrap.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#FFFFFF" /> <param name="flashVars" value="thumb=http://content.screencast.com/users/OptimizationZornInc/folders/Default/media/84ca8921-3cbf-4005-b6e9-ef040789ea37/FirstFrame.jpg&containerwidth=640&containerheight=378&content=http://content.screencast.com/users/OptimizationZornInc/folders/Default/media/84ca8921-3cbf-4005-b6e9-ef040789ea37/Kv2-2012-2013-import-settingup-eREADI_controller.swf&blurover=false" /> <param name="allowFullScreen" value="true" /> <param name="scale" value="showall" /> <param name="allowScriptAccess" value="always" /> <param name="base" value="http://content.screencast.com/users/OptimizationZornInc/folders/Default/media/84ca8921-3cbf-4005-b6e9-ef040789ea37/" /> Unable to display content. Adobe Flash is required.</object>


Here's a sample after Flare converted the object:

<object id="scPlayer" width="400" height="318" type="application/x-shockwave-flash" data="http://content.screencast.com/users/OptimizationZornInc/folders/Kv220122013-nav-2-stuass-page/media/6071d042-fe83-49cf-bcca-6da990985980/kv2-2012-2013_nav2stuasspage_controller.swf">
<param name="movie" value="http://content.screencast.com/users/OptimizationZornInc/folders/Kv220122013-nav-2-stuass-page/media/6071d042-fe83-49cf-bcca-6da990985980/kv2-2012-2013_nav2stuasspage_controller.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<param name="flashVars" value="thumb=http://content.screencast.com/users/OptimizationZornInc/folders/Kv220122013-nav-2-stuass-page/media/6071d042-fe83-49cf-bcca-6da990985980/FirstFrame.png&containerwidth=400&containerheight=318&showstartscreen=true&showendscreen=true&loop=false&autostart=false&color=1A1A1A,1A1A1A&thumb=FirstFrame.png&thumbscale=45&content=http://content.screencast.com/users/OptimizationZornInc/folders/Kv220122013-nav-2-stuass-page/media/6071d042-fe83-49cf-bcca-6da990985980/Kv2-2012-2013_nav2stuAssPage.mp4&blurover=false" />
<param name="allowFullScreen" value="true" />
<param name="scale" value="showall" />
<param name="allowScriptAccess" value="always" />
<param name="base" value="http://content.screencast.com/users/OptimizationZornInc/folders/Kv220122013-nav-2-stuass-page/media/6071d042-fe83-49cf-bcca-6da990985980/" /><iframe type="text/html" frameborder="0" scrolling="no" style="overflow: hidden;" src="http://www.screencast.com/users/OptimizationZornInc/folders/Kv220122013-nav-2-stuass-page/media/6071d042-fe83-49cf-bcca-6da990985980/embed" height="318" width="400"> <![CDATA[ ]]></iframe>
</object>

Bravo Zulu Madcap.

BobB
Tech Writer/Programmer
Oz Systems
Dallas, TX

[nhhale]

Thank you, thank you, thank you, for posting this. I've been struggling with this all week--I am beside myself with joy that there's such a simple workaround.

[dmcmillion]

Hi, I'm attempting to do this, but I'm running into some issues. Screencast's embed code appears to be using iframes instead of objects, and I'm not getting the same result as described in this (admittedly older) help topic.

Is anyone aware of updated processes on this?

[KayJay]

Hi dmcmillion,
I'm using Brighttalk rather than Screencast.com, and I found that Flare wouldn't parse the scripts + HTML that I got from them to embed the video. So not the same problem, but you might benefit from the technique I used to solve mine...
Luckily the Flare HTML output will run javascript, so you can write a small js script that reconstructs the HTML you need to add in the example format you're given, even if the original embed codes get mangled.

My script looks like this:

Code: Select all

<div class="jsBrightTALKEmbedWrapper" style="width:100%; height:100%; position:relative;background: #ffffff;">
            <script src="https://www.brighttalk.com/clients/js/player-embed/player-embed.js" class="jsBrightTALKEmbed">
            </script>
        </div><span id="commid" style="display:none"><MadCap:variable name="MyVar.commID" /></span>
        <script>var script = document.createElement("script"); script.className = "jsBrightTALKEmbedConfig"; script.type = "application/json"; script.text = '{ "channelId" : 12345, "language": "en-US", "commId" : ' + $('#commid').text() + ', "displayMode" : "standalone", "height" : "auto" }'; $('.jsBrightTALKEmbedWrapper').prepend(script);
			var script2 = document.createElement("script"); script2.className = "jsBrightTALKEmbed"; script2.src = "https://www.brighttalk.com/clients/js/player-embed/player-embed.js" ; $('.jsBrightTALKEmbedWrapper').append(script2);
		</script>

I'm using a variable for the webinar ID so that I can set that at a snippet level, so can reuse this code easily.

I hope this helps - not sure if you will be able to make an iframe with this method for security reasons though...
Best,
Kristy