VideoHelp.com forum archive
http://www.supermediastore.com/



Forum Archive Home -> User guides -> Flash with high quality video (MP4 with H264 video and AAC audio)



Flash with high quality video (MP4 with H264 video and AAC audio)
Baldrick posted 2008 Aug 13 18:23
This very 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
Xvid4PSP (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 Xvid4PSP.


Convert
Open the source video in Xvid4PSP. Click on Open to open most video formats and DVD to open a DVD or DVD folder on your HDD.
Choose MP4 under Format.


Choose x264 Q16 Turbo under Video Encoding. Click on the E to change advanced settings like the video bitrate that decides the output file size. Choose 1-pass(or 2-pass for even better quality but takes longer to convert) under Encoding mode and you can set the exact bitrate and get the desired output files(see the Output file size: in the screenshot below). Higher bitrate = higher quality =bigger output file size. If you don't need an exact file size then use Constant Quality / Quantizer mode.
Choose AAC-HE CBR 64kbit under Audio Encoding. Click on the E to change advanced settings like the audio bitrate that decides the output file size.


Choose Video->Resolution/Aspect ratio to change the resolution.
Set the Output resolution, higher resolution usually requires that you must use higher bitrate=bigger output file size.
Check so the output aspect ratio is similiar to input aspect ratio or it will look stretched.


Hit Convert.



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:
:
<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
:
<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');
s1.write('preview');
</script>

Error - You must upgrade your Adobe Flash Player to see this video, upgrade here.




Problems
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,
:
<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 Xvid4PSP wont work you can use other all-in-one h264 converters like StaxRip, Ripbot264, avidemux.













jmaytum posted 2008 Aug 21 01:38
How does this application compare to ON2's very awesome encoder?

Thanks in advance!



Baldrick posted 2008 Aug 21 02:04
I haven't compared the x264 converter with the on2 converter but I guess you should be able get similiar quality if you know how to configure correctly. I just want to show a free alternative to on2 and flash professional.


jmaytum posted 2008 Aug 25 22:11
I'm giving it a go.. thanks for the great guide.. I will let you know how I make out :) I would like to use this to replace ON2 hopefully and also to use it to encode video files for my Samsung Instinct!

Thanks again for the guide!



maxamillion posted 2008 Aug 27 03:39
I will try this as well in the next couple of days and report back


dsl225 posted 2008 Aug 28 14:27
Excellent guide, thx!

One point is not clear for the code.
You mention:
:
Replace the '640','360' with the resolution/frame size of your video.


After the size, what is the third figure standing for - resolution?
Sometimes you mention '9' and others '0'

If it's standing for the resolution how does this work?

thx



Soopafresh posted 2008 Aug 28 14:48
This is a great guide, Baldrick! :D


Baldrick posted 2008 Aug 28 14:56
dsl225 :
Excellent guide, thx!

One point is not clear for the code.
You mention:
:
Replace the '640','360' with the resolution/frame size of your video.


After the size, what is the third figure standing for - resolution?
Sometimes you mention '9' and others '0'

If it's standing for the resolution how does this work?

thx

It should be 9. It is the required flash player version. You can add 9.0.115 so you are sure the user has upgraded flash with h264 support (and add a link to the upgrade, see the example above)

See http://blog.deconcept.com/swfobject/



maxamillion posted 2008 Aug 31 00:17
why not use 2-pass encoding if you have the extra time = better quality video
this method works pretty well if your converting a shorter video, but not so good if your video is anything over a couple of minutes long



Captain Satellite posted 2008 Aug 31 06:43
Baldrick, What is this 'XviD4PSP 5.0 source code 28.02.2008' file and do I need to download and install it to use Xvid4PSP?


Baldrick posted 2008 Aug 31 06:50
maxamillion: Added that you can use 2-pass also.

captain satellite: Nope, you don't need the source code. Just http://download.videohelp.com/download/XviD4PSP_5034_full.exe :).



Captain Satellite posted 2008 Aug 31 06:57
Thanks!


Captain Satellite posted 2008 Sep 19 18:56
Baldrick, What would be the best settings for the ultimate quality video if time was not a concern, only best quality. Those settings worked great, just wondering if it could be even better.

Thanks for a great, simple to use guide!



waefwaeefwaefw posted 2008 Sep 30 01:17
Hey bro' How can I do this through Flash CS3?
I want to place a high quality video in my flash site.

Can you show me PLEASE??
Thanks.



FulciLives posted 2008 Sep 30 01:23
What a great guide !!!

Very kewl !!!

I'll have to try it :)

- John "FulciLives" Coleman



greymalkin posted 2008 Nov 14 14:07
I love the JW FLV player..I use it on my website with the playlist feature so people can view movies, images, and songs all from the same playlist.



Login/Register to our forum to be able to post here.








About   Advertise   Forum Archive   RSS Feeds   Statistics