LearningAPI has moved to a new blog!

The learningapi blog has moved to a new URL. These posts will remain here, but all new content has moved to learningAPI.com: Digital Media, Streaming Video & Educational Technology. You may also subscrdibe to the RSS feed for the new learningAPI.com blog.

October 19, 2006

Code snippet to embed video in a page

YouTube and its ilk have made embedding video into a web page simple for people who are not developers and HTML gurus.  For institutional video installations like ours at Harvard, it can be just as simple for our users to embed internally hosted video in their course pages, Websites, and blogs.  All you need is to have a small Javascript file that generates the HTML that embeds the player.  This file lives somewhere on your Web server, and people wanting to embed video in their pages simply reference it with a small snippet of HTML they put into their Web page.  Here's a simple snippet of HTML that users can use to generate an embedded video player:
<script src="http://www.learningapi.com/blog/scripts/embedRealVideo.js" type="text/javascript" 
clipUrl=""rtsp://video2.harvard.edu/newsoffc/EOWilson.rm" >
</script>

The embedRealVideo.js script generates the EMBED statement that displays the video in the page.  Its source code can easily be modified to support Windows Media or Quicktime plugins as well.  The user embedding video just has to paste the above code snippet into their page, making sure to edit the clipUrl field appropriately.  For this RealPalyer example, that URL can be a direct rtsp:// link, or an http:// link to ramgen or a .ram file.  

Here's the source of the script, embedRealVideo.js: (you may have to remove the line wrapping in the document.write statements for this to work)
pClipUrl="";
var scripts = document.getElementsByTagName('script');
var index = scripts.length - 1;
var myScript = scripts[index];
if (pClipUrl=="") {
    pClipUrl=myScript.getAttribute("clipUrl");
    }

document.write('<embed type="audio/x-pn-realaudio-plugin"
src="'+pClipUrl+'"
width="320" height="240"
controls="ImageWindow" autostart="FALSE" console="Clip1"></embed><br>');
document.write('<embed type="audio/x-pn-realaudio-plugin"
src="'+pClipUrl+'"
width="320" height="30"
controls="StatusBar" autostart="FALSE" console="Clip1"></embed><br>');
document.write('<embed type="audio/x-pn-realaudio-plugin"
src="'+pClipUrl+'"
width="320" height="26"
controls="ControlPanel" autostart="FALSE" console="Clip1"></embed>');


TrackBack URL for this entry:
http://www.learningapi.com/cgi-bin/mt-tb.cgi/101

Listed below are links to weblogs that reference 'Code snippet to embed video in a page' from learningAPI.com: Media and Learning Technology - Larry Bouthillier.