LongTail Community Blog

Using the JW Embedder to Embed Your Player

Prior to the JW 5.3 release, the most common methods used to embed the JW Player on your website were object/embed code and swfobejct (1.5 or 2.X). With the release of JW 5.3, we also introduced our own embed method, the JW Embedder, referenced as jwplayer.js. We recommend the JW Embedder when you’re looking to achieve the following:

Seamless failover between the Flash and HTML5 players.
Automatic integration with the JavaScript API.

This blog post is going to cover how to use the JW Embedder. Note that if you are familiar with the swfobject 2.X embed method, you will notice some similarities.

Let's get started...

Here is a basic player setup using jwplayer.js:

<script type="text/javascript" src="jwplayer.js"></script>
<div id="thePlayer"></div>
<script type="text/javascript">
    jwplayer("thePlayer").setup({
        flashplayer: "player.swf",
        file: "file.mp4",
        height: "270",
        width: "380"
    });
</script>

Now Let's break this down, line by line:

<script type="text/javascript" src="jwplayer.js"</script>
This line should point to the location of jwplayer.js on your server. If you do not include this line, or you are pointing to the jwplayer.js file incorrectly, the JW Embed method will not work.

<div id=" thePlayer"></div>
Next, you have a div tag, with an id of thePlayer. This is a basic html tag, with an ID where you specify the ID in your actual embed of the player itself. This div will be completely replaced by the player.

<script type="text/javascript">
Next line represents the actual player embed itself, enclosed in a script tag.

jwplayer("thePlayer").setup({
The first line within the enclosed script tag sets up the JW Player embed, with the ID named "thePlayer" (You'll recall that we named our <div> with an id of thePlayer. Thus, the player will set itself up there. Again, this div will be completely replaced by the player.
flashplayer: "player.swf"
The second line within the enclosed script tag specifies where the jwplayer swf file exists on your server (i.e. the player itself). This .swf is needed to play flash files (.flv), as well as for Flash failback.
file: "file.mp4"
The third line points to the location of the actual video file that you want to play within your player, i.e. the location on your server where the video file is saved.
height: "270",
width: "380" The final parameters set the height, and the width of the player. You will notice that the last line does not have a comma after it, and this is because it is the last attribute used in the embed. If you have any additional variables to add, such as plugins, or autostart, etc, you would add a comma to this line, and continue adding variables until you are finished.

});
Closes the setup variables you’ve defined.

</script>
Finally, the entire embed is closed out with an ending tag.

I hope this blog post helped explain how to embed the 5.3 player using the new jwplayer.js embedding mechanism. Happy embedding!

Posted by Ethan Feldman on December 03, 2010

Comments

Any estimated time on when the WordPress addon will be updated to take advantage of this? Thanks!

Submitted by David C. on Sat, 2010-12-04 16:30.

@David C - The plugin already supports this :) - http://wordpress.org/extend/plugins/jw-player-plugin-for-wordpress/

Submitted by Ethan LongTail on Mon, 2010-12-06 00:30.

Do you have any step by step instructions on how to add a video to my wordpress website?

I installed the lastest plugin 5.3 and activated it, but no instructions???

I came here...copy and pasted the code I found above...

into my post...I changed the "file.mp4" to the actual url of my video on s3...

Still does not show or play on my site after updating post.

Surly you have simple instructions somewhere and I just can't find them.

Your assistance would greatly be appreciated!

Thanks,
Burt

Submitted by Burt on Sun, 2010-12-12 00:46.

Hi Burt,

Can you please email me a link to where you are trying to run this? my email is ethan [at] longtailvideo [dot] com, thanks.

Best,
-Ethan

Submitted by Ethan LongTail on Sun, 2010-12-12 23:20.

Still no example of how to set plugin values, from trial and error, I think this works:

<script type="text/javascript" src="jwplayer.js"></script>
<div id="thePlayer"></div>
<script type="text/javascript">
    jwplayer("thePlayer ").setup({
        flashplayer: "player.swf",
        file: "file.mp4",
        height: "270",
        width: "380",
        plugins: 'gapro-1',
	'gapro.accountid': 'UA-xxxxxx-1',
	'gapro.trackstarts': true
    });
</script>

Hopefully you can update your documentation...

Submitted by Spodnet on Tue, 2010-12-14 06:29.

Theres an errant space in the code above by "the player "

The code below works

Submitted by Emma Kane on Tue, 2010-12-14 07:35.

Thanks Emma :)

@Spodnet - If you are having issues, email us a link, thanks.

Submitted by Ethan LongTail on Tue, 2010-12-14 14:42.

Ethan, will it auto adjust itself to look like a trim audio player, if an mp3 file target is placed in the
file:"file.mp4" part of the code?
Thanks!

Submitted by Sunlover on Wed, 2010-12-15 11:32.

It will not auto adjust. You will need to set your height accordingly.

Submitted by Ethan LongTail on Wed, 2010-12-15 15:48.

Hi -- I purchased a commercial license for JW Player.

Questions on this thread:

How do I define a .jpg poster image within the JW Embedder code? and will that poster image be used as the "poster" image in the HTML5 fallback?

Thanks!

Submitted by Mike P. on Thu, 2010-12-16 18:57.

@Mike - Under:

file: "file.mp4",

Add:

image: "image.jpg",

It will show up as the poster image.

Submitted by Ethan LongTail on Thu, 2010-12-16 19:05.

@Ethan -- It's all working. Thanks!

Submitted by Mike P. on Thu, 2010-12-16 19:29.

Np! :-)

Submitted by Ethan LongTail on Thu, 2010-12-16 19:43.

Ethan:

In your post above you make reference to the autostart plugin, as "...additional variables to add, such as plugins, or autostart, etc," but the autostart plugin doesn't work in version 5.3.
I do wish an effort would be made to update this very important plugin. Otherwise, what is the point in having a so-called updated JW Player which does less than previous versions? It's not exactly an encouragement for anyone to purchase a license for it.

Thanks,

Jeremy

Submitted by Jeremy on Fri, 2010-12-17 04:24.

@Jeremy - I mention autostart, which is a flashvar for the player.

From - http://developer.longtailvideo.com/trac/wiki/Player5FlashVars:

autostart (false): Set this to true to automatically start the player on load.

Yes, you are right that the AutoStarter plugin - http://www.longtailvideo.com/addons/plugins/98/Autostarter?q=, is not v5 compatible, but hopefully there will be a version of this as a JS plugin in the future.

Submitted by Ethan LongTail on Fri, 2010-12-17 16:42.

Thanks for your reply Ethan.

I was referring to the autostart plugin, not the flashvar. Unfortunately when the flashvar is set to "true," a musical selection plays every time a page loads. Whereas the plugin could limit the number of times a selection plays. For musical websites, one play at page load is important, but continual plays at every page is distracting and creates an unneeded redirection of overall focus.

Thanks,

Jermey

Submitted by Jeremy on Fri, 2010-12-17 17:16.

Thanks Jeremy. I understand the use of the Autostarter plugin, and hopefully a new version of this plugin can be released soon.

Submitted by Ethan LongTail on Fri, 2010-12-17 17:22.

Thanks for the good news Ethan. Looking forward to its release.

Submitted by Jeremy on Sat, 2010-12-18 02:23.

hmmmmm,

sorry, but is really hard to understand.
you must put an real example, with real serveur name, etc..

so, i will continue to try to decode all that

Submitted by Laurent on Sat, 2010-12-18 14:27.

@Jeremy - Np!

@Laurent - We have an example of the JW Embedder in action here - http://www.longtailvideo.com/players/

Submitted by Ethan LongTail on Mon, 2010-12-20 02:51.

I still can't get the events to work (neither in the latest FF or the latest Safari version)....
Shouldn't this just work fine?!?

<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
			file: '../js/jw-player/temp/video.mp4',
			flashplayer: '../js/jw-player/player.swf',
			height: 200,
			width: 328,
			events: {
				onReady:	function() { alert('ready!!!!'); }
			}
		});
</script>

Submitted by Lorenz on Wed, 2010-12-29 21:38.

That should work. Can you email support [at] longtailvideo [dot] com a link to where you are running this?

Submitted by Ethan LongTail on Thu, 2010-12-30 00:59.

I've recently noticed that the problem only exists while developing offline.
A mail with my sourcecode should be in your inbox right now ;-)

Thanks.

Submitted by Lorenz on Thu, 2010-12-30 10:51.

Great, thank you. Np!

Submitted by Ethan LongTail on Thu, 2010-12-30 14:11.

Am I to understand that Auto Start does not work on this newer version of the player?

Submitted by Rick on Mon, 2011-01-03 01:39.

so.addVariable('autostart','true'); does not work.

Submitted by Rick on Mon, 2011-01-03 01:41.

Never mind, figured it out. autostart: "true" works.

Submitted by Rick on Mon, 2011-01-03 01:43.

Glad you got it to work Rick! :) Yes, the new embedder uses different syntax to embed the player, so that is why you were most likely having the issues.

Submitted by Ethan LongTail on Mon, 2011-01-03 11:50.

Hello Ethan:

Any news yet on the autostart plugin to be able to set the number of auto plays?

I find even my own music becomes very annoying when it autostarts at every page load.

Thanks

Submitted by Jeremy on Mon, 2011-01-10 20:09.

@Jeremy - We are working on JS plugins for the V5 player, and we plan on implementing a JS version of "autostarter"

Submitted by Ethan LongTail on Tue, 2011-01-11 13:09.

Thank you for the good news Ethan!

Submitted by Jeremy on Fri, 2011-01-14 04:55.

Np!

Submitted by Ethan LongTail on Tue, 2011-01-18 16:51.

Hi there... does the plugin support Playlists in Wordpress convertion to HTML5 as well?

Submitted by GUENTER on Sun, 2011-02-06 08:05.

Not yet, XML Playlists are not supported by HTML5.

Submitted by Ethan LongTail on Mon, 2011-02-07 02:03.

Hi there, iam using the jwplayer with a radio stream. I have skinned my own player and i am very happy how it all works on my front page of my wordpress blog. I have the radio actually different pages with the same themes in wordpress, but when i swith pages the player needs to be restarted again. is teher a way to implement any plugin in a way that the radio can continue playing without putting it in an iframe or using ajax when switching pages.

Thx in advance, Dirk

Submitted by Dirk van der Giesen on Wed, 2011-02-16 00:30.

@Dirk - You will need to put the player inside of a frame, unfortunately. There is no other way to do something like this.

Submitted by Ethan LongTail on Wed, 2011-02-16 12:22.

How do I use a variable from my javascript within the setup function to indicate the initial starting file. This needs to be dynamic for me - for example:

jwplayer("audio_player").setup({
flashplayer: "{site_url}jw/player.swf",
file: initial_song,
height: 0,
width: 0
});

Submitted by Mike Heavers on Sat, 2011-02-26 14:19.

@Mike - That code should work, please contact us with a link, if it is not working - http://www.longtailvideo.com/support/contact-us

Submitted by Ethan LongTail on Mon, 2011-02-28 00:30.

Hey Ethan, I'm trying to migrate from using object tags to the .js implementation for HTML 5, how do I specify flashvars generated with php in the javascript?

Cheers!

p.s. this link above is dead: http://developer.longtailvideo.com/trac/wiki/Player5FlashVars

Submitted by dave lawton on Sat, 2011-04-30 01:15.

Hi Dave,

The link has been updated to here - http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options

You should be able to specify flashvars in the format of:

'flashvar':'value',

Best,
-Ethan

Submitted by Ethan LongTail on Sun, 2011-05-01 22:51.

Awesome, thanks for the help!

I'm still having issues with the migration, specifically with the file variable, I'm using php to retrieve the video which is attached to the current post to use as the file in the player. It works fine in the non-html5 embed, but it gives me an access denied error when trying to use the JS player.

For example, this works fine (code is abbreviated):

<object>
[..]
<param name="flashvars" value="file=<?php echo urlencode(wp_get_attachment_url($videos[0]->ID)); ?>" />
[..]
</object>

But this throws a file access denied error to the front-end (again abbreviated):

<script type="text/javascript" src="jwplayer.js"></script>
<div id="thePlayer"></div>
<script type="text/javascript">
    jwplayer("thePlayer").setup({
        flashplayer: "player.swf",
        file: "<?php echo urlencode(wp_get_attachment_url($videos[0]->ID)); ?>"
});
</script>

Any idea about how to get around this or what's happening here?

Cheers!

Submitted by Dave Lawton on Thu, 2011-05-12 18:59.

Change:

file: "<?php echo urlencode(wp_get_attachment_url($videos[0]->ID)); ?>"

To:

file: "<?php echo urlencode(wp_get_attachment_url($videos[0]->ID)); ?>",
provider: "video"

Submitted by Ethan LongTail on Fri, 2011-05-13 19:21.

After some tinkering I've managed to get it working, it's not perfect yet but it does work.

1. I had to remove all urlencode() calls from my code when switching to the JS player, using the urlencode was causing the file not found errors and other errors wherever it was used.

2. As suggested above I had to change the way that plugins variables work from:
plugins: "blah",
plugin-variable1: "blah-variable"

to:
plugins: 'blah',
'plugin-variable1': 'blah-variable'

3. The main thing I cannot get working at all is the controlbar.position=over variable. When I use it in the JS player the player doesn't even display at all, I've tried:
controlbar.position: "over"
controlbar.position: 'over;
'controlbar.position': 'over'
All of which cause the player to just disappear. I'm having formatting issues with the JS player and I'm pretty sure it's because of this variable missing. Any idea how I can get it to work?

Thanks!!
Dave

Submitted by Dave Lawton on Wed, 2011-05-18 17:35.

oops typo on the second example of controlbar.position, should be:
controlbar.position: "over"
controlbar.position: 'over'
'controlbar.position': 'over'

Submitted by Dave Lawton on Wed, 2011-05-18 17:36.

@Dave - Please email us a link so we can troubleshoot it, thanks.

http://www.longtailvideo.com/support/contact-us

Submitted by Ethan LongTail on Wed, 2011-05-18 17:44.

How can i align this to center

<body class="arka_plan">
<p style="text-align:center; font-size:48px; color:#fff; font-family:'Arial Black', Gadget, sans-serif">Erişim Yasak</p></td>

<div id="container">Loading the player ...</div><script type="text/javascript"> jwplayer("container").setup({ flashplayer: "http://10.0.0.166/infodif/jwplayer/player.swf", file: "http://10.0.0.166/infodif/jwplayer/the-beginning.flv", height: 450, width: 600 });</script></div>

</body>

Submitted by syilmaz on Mon, 2011-10-31 11:33.

Change:

<div id="container">Loading the player ...</div>

To:

<div align="center"><div id="container">Loading the player ...</div></div>

Submitted by Ethan LongTail on Mon, 2011-10-31 13:46.

Hi, I can't get a video uploaded in wordpress with this JW player plugin, please help I can't get my video upload in this thing right away

Submitted by Claude on Sat, 2012-02-25 00:29.

Email us a link - http://www.longtailvideo.com/support/contact-us

Submitted by Ethan LongTail on Sun, 2012-02-26 01:36.

Just wrote error 1090 playlist can be loaded
Where i wrong

I need help. I work on site to deal with movies online but do not know how to configure java player. I need a player that played movies from gorilavid, putlocker etc. ... and to have a translation( CC). I really need help. Go crazy, I tried everything and I do not know what I need to do.

Submitted by donce on Tue, 2012-02-28 11:15.

Email us a link - http://www.longtailvideo.com/support/contact-us

Submitted by Ethan LongTail on Tue, 2012-02-28 14:21.

Is there yet a way to support playlists in HTML5?

Submitted by Emma Kane on Tue, 2012-03-20 07:45.

Playlists have been supported in HTML5 mode (mRSS) since 5.7!

Submitted by Ethan LongTail on Tue, 2012-03-20 15:23.

Hi Ethan,

The embed code works fine in all browsers except in IE9 (64-bit).

In IE9 (64-bit) HTML 5 video playback is not supported by default but there should be a fallback to flash.

In IE9 JW Player not falling back to flash if HTML 5 video playback is not supported.

Please help .

Regards
Rohit Tailor

Submitted by Rohit Tailor on Wed, 2012-03-21 02:52.

@Rohit - Contact us please - http://www.longtailvideo.com/support/contact-us

Submitted by Ethan LongTail on Wed, 2012-03-21 14:12.

How do you use the JW Embedder for rtmp streaming? It works well for http download option for .flv and .mp4 files. But when using this method

For RTMP streaming this works well:

<div id="myvideo"></div>
<script type="text/javascript">
var so = new SWFObject('/images/js/jwplayer/5.9/player.swf','playerID',854,480,'9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wMode','opaque');
so.addVariable('provider', 'rtmp');
so.addVariable('streamer', 'rtmp%253A%252F%252Famazonimdb.fcod.llnwd.net%252Fa2643');
so.addVariable('file', '%252Fo25%252Fs%252Ftheaters%252FMV5%252FBMj%252FIwM%252FDE0%252FMV5BMjIwMDE0MzkwOF5BNl5BZmx2XkFtZTcwMzI0MDE2Nw4040%253Fe%253D1333734014%2526h%253D34aa47f1a55550e50ba2f74bb19bb2e5');
so.addVariable('autostart', 'true');
so.addVariable('image', 'http%3A%2F%2Fia.media-imdb.com%2Fimages%2FM%2FMV5BMjI5NDU1MzgzOV5BMl5BanBnXkFtZTcwNDI0MDE2Nw%40%40._V1_.jpg');
so.addVariable('enablejs', 'true');
so.write('myvideo');

This does not work when trying to use JW Embedder for rtmp streaming:

self._player = jwplayer("imdb-video").setup({
'width': 854,
'height': 480,
'allowfullscreen' : 'true',
'autostart' : 'true',
'provider' : 'rtmp',
'streamer' : 'rtmp%253A%252F%252Famazonimdb.fcod.llnwd.net%252Fa2643',
'file' : '%252Fo25%252Fs%252Ftheaters%252FMV5%252FBMj%252FIwM%252FDE0%252FMV5BMjIwMDE0MzkwOF5BNl5BZmx2XkFtZTcwMzI0MDE2Nw4040%253Fe%253D1333734014%2526h%253D34aa47f1a55550e50ba2f74bb19bb2e5',
'image' : 'http%3A%2F%2Fia.media-imdb.com%2Fimages%2FM%2FMV5BMjI5NDU1MzgzOV5BMl5BanBnXkFtZTcwNDI0MDE2Nw%40%40._V1_.jpg',
'modes': [
{ type: 'flash', src: '/images/js/jwplayer/5.9/player.swf' },
{ type: 'html5' }
]
});

Can you please suggest how to get rtmp streaming to work correctly with JW Embedder?

If that is not an option, how do I use the player's JS API with SWFObject 1.5 embedder?
Specifically I wanted to used OnPlay and OnComplete methods.

Submitted by JV on Fri, 2012-04-06 05:15.

You do not need to have your URLs encoded when using the emebdder.

Submitted by Ethan LongTail on Sat, 2012-04-07 17:33.

Can someone PLEASE just post the most basic requirements for a plain vanilla HTML page in which to embed a video? I am technically inclined, but not a programmer! Here is a link to the page I am working on. ALL I want to do is simply embed my video onto this page, centered. That's it! Thanks

http://loganstout.info/test/

Submitted by RTC on Sun, 2012-05-06 19:15.

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12538/supported-player-embed-m...

Submitted by Ethan LongTail on Mon, 2012-05-07 00:01.

Have been following all discussions on trying to center player 5.9 version but not success. The example given for such by a monitor was: http://www.longtailvideo.com/players/

Can you provide the code used to display the first file which appears centered on the page?

Submitted by Dr Burdi on Mon, 2012-05-28 18:42.

You can do this with the following:

Submitted by Ethan LongTail on Mon, 2012-05-28 19:34.

Thank you, that works.

Now I want the stop/start tool bar to come up but can't get it. Here is my simple coding using 5.9 JW player embedder.

<div align="center"><div id="container">Loading the player ...</div>

Submitted by Dr Burdi on Mon, 2012-05-28 20:04.

Solved using the following coding:

<div align="center"; controlbar.position (bottom)><div id="container">Loading the player ...</div>

Now I want to generate a list of flv files so the viewer has a choice of which to view. Is that possible?

Submitted by Dr Burdi on Mon, 2012-05-28 20:16.

Great, glad you got it.

We don't have any generation scripts like that I'm afraid.

You can create a playlist do to this though - http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/24/creating-a-playlist

Submitted by Ethan LongTail on Tue, 2012-05-29 13:07.

The following is my piece of code:

<script type='text/javascript' src='http://mysite.com/media/jwplayer.js'></script>
	<div id='container'>Loading the player…</div>
	<script type='text/javascript'>
	jwplayer('container').setup({
	flashplayer: 'http://mysite.com/media/player.swf',
	file: '<?php echo $part2;?>',
	autostart: 'true',
	controlbar: 'false',
	height: 421,
	width: 750
	});
	</script>

It works fine in desktop or laptop but when I tried it in Android phone,

1) it won't be able to autostart the video.
The loading/buffering icon (don't know what is it called exactly..you know that thing that keep on going around) never stop running. But when I click on it, it stop running and give me the play button. When I click on the play button, it start playing the video.

2) Controlbar still show up even it's set to false.

3) I have also tried to remove the autostart and put in an image. The image didn't show up in Android but it did in my laptop.

Anyone has any idea how to fix them?

Thx

Submitted by Donna Chan on Thu, 2012-11-08 02:34.

Donna - Please send us a link to where this is happening, thanks.

Submitted by Ethan LongTail on Thu, 2012-11-08 12:43.

Post new comment

JW Player

Video Platform

Video Ads

AdSolution

Company

Support: JW Player

Support: Video Platform

Quick Links

Stay in Touch

+ Add LongTail Video to your circles

Sign Up for Our Newsletter

Receive our monthly news and views, right in your inbox. Our newsletter covers updates to the JW Player and analysis of the video industry at large.

Recent News

JW Player in Forbes
Dave Otten, LongTail Video CEO, shares the great start-up story behind JW Player with Forbes.
More Here April 5, 2013