458
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
Contents
- Including jQuery And jlEmbed
- Default Settings
- Extended Options
- Easy Options
- Playlist
- Music Player
- YouTube
- Embedding Flash
- 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>The jlEmbed code is contained within the jQuery code.
<html>
<head>
<title>Your Webpage</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.jlembed.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>// 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 : false,
youtubechromeless : false
});
$("#example-player2").jlEmbed({
id : 'player2',
youtube : 'VicwLWPho08',
format : 'swfobject',
autoplay : true,
youtubechromeless : false,
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> - Embedding Flash – For best results and cross-browser compatibility while embedding Flash, use swfobject format. Additionally, you should give each instance of jlEmbed a unique id identifier by using the id option. Here is the best way to format jlEmbed when embedding Flash:
$("#example1").jlEmbed({Notice how the id option is used in the example. If I want to add additional Flash to the same webpage, I would make a unique id for each Flash movie.
id: 'myFlash1',
format: 'swfobject',
url: 'http://yourdomain/yourflash.swf',
width: 300,
height: 300
});$("#example2").jlEmbed({With a unique id, you can interact with your Flash movie using javascript, but only if your Flash was designed for it.
id: 'myFlash2',
format: 'swfobject',
url: 'http://yourdomain/yourflash.swf',
width: 300,
height: 300
});$("#myFlash1").stop();
$("#myFlash2").play();