The Basic Idea

This framework provides easy to use Javascript functions to embed Video, Audio or Flash using plugins into your Website. Just because I hated to figure out how to do this again and again for several projects and ending up with ugly unmaintainable code, that always failed on some plattforms.

The Problem

There are several problems with embeding plugins. First of all you need a Ph.D. to figure out, if your user already has the plugin and what version she is using. Then it needs quite some HTML code to embed your multimedia, not just because Internet Explorer (for Windows) and Navigator compatible browser have a different model. And at the end you want a solution that is also accessible and works for users not having the plugin, or who are not able to install the plugin.

The Solution

The framework is written in Javascript and just works if the user has enabled Javascript. But most users who disable Javascript, or who do have a browser that doesn't support Javascript don't want or can't use plugins too. Make sure to provide some information about the content for those users, and/or provide a link to download the source.

"plugin.js" provides some useful functions as static methods of the Plugin object to detect and embed plugins.

Plugin.isInstalled(name)
Plugin.getVersion(name)
Plugin.getPluginsForMimeType(mimeType)
Plugin.getPluginsForFileSuffix(suffix)
Plugin.embed(pluginName, options, target)
Plugin.getInfo(name)

And a named Array (Object) providing information about the most important plugins: Acrobat, QuickTime, Director, 'Windows Media', Flash, Java, Real, VLC

Plugin.PLUGINS

Plugin exists in Mozilla and provides access to the native xpconnect object via Plugin.prototype. So the framework just extends the Plugin object for Mozilla, but will create a Plugin object for other browser, that functions as a namespace for the library.

Demo

Example 1 (Video)

Embed a video, depending on what the user has installed:

<div id="video"><a href="myVideo.mp4" onclick="return startVideo('video', 320, 240, 'myVideo.mp4', 'myVideo.wmv');" title="Klick to start video"><img src="myVideoPreview.jpg" width="320" height="240" alt="Preview image for video; Klick to start video." longdesc="myVideoDescription.html" /></a></div>

<script type="text/javascript"><!-- 
function startVideo(target, w, h, qt, wmv) {
 if (Plugin.isInstalled("QuickTime")) {
  Plugin.embed("QuickTime", {width: w, height: h, src: qt, autoplay: "true", controller: "true", type: "video/mp4"}, target);
  return false;
 } else if (Plugin.isInstalled("Windows Media")) {
  Plugin.embed("Windows Media", {width: w, height: h, src: wmv, autoplay: "true"}, target);
  return false;
 }
 return;
}
// --></script>

This example will show a preview image of a video. The video will be embeded and started, if the user klicks on the image. If the user has Quicktime installed it embeds the QT-version, if Windows Media is present the WMV-version will be embeded. If none of them is installed, or the user has no Javascript support the link will be executed, which means that the user will download the QT-version. For better accessability a longdesc attribute linking to a description about the video is provided for the img tag.

Example 2 (Flash)

Embed a flash file. SEE DEMO!

<div id="flash">Some info about what the Flash file 
is doing, or something that provides similar 
functionality as the Flash file.
<noscript>Javascript needs to be enabled for detecting 
Flash support of your browser. If you have Flash 
installed you may klick this <a href="myFlashFile.swf">link</a> 
to start the animation.
</noscript></div>
<script type="text/javascript"><!-- 
Plugin.embed("Flash", {src: "myFlashFile.swf", width: "395", height: "395"}, "flash"); 
// --></script>

This example will embed a Flash file. If Flash is not supported a description or a similar functionality (content of div) will be visible. If Javascript is not available the user has the possibility to start the Flash by klicking a link.

Download

You may download and use this script under the Terms of an MIT-style license.

plugin.js [27kB] - Full readable version
plugin.min.js [16kB] - Full, but compressed version
plugin.flash.min.js [6 kB] - Compressed version
just providing functions needed to detect/embed flash.

Changelog

17.12.2005: Version 0.1
initial version
18.12.2005: Version 0.2
added mimetypes for divx & co.
added VLC support (detection for IE is missing)
renamed getPluginsForMimeType, getPluginsForFileSuffix -> returns Array, instead of String
dropped support vor Adobe SVG (IE)
tested and debugged RealPlayer -> still reports a strange version number
fixed bugs where script did break on unknown name attribute
added experimental Plugin.embed
20.12.2005: Version 0.3
added docs
added license
rewrote Plugin.embed -> now it's easier to add new formats
downloadURL became pluginsPage
added mimeType, activeXType and codeBase to Plugin.PLUGINS
Plugin.embed accepts strings as target (id)
Added Plugin.embed support for Flash, RealPlayer and VLC
23.03.2006: Version 0.4
Fixed a few warnings reported by firefox in javascript strict mode (reported by Olav Roth)
13.04.2006: Version 0.5
Improved support for Windows Media Plugin
- use WM6.4 ClassID instead of WM7
(this fixes a lot of bad behaviour, like missing controls)
- detect installed ActiveX support for Mozilla (Firefox)
- added support for forceObjectTag as a sideeffect
Fixed a bug with embeding VLC
(src needs to be present in the embed tag)
Updated DivX support to final Version 1.0

Testing and Bugs

This is currently version 0.3. That means it may contain bugs, and hasn't been tested on all platforms (still in use). It will/should never work on IE4, NS4. DivX and VLC support are experimental.

Please use the demo pages to give it a quick try:
Detect Plugin - Embed Video - Embed Flash
and report me any unexpected behaviour. Please don't forget to provide me some information about the plattform and browser you are using. matthias AT knallgrau DOT at

Documentation

Supported Identifier Names for Plugins:
Acrobat, QuickTime, DivX, Director, 'Windows Media',
Flash, Java, RealPlayer, VLC

If you would like to add support for another plugin you should extend Plugin.PLUGINS and check for Plugin.embed.

function Plugin.isInstalled(String name)

Returns if plugin with identifier name is installed.

Return true | false
name ... String, a valid identifier for a plugin name

Plugin.getVersion(String name)

Returns version string (if available) if plugin with identifier name is installed.

Return String
name ... String, a valid identifier for a plugin name

Plugin.getPluginsForMimeType(String mimeType)

Returns an Array of valid plugin identifier names, if that plugins are installed and able to play the specified mimeType. This works diffenrently on Internet Explorer (PC) and Navigator compatible browsers. For IE we provide a fixed list of supportedMimeTypes (Plugin.PLUGINS) and can't say for sure that the installed plugin can play the mimeType.

Return Array[String]
mimeType ... String, a valid mimeType name (video/Quicktime)

Plugin.getPluginsForFileSuffix(String suffix)

Returns an Array of valid plugin identifier names, if that plugins are installed and able to play a file with the specified suffix. See getPluginsForMimeTypes for futher explanations.

Return Array[String]
mimeType ... String, a valid mimeType name (video/Quicktime)

Plugin.embed(pluginName, options, target)

Writes the proper embed or object tags for the specified plugin. This functions doesn't check, if the plugin is installed. With target you may specify an HTML element (id or referenz) that should contain the plugin code. Options will be used to specify the parameters (attributes) for the embeding code.

Return void
pluginName ... name of the plugin to be used
options ... options for embed respectivly object tag.
.src,.width,.height,.type,.activeXType,.id and .name
will get a special treatment. all other properties of options
will be added to the embed tag as attributes resp. to the
object tag as param(eters).
object parameter names should be lower case.
target ... optional (id of) container element that should contain
the embed/object tags.

Plugin.getInfo(name)

Returns structured information about the plugin with identifier name. Returns all attributes derived from Plugin.PLUGINS plus "name", "isInstalled" and "version".

Return Object
name ... String, a valid identifier for a plugin name

Plugin.PLUGINS

And a named Array (Object) providing information about the most important plugins: Acrobat, QuickTime, Director, 'Windows Media', Flash, Java, RealPlayer, VLC.
You may access information via Plugin.PLUGINS["Flash"].classID etc..., or do a for (var pluginName in Plugin.PLUGINS) ...

Each element can contain:

description ... a short human readable description
progID ... Array of ActiveX progID's used by new ActiveXObject()
classID ... ActiveX classid used for object tag
pluginsPage ... URL for downloading plugin, used for embed tag
codeBase ... URI to identify ActiveX plugin, used for object tag
mimeType ... standard mimetype used for embed/object tag
activeXType ... alternative mimetype for object tag
otherwise mimeType will be used also for object tag
standardEmbedAttributes ... named Array of default attributes
(and values) used for embed and object tag.
acceptedMimeTypes ... a list of known mimeTypes, because
Internet Explorer (PC) doesn't provide the navigator.mimeTypes
object.
getActiveXVersionInfo ... helper function to determine the version string for an ActiveX plugin.

Credits

This framework is inspired by prototype.js and is using the Object.extend from there, but it doesn't depend on it.

Apple published a script that was an inspiration for me to do it better.

Mark D. Anderson started to write a script that gave me some importent hints, how to detect ActiveX without using JScript and about detecting version numbers of plugins.

I used jsmin from Douglas Crockford to compress file size.