Разработка на видео материали в WWW – специфика, технологии,файлови формати, инструментални средства.

МУЛТИМЕДИЯ И ОСНОВИ НА УЕБ ДИЗАЙНА

ас.Елена Първанова

2011

ТЕМА 9

ВИДЕО В ИНТЕРНЕТ

• В последните години видеото е неизменна част от информацията представяна в интернет.

• За всяка една област можете да намерите множество видеоматериали, които чакат да бъдат разгледани.

• За момента не съществува единен стандарт за представяне на видео в интернет, който да е платформено съвместим и представим във всички браузъри.

ПРЕДСТАВЯНЕ НА ВИДЕО В ИНТЕРНЕТ

• Две са основните технологии за вмъкване на видео в уеб страница:o чрез използване на <embed> и/или <object> таг и

интегриран plugin към браузъра;o чрез излозване на <video> таг дефиниран в HTML5.

ЕЛЕМЕНТИ НА УЕБ ВИДЕОТО

• Уеб видеото се състои от три елемента, които са служат за неговата визуализация в мрежата:

Видео контейнери – съхраняват видео файл; Видео и аудио кодеци - енкодват

(кодират/конвертират/компресират) видео файл;

Плейъри – правят достъпно видеото в интернет (например Adobe Flash Plugin или новият <video></video> таг ).

ВИДЕО КОНТЕЙНЕРИ

• Кодеците са алгоритми, посредством които се енкодват видео файловете. Впоследствие това видео бива съхранявано във видеоконтейнер. Плейърите разчитат видеоконтейнера и благодарение на кодека, декодират видеото в него, за да бъде то възпроизведено.

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

• Отделните записи могат да имат метаданни, като съотношението в размера на страните на видео записа или езика в аудио записа.

• Контейнерите също имат метаданни, като заглавие на видеото, номера на епизода (за тв продукции ) и т.н.

Съществуват множество видео контейнерни формати. Най-популярните са:

• MPEG 4 е мултимедиен контейнерен формат с разширение .mp4 или .m4v. Той е базиран на по-стария QuickTime контейнер на Apple (.mov).

• Flash Video с разширение .flv или .f4v. Използва за представянето си Adobe Flash Player версия 6–10. По-късният F4V формат се поддържа от Flash Player 9 update 3.

• 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 медия плейър.

ВИДЕО КОНТЕЙНЕРИ

• WebM е нов контейнерен формат, обявен през май 2010г. Технически той е подобен на друг формат , наричан Matroska. Изработен е да бъде използван изключително с VP8 видео кодек и Vorbis аудио кодек. Поддържа се без платформено специфични в по-късните версии на Google Chrome, Mozilla Firefox и Opera. Adobe обявиха, че следващата версия на Flash ще поддържа WebM формат.

• Audio Video Interleave е с разширение .avi . Разработен е от Microsoft през 1992г. като част от тяхната Video for Windows технология. Официално не поддържа свойствата на повечето сегашни контейнерни формати като прикачените метаданни. Официално не поддържа повечето от модерните видео и аудио кодеци използвани днес. Компании се опитват да разширят и съместят видео контейнера, като той си остава контейнер по подразбиране за популярни кодеци като Mencoder.

ВИДЕО КОНТЕЙНЕРИ

ВИДЕО КОДЕЦИ

• Контейнера определя как да бъдат съхранени видео и аудио потоците в еднин файл.

• Когато гледате видео плейърът прави най-малко три действия:

1. Интерпретирайки контейнерният формат да намери кои аудио и видео записи са налични и как те са съхранени във файла.

2. Декодирайки видео потокът и представяйки поредица от изображения на екрана.

3. Декодирайки аудио потокът и изпращайки звук към колонките.

• Видео кодека е алгоритъм посредством, който видео потока се кодира.

• Видео плейърът декодира видео потока според видео кодека като представя серия от изображения или кадри на екрана.

• Поветето съвременни видео кодеци използват различни начини за намаляване размера на информация необходима за представяне на един кадър след друг.

• Например вместо да се съхранява всеки отделен кадър, се съхранява разликата между кадрите.

• Съществуват кодеци със загуби и без загуби. Видеото без загуби е твърде голямо, за да бъде представяно в интернет.

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

ВИДЕО КОДЕЦИ

• Най-често приложимите видео кодеци са: H.264, Theora и VP8.

o Разработен е от the MPEG group и е стандартизиран през 2003г. Известен е още като “MPEG-4 part 10”, както и “MPEG-4 AVC”, както и “MPEG-4 Advanced Video Coding”.

o За да задоволи ниско и високо прцесорните системи и тези с ниско скоростен интернет, H.264 е разделен на профили, всеки от които дефинира набор от свойства, които въздействат на файловия вазмер. По високите профили използват по оптимални свойства, предлагат по по-бобро визуално качество за по-малък файлов размер, по-дълго време за кодиране и изискват по-голяма процесорна мощност за декодиране в реално време.

o H.264 е изключително популярен и 90% от онлайн или офлайн съдържанието е кодирано с него. Поради широките си възможности той се ползва в продуктите на Apple, във Flash, Android, YouTube, 99% от HD риповете, които се свалят и във висококачествените Blu-ray видеа.

ВИДОВЕ ВИДЕО КОДЕЦИ

H.264

ВИДОВЕ ВИДЕО КОДЕЦИ

Theora• Theora е свободен кодек

произхождащ от VP3 кодек и разработен в последствие от Xiph.org Foundation.

• Theora може да бъде прикачен във всеки един контейнерен формат, макара че най-често може да се види в Ogg контейнер (при Mozilla Firefox 3.5 ).

• Linux поддържа Theora, Windows и on Mac OS X представят Theora видео след инсталирането на отворения код декодерен софтуер на Xiph.org.

VP8• VP8 е видео кодек на On2,

компанията създател на VP3. • Технически дава изходен

файл равен на H.264 High профил, докато поддържа ниско ниво на декодиране равняващо се на H.264 Baseline профил.

• С придобирането на On2 от Google през май 2010, новия кодек VP8 става напълно свободен.

Фиг.9.1 Най-популярните видео контейнери в интернет и предпочитаните за тях кодеци

ВИДЕО КОНТЕЙНЕРИ И КОДЕЦИ

.mp4 .flv .ogv

MPEG-4H.264

VP6

Sorenson Spark

H.264Theora

КАКВО РАБОТИ В ИНТЕРНЕТ

Кодеци/контейнери IE Firefox Safari Chrome Opera iPhone Android

Theora+Vorbis+Ogg · 3.5+ † 5.0+ 10.5+ · ·

H.264+AAC+MP4 · · 3.0+ 5.0–?‡ · 3.0+ 2.0+

WebM · · † 6.0+ 10.6+

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

‡ Google Chrome скоро ще поддържа H.264

Таблица 1 Видео кодеци поддържани от популярните съвременни браузъри

Codecs/container IE Firefox Safari Chrome Opera iPhone Android

Theora+Vorbis+Ogg · 3.5+ † 5.0+ 10.5+ · ·

H.264+AAC+MP4 9.0+ · 3.0+ · · 3.0+ 2.0+

WebM 9.0+* 4.0+ † 6.0+ 10.6+ · 2.3‡

КАКВО РАБОТИ В ИНТЕРНЕТ

Таблица 2 Видео кодеци поддържани в предстоящите версии на съвременни браузъри

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

СОФТУЕР ЗА КОНВЕРТИРАТЕ

• Интернет предлага голямо разнообразие от софтуер за конвертиране. Необходимо е само да запишете в Google convert *желан формат* to *желан формат* и ще изскочат множество програми за тази цел.

• Някой от конверторите са безплатни, други – лицензирани.

Фиг.9.2 Sony Ericsson Video Converter

• Безплатен и лесен за употреба е Miro Video Converter. Той поддържа всички изброени изходни формати (фиг.9.3).

• За съзаление единственото, което прави е да сменя форматите и без да дава каква настройка.

www.mirovideoconverter.comФиг.9.3 Начален екран на Miro Video

Converter

СОФТУЕР ЗА КОНВЕРТИРАТЕ

• Полезен инструмент е Firefogg (фиг.9.4). Той представлява отворен код, GPL - лиценцирано Firefox разширение за енкодинг на Ogg.

• Конвертира видео в Theora+Vorbis или VP8+Vorbis, т.е. OGG или WebM

• За да бъде използван е необходимо да бъде инсталиран Mozilla Firefox 3.5 или по-късна версия.

http://firefogg.org/

Фиг.9.4 Стартова страница на Firefogg

СОФТУЕР ЗА КОНВЕРТИРАТЕ

• HandBrake е отворен код, GPL – лиценциран, мултиплатформен конвертер (фиг.9.5).

• Филов формат: MP4(M4V)

• Видео: MPEG-4, H.264 или Theora

• Аудио: AAC, CoreAudio AAC (OS X само), MP3 или Vorbis

http://handbrake.fr/

Фиг.9.5 начален екран на HandBrake под Windows

СОФТУЕР ЗА КОНВЕРТИРАТЕ

• MediaCoder е свободен универсален медиен транскодер (фиг.9.6).

• Той е интергриран с най-популярните аудио/видео кодеци и притежава инстументи с елегантен и ясен стил.

http://www.mediacoderhq.com/

Фиг.9.6 Скрииншот на MediaCoder

СОФТУЕР ЗА КОНВЕРТИРАТЕ

• Super е конвертер поддържащ голямо разнообразие от входящи/изходящи файлови формати (фиг.9.7).

http://www.erightsoft.com/SUPER.html

Фиг.9.7 Super конвертер

СОФТУЕР ЗА КОНВЕРТИРАТЕ

• 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 Скрииншот на AVS Video Converter

www.avs4you.com

СОФТУЕР ЗА КОНВЕРТИРАТЕ

ВМЪКВАНЕ НА ВИДЕО В УЕБ СТРАНИЦА

• HTML5 <video> поддържа всякаква медия, като браузърът определя кои формати ще възпроизведе. Необходимо е да се знае какви формати поддържа конкретният браузър:o Firefox 3.5+, Opera 10.5+ - Theora+Vorbis в OGG контейнер.o Chrome 3+ - Theora+Vorbis в OGG контейнер или H.264+AAC в MPEG 4

контейнер.o Safari 3+, IE9 - H.264+AAC в MPEG 4 контейнер.o iOS/Android - H.264+AAC в MPEG 4 контейнер.o Повечето бета версии на актуалните браузъри - 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>

ВМЪКВАНЕ НА ВИДЕО В УЕБ СТРАНИЦА С <VIDEO> ТАГ

Атрибути на елемента <video>:

• autoplay - чрез него, видеото започва да се сваля и възпроизвежда веднага след зареждането на страницата;

• autobuffer/preload - започва буфериране на видеото веднага, след като страницата се зареди;

• controls - с този атрибут включвате лентата с контроли под видеото. Без нея са налични контроли само при кликване с десен бутон;

• loop - след своя край, видеото започва отново;

• poster - с този атрибут оказваме пътя до картинката, с която ще започва видеото. Ако не се сложи, то автоматично първият кадър ще се възприеме, като постер;

• src - пътят до видеото. При използване на няколко файла се работи със <source> елемента, който се поставя във <video>;

• width - ширината на елемента;• height - височината на елемента

<video src="video/startrek_trailer.mp4"></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.

Примери:

ВМЪКВАНЕ НА ВИДЕО В УЕБ СТРАНИЦА С <VIDEO> ТАГ

• Видеото когато се тества локално работи безпроблемно, но когато е качено на сървъра могат да възникнат евентуални проблеми (да не се възпроизвежда коректно или изобщо да не се вижда).

• Това вероятно е проблем в конфигурацията на уеб сървъра и по-точно MIME типовете (video/mp4, video/ogg и т.н.).

• Всъщност това, че са оказани в <source> елемента не е достатъчно и трябват да бъдат добавени към самия уеб сървър. Това става сравнително лесно - или намирате конфигурационния файл и там добавяте нужните редове или създавате .htaccess файл в папката с видеата.

• А нужните редове като за начало са:AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm

ВМЪКВАНЕ НА ВИДЕО В УЕБ СТРАНИЦА С <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>

Виж видеото

ВМЪКВАНЕ НА ВИДЕО В УЕБ СТРАНИЦА С <VIDEO> ТАГ

• <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.

ВМЪКВАНЕ НА ВИДЕО В УЕБ СТРАНИЦА

2. Чрез <embed> и <object> елементи

ВМЪКВАНЕ НА ВИДЕО В УЕБ СТРАНИЦА С <EMBED> И <OBJECT>

• Възможно е създаването на видео с управляващи контроли (вграден плейър) представими във файл с разширение .swf (фиг.9.9.).

• Реализацията е като се импортне (вмъкне) FLV видео в Adobe Flash и му се избере желания плейър (виж упрежнение 13).

2.1 SWF видео файл с flash компонента

Фиг.9.9 Сайт представящ видео в SWF файл

• Резултатът е създаването на 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 файл.

ВМЪКВАНЕ НА ВИДЕО В УЕБ СТРАНИЦА С <EMBED> И <OBJECT>

<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>

Код: SWF с SWFObject.JS Код: SWF с Flash Plugin

• 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

ВМЪКВАНЕ НА ВИДЕО В УЕБ СТРАНИЦА С <EMBED> И <OBJECT>

2.2 Софтуер за енкодинк

• Много добра функционалност и отлично представяне на видео предоставя JW Player (фиг.9.11).

• Той е отворвн код видео и аудио плейър за Web.

• Поддържа представяне на на flash формат и такива с които работи HTML5 (FLV, H.264, MP4, VP8, WebM, MP3, AAC, JPG, PNG и GIF).

Фиг.9.11 JW Playerhttp://www.longtailvideo.com/players/jw-flv-player

ПРЕДСТАВЯНЕ НА ВИДЕО В ИНТЕРНЕТ - УЕБ ПЛЕЙЪРИ

• Поддържа също различни поточни и playlist формати (включително RMTP, HTTP, поточни формати на живо и др.) и голямо разнообразие от опции за визуализиране.

• Друг подобен проект с отворен код е Flowplayer (фиг.9.12).

Фиг.9.12 flowplayer setuphttp://flowplayer.org/index.html