Tutorial How to add my videos on my website? [Youtube Style]

Foto2avi is an freeware photo to video converter based on avisynth . It can create cool effects and it is an free video editor. It can handle videos too ! Specially designed for small videos that you can put them on Youtube

Moderators: george, Excalibur!, skyheartblue, roger_rabbit, reburn

Tutorial How to add my videos on my website? [Youtube Style]

Postby trustfm » Wed Oct 17, 2007 2:38 am

Tutorial How to add my videos on my website? [Youtube Style]

A lot of you might want to add some videos on our wesite.
There are basically two solutions

[hr]

A) Hosted by others
You can host an video made by Foto2Avi using free services like youtube.
Youtube allows videos up to 10mins and up to 100mb of size.
If 10 minutes for you are a little small then you can use Google videos that accept longer videos.
Youtube accepts any kind of videos and does itself the conversion (flv file) so you can setup Foto2Avi just like this :

Settings -> Output...
Image
The video once uploaded will be reconverted to flv so try to give an high bitrate (a lot of mb of filesize)
Notice that i kept avi as output

Once uploaded the video you should wait till youtube convert's it.
After a while you should get an Embed Code starting like this : "<object width=..."
Copy it and paste it to your webpage.
Here is an really easy HTML example :


Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Untitled</title>
</head>

<body>

This is my page ....

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/4elLMJ2YHIM"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/4elLMJ2YHIM" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>


</body>
</html>


Here is the example page : Click Here

This solution is pretty easy. You do not need hosting the file yourself .
It is an really cheap solution but youtube of any other service can delete
your file or youtube can be down for a while...

[hr]

B) Hosted by you
This is an more professional way to host your videos and stream them directly from your server.
In order to stream your video you must format it in flv.
So you have to setup Foto2Avi just like this :

Settings -> Output...
Image
Note that, since we will stream the resulted video by ourselfs, keep the file small you the quality that you want.
(The file won't be re-encoded like the case A)


Once we create our flv with Foto2Avi we need an Embeded flv player for our webpage.
I have found three free solutions for you
i)flowplayer
ii)jwflvplayer
iii)flvplayer

Flowplayer is a really good solution if you don't want an fullscreen option since in fullscreen mode puts an awful banner.
Jwflvplayer is an really nice solution but i found it kind of tricky and little difficult...
In this tutorial i will talk about the third solution (flvplayer) since i found it straight forward, easy and powerful at the same time !

Flvplayer comes to five flavors !
MINI
NORMAL
MAXI
MULTI
JS
I will talk about the maxi version of that player but you should keep an eye on all of them ! (They are pretty easy to configure !!!)

First of all we create an folder named "flvplayer"
Inside that folder we put:
-myvideo.flv (our video generated by foto2avi)
-player_flv_maxi.swf (download it for free from here )
-play.jpg (download it for free from here )

Now we create two empty txt files with notepad [always inside the folder "flvplayer"]:
-The first one will be our webpage that includes the video [example: maxi.html]
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Untitled</title>
</head>

<body>

<object type="application/x-shockwave-flash" data="player_flv_maxi.swf" width="420" height="320">
     <param name="movie" value="player_flv_maxi.swf" />
     <param name="allowFullScreen" value="true" />
     <param name="FlashVars" value="config=config.txt" />
</object>

</body>
</html>



-The second file must have the name "config.txt" (always inside the folder "flvplayer")
"config.txt" should look like this :
Code: Select all
flv=myvideo.flv
autoplay=0
autoload=1
title=My Video Title
srt=0
showstop=1
showvolume=1
showtime=1
showfullscreen=1
loop=0
startimage=play.jpg
ondoubleclick=fullscreen


Of course we can modify this file .
Learn how to modify it here
Keep in mind that 0=false 1=true


Here is the example page : Click Here

Download this example player : Click Here
trustfm
Site Admin
 
Posts: 1649
Joined: Sun Feb 27, 2005 4:40 pm

Return to Foto2Avi

Who is online

Users browsing this forum: No registered users and 1 guest

cron