Pages

Friday, January 4, 2013

How to Embed JW Player in Blogger to Play Flash/ MP4/ FLV Videos?

Sometimes you may want to play MP4 / FLV videos or SWF flash from Blogger (Blogspot.com), and wonder how to do it. It's not that hard- there are some good, free /open source video players available for you to use- JW Player (from Longtail Video) is one of those.

To use JW Player in Blogger, you just need to copy and paste the JW Player embed codes to posts, that's it.

But first, you need to add the  swfobject.js Javascript codes to the <head> section in your Blogger template.

Here's how and an example.

Add swfobject.js Javascript codes into template's <head> section

Before embedding any JW players on the Blogger post or page, make sure to include the swfobject.js script in the <head> section of your template HTML. You can leverage the copy provided by Google as in following:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>

To add above codes:

1. From the blog Dashboard, go to Template -> Edit HTML-> Proceed -> put a check mark in front of the the "Expand Widget Templates" option (details: same as the first 3 steps in this post)

2. On your keyboard, press the "Ctrl" and "F" keys at the same time to bring up the search box.

3. In the search-box, type in </head> to search. Right above the line of </head> , insert the above 2-line JavaScript codes.

Note: It's a one-time addition. Once it's added, you do not need to do this any more in the future when adding JW Player codes.

Embed JW Player codes in the post

You can start to embed JW Player now to any Blogger post or page, by adding following JavaScript codes to the place/position where the player need to be appeared.

To add the code, make sure to switch from Compose status  to HTML status in the post Editor window.

<Div id="video1">Please install the Flash Plugin</Div>
<script type="text/javascript">
  var flashvars = { file:'http://your-video-file-url-address.mp4', autostart: 'false' };
  var params = { allowfullscreen:'true', allowscriptaccess:'always' };
  var attributes = { id:'player1', name:'player1' };
  swfobject.embedSWF('http://player.longtailvideo.com/player.swf','video1','470','380','9.0.115','false', flashvars, params, attributes);
</script>

Note:

1. Replace the red color  http://your-video-file-url-address.mp4 with your video's real url web address. This is the only codes you need to replace before publishing the video.

2. The red color number 470 is the width of the JW player, in pixels. Note the JW Player automatically stretches itself to fit. You can change this to the size your want.

3. The red color number 380 is the height of the player, in pixels. Note the JW Player automatically stretches itself to fit.You can change this to the size your want.

4. In case you'd like to embed more than one JW players on one page, you can add the above codes multiple times, and make sure to change following 2 thing for each players:
- Change both two video1 to video2, video3 and so on, at same time
- Change both player1 to player2, player3 and so on, at same time.

Example

Here's an example by using above codes:

Please install the Flash Plugin


The exact codes for above video:

<Div id="video1">Please install the Flash Plugin</Div>
<script type="text/javascript">
  var flashvars = { file:'http://content.bitsontherun.com/videos/lWMJeVvV-364767.mp4', autostart: 'false' };
  var params = { allowfullscreen:'true', allowscriptaccess:'always' };
  var attributes = { id:'player1', name:'player1' };
  swfobject.embedSWF('http://player.longtailvideo.com/player.swf','video1','470','380','9.0.115','false', flashvars, params, attributes);
</script>

How do you like this?


6 comments

  1. Really explained very clearly and any one can do it.
    Thanks a lot.

    Anil Upadhyay

    ReplyDelete
  2. Really explained very clearly.
    Thanks a lot. It was very helpful and i have done it so any one can do it.

    Anil Upadhyay

    ReplyDelete
  3. Replies
    1. Sure you can. Just join JW Player's publisher network.

      Delete
  4. i love you my friend ..thanks for this information .

    ReplyDelete
  5. Thanks for sharing this information.

    ReplyDelete