SEO блог и уеб програмиране » плеър http://ganbox.com/blog SEO практика: трикове при оптимизация и решаване на проблеми при уеб програмиране. Sun, 20 May 2012 19:28:54 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Видео клип в уеб страница http://ganbox.com/blog/%d0%b2%d0%b8%d0%b4%d0%b5%d0%be-%d0%ba%d0%bb%d0%b8%d0%bf-%d0%b2-%d1%83%d0%b5%d0%b1-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d0%b0/ http://ganbox.com/blog/%d0%b2%d0%b8%d0%b4%d0%b5%d0%be-%d0%ba%d0%bb%d0%b8%d0%bf-%d0%b2-%d1%83%d0%b5%d0%b1-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d0%b0/#comments Thu, 28 May 2009 09:11:49 +0000 gan http://ganbox.com/blog/?p=95 В тази статия ще покажа как бързо и лесно да включиш филм в уеб страница на твоя сайт. Като резултат при зареждане на страницата се показва поле с избрана от теб картинка. При натискане върху картинката филма тръгва и след приключване отново се показва заглавната картинка. Статията е в две части:

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

Брой разглеждания на тази статия: 4160
(след дата 20 декември 2009)

Подобни статии:

  1. Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...
  2. XHTML и заместване на тага embed Тага embed служи за вмъкване на видео или аудио файл...
  3. Видео от SEO Конференция 2011 На 27 май се проведе таз годишната SEO конференция в...

]]> http://ganbox.com/blog/%d0%b2%d0%b8%d0%b4%d0%b5%d0%be-%d0%ba%d0%bb%d0%b8%d0%bf-%d0%b2-%d1%83%d0%b5%d0%b1-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d0%b0/feed/ 2 XHTML и заместване на тага embed http://ganbox.com/blog/xhtml-%d0%b8-%d0%b7%d0%b0%d0%bc%d0%b5%d1%81%d1%82%d0%b2%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-%d1%82%d0%b0%d0%b3%d0%b0-embed/ http://ganbox.com/blog/xhtml-%d0%b8-%d0%b7%d0%b0%d0%bc%d0%b5%d1%81%d1%82%d0%b2%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-%d1%82%d0%b0%d0%b3%d0%b0-embed/#comments Fri, 15 May 2009 15:42:27 +0000 gan http://ganbox.com/blog/?p=81 Тага embed служи за вмъкване на видео или аудио файл в уеб страница, така че при зареждане на страницата мултимедийния файл може да  започне да се изпълнява директно. За съжаление този таг не е по XHTML стандарта и се използват различни техники за заместването му.

Ако имаш обикновен swf файл с флаш анимация, която искаш да стане валиден XHTML, прочети Флаш анимация без таг embed за валиден xhtml

В разгледания пример има HTML код за смяна на картинки – слайдшоу. Картинките са описани в XML файл, който се подава на SWF файл. Файла player.swf е флаш плеър, който сменя картинките, като плавно прелива от едната в другата през 5 секунди. Освен това в долния десън ъгъл показва толкова бутончета, колкото са картинките и може бързо да се превключва между тях. Работеща версия може да видиш в страницата на вила Ливадето.

Стария HTML код е несъвместим с XHTML стандарта и дава грешки при проверка с валидатора.
Ето грешния код:

<div id=“slideshow“><object width=880 height=330
classid=“clsid:D27CDB6E-AE6D-11CF-96B8-444553540000″
codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab“>
<param name=“movie“ value=“player.swf“>
<param name=“quality“ value=“high“>
<param name=“loop“ value=“true“>
<param name=“wmode“ value=“opaque“>
<param name=“autoplay“ value=“true“>
<param name=“FlashVars“ value=“bcastr_xml_url=slideshow.xml&AutoPlayTime=5″>
<embed src=“player.swf“ width=880 height=330 quality=“high“
type=“application/x-shockwave-flash“ wmode=“opaque“
FlashVars=“bcastr_xml_url=slideshow.xml&AutoPlayTime=5″ loop=“true“ autoplay=“true“
pluginspage=“http://www.macromedia.com/go/getflashplayer“></embed>
</object>
</div>

Този код се замества със следния валиден код:

<div id=“slideshow“>
<script src=“ac_activex.js“ type=“text/javascript“></script>
<script type=“text/javascript“>
AC_RunFlashContent(‘width’,’880′,’height’,’330′,’quality’,'high’,
‘autoplay’,'true’,'loop’,'true’,'wmode’,'opaque’,
‘FlashVars’,'bcastr_xml_url=slideshow.xml&amp;AutoPlayTime=5′,’codebase’,
‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab’,'pluginspage’,
‘http://www.macromedia.com/go/getflashplayer’,'src’,'player.swf’);
</script>
</div>

За да работи този скрипт е нужен файла ac_activex.js да бъде качен в главната уеб директория. Той осигурява и това страницата да работи на всички браузъри. В примера се предполага, че файловете player.swf и slideshow.xml също са в главната уеб директория.

Крайният резултат е валиден HTML документ и работещ код на всички браузъри.

Ако JavaScript-а на браузъра е спрян, този код няма да сработи. За съжаление в момента нямам решение с тага object, което да работи на всички браузъри и да е валиден XHTML. Ако някой има идеи да пише, ще се радвам да ги науча. Най-малкото което може да се направи е да се сложи <noscript> блок, който да съдържа зареждане на първата картинка. Така поне първата картинка от поредицата картинки ще се покаже.

Брой разглеждания на тази статия: 3579
(след дата 20 декември 2009)

Подобни статии:

  1. Флаш анимация без таг embed за валиден XHTML В този урок за SEO оптимизиране се показва как уеб...
  2. Заместване на тага marquee за валиден XHTML HTML тага marquee се използва за автоматично скролиране на текст....
  3. Премахване на грешки в сайт и преминаване към XHTML Тази статия е за често срещани HTML грешки в сайтовете...

]]> http://ganbox.com/blog/xhtml-%d0%b8-%d0%b7%d0%b0%d0%bc%d0%b5%d1%81%d1%82%d0%b2%d0%b0%d0%bd%d0%b5-%d0%bd%d0%b0-%d1%82%d0%b0%d0%b3%d0%b0-embed/feed/ 8