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>');
Posted by larryb at 09:20 AM [permanent link]
| TrackBacks (0)
Category: Streaming Media , Streaming Media Technology Tips , Web and Software Development , eLearning & Instructional Technology
Category: Streaming Media , Streaming Media Technology Tips , Web and Software Development , eLearning & Instructional Technology
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.
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.
Search
Archives
Recent Entries
Facebook and Academic Institutions - Content or Context?
Video Transcript Browsing Interface
The New RealPlayer 11 - A First Look
Is RealPlayer going to make a comeback?
Is Amazon's S3 the cheapest streaming video hosting out there?
Image, Audio & Video Search - Reading Content and Context
e-Learning 2.0 - The End of the Course?
Online Video and Web 2.0 - What's missing?
Fundamentals of Website Development - Course Resources
A Full-Featured Flash Video Player
Video Transcript Browsing Interface
The New RealPlayer 11 - A First Look
Is RealPlayer going to make a comeback?
Is Amazon's S3 the cheapest streaming video hosting out there?
Image, Audio & Video Search - Reading Content and Context
e-Learning 2.0 - The End of the Course?
Online Video and Web 2.0 - What's missing?
Fundamentals of Website Development - Course Resources
A Full-Featured Flash Video Player
Author Links
About the author
Speaking Engagements
Streaming and Multimedia Articles and Tutorials
My Harvard Business School Bio page
Blogroll
Digital Media Bulletin - Jose Alvear
ResearchForward - Michael J. Hemment
BusinessOfVideo.com
Online Video Punch
The Learning Circuits Blog
Elatable - Bradley Horowitz
Harold Jarche
HBS Prof. Andy McAfee on Web 2.0
DV for Teachers
SciTech Daily Review
Quirksmode - Javascript & AJAX
Educational Technology & Life
Jon Udell
Learning Technology - Denis Saulnier
Weblog Categories
Digital Restrictions Management
eLearning & Instructional Technology
Innovative Technology
Misc
Personal Video Publishing
Streaming Media
Streaming Media Technology Tips
Video and Multimedia Technology
Web and Software Development
Weblogs
External Links
