SEO блог и уеб програмиране » филм http://ganbox.com/blog SEO практика: трикове при оптимизация и решаване на проблеми при уеб програмиране. Sun, 20 May 2012 19:28:54 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Флаш анимация без таг embed за валиден XHTML http://ganbox.com/blog/%d1%84%d0%bb%d0%b0%d1%88-%d0%b0%d0%bd%d0%b8%d0%bc%d0%b0%d1%86%d0%b8%d1%8f-%d0%b1%d0%b5%d0%b7-%d1%82%d0%b0%d0%b3-embed-%d0%b7%d0%b0-%d0%b2%d0%b0%d0%bb%d0%b8%d0%b4%d0%b5%d0%bd-xhtml/ http://ganbox.com/blog/%d1%84%d0%bb%d0%b0%d1%88-%d0%b0%d0%bd%d0%b8%d0%bc%d0%b0%d1%86%d0%b8%d1%8f-%d0%b1%d0%b5%d0%b7-%d1%82%d0%b0%d0%b3-embed-%d0%b7%d0%b0-%d0%b2%d0%b0%d0%bb%d0%b8%d0%b4%d0%b5%d0%bd-xhtml/#comments Mon, 01 Jun 2009 23:40:17 +0000 gan http://ganbox.com/blog/?p=110 В този урок за SEO оптимизиране се показва как уеб страница, която показва swf флаш анимация да бъде преработена към валиден XHTML код.

В примера се приема, че флаша се намира в директория /flash/2009.swf и има размери 294 ширина и 260 височина на полето за анимацията.

Ако кода е писан отдавна, вероятно ще изглежда подобно на този:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" 
  width="294" height="260">
  <param name="movie" value="http://arthuradams.bg/flash/2009.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <embed src="http://arthuradams.bg/flash/2009.swf" wmode="opaque" quality="high" 
  pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
  width="294" height="260"></embed>
</object>

Този код не е валиден XHTML заради тага embed и при опит да мине през валидатора дава грешки, първата от които прилича на тази:

Line 181, Column 17:
Attribute "src" exists, but can not be used for this element.
<embed src="http://arthuradams.bg/flash/2009.swf" wmode="opaque" quality="h...

При търсене в Гугъл по думи като „XHTML embed“ излизат десетки статии, в които грешно се посочва, че горния код може да бъде заменен с нещо като:

<!--[if !IE]> -->
<object type="application/x-shockwave-flash" data="http://arthuradams.bg/flash/2009.swf"
  width="294" height="260">
<!-- <![endif]-->

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
  width="294" height="260">
  <param name="movie" value="http://arthuradams.bg/flash/2009.swf" />
<!--><!--dgx-->
  <param name="loop" value="true" />
  <param name="menu" value="false" />

  <p>This is <b>alternative</b> content.</p>
</object>
<!-- <![endif]-->

Горния код е грешен и НЕ РАБОТИ!

Според мен единственото XHTML решение работещо на всички браузъри е с използване на JavaScript.

Пример с използване на swfobject.

Изтегли си файла http://ganbox.com/inc/swfobject.js и го качи на твоя сайт. В следващия пример се приема, че е в директория /jscripts
Между таговете head постави реда

<script type="text/javascript" src="/jscripts/swfobject.js"></script>

Там където искаш да се появи флаш филма постави следния div:

<div id="flashcontent" style="float:left; margin:10px">
<strong>You need to upgrade your Flash Player</strong>
</div>

Слад това в страницата изпълни скрипта

<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("http://arthuradams.bg/flash/2009.swf",
  "title", "294", "260", "7", "#FF6600");
so.write("flashcontent");
// ]]>
</script>

Естествено вместо arthuradams.bg напиши името на домейна на твоя сайт.  Би трябвало да стане и само с „/flash/2009.swf“.

Работещ пример има в старница обучения от ArthurAdams.bg, която е валиден XHTML.

В статията се ползва кода на проекта swfobject.

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

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

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

]]> http://ganbox.com/blog/%d1%84%d0%bb%d0%b0%d1%88-%d0%b0%d0%bd%d0%b8%d0%bc%d0%b0%d1%86%d0%b8%d1%8f-%d0%b1%d0%b5%d0%b7-%d1%82%d0%b0%d0%b3-embed-%d0%b7%d0%b0-%d0%b2%d0%b0%d0%bb%d0%b8%d0%b4%d0%b5%d0%bd-xhtml/feed/ 4 Видео клип в уеб страница 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