В тази статия ще покажа как бързо и лесно да включиш филм в уеб страница на твоя сайт. Като резултат при зареждане на страницата се показва поле с избрана от теб картинка. При натискане върху картинката филма тръгва и след приключване отново се показва заглавната картинка. Статията е в две части:
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&controlbar=over&
displayclick=link&screencolor=FFFFFF&autostart=false&
image=/video/logo.png');
s1.write('mediaspace');
</script>
</body>
</html>
В реда
var s1 = new SWFObject(‘/video/player.swf’,'ply’,’660′,’400′,’7′,’#ffffff’);
замени 660 с ширината на твоя филм и 400 с височината.
Кода:
s1.addParam(‘flashvars’,'file=/video/out.flv&controlbar=over&
displayclick=link&screencolor=FFFFFF&autostart=false&
image=/video/logo.png’);
се пише слято на един ред.
Това е всичко. Сега отвори страницата http://domain.com/video.html където domain.com е името на твоя сайт.
За работещ пример може да разгледаш кода на видео клип на фирма за почистване Бориван или видео клип от вила Ливадето (държа да отбележа, че нямам нищо общо с чалгата 
)
Кода в примера е валиден HTML код по стандартите на W3C.
Повече информация за използвания FLV Player, за форматите, които поддържа и за повече настройки може да прочетеш тук
VN:F [1.9.16_1159]
Рейтинг: 0.0/10 (0 гласа)
Брой разглеждания на тази статия: 4129
(след дата 20 декември 2009)
Сподели статията в
Бутончета на сайтове, в които можете да споделите линк към тази страница.
Подобни статии:
- Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб страница, която показва swf флаш анимация да бъде преработена към...
- XHTML и заместване на тага embed Тага embed служи за вмъкване на видео или аудио файл в уеб страница, така че при зареждане на страницата мултимедийния...
- Видео от SEO Конференция 2011 На 27 май се проведе таз годишната SEO конференция в София. Моите впечатления от SEO Конференция 2011 са много добри....
- PHP: Извличане текст от интернет страница Един примерен скрипт за извличане на текстово съдържание от интернет страница. Ползва функцията get_page_content($url), която извлича цялото съдържание на страница...
