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

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

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 например 640×480, но големината на файла ще нарасне.

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 е с размер 480×270 точки. Може да опиташ по-голям размер като 640×360 точки.
Добре стига кодиране. Приемаме че файла out.flv има подходящ размер не повече от няколко мегабайта. Сега да го поставим в уеб плеър.

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="bg-BG">
<head>
<title>Видео клип</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Видео клип</h1>
<script type='text/javascript' src='/video/swfobject.js'></script>
<div id='mediaspace'>видео</div>

<script type='text/javascript'>
  var s1 = new SWFObject('/video/player.swf',
    'ply','660','400','7','#ffffff');
  s1.addParam('allowfullscreen','true');
  s1.addParam('allowscriptaccess','always');
  s1.addParam('wmode','opaque');
  s1.addParam('flashvars','file=/video/out.flv&amp;controlbar=over&amp;
     displayclick=link&amp;screencolor=FFFFFF&amp;autostart=false&amp;
     image=/video/logo.png');
  s1.write('mediaspace');
</script>
</body>
</html>

В реда

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, за форматите, които поддържа и за повече настройки може да прочетеш тук

Прочетена:8693
« Предишна публикация

Линукс трикове

Няколко скрипта за команден ред под Линукс, които ползвам често при seo оптимизация на сайт. Работят с много файлове наведнъж и спестяват много време. 1. Заместване разширението на файлове. for x in *.html; do mv "$x" ... Повече информация »

Следваща публикация »

Флаш анимация без таг embed за валиден XHTML

В този урок за SEO оптимизиране се показва как уеб страница, която показва swf флаш анимация да бъде преработена към валиден XHTML код. В примера се приема, че флаша се намира в директория /flash/2009.swf и има ... Повече информация »

2 коментара

  1. Plamen Radinski 27.01.2010