Видео клип в уеб страница

В тази статия ще покажа как бързо и лесно да включиш филм в уеб страница на твоя сайт. Като резултат при зареждане на страницата се показва поле с избрана от теб картинка. При натискане върху картинката филма тръгва и след приключване отново се показва заглавната картинка. Статията е в две части:

I. част.  Компресиране на филм във flv формат

Преди всичко филма трябва да се обработи така, че размерът да е подходящ за уеб. Филм с продължителност една минута, който е свален от камера може да е десетки мегабайти. За да бъде подходящ за уеб страница трябва първо да се компресира и да се намали размера на екрана (ширина и височина). Целта е филма да стане под 10 МВ, за да се изпълнява бързо и да не забива браузъра на по-стари компютри.

Ето няколко варианта как да си направиш клип:

- Конвертиране на твой филм директно през уеб страницата media-convert.com.

- С десктоп програма под Windows компресиране на видео с безплатната програма VirtualDub или тази програма.

- Сайта animoto.com създава клип от снимки. С около 15 снимки можеш да направиш клип с продължителност до 30 сек. Може да избереш музика за клипа или да качиш твоя музика. След като филма е готов може да си го изтеглиш и да го качиш в твоя сайт.

- Под Linux имам инсталиран mplayer и mencoder и ползвам следните команди от команден ред (пишат се на един ред):

1. При компресиране на филм с формат 4:3

mencoder -forceidx -of lavf -oac mp3lame -lameopts abr:br=56 -srate 22050 -ovc lavc -lavcopts vcodec=flv:vbitrate=250:mbd=2:mv0:trell:v4mv:cbp:last_pred=3 -vf scale=440:330 -o out.flv in.mpg
от оригиналния филм in.mpg прави компресирано копие с име out.flv като променя размера на екрана ширина 440 и височина 330 точки, звука се кодира в mp3 формат. Ако искаш екрана да е по-голям, може да променяш размера като запазваш съотношението 4:3 например 640x480, но големината на файла ще нарасне.

2. При компресиране на филм с формат 16:9

mencoder -forceidx -of lavf -oac mp3lame -lameopts abr:br=56 -srate 22050 -ovc lavc -lavcopts vcodec=flv:vbitrate=250:mbd=2:mv0:trell:v4mv:cbp:last_pred=3 -vf scale=480:270 -o out.flv in.avi
тук оригиналния файл е in.avi, а изходния файл out.flv е с размер 480x270 точки. Може да опиташ по-голям размер като 640x360 точки.
Добре стига кодиране. Приемаме че файла out.flv има подходящ размер не повече от няколко мегабайта. Сега да го поставим в уеб плеър.

II. част. Качване на flv филм в уеб страница

В главната уеб директория създай директория video и качи в нея твоя филм out.flv и файловете https://ganbox.com/video/player.swf и https://ganbox.com/video/swfobject.js. Ако искаш качи и картинка, която ще се показва преди филма да бъде пуснат. Трябва да има същия размер като екрана. В този пример картинката има име logo.png.
В главната директория създай файла video.html със следния код:

<title>Видео клип</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<h1>Видео клип</h1>
<script type="text/javascript" src="/video/swfobject.js"></script>
<div id="mediaspace">видео</div>
<script type="text/javascript"><br />
  var s1 = new SWFObject('/video/player.swf',<br />
    'ply','660','400','7','#ffffff');<br />
  s1.addParam('allowfullscreen','true');<br />
  s1.addParam('allowscriptaccess','always');<br />
  s1.addParam('wmode','opaque');<br />
  s1.addParam('flashvars','file=/video/out.flv&amp;controlbar=over&amp;<br />
     displayclick=link&amp;screencolor=FFFFFF&amp;autostart=false&amp;<br />
     image=/video/logo.png');<br />
  s1.write('mediaspace');<br />
</script>

В реда

var s1 = new SWFObject('/video/player.swf','ply','660','400','7','#ffffff');

замени 660 с ширината на твоя филм и 400 с височината.

Кода:

<p id="line18">s1.addParam('flashvars','file=/video/out.flv&amp;amp;controlbar=over&amp;amp;displayclick=link&amp;amp;screencolor=FFFFFF&amp;amp;autostart=false&amp;amp;image=/video/logo.png');</p>

се пише слято на един ред.

Това е всичко. Сега отвори страницата http://domain.com/video.html където domain.com е името на твоя сайт.

За работещ пример може да разгледаш кода на видео клип от вила Ливадето (държа да отбележа, че нямам нищо общо с чалгата 😉 )

Кода в примера е валиден HTML код по стандартите на W3C.

Повече информация за използвания FLV Player, за форматите, които поддържа и за повече настройки може да прочетеш тук