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

ас.Елена Първанова
2011
ТЕМА 9 Разработка на видео материали в
WWW – специфика, технологии,
файлови формати, инструментални
средства.
• В последните години
видеото е неизменна част от
информацията представяна
в интернет.
• За всяка една област можете
да намерите множество
видеоматериали, които
чакат да бъдат разгледани.
• За момента не съществува
единен стандарт за
представяне на видео в
интернет, който да е
платформено съвместим и
представим във всички
браузъри.
• Две са основните технологии за вмъкване на
видео в уеб страница:
o
o
чрез използване на <embed> и/или <object> таг и
интегриран plugin към браузъра;
чрез излозване на <video> таг дефиниран в HTML5.
• Уеб видеото се състои от три елемента,
които са служат за неговата визуализация в
мрежата:



Видео контейнери – съхраняват видео файл;
Видео и аудио кодеци - енкодват
(кодират/конвертират/компресират) видео
файл;
Плейъри – правят достъпно видеото в интернет
(например Adobe Flash Plugin или новият
<video></video> таг ).
• Кодеците са алгоритми, посредством които се енкодват видео
файловете. Впоследствие това видео бива съхранявано във
видеоконтейнер. Плейърите разчитат видеоконтейнера и
благодарение на кодека, декодират видеото в него, за да бъде
то възпроизведено.
• Видео файла обикновенно съдържа няколко записи (tracks)видео запис плюс една или повече аудио записи. Аудио записът
съдържа в себе си маркери, спомагащи синхронизацията на
аудиото с видеото.
• Отделните записи могат да имат метаданни, като
съотношението в размера на страните на видео записа или
езика в аудио записа.
• Контейнерите също имат метаданни, като заглавие на видеото,
номера на епизода (за тв продукции ) и т.н.
• Ogg е отворен стандарт,
обикновенно с разширение .ogv.
Той е най-харесваният от
браузърите, тъй като има по
• MPEG 4 е мултимедиен
произход, без платформено
контейнерен формат с
специфични браузъри поддръжка от
разширение .mp4 или .m4v. Той
Firefox 3.5, Chrome 4 и Opera 10.5,
е базиран на по-стария
докато Safari разчита на MPEG 4. В
QuickTime контейнер на Apple
Ogg контейнерния формат видеото
(.mov).
още е се наричано “Theora”, а
аудиото “Vorbis”. При десктоп
• Flash Video с разширение .flv
системите Ogg е поддържан от Linux
или .f4v. Използва за
и може да се използва под Mac and
представянето си Adobe Flash
Windows след инсталирането на
Player версия 6–10. По-късният
QuickTime components или
F4V формат се поддържа от
съответно DirectShow filters. Също
Flash Player 9 update 3.
така е представим чрез много
добрия 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
o
o
Разработен е от 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 видеа.
• Theora е свободен кодек
произхождащ от VP3 кодек и
разработен в последствие от
Xiph.org Foundation.
• Theora може да бъде прикачен
във всеки един контейнерен
формат, макара че най-често
може да се види в Ogg контейнер
(при Mozilla Firefox 3.5 ).
• Linux поддържа Theora, Windows
и on Mac OS X представят Theora
видео след инсталирането на
отворения код декодерен
софтуер на Xiph.org.
• VP8 е видео кодек на On2,
компанията създател на VP3.
• Технически дава изходен
файл равен на H.264 High
профил, докато поддържа
ниско ниво на декодиране
равняващо се на H.264
Baseline профил.
• С придобирането на On2 от
Google през май 2010, новия
кодек VP8 става напълно
свободен.
Sorenson Spark
H.264
MPEG-4
.mp4
Theora
VP6
H.264
.flv
Фиг.9.1 Най-популярните видео контейнери в
интернет и предпочитаните за тях кодеци
.ogv
Кодеци/
контейнери
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+
Таблица 1 Видео кодеци поддържани от популярните съвременни браузъри
† Safari представя всичко което QuickTime представя. QuickTime идва с
преинсталирана H.264/AAC/MP4 поддръжка. Визможно е инсталирането
на други plugins, за да добавят поддръжката на Theora и WebM.
‡ Google Chrome скоро ще поддържа H.264
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.mediacoder
hq.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, DVRMS, MKV, FLV и др.
• Отличителни черти са:
– Конвертира видео за уеб
страници, Apple iPod ,
Microsoft Zune, Sony PSP;
– Съддава DVD филми от
различни формати
– Извлича изображения и
аудио и саундтаци от филми.
Фиг.9.8 Скрииншот на AVS Video
Converter
www.avs4you.com
• HTML5 <video> поддържа всякаква медия, като браузърът определя
кои формати ще възпроизведе. Необходимо е да се знае какви
формати поддържа конкретният браузър:
o
o
o
o
o
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
<video src="video/startrek_trailer.mp4"></video>
Атрибути на елемента <video>:
• autoplay - чрез него, видеото
започва да се сваля и
възпроизвежда веднага след
зареждането на страницата;
• autobuffer/preload - започва
буфериране на видеото
веднага, след като страницата
се зареди;
• controls - с този атрибут
включвате лентата с контроли
под видеото. Без нея са
налични контроли само при
кликване с десен бутон;
• loop - след своя край, видеото
започва отново;
• poster - с този атрибут оказваме
пътя до картинката, с която ще
започва видеото. Ако не се
сложи, то автоматично първият
кадър ще се възприеме, като
постер;
• src - пътят до видеото. При
използване на няколко файла
се работи със <source>
елемента, който се поставя във
<video>;
• width - ширината на елемента;
• height - височината на елемента
<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.
• Видеото когато се тества локално работи безпроблемно, но
когато е качено на сървъра могат да възникнат евентуални
проблеми (да не се възпроизвежда коректно или изобщо да не
се вижда).
• Това вероятно е проблем в конфигурацията на уеб сървъра и
по-точно MIME типовете (video/mp4, video/ogg и т.н.).
• Всъщност това, че са оказани в <source> елемента не е
достатъчно и трябват да бъдат добавени към самия уеб сървър.
Това става сравнително лесно - или намирате
конфигурационния файл и там добавяте нужните редове или
създавате .htaccess файл в папката с видеата.
• А нужните редове като за начало са:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
•
Някой от браузърите не поддържат 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>
•
•
•
<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.
• Възможно е създаването
на видео с управляващи
контроли (вграден плейър)
представими във файл с
разширение .swf (фиг.9.9.).
• Реализацията е като се
импортне (вмъкне) FLV
видео в Adobe Flash и му
се избере желания плейър
(виж упрежнение 13).
Фиг.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
файл.
<object id="whatever" classid="clsid:d27cdb6e-ae6d-11cf96b8-444553540000" width="400" height="300"
codebase="http://download.macromedia.com/pub/shockwa
ve/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>
•
•
•
•
•
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-videoencoder/
Фиг.9.10 Видео създадено чрез Video
Encoder for Adobe Flash
•
•
•
• Поддържа също различни поточни и
Много добра функционалност и
playlist формати (включително RMTP,
отлично представяне на видео
HTTP, поточни формати на живо и др.)
предоставя
(фиг.9.11).
и голямо разнообразие от опции за
Той е отворвн код видео и аудио
визуализиране.
плейър за Web.
• Друг подобен проект с отворен код е
Поддържа представяне на на flash
(фиг.9.12).
формат и такива с които работи HTML5
(FLV, H.264, MP4, VP8, WebM, MP3, AAC,
JPG, PNG и GIF).
Фиг.9.11 JW Player
http://www.longtailvideo.com/players/jw-flv-player
Фиг.9.12 flowplayer setup
http://flowplayer.org/index.html