contentwithstructure_com

jMedia

jmedia is a jQuery plugin for unobtrusive, accessible and flexible multi-media embedding.

Any feedback is appreciated. Please mail to info@contentwithstructure.com.

Features

  • supports: Flash, Quicktime, Real, WindowsMedia and Shockwave/Director
  • cross browser compatible; tested on IE6+/Win, FF2.0/Win, FF1.0.4/OSX, Safari2.0, Opera9.1/Win
  • unobtrusive and accessible
  • embeds media only after successful plugin detection
  • adjustable balance between standards compliance and browser compatibility
    • IE/Win: plugin embedding via object-Tag (with classid and codebase Attributes); dynamic insertion of object-Element via innerHTML
    • other browsers: plugin embedding via non-standard embed-Tag; dynamic insertion of embed-Element via innerHTML
    • optional for Gecko browsers and other non-IE browsers serving an xml mimetype: embedding via standard compliant object-Tag; dynamic insertion of the object-Element via DOM-Manipulation
    (The web page will always validate, since the plugin specific markup is added via javascript.)
  • 3 modes of embedding: replace, onclick, sifr
  • easy setup in 3 steps:
    1. write your (x)html markup,
    2. include jquery.js and jmedia.js,
    3. configure jmedia
  • passing of parameters to the media plugin works for all plugin types and embedding modes
  • multiple media files and media types on one page
  • IE: no annoying "activate ActiveX control" dialog
  • IE: no security warning with https
  • Flash: supports Flash Express Install feature
  • Flash: several bug fixes for Flash-Plugin
  • filesize: 10.5kb (compressed)

Note: if you want to embed only Flash movies you should consider using SWFObject or UFO!

Download

version 1.01 (12.3.2007)

(javascript file compression made with Dean Edwards's packer)

Version history
  • v1.01 (12.3.2007): fixed link behavior in sifr mode
Requirements:
License

Basic Usage and Examples

replace mode...

... replaces a fallback text or an image with an embedded movie

If you use a fallback text in your markup, you can use the css class names ".jm_oldbrowsers" and ".jm_noscript" for customized messages. They will be removed if the browser is supported and/or javascript is enabled.

replace mode example (fallback text replacement)

replace mode example (image replacement)

replace mode example (full screen)

html markup:

<div id="mediacontainer">
  <p>
    Playback of this video requires the latest RealMedia-Plugin.
  </p>

  <p>
    <a title="Download Real Plugin" href="http://www.real.com/freeplayer/?rppr=rnwk"> Download the latest RealMedia-Plugin</a>.
  </p>
  <p class="jm_noscript">

    Please activate javascript to detect your media plugins.
  </p>
  <p class="jm_oldbrowsers">
   Older browsers, also IE/Mac, are not supported.
  </p>
</div>
or (with image to be replaced): 

<div id="mediacontainer">
  <img src="http://sandbox.contentwithstructure.com/media/mylogo.jpg">
</div>
javascript configuration:
	
$(document).ready(function(){
  $("#mediacontainer").jmedia(
    {version:"6,0"},
    {src:"http://sandbox.contentwithstructure.com/media/test.ram",
     controls:"ImageWindow,ControlPanel",
     maintainaspect:"true"});
});

onclick mode...

Turns an a element with the movie's url as href attribute into a toggler that makes a custom element containing the embedded video/movie (in)visible. The custom container element is appended to the a element. The movie is loaded onClick so autostart/autoplay works fine.

You can configure the script to generate a message if the user's browser is missing the required plugin but javascript is enabled. Use "jm_onfailure" as css class name for a html element containing information about the required plugin and the css class name "jm_oldbrowsers" for information about unsupported browsers.

The generated close button has the css class name ".jm_closebtn" for styling purposes.

onclick mode example

html markup:

<div>
  <a href="http://sandbox.contentwithstructure.com/media/test.ram" class="trailer"> watch the trailer (Real)</a>

</div>
javascript configuration:

$(document).ready(function(){
  $(".trailer").jmedia(
	{version:'6,0',
	 mode:"onclick",
	 elemType:'div',
	 errTxt:'<div class="jm_onfailure">You need a current <a href="http://www.real.com/freeplayer/?rppr=rnwk" title="download Real Player Plugin"> Real Player Plugin</a>. <span class="jm_oldbrowsers">Older browsers, also IE/Mac, are not supported.</span></div>'},
	{src:'http://sandbox.contentwithstructure.com/media/test.ram',
	 controls:'ImageWindow,ControlPanel',
	 maintainaspect:'true'});
});

sifr mode...

...mimicks the sIFR, i.e. it replaces an element's text node with custom typography

You should use sIFR-specific CSS-rules to achieve an accessible (amongst others: printable) Flash replacement! See example's source code.

sifr mode example

html markup:

<h2>			
  Your heading
</h2>
javascript configuration:

$(document).ready(function(){
  $("h2").jmedia(
	{version:"6,0",
	 mode:"sifr"},
	{src:"http://sandbox.contentwithstructure.com/media/sifr.swf",
	 quality:"best",
	 bgcolor:"#ffffff",
	 flashVars:"&textcolor=#cccccc&linkcolor=#ff0000&hovercolor=#00f00"});
});

Options


$(document).ready(function(){
  $("html_element").jmedia({soptions},{moptions});
});
html_element
you can use the jQuery selector syntax like $(".videos") or $("#myvideo") or $("h2") etc.
soptions (script options):
mode: "replace" (default) | "onclick" | "sifr"
version: "6,0" (default)
errTxt: "" (default)
forceObjectTag: false (default)
elemType: "div" (default)
elemClass: "jm_replaced" (default)
fullScreen: false (default) | true
flashXI: false (default) | true
flashXIsrc: "js/XI.swf" (default)
sifrPaddingTop/Bottom/Left/Right: 0 (default)
remarks:

errTxt is evaluated only in onclick-mode

sifr-mode is applied only with Flash Plugin

flashXI and flashXIsrc are evaluated only with Flash Plugin

sifrPaddingTop... are evaluated only with Flash Plugin in sifr-mode

elemType, elemClass and fullScreen are ignored in sifr-mode

moptions (movie options):
src: string (default: element's href or src)
width: 320 (default)
height: 280 (default)
plugin specific attributes and parameters... (see below)
remarks:

src should only be omitted in onclick-mode

width and height are ignored in sifr-mode

in sifr-mode you have predefined flashVars to control the appearance of your typography: 


flashVars:"textcolor=#000000&;linkcolor=#ff0000&hovercolor=#00ff00&textalign=center&underline=true&offsetTop=10&offsetLeft=10"
Information about plugin specific object/embed attributes and parameters which can be inserted via moptions:
Flash: http://www.adobe.com/go/tn_12701 (plus: http://www.adobe.com/go/tn_13331 , http://www.adobe.com/go/tn_16494)
Quicktime: http://www.apple.com/quicktime/tutorials/embed2.html
WindowsMedia: http://msdn2.microsoft.com/en-gb/library/aa392321.aspx
Real: http://service.real.com/help/library/guides/realonescripting/browse/htmfiles/embedint.htm#20984
jmedia detects the plugin type via the file's extension.
The following file extensions are implemented:
Plugin name file extension
flash .swf
quicktime .mov
real .ram, .rm
wmedia .asx, .wmv
shockwave director .dcr

Caveats

  • Plugin detection and embedding works only if javascript is activated. Without Javascript or without the plugin of the required version the original markup remains untouched and therefor accessible. Read why nonetheless this is the best method for embedding multimedia.
  • No support for IE/Mac and non-w3dom Browsers.
  • Only a basic plugin detection but no version detection is possible for WindowsMedia Plugin on non-IE Browsers. But the script also checks for GeckoActiveX-Plugin on Gecko/Win Browsers, where version detection works.
  • In sifr-mode: Multiple or nested links won't get translated properly into the flash movie. Keep your markup simple.
  • Using the ExpressInstall Option with Flash (flashXI:true) can cause a weird javascript popup, if the user has a flash plugin greater or equal than 6.0.65 but lesser than required, depending on the security settings of the already installed plugin.

heavily inspired by...

nach oben

0.036 sec.