Saket Jajodia

Tecko Blog..!!

Follow me on Twitter @

How To Use And Earn From JW Player In Your Blogger.com Blog

[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.

LongTail Video logo

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('http://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 ');
  • Change UA-XXXXXXXX-XX whit your Google Analytics ID
  • Change VIDEO_URL with your video URL (or you can also use YouTube video URL)
  • Change PREVIEW_IMAGE with your preview image URL (Preview image will show before video start getting played).

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.

Comments

  1. 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"/>

  2. pooja says:

    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

  3. Its not showing Adsense ads its Longtail Video AdSolution…

  4. dave says:

    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!

  5. @pooja and @ramya will surly publish an article on by Wednesday or Thursday, OK?

  6. ramya says:

    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

  7. @pooja and @ramya Here is your tutorial on Create Playlist Using JW Player In Blogger.com<br />http://jajodia-saket.blogspot.com/2010/12/how-to-create-playlist-in-jw-player.html

  8. pooja says:

    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?

  9. Myron says:

    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.).

  10. Myron says:

    I have the video embedded and working with this code I found on another site:

    <embed allowfullscreen="true" allowscriptaccess="always" bgcolor="undefined" flashvars="file=http://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&quot; 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.

  11. Myron says:

    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

  12. Myron says:

    The JS code is in the head tag:
    <script src='http://jajodiasaket.googlecode.com/files/jwplayer-5.9.js'/&gt;
    <script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'/&gt;
    </head>

    Youtube video url: http://www.youtube.com/watch?v=BsdKGEgPwR0

    Does it have to have the image URL before it will do anything?

  13. Myron says:

    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.

Reply

Please use your original name while commenting, Thank you..!!








Designed by Blogger Templates and Blog and Web