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
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>
</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>
<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>
<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?
This comment has been removed by a blog administrator.
ReplyDeleteReally explained very clearly.
ReplyDeleteThanks a lot. It was very helpful and i have done it so any one can do it.
Anil Upadhyay
can i add ads with the player ?
ReplyDeleteSure you can. Just join JW Player's publisher network.
Deletei love you my friend ..thanks for this information .
ReplyDeleteThanks for sharing this information.
ReplyDeletewill it support rtmp file
ReplyDeleteit's work thank you.
ReplyDeletebut im not satisfied jw player. if your video to long can't go foward before video loading.
I really thanks to sharing information...Your post code information very clearly.....
ReplyDeleteI really thanks to sharing information...Your post code information very clearly.....
ReplyDeletewhich is the best video hosting site? where can i upload my video files to add link to jw player?
ReplyDeleteI posted a follow-up for JW 6 Player:
ReplyDeletehttp://www.antifart.com/2014/02/06/jw6-html5flash-jw-player-6-self-hosted-setup-for-blogger-com-and-wordpress.html
can we add embed code to jw player
ReplyDeletehey do we need to add any files to the root of the website
ReplyDeleteNo extra work / codes needed. That's all. Enjoy !
Deletethanks for this information
ReplyDelete