[This article was updated on 6th February, 2012]
Few days back one of my reader asked me how I use JW Player in my blog as he also wanted add JW Player to play videos in his blog, then I thought to write an article on it so everyone can learn about it. LongTail Video is a leading company behind the JW Player.
Here are the following steps to get JW Player for your Blogger.com blog
- Go to Blogger.com –> Click on Template from drop-down for the following blog –> Edit HTML
- Find the </head> tag
- Just before the end of head tag place the below code
<script src="http://jajodiasaket.googlecode.com/files/jwplayer-5.9.js"/>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"/>- Now place the below code were you want to display your JW Video Player (e.g.: in your blog post)
<div id="jwplayer1">
<script type="text/javascript">
var so = new SWFObject('https://player.longtailvideo.com/player.swf', 'jwplayer1', '500', '405', '8');
so.addParam('allowscriptaccess', 'always');
so.addParam('allowfullscreen', 'true');
so.addParam('wmode','transparent');
so.addVariable('plugins', 'ltas,gapro-1,googlytics-1,fbit-1');
so.addVariable('ltas.cc', ' ADSOLUTION_ID ');
so.addVariable("gapro.accountid","UA-XXXXXXXX-XX");
so.addVariable('width', '500');
so.addVariable('height', '405');
so.addVariable('file' , 'VIDEO_URL&image=PREVIEW_IMAGE');
so.write('jwplayer1');
</script>
</div>- Change the following things before you place the code:
- Change The LongTail Video AdSolution ID
Change the ADSOLUTION_ID with your LongTail Video AdSolution ID. In case if you don’t have the AbSolution ID then you can sign up for free, to signup Click Here . Or if you don’t want to show ads in your player just remove that entire line (also mentioned below)
so.addVariable('ltas.cc', ' ADSOLUTION_ID ');There is a facebook share button plug-in I have given if you don’t want it then simply remove this code ,fbit-1 from this (7th) line so.addVariable(‘plugins’, ‘ltas,gapro-1,googlytics-1,fbit-1‘); .
Note: If you want to add two or more player in one page then change the ID in each player. All you need to do is change 1 in jwplayer1 (you will find it in 1st, 3rd and from 13th line) with 2 for 2nd player, 3 for 3rd player and so on
Here is a demo of JW Player
If you are having problem in viewing the videos Click here.If you have any questions or problems please comment below.
embed src="http://www.jeroenwijering.com/embed/player.swf"width="500"height="340"allowscriptaccess="always"wmode=”transparent”ltas.cc=” Long tail ad code”gapro.accountid=” GOOGLE ANALYTICS CODE”allowfullscreen="true"flashvars="height=340&width;=500&file;= Your URL HERE &searchbar;=false&smoothing;=false"/>
how to create playlist of songs in jw player? and how to create pplayist of xml file? and can u say me about google code and how to use and store
Its not showing Adsense ads its Longtail Video AdSolution…
Great article, thanks!
Is it again youtube/adsense TOS to show an adsense ad as preroll over a youtube video embedded in jw player? Cheers!
@pooja and @ramya will surly publish an article on by Wednesday or Thursday, OK?
how to create playlist of songs in jw player?
how to create xml playlist and to use google codes and please say me procedure for jw player for the blogspots
@pooja and @ramya Here is your tutorial on Create Playlist Using JW Player In Blogger.com<br />https://jajodia-saket.blogspot.com/2010/12/how-to-create-playlist-in-jw-player.html
do we need to buy the licence for the jplayer if we are running other ads on our blog before joining longtail adsolution as it is read on there website that one can only use for non Commercial websites only?
No, I didn't bought nay licence to use it.. Now it depends for what purpose you are using it..
Are there any other steps? It's not working for me. I pasted the code right before the </head> tag and the other code in my post and changed video_URL to the video's url. I don't want the ads, so I left the other things alone.
I can view JW Player in your blog but as I can see you are trying to add RTMP URL which is not supported by this code, this code can only support YouTube videos or direct Video URL (like: MP4, AVI, etc.).
This is the url I'm trying to use: https://www.youtube.com/watch?v=BsdKGEgPwR0
YouTube doesn't allow to embed that video.
I have the video embedded and working with this code I found on another site:
<embed allowfullscreen="true" allowscriptaccess="always" bgcolor="undefined" flashvars="file=https://www.youtube.com/watch?v=BsdKGEgPwR0" height="290" id="single2" name="single2" src="https://1107640872311964510-a-1802744773732722657-s-sites.googlegroups.com/site/knglerxst/player.swf?attachauth=ANoY7cpds0k1RiESAW1dI5J0dLmkHCmHV1FBI4WDYNwyNxtFe6SwSbQrBGYGmnpw9pxUGAaBYjHd0goBeGqHcMVps6B88VwMTfWIIa-v5wxcRkzQLe78Dw-JRKNxspqkw2noQ4Hbjqe2TvS6FCyRkIXUW7JUXpBV20ENB0S03rnFy7suTkCvCYCNboZFBws3OQDmbmM0qr_u&attredirects=0" width="470" wmode="transparent"></embed>
Here is the link to the post on my blog: http://myronblack.blogspot.com/2012/02/var-so-new-swfobjecthttpplayer.html
The problem is I want to be able to share the video on Facebook, but using this code it will only share the link to my blog post, not the video itself. That's why I want to use your code and get it working because of the Facebook plugin feature.
1st embed video using the code given in my blog and then let me see where is the problem.
When I paste the code in my post HTML, it doesn't display anything. It looks like this: http://myronblack.blogspot.com/2012/02/var-so-new-swfobjecthttpplayer_22.html
You haven't given video URL, img URL, also didn't added that JS code which I told to add in head tag..
The JS code is in the head tag:
<script src='http://jajodiasaket.googlecode.com/files/jwplayer-5.9.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'/>
</head>
Youtube video url: https://www.youtube.com/watch?v=BsdKGEgPwR0
Does it have to have the image URL before it will do anything?
No, image URL is not impotent, its up to your wish.
Do you know how to take an embedded video on your blog and embed it to Facebook? I know you have to use Facebook OpenGraph metatags between the head tags in the Blogger template, but I can't get it to work.
Its v.difficult in Blogger..!!