|
|
INDEX F.A.Q. SEARCH LATEST POSTS
Rules Register Profile Private messages Login
| Author |
Message |
Baldrick
Administrator
Joined: 09 Aug 2000
Location: Sweden
|
|
This basic guide will show you the steps how to convert any video to high quality flash video, MP4 with H264 and AAC audio, and put it on your website with a flash video player. Using free software only.
Software
HandBrake (Free)
JW FLV Media Player (Free for personal use)
Preparation
You can check how it will look like in the example below here, if it wont work be sure to update the Adobe Flash Player here.
If you are going to convert from a commercial DVD then rip it to the HDD using DVDFab Decrypter first.
Install HandBrake.
Convert
Open the source video in HandBrake. Click on Source->Video File to open most video formats and Video->DVD to open a DVD or DVD folder on your HDD.
Choose the Basic->Classic Profile
Set the Format to MP4
Set the Destination output file.
Set Web Optimized and the mp4 will start play directly in flash.
Set the Video Frame size, like 640x. Change the Anamorphic to None to change to a custom size or Loose to just adjust the width and the height will be automatically calculated.
Set the Video codec to H264 under the Video tab.
Set the Target size in MB, about 3-5MB/minute for 640x480 video or 10MB/minuter for HD video(1280x720). Easiest is to test different sizes and see how it looks like. You can also try use 2-pass encoding for a bit better quality but slower encoding or the Constant quality setting, you can't then set a file size but the quality will be based on the source file quality .
Set the Audio codec to AAC under the Audio & Subtitles tab.
Set the Audio bitrate to around 64kbits to 128kbits, higher bitrate = higher quality but it means you will get lower bitrate/quality for the video.
Hit Start to start convert! or add it to the queue and add more jobs and encode the entire queue.
Put the video on your site
Download JW FLV Player and extract the player.swf and swfobject.js and put on your site with the mp4 video you created above.
Add this code to your webpage that should display the video:
| Code: |
<p id='preview'>Error - You must you upgrade your flash player to see this video</p>
<script type='text/javascript' src='swfobject.js'>
</script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','640','360','9.0.115');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=test.mp4');
s1.write('preview');
</script> |
Replace test.mp4 with the filename of your video.
Replace the '640','360' with the resolution/frame size of your video.
Example
| Code: |
<p id='preview'><a href="http://www.adobe.com/go/getflashplayer" target="_blank"><u>Error- You must upgrade your Adobe Flash Player to see this video, upgrade here</u></a>.</p>
<script type='text/javascript' src='http://forum.videohelp.com/images/guides/355179/swfobject.js'>
</script>
<script type='text/javascript'>var s1 = new SWFObject('http://forum.videohelp.com/images/guides/355179/player.swf','player','672','376','9.0.115');
s1.addParam('allowfullscreen','true');s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=http://forum.videohelp.com/images/guides/355179/test.mp4&stretching=fill&image=flash.jpg');
s1.write('preview');
</script>
|
Error - You must upgrade your Adobe Flash Player to see this video, upgrade here.
Problems
Add an image to the flash player by adding the &image=flash.jpg to the flashvar setting,
| Code: |
| s1.addParam('flashvars','file=test.mp4&stretching=fill&image=flash.jpg') |
If you can't see the video in your web browser be sure to upgrade to latest Adobe Flash player(requires at least Flash Player version 9.0.115 or higher).
If you don't want any black borders in the player you can add &stretching=fill in the url to your mp4 file like http://www.site.com/folder/test.mp4&stretching=fill
If you put the player and video in different folders then add the complete url to to the code like,
| Code: |
<p id='preview'>Error - You must upgrade your flash player to see this video</p>
<script type='text/javascript' src='http://www.site.com/folder/swfobjects.js'>
</script>
<script type='text/javascript'>
var s1 = new SWFObject('http://www.site.com/folder/player.swf','player','640','360','9.0.115');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=http://www.site.com/folder/test.mp4');
s1.write('preview');
</script> |
If HandBrake wont work you can use other all-in-one h264 converters like Xvid4PSP,. StaxRip, Ripbot264, avidemux.
Last edited by Baldrick on Apr 20, 2009 11:39, edited 1 time in total
|
|
minidv2dvd
.com
Joined: 12 Jul 2008
Location: United States
|
|
baldrick - are the pictures covering up some text? the top of some letters look like they are poking up.
|
|
Baldrick
Administrator
Joined: 09 Aug 2000
Location: Sweden
|
|
minidv2dvd
.com
Joined: 12 Jul 2008
Location: United States
|
|
hehe - looks cleaner now. i've never tried handbrake myself, but it looks easier to use than some of the h(x)264 gui programs i've used. the video linked to www.site.com was interesting for awhile... 
|
|
zoobie
Cinematographer
Joined: 27 Feb 2005
Location: Colorado Rocky Mountains
|
|
Is "Web Optimized" code for deinterlacing?
Too tired to experiment at the mo...
The last JW player without the logo was 4.4.162 I think...probably some versions lying around at their site
_________________
Author, Producer, Composer, Director
HC5, HV20, A1 Hi8 Mark II, FS-1 SLR
"Shoot first and ask questions later" 
12 Handcoded Personal Sites: HTML, PHP, JS, CSS
In Production: Busker Alley
|
|
rtrens
Member
Joined: 27 Apr 2009
Location: Egypt
|
|
budwzr
Member
Joined: 03 Apr 2007
Location: United States
|
|
Baldrick, what do you think of FlowPlayer? They have a lot of free javascripts as well.
|
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You can vote in polls in this forum
|
|
