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

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

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

Прочетена:19352
1 - лоша2 - слаба3 - средна4 - добра5 - отлична (1 гласа, оценка: 5,00 от 5. Моля изберете оценка!)
Loading...
Георги Стефанов
Магистър по информатика, който се занимава с компютри от 1988 г., професионално с програмиране от 1998 г., а с уеб технологии от 2002 г. Има богат опит при оптимизиране на бизнес сайтове. Повече от 15 години развива успешно свои уеб проекти и работи с български и международни компании за постоянно подобряване на техните сайтове и увеличаване на онлайн продажбите. 

2 comments on “Видео клип в уеб страница”

  1. Супер. Много полезен материал и супер перспективна област за уеб комуникация между бизнеса и клиентите.

  2. По същия начин може да се включи Youtube клип, като той ще бъде валиден XHTML код. Ползвайте SWFObject library. И след това включете клип със следния код:
    <script type="text/javascript" src="js/swfobject.js"></script>
    <div id="clip-id"></div>
    <script type="text/javascript">
    swfobject.embedSWF("http://www.youtube.com/v/j7y_6JHUDR0?border=0", "clip-id", "576", "356", "8", null, null);
    </script>
    Като естествено промените URL на Youtube клипа. В случая ширината е 576, а височината 356. Той ще се покаже на мястото на div с id=clip-id.

споделиха
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram