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:
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.
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:
The exact codes for above video:
How do you like this?
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:
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
</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
</script>
How do you like this?
sumber:
http://www.bloggerjourney.com/2013/01/how-to-embed-jw-player-in-blogger-to.html
