jlEmbed is a plugin for jQuery, which makes it easier to add embedded media players to your webpage. With support for Adobe Flash, Quicktime, Real Player, Silverlight, Windows Media Player, and YouTube, you will no longer need to hard-code lengthy, cumbersome, and invalid HTML for your music or videos. jlEmbed also has built-in music playlist support, a customizable MP3, SWF, FLV, YouTube audio player, support for swfobject, YouTube videos, and custom YouTube video playlists.

Get the free plugin source by following the "Download" tab above!

As demonstrated below in my demo player, jlEmbed's YouTube API functions allow you to use the YouTube Javascript API and Chromeless YouTube player, giving you the power to create custom YouTube player controls and more!

Note: This is a demo only. This player is not included, but merely demonstrates what you can do with jlEmbed. However, if you're interested, I will sell copies.

With jlEmbed, you'll never receive HTML validation errors again from your Flash or other embedded media! jlEmbed helps keep your webpage validating properly even while using embedded media players!



jlEmbed also includes basic plugin detection which kindly links visitors to the appropriate plugin download page when a required plugin is not detected, or automatically loads the user's default media player plugin.

Embedding music or video on your webpage is a snap with jlEmbed!
$("#example-id").jlEmbed({
url: 'http://jasonlau.biz/public/mixdown.mp3'
});
That short, simple code installs the default Media Player with default options on the object example-id!

View an opensource example of how you can navigate a song array with jlEmbed.

Notice: Please report any bugs or errors by using the Contact Form. jQuery is required for jlEmbed to work. Be sure to include jQuery before attempting to include jlEmbed.
Source Code:	Version 4.9.5 Last updated 2/19/2010
Latest Version:	jlEmbed Latest - You may link to this version if you wish, but I can't guarantee 100% server uptime. Additionally, this version is subject to change without advanced notification.
Changelog:	4.9.5 - Fixed bug which caused YouTube player to not initiate playback when autostart option was set to true. 4.9.4 - Fixed bug which caused Real Player to not work in Firefox while using object only format. 4.9.3 - Fixed bug which caused Windows Media Player to not work in Firefox while using object only format. 4.9.2 - The last update didn't fix everything as I had thought. Had to go back and rearrange some code. 4.9.1 - Fixed autoplay and loop bug which caused autoplay and loop to not work. Updated documentation to reflect some of the recent updates. For example, all playlist links must be separated by a |pipe symbol. 4.9 - Fixed YouTube autoplay. 4.8 - Fixed swfobject params bug which caused an error when using params to set player parameters. YouTube wmode is now set to opaque by default to correct potential z-index issues. Now, the z-index for the YouTube player object can be set to allow other objects with a higher z-index to float on top of the video window. YouTube allowscriptaccess is set to always by default as this is required for javascript api interaction. 4.7 - Fixed YouTube player default volume and set to value of 100. 4.6 - Fixed private option youtubeapiid bug which caused SWFObject to reverse the order of multiple embedded videos because all instances of jlEmbed used the same SWFObject div id. Changed private option youtubeapiid to swfobjectuniqueid as it is a more accurately descriptive name. 4.5 - Added YouTube hidden field jlembed_yt_player_state_{playerId} for ease of event listening. Added YouTube hidden field jlembed_yt_loop_{playerId} Added YouTube hidden field jlembed_yt_playlist_{playerId} Added YouTube hidden field jlembed_yt_current_playlist_item_{playerId} Removed depreciated YouTube hidden field jlembed_yt_volume_{playerId} Changed span id's for YouTube debug output to include jlembed_debug_ prefix. All YouTube functions which did not previously return data now return a boolean value. To avoid confusion and errors, all playlist and titles array items should now be separated by a |pipe symbol where there was previously a space or comma. To avoid confusion and errors, all options which had string values yes and no are now boolean values true and false except the musicplayer options. youtube option now accepts a playlist consisting of |pipe separated YouTube video Id's. Added the option shuffle for YouTube playlist. loop option is now accessible to the YouTube player. 4.4 - Fixed SWFObject to work with all Adobe Flash when the format is set to swfobject. 4.3 - Changed function onYouTubePlayerReady to cue the chromeless player when autoplay is off. Added missing variable startSeconds to function cueVideoByUrl. Published jlEmbed YouTube demo page. 4.2 - Removed depreciated reference to jlembedplayer in YouTube functions. Removed depreciated function jlembed_clearVideo. 4.1 - Fixed bug in YouTube function jlembed_loadVideoByUrl 4.0 - Major version change. Added swfobject support, which can be accessed using the format option. Refer to the documentation for the format option. Added support and options for YouTube, a full array of YouTube javascript API functions , and YouTube chromeless player support. Added youtube, youtubekey, youtubechromeless, youtubevolume, youtubedebug, youtubedisplay, flash_version options. 3.1 - Fixed plugin detection bug. Defined default settings for a few options which were previously undefined. Changed default height to 45px from 48px. Fixed url and src option bug. Renamed base64 and utf8 encoding functions for compatability. Beautified code structure. Added YouTube support for the Flash music player. 3.0 - Numerous changes since the earlier versions. Added musicplayer, playlist, and titles options, which incorporate some of my other scripts into jlEmbed. Also, added this changelog to help keep track of what I've changed with each version.

Here is the complete list of jlEmbed's available options. Options define and control the behavior of jlEmbed.
An example of where options are used: Contents

• autoplay
• caption
• caption_class
• caption_id
• caption_style
• codebase
• flash_version 4.0+
• format
• height
• id
• loop
• musicplayer 3.0+
• params
• playlist 3.0+
• plugin
• pluginspace
• shuffle 4.5+
• src
• titles 3.0+
• url
• width
• youtube 4.0+
• youtubechromeless 4.0+
• youtubedebug 4.0+
• youtubedisplay 4.0+
• youtubekey 4.0+
• youtubevolume 4.0+

• autoplay : Automatically begin to play the first item when the page loads.
  • true
  • false (default)
• caption : A text string to be displayed directly below the media player. This option places the media player in a div container with the text placed below the media player. Disabled by default. Simply add text to enable this feature.
• caption_class : The css class used for the caption container.
• caption_id : A string identifier used for the caption container. "myCaption" is the default id.
• caption_style : The style attribute used for the caption container.
• codebase : Used to specify the Adobe Flash or Windows Media Player codebase.
• flash_version : A number used to specify the Adobe Flash Player version. Default is 10.
• format : The HTML code output format.
  • object
  • embed
  • objectembed (default)
  • swfobject (4.0+ adobeflash plugin only)
• height : The height of the player. 48 pixels is the default height.
• id : A string identifier for this object. "myMedia" is the default id.
• loop : Automatically restart when the playlist has completed.
  • true (default)
  • false
• musicplayer : This option installs a customizable Flash music player, which is generated and served from JasonLau.biz. Here is the music player which is used.
  The musicplayer option supports MP3, SWF, and formatted audio files and YouTube videos. Requires both playlist and titles options. See example.
  
  musicplayer Attributes
  • BGImage : Optional player background image. You may wish to hide the icons or dividers while using this feature. JPEG/JPG format only.
  • BackgroundColor : Player background color hex code. 6 characters with no leading # hash mark.
  • IconColor : Player control icons color hex code. 6 characters with no leading # hash mark.
  • IconActiveColor : Active icon color hex code. 6 characters with no leading # hash mark.
  • PlayIconActiveColor : Active play icon color hex code. 6 characters with no leading # hash mark.
  • StopIconActiveColor : Active stop icon color hex code. 6 characters with no leading # hash mark.
  • Icons : Display player control icons.
    • yes (default)
    • no
  • Dividers : Display dividers between control icons.
    • yes (default)
    • no
  • Fader : Optional color shifter for the player background.
    • yes
    • no (default)
  • Autoplay : Starts the player when the webpage loads.
    • yes (default)
    • no
  • Loop : Continuously plays.
    • yes (default)
    • no
  • Shuffle : Shuffle the playlist
    • yes (default)
    • no
      
      
  musicplayer Dependency Options - These options must also be used when using the musicplayer option
  • playlist : A list of links to audio files and YouTube videos. Each link must be separated by a |pipe symbol from the next link. MP3, SWF, or FLV formatted audio files and YouTube video links. Video will not be displayed.
    Example:
    
    playlist: 'http://Song-1-Link.mp3 http://Song-2-Link.swf|http://Song-3-Link.flv|http://www.youtube.com/watch?v=VicwLWPho08|http://www.youtube.com/v/VicwLWPho08'
  • titles : A list of track titles for each of the links in the playlist. Each title must be separated by a |pipe (vertical bar).
    Example:
    
    titles: 'Song 1|Song 2|Song 3'
    
    Be sure you have the same number of titles as you do links!
    Please refer to the examples.
• params : A list of any or all options and parameters to pass to the player. Each option or parameter must be separated by a space from the next. Leave this blank to use default options and parameters. This option can be used to define any or all of the jlEmbed options and plugin parameters.
  Example:
  params: 'url=myfile.mp3 width=300 height=40 plugin=windowsmedia autoplay=true loop=true'
• playlist : A list of links to audio or video files. Each link must be separated by a |pipe symbol from the next link. All media file types which are used in the same playlist must be compatible with the same plugin. Unless used with the musicplayer option, this feature creates a m3u formatted playlist, which is generated and served from JasonLau.biz. When used in conjunction with the musicplayer option, only MP3, SWF, and/or FLV formatted files and YouTube video links may be used. See example.
• plugin : The default browser plugin which will be used for this object.
  • adobeflash
  • quicktime
  • realplayer
  • silverlight
  • windowsmedia (default)
• pluginspace : Used to specify the Adobe Flash or Windows Media Player pluginspace.
• shuffle : Boolean. Strictly for use with the youtube option. Shuffles the youtube playlist if one exists. Version 4.5+
  • true
  • false (default)
• src : The resource link for the media file. Same as url. Can be used instead of url variable. No default.
• titles : Used exclusively in conjunction with the musicplayer option
• url : The resource link for the media file. Same as src. Can be used instead of src variable. No default.
• width : The width of the player. 300 pixels is the default width.
• youtube : A text string YouTube video ID. The YouTube video ID can be found in the video link. See the examples tab for more information on using YouTube. As of version 4.5, the youtube option accepts a playlist, which should be made up of a |pipe separated list of YouTube video id's.
  Example playlist: KTHFXeKLv6w|b6CywF3tnEI|Tja6_h4lT6A
  Example YouTube Id - In the following YouTub links, the video id is marked in bold - http://www.youtube.com/watch?v=VicwLWPho08 or http://www.youtube.com/v/VicwLWPho08
• youtubechromeless : Load the YouTube video in the chromeless player. The chromeless player has no visible controls. Use this option while creating custom controls.
  • true
  • false (default)
• youtubedebug : Displays some debug info below the YouTube video.
  • true
  • false (default)
• youtubedisplay : This controls the visibility of the YouTube player. The YouTube player is accessible for scripting even while hidden.
  • true (default)
  • false
• youtubekey : A text string YouTube Developer Key . Optional if you wish to use your own developer key. The default is the jlEmbed API key.
• youtubevolume : A number used to specify the default YouTube player volume. 0-100

jlEmbed includes an array of YouTube API functions to help you interact with the YouTube player and service.
These functions will help you create and control a custom YouTube video player.
Example: Below is a complete list of jlEmbed/YouTube API functions.

For a more detailed description of each function's purpose, please refer to this YouTube Javascript API Reference Page.

To see many of these functions in action, go to this example page.

Contents

• Queuing Functions
• Playing A Video
• Changing The Player Volume
• Setting The Player Size
• Playback Status
• Playback Quality
• Retrieving Video Information
• Adding An Event Listener
• Hidden Fields

Queuing Functions

• jlembed_cueVideoById(playerId,videoId, startSeconds, suggestedQuality)
• jlembed_loadVideoById(playerId,videoId)
• jlembed_loadVideoByUrl(playerId,video_url, startSeconds)

Playing A Video

• jlembed_playVideo(playerId)
• jlembed_pauseVideo(playerId)
• jlembed_stopVideo(playerId)
• jlembed_seekTo(playerId, seconds, allowSeekAhead)

Changing The Player Volume

• jlembed_mute(playerId)
• jlembed_unMute(playerId)
• jlembed_isMuted(playerId)
• jlembed_setVolume(playerId, volume)
• jlembed_getVolume(playerId)

Setting The Player Size

• jlembed_setSize(playerId, width, height)

Playback Status

• jlembed_getVideoBytesLoaded(playerId)
• jlembed_getVideoBytesTotal(playerId)
• jlembed_getVideoStartBytes(playerId)
• jlembed_getPlayerState(playerId)
• jlembed_getCurrentTime(playerId)

Playback Quality

• jlembed_getPlaybackQuality(playerId)
• jlembed_setPlaybackQuality(playerId, suggestedQuality)
• jlembed_getAvailableQualityLevels(playerId)

Retrieving Video Information

• jlembed_getDuration(playerId)
• jlembed_getVideoUrl(playerId)
• jlembed_getVideoEmbedCode(playerId)

Adding An Event Listener

• jlembed_addEventListener(playerId, event, listener)

Hidden Fields

jlEmbed includes some hidden fields which are intended to help you interact with the YouTube player and to navigate playlists. The hidden field id attributes are listed below with a brief description of their use. You can access the values of these fields easily with jQuery.
Example:

• jlembed_yt_video_url_{player id} :
  The URL address for the currently playing item.
• jlembed_yt_chromeless_{player id} :
  Is this the Chromeless player?
  • true
  • false
• jlembed_yt_autoplay_{player id} :
  Player autoplay setting.
  • true
  • false
• jlembed_yt_loop_{player id} :
  Player loop setting.
  • true
  • false
• jlembed_yt_player_ready_{player id} :
  Is the YouTube player ready for calls?
  • true
  • false
• jlembed_yt_player_state_{player id} :
  The current YouTube player state.
  • Unstarted (-1)
  • Ended (0)
  • Playing (1)
  • Paused (2)
  • Buffering (3)
  • Video cued (5)
• jlembed_yt_current_playlist_item_{player id} :
  The (interger) array index of the currently playing playlist item. 0 is the first item and it increments upward from there.
• jlembed_yt_playlist_{player id} :
  The current playlist.

Below are some examples which demonstrate different ways to use jlEmbed. Remember to include the latest version of jQuery in your document before including jlEmbed. For best results, check frequently for updates to jlEmbed and maintain a local copy of the current version.

Contents

• Including jQuery And jlEmbed
• Default Settings
• Extended Options
• Easy Options
• Playlist
• Music Player
• YouTube

• Including jQuery And jlEmbed - Before you can use jlEmbed, you must include jQuery. Here is an example of how to set up your document to use jlEmbed and jQuery.
  
  
  <!doctype html>
  <html>
  <head>
  <title>Your Webpage</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jasonlau.biz/javascript/jquery/plugins/jquery.jlembed.latest.js"></script>
  <script type="text/javascript">
  
  $(document).ready(function(){
  
  $("#example-div").jlEmbed({
  url: 'http://jasonlau.biz/public/mixdown.mp3'
  });
  
  });
  
  </script>
  </head>
  <body>
  <div id="example-div"></div>
  </body>
  </html>
  
  The jlEmbed code is contained within the jQuery code.
  // Initiate jQuery On Page Load
  $(document).ready(function(){
  
  // Begin jlEmbed Code
  $("#example-div").jlEmbed({
  url: 'http://jasonlau.biz/public/mixdown.mp3'
  });
  // End jlEmbed Code
  
  });
  // End jQuery Code
• Default Settings - This example installs the default Windows Media Player on the object example-id with the default settings. The url is optional, but there is no default media file.
  
  
  $("#example-id").jlEmbed({
  url: 'http://jasonlau.biz/public/mixdown.mp3'
  });
  
  
  
  
  If the browser does not have the required plugin installed, the user will be prompted to install the plugin or the computer's default media player will load in place. These results may vary depending on the user's computer settings.
  
  
• Extended Options - This is the long method for defining option values. This example installs Flash content on the object example-id.
  
  
  $("#example-id").jlEmbed({
  id: 'myMedia',
  plugin: 'adobeflash',
  url: 'your-flash-file.swf',
  width: 300,
  height: 48,
  loop: 'yes',
  autoplay: 'yes',
  params: 'allowscriptaccess=local allownetworking=local scale=showall quality=high flashvars= wmode=transparent quality=high', format: 'objectembed', caption: 'My Flash File', caption_style: 'width:308px; text-align:center; padding-top:10px; background-color:#CCCCCC; border:1px; color:#000000;' });
  
  
  
• Easy Options - The short method. Using the params option allows you to define any options values and player plugin parameters. Options and parameters are listed inline and separated from eachother by a space. This example installs Flash content on the object example-id. As you can see, the params option allows you to easily pass options and parameters to jlEmbed and to your media player. All of the options and browser plugin parameters can be defined using this method, provided there are no spaces in any of the values. Use %20 in place of spaces in values to avoid errors. In this example, the space in the caption option, Hello World!, has been properly replaced with %20 and is now Hello%20World!.
  
  
  $("#example-id").jlEmbed({
  params: 'id=myMedia plugin=adobeflash url=yourFlashFile.swf width=600 height=600 allowscriptaccess=local allownetworking=local scale=showall quality=high flashvars=&myvars=example& wmode=transparent quality=high caption=Hello%20World!'
  });
  
  
  
• Playlist - Version 3.0 and higher. The playlist option can be used to create a music and video playlist from a |pipe-separated list of links. The playlist links are encoded, sent to a script at JasonLau.biz, and converted to M3U format before being served back to the embedded media player. This is not compatible with Adobe Flash. Easy to use!
  
  
  $("#example-player").jlEmbed({
  params: 'id=myMedia plugin=windowsmedia width=300 height=48 loop=yes autoplay=yes',
  playlist: 'http://jasonlau.biz/public/mixdown.mp3|http://jasonlau.biz/public/mixdown.mp3|http://jasonlau.biz/public/mixdown.mp3|http://jasonlau.biz/public/mixdown.mp3'
  });
  
  
  The example above installs Windows Media Player on the object example-id and creates a playlist from a |pipe-separated list of media file links. The links must be the full path. Titles are not used in this case.
  
  
• Music Player - Version 3.0 and higher. The musicplayer option installs a customizable Flash music player, which is generated and served from JasonLau.biz. Supports MP3, SWF, and FLV formatted audio files only. No video. The musicplayer has it's own set of attributes, which are easy to use. When using musicplayer, you must also include the playlist and titles parameters. Be sure to have the same number of titles as you do playlist items! See the example below.
  
  
  $("#example-player").jlEmbed({
  musicplayer: 'BGImage= BackgroundColor=00248E IconColor=809FFE IconActiveColor=BFCFFE PlayIconActiveColor=33FF00 StopIconActiveColor=FF0000 Icons=yes Dividers=yes Fader=no Autoplay=no Loop=yes Shuffle=yes',
  playlist: 'http://jasonlau.biz/public/mixdown.mp3|http://jasonlau.biz/public/mixdown.mp3|http://jasonlau.biz/public/mixdown.mp3|http://jasonlau.biz/public/mixdown.mp3',
  titles: 'Mixdown 1|Mixdown 2|Mixdown 3|Mixdown 4'
  });
  
  
  
  Here is the music player which is used.
  
  This example installs the music player on the object example-player. I have included all of the available musicplayer options in this example. As you can see, the playlist and titles parameters have been included. The playlist links and the titles are each separated by a |pipe (vertical bar). There are no # hash symbols required for the musicplayer color hex codes. Spaces in the titles do not need to be encoded, however, some characters may not appear as intended. Titles are displayed in the right-click context menu for the music player.
  
  
• YouTube - Version 4.0 and higher. The youtube option installs the specified YouTube video on the object when a YouTube video id is present. As demonstrated below, the YouTube option will also accept a playlist consisting of a |pipe separated list of YouTube video IDs. There are no restrictions to the length of a playlist.
  
  
  $("#example-player").jlEmbed({
  youtube : 'UrVp2BMvtaU|Cw2HAD9A_rw|UrVp2BMvtaU'
  });
  
  
  The following is an example of installing 2 YouTube players on the same page.
  
  
  $("#example-player").jlEmbed({
  id : 'player1',
  youtube : 'Cw2HAD9A_rw',
  format : 'swfobject',
  autoplay : 'no',
  youtubechromeless : 'no'
  });
  
  $("#example-player2").jlEmbed({
  id : 'player2',
  youtube : 'VicwLWPho08',
  format : 'swfobject',
  autoplay : 'yes',
  youtubechromeless : 'no',
  youtubedebug : true,
  youtubedisplay : false
  });
  
  
  Once the YouTube player has loaded, you can call any of the jlEmbed/YouTube Javascript API Functions as in the following example.
  
  
  <a href="javascript:void(0)" onclick="jlembed_stopVideo('player1');">Stop</a>
  <a href="javascript:void(0)" onclick="jlembed_playVideo('player1');">Play</a>
  <a href="javascript:void(0)" onclick="jlembed_pauseVideo('player1');">Pause</a>
  <a href="javascript:void(0)" onclick="jlembed_loadVideoById('player1', 'Cw2HAD9A_rw');">Load A New Video</a>
  <a href="javascript:void(0)" onclick="jlembed_loadVideoByURL('player1', 'http://www.youtube.com/watch?v=VicwLWPho08');">Load A New Video</a>