Мултимедия и основи на уеб дизайна

1. Мултимедия и основи на уеб дизайна ас.Елена Първанова Разработка на видео материалив WWW – специфика, технологии,файлови формати, инструментални средства. 2011 ТЕМА 9

2. ВИДЕО В ИНТЕРНЕТ • В последните години видеото е неизменна част от информацията представяна в интернет. • За всяка една област можете да намерите множество видеоматериали, които чакат да бъдат разгледани. • За момента не съществува единен стандарт за представяне на видео в интернет, който да е платформено съвместим и представим във всички браузъри.

3. ПРЕДСТАВЯНЕ НА ВИДЕО В ИНТЕРНЕТ • Две са основните технологии за вмъкване на видео в уеб страница: • чрез използване на <embed>и/или <object>таг и интегриран plugin към браузъра; • чрез излозване на <video>таг дефиниран в HTML5.

4. Елементи на уеб видеото • Уеб видеото се състои от три елемента, които са служат за неговата визуализация в мрежата: • Видео контейнери – съхраняват видео файл; • Видео и аудио кодеци - енкодват (кодират/конвертират/компресират) видео файл; • Плейъри – правят достъпно видеото в интернет (например Adobe Flash Plugin или новият <video></video> таг ).

5. Видео контейнери • Кодеците са алгоритми, посредством които се енкодват видео файловете. Впоследствие това видео бива съхранявано във видеоконтейнер. Плейърите разчитат видеоконтейнера и благодарение на кодека, декодират видеото в него, за да бъде то възпроизведено. • Видео файла обикновенно съдържа няколко записи (tracks)- видео запис плюс една или повече аудио записи. Аудио записът съдържа в себе си маркери, спомагащи синхронизацията на аудиото с видеото. • Отделните записи могат да имат метаданни, като съотношението в размера на страните на видео записа или езика в аудио записа. • Контейнерите също имат метаданни, като заглавие на видеото, номера на епизода (за тв продукции ) и т.н.

6. Видео контейнери • Ogg е отворен стандарт,обикновенно с разширение .ogv. Той е най-харесваният от браузърите, тъй като има по произход, без платформено специфични браузъри поддръжка от Firefox 3.5, Chrome 4и Opera 10.5, докато Safari разчита на MPEG 4. В Oggконтейнерния формат видеото още е се наричано “Theora”, а аудиото “Vorbis”. При десктоп системите Oggе поддържан от Linux и може да се използва под Mac and Windows след инсталирането на QuickTime components или съответно DirectShow filters. Също така е представим чрез много добрия VLC медия плейър. Съществуват множество видео контейнерни формати. Най-популярните са: • MPEG 4 е мултимедиен контейнерен формат с разширение .mp4 или.m4v. Той е базиран на по-стария QuickTime контейнер на Apple (.mov). • Flash Video с разширение .flvили .f4v. Използва за представянето си Adobe Flash Playerверсия 6–10. По-късният F4V формат се поддържа от Flash Player 9 update 3.

7. Видео контейнери • Audio Video Interleave е с разширение .avi. Разработен е от Microsoft през 1992г. като част от тяхната Video for Windowsтехнология. Официално не поддържа свойствата на повечето сегашни контейнерни формати като прикачените метаданни. Официално не поддържа повечето от модерните видео и аудио кодеци използвани днес. Компании се опитват да разширят и съместят видео контейнера, като той си остава контейнер по подразбиране за популярни кодеци като Mencoder. • WebM е нов контейнерен формат, обявен през май 2010г. Технически той е подобен на друг формат , наричан Matroska. Изработен е да бъде използван изключително с VP8 видео кодек и Vorbis аудио кодек. Поддържа се без платформено специфични в по-късните версии на Google Chrome, MozillaFirefox и Opera.Adobe обявиха, че следващата версия на Flash ще поддържа WebM формат.

8. Видео кодеци • Контейнера определя как да бъдат съхранени видео и аудио потоците в еднин файл. • Когато гледате видео плейърът прави най-малко три действия: • Интерпретирайки контейнерният формат да намери кои аудио и видео записи са налични и как те са съхранени във файла. • Декодирайки видео потокът и представяйки поредица от изображения на екрана. • Декодирайки аудио потокът и изпращайки звук към колонките. • Видео кодека е алгоритъм посредством, който видео потока се кодира. • Видео плейърът декодира видео потока според видео кодека като представя серия от изображения или кадри на екрана.

9. Видео кодеци • Поветето съвременни видео кодеци използват различни начини за намаляване размера на информация необходима за представяне на един кадър след друг. • Например вместо да се съхранява всеки отделен кадър, се съхранява разликата между кадрите. • Съществуват кодеци със загуби и без загуби. Видеото без загуби е твърде голямо, за да бъде представяно в интернет. • При видео кодеците със загуби информацията невъзвратимо се изгубва при кодирането. При всяко следващо кодиране се намалява все повече качеството, защото се губи от информацията на оригиналния източник. Това води до блокиране на на видеото, особенно в сцени с повече движение. Видео кодеците със загуби предлагат удивителни нива на компресия като изглажда блокирането по време на визуализация и то става невидимо за човешкото око.

10. Видове Видео кодеци • Най-често приложимите видео кодеци са: H.264, Theora и VP8. • Разработен е от the MPEG group и е стандартизиран през 2003г. Известен е още като “MPEG-4 part 10”,както и“MPEG-4 AVC”,както и“MPEG-4 Advanced Video Coding”. • За да задоволи ниско и високо прцесорните системи и тези с ниско скоростен интернет, H.264 е разделен на профили, всеки от които дефинира набор от свойства, които въздействат на файловия вазмер. По високите профили използват по оптимални свойства, предлагат по по-бобро визуално качество за по-малък файлов размер, по-дълго време за кодиране и изискват по-голяма процесорна мощност за декодиране в реално време. • H.264 е изключително популярен и 90% от онлайн или офлайн съдържаниетое кодирано с него. Поради широките си възможности той се ползва в продуктите на Apple, във Flash, Android, YouTube, 99% от HD риповете, които се свалят и във висококачествените Blu-ray видеа. H.264

11. Видове Видео кодеци Theora VP8 VP8 е видео кодек на On2, компанията създател на VP3. Технически дава изходен файл равен на H.264High профил, докато поддържа ниско ниво на декодиране равняващо се на H.264Baseline профил. С придобирането на On2 от Google през май 2010, новия кодек VP8 става напълно свободен. • Theoraе свободен кодек произхождащ от VP3 кодек и разработен в последствие от Xiph.org Foundation. • Theora може да бъде прикачен във всеки един контейнерен формат, макара че най-често може да се види в Ogg контейнер (при Mozilla Firefox 3.5 ). • Linux поддържа Theora, Windowsиon Mac OS X представят Theoraвидео след инсталирането на отворения код декодерен софтуер на Xiph.org.

12. Видео контейнери и кодеци Фиг.9.1 Най-популярните видео контейнери в интернет и предпочитаните за тях кодеци Sorenson Spark H.264 Theora MPEG-4 VP6 H.264 .mp4 .flv .ogv

13. Какво работи в интернет †Safari представя всичко което QuickTime представя. QuickTime идва с преинсталирана H.264/AAC/MP4 поддръжка. Визможно е инсталирането на други plugins, за да добавят поддръжката на TheoraиWebM. ‡Google Chrome скоро ще поддържа H.264 Таблица 1 Видео кодеци поддържани от популярните съвременни браузъри

14. Какво работи в интернет Таблица 2 Видео кодеци поддържани в предстоящите версии на съвременни браузъри * Internet Explorer 9 ще поддържа само (когато потребителя е инсталирал VP8 кодек) †Safari представя всичко което QuickTime представя. QuickTime идва с преинсталирана H.264/AAC/MP4 поддръжка. ‡ Въпреки, че поддържа WebM, все още няма хардуерни декодери

15. Софтуер за конвертирате • Интернет предлага голямо разнообразие от софтуер за конвертиране. Необходимо е само да запишете в Google convert *желан формат* to *желан формат* и ще изскочат множество програми за тази цел. • Някой от конверторите са безплатни, други – лицензирани. Фиг.9.2Sony Ericsson Video Converter

16. Софтуер за конвертирате Фиг.9.3 Начален екран на Miro Video Converter • Безплатен и лесен за употреба е Miro Video Converter. Той поддържа всички изброени изходни формати (фиг.9.3). • За съзаление единственото, което прави е да сменя форматите и без да дава каква настройка. www.mirovideoconverter.com

17. Софтуер за конвертирате Фиг.9.4 Стартова страница на Firefogg • Полезен инструмент е Firefogg(фиг.9.4). Той представлява отворен код, GPL - лиценцирано Firefox разширение за енкодинг на Ogg. • Конвертира видео в Theora+Vorbisили VP8+Vorbis, т.е. OGG или WebM • За да бъде използван е необходимо да бъде инсталиран Mozilla Firefox 3.5 или по-късна версия. http://firefogg.org/

18. Софтуер за конвертирате Фиг.9.5 начален екран на HandBrake под Windows • HandBrake е отворен код, GPL – лиценциран, мултиплатформен конвертер (фиг.9.5). • Филов формат: MP4(M4V) • Видео: MPEG-4, H.264 илиTheora • Аудио: AAC, CoreAudio AAC (OS X само), MP3 или Vorbis http://handbrake.fr/

19. Софтуер за конвертирате Фиг.9.6 Скрииншот на MediaCoder • MediaCoderе свободен универсален медиен транскодер (фиг.9.6). • Той е интергриран с най-популярните аудио/видео кодеци и притежава инстументи с елегантен и ясен стил. http://www.mediacoderhq.com/

20. Софтуер за конвертирате Фиг.9.7Super конвертер • Superе конвертер поддържащ голямо разнообразие от входящи/изходящи файлови формати (фиг.9.7). http://www.erightsoft.com/SUPER.html

21. Софтуер за конвертирате • AVSвидео конвертер е много добър инструмент за конвертиране на видео файлове - AVI (DivX, XviD, etc.), MP4 (вкл. Sony PSP и Apple iPod), WMV, 3GP, QuickTime (MOV, QT), SWF, DVD, VOB, VRO, MPEG 1, 2, 4, H.263, H.264, Real Video, DVR-MS, MKV, FLV и др. • Отличителни черти са: • Конвертира видео за уеб страници, Apple iPod , Microsoft Zune, Sony PSP; • Съддава DVD филми от различни формати • Извлича изображения и аудио и саундтаци от филми. Фиг.9.8 Скрииншот на AVSVideo Converter www.avs4you.com

22. вмъкване на видео в уеб страница • HTML5 <video> поддържа всякаква медия, като браузърът определя кои формати ще възпроизведе. Необходимо е да се знае какви формати поддържа конкретният браузър: • Firefox 3.5+, Opera 10.5+ - Theora+Vorbisв OGG контейнер. • Chrome 3+ - Theora+Vorbisв OGG контейнер или H.264+AAC в MPEG 4 контейнер. • Safari 3+, IE9 - H.264+AAC в MPEG 4 контейнер. • iOS/Android - H.264+AAC в MPEG 4 контейнер. • Повечето бета версии на актуалните браузъри - VP8+Vorbis в WebMконтейнер. Комбинациите са няколко и препоръчително е да се направят поне два файла (Theora+Vorbis и H.264+AAC), за да се гарантира видимост в основните браузъри. Естествено не е лошо да се направи една версия с VP8+Vorbis (WebM). Спецификация на HTML5 http://www.w3.org/TR/html5/ Спецификация на елемента <video> www.whatwg.or 1. Чрез HTML5 и <video>

23. вмъкване на видео в уеб страницас <video> таг Атрибути на елемента <video>: • autoplay - чрез него, видеото започва да се сваля и възпроизвежда веднага след зареждането на страницата; • autobuffer/preload - започва буфериране на видеото веднага, след като страницата се зареди; • controls - с този атрибут включвате лентата с контроли под видеото. Без нея са налични контроли само при кликване с десен бутон; • loop - след своя край, видеото започва отново; • poster - с този атрибут оказваме пътя до картинката, с която ще започва видеото. Ако не се сложи, то автоматично първият кадър ще се възприеме, като постер; • src - пътят до видеото. При използване на няколко файла се работи със <source> елемента, който се поставя във <video>; • width - ширината на елемента; • height - височината на елемента <video src="video/startrek_trailer.mp4"></video>

24. вмъкване на видео в уеб страницас <video> таг Примери: <video width="1280" height="544" controls autoplay>     <source src="video/video_name.mp4" type="video/mp4" />     <source src="video/video_name.ogv" type="video/ogg" /> </video> Примера представя видео с контроли , което ще започне само. С два сорса се свързва едно видео в различни видео формата (mp4ще се възпроизведе от Safari/Chrome, а ogvот Firefoxи Opera). Препоръчително е да се използва type - браузърът прочита първо него, вижда дали може да пусне конкретния файл и ако не успее, минава на следващия. Той дава три вида информация: контейнерния формат, видео кодека и аудио кодека. <source src="video/video_name.ogv" type='video/ogg; codecs="theora, vorbis"'> За .ogvвидео файл контейнерния формат е Ogg представен в typeкато video/ogg.Видео кодека е Theora, а аудио кодека е Vorbis.

25. вмъкване на видео в уеб страницас <video> таг • Видеото когато се тества локално работи безпроблемно, но когато е качено на сървъра могат да възникнат евентуални проблеми (да не се възпроизвежда коректно или изобщо да не се вижда). • Това вероятно е проблем в конфигурацията на уеб сървъра и по-точно MIME типовете (video/mp4, video/ogg и т.н.). • Всъщност това, че са оказани в <source> елемента не е достатъчно и трябват да бъдат добавени към самия уеб сървър. Това става сравнително лесно - или намирате конфигурационния файл и там добавяте нужните редове или създавате .htaccess файлв папката с видеата. • А нужните редове като за начало са: AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm

26. вмъкване на видео в уеб страницас <video> таг • Някой от браузърите не поддържат HTML5. това са версиите на Internet Explorer: IE6, IE7и IE8. За съжаление голям процент от потребителите ги ползват. • Това се решава като се постави <object> елемент във <video>. Bраузърът, който не поддържа HTML5 ще игнорира <video> и разположените в него елементи, като ще прочете само <object>. <video width="1280" height="544" controls>     <source src="video/startrek_trailer.mp4" type="video/mp4" /> <!-- WebKit (Safari, iPhone, iPad...) -->     <source src="video/startrek_trailer.ogv" type="video/ogg" /> <!-- Firefox, Opera & Chrome -->     <source src="video/startrek_trailer.webm" type="video/webm" /> <!-- Все още random -->    <!-- За браузъри, които не поддържат HTML5 -->     <object width="1280" height="544" type="application/x-shockwave-flash" data="flashplayer/player.swf"> <!-- player.swf заместете с предпочитан от вас плейър -->        <param name="movie" value="flashplayer/player.swf" />         <param name="allowfullscreen" value="true" />         <param name="flashvars" value="image=poster.jpg&amp;file=../video/startrek_trailer.mp4" />     </object> </video> <p>Свалете видеото в <a href="video/startrek_trailer.mp4">MP4</a> <a href="video/startrek_trailer.ogv">OGV</a> <a href="video/startrek_trailer.webm">WebM</a>.</p> Виж видеото

27. вмъкване на видео в уеб страница 2. Чрез <embed> и <object> елементи • <embed>и <object>дават възможност за вмъкване на видео в случайте когато имате инсталиран pluginплейър към браузъра (например QuickTime или Flash). • За щастие pluginsплейъри са включени в инсталационния пакет на някой браузъри. • .movвидео, представено с QuickTime plug-inсе вмъква в уеб страница със следния код: <object width="240" height="196" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="moviefile.mov"> <param name="controller" value="true"> <param name="autoplay" value="false"> <embed src="moviefile.mov" width="240" height="196" autoplay="false" controller="true" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> • В<object> тага classid и codebase атрибути осигуряват специфични действия за автоматично инсталиране на необходимия ActiveX елемент. • В <embed>тага pluginspage атрибута изпраща потребителя на страница , където може да свали QuickTime плейър, ако няма инсталиран такъв. • На контролиращите параметри се задава булева стойност true или false в полето value.

28. вмъкване на видео в уеб страница с <embed> и <object> • Възможно е създаването на видео с управляващи контроли (вграден плейър) представими във файл с разширение .swf(фиг.9.9.). • Реализацията е като се импортне (вмъкне) FLV видео в Adobe Flash и му се избере желания плейър (виж упрежнение 13). 2.1 SWF видео файл с flash компонента Фиг.9.9 Сайт представящ видео в SWF файл

29. вмъкване на видео в уеб страница с <embed> и <object> • Резултатът е създаването на SWF видео файл и SWF файл на палеъра. • Видеото се визуализира чрез поставянето на <embed> и <object> тагове в уеб страницата с връзка към SWF видео файл. • Необходимо е SWF видео файл, SWF файл на палеъра и FLV видео файла да бъдат една папка. <script type="text/javascript" src="swfobject.js"></script> <object width="400" height="300"> <param name="movie" value="example.swf"> <embed src="example.swf" width="400" height="300"> </embed> </object> Swfobjectе отворен код JavaScript библиотека използвана, за да се вмъкне Flash съсържание в уеб страница. Прилага се като един малък JavaScript файл. Код: SWF с SWFObject.JS Код: SWF с Flash Plugin <object id="whatever" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="300" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0"> <param name="src" value="example.swf"/> <param name="bgcolor" value="#FFFFFF"/> <param name="quality" value="best"/> <embed name="whatever" src="example.swf" width="400" height="300" bgcolor="#FFFFFF" quality="best" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </embed> </object>

30. вмъкване на видео в уеб страница с <embed> и <object> • Video Encoder for Adobe Flashе добър лицензиран конвертер от видео към Flash формати (фиг.9.10). • Конвертира почти всички видео формати към SWF и FLV с H.264 кодек. • Създава Flash видео плейър, HTML страница и мини изображение за споделяне в интернет. • Предлага разнообразни skins (кожи) зa плейъра с възможност за модификация (като промяна на цвета, playback компонентите ). • Има възможност за вмъкване FLV, добавяне на URL и loading Flash SWF. http://www.sothinkmedia.com/flash-video-encoder/ Фиг.9.10 Видео създадено чрез Video Encoder for Adobe Flash 2.2 Софтуер за енкодинк

31. Представяне на видео в Интернет - уеб плейъри • Поддържа също различни поточни и playlist формати (включително RMTP, HTTP, поточни формати на живо и др.) и голямо разнообразие от опции за визуализиране. • Друг подобен проект с отворен код е Flowplayer(фиг.9.12). • Много добра функционалност и отлично представяне на видео предоставя JW Player(фиг.9.11). • Той е отворвн код видео и аудио плейър за Web. • Поддържа представяне на на flash формат и такива с които работи HTML5 (FLV, H.264, MP4, VP8, WebM, MP3, AAC, JPG, PNG и GIF). Фиг.9.11JW Player http://www.longtailvideo.com/players/jw-flv-player Фиг.9.12flowplayer setup • http://flowplayer.org/index.html