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:
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>
How do you like this?
http://www.bloggerjourney.com/2013/01/how-to-embed-jw-player-in-blogger-to.html
.jpeg)
.jpeg)
.jpeg)
.jpeg)
