Fridaycode.net

В днешно време средностатистическият интернет потребител трудно би си представил мрежата без видео. В голям процент от случаите, търсеният от вас резултат ви предоставя видео, независимо дали го желаете или не. Четете новини? Много вероятно да попаднете на видеорепортаж. Търсите музика? Ще ви се предложи видеоклип. Четете ревю на игра? Сто процента ще видите, както скрийншоти от нея, така и трейлър. Готварство, риболов, туризъм, мода, автомобили... навсякъде имаме видеоматериали, които само чакат да бъдат изгледани. Точно поради тази причина видеото в интернет отдавна се е утвърдило, като незаменима част от него.

Досега представянето на видео ставаше основно по един начин - чрез flash video player (затварям си очите за QuickTime). Доскоро това не пречеше на никой, но напоследък, особено след разгорещилите се страсти между между Apple и Adobe, въпросът започна да се повдига много често. Apple и техните "ай" продукти, ограничават достъпа на потребителите до флаш и по този начин те не могат да се наслаждават на сайтовете, които го използват, а повярвайте те са доста. Това си има разумна причина и може да прочетете страхотните думи на Стийв Джобс тук.

И точно както Камерън и неговият Аватар поставиха началото на нова 3D ера в киното, така и г-н Джобс с iPad/Phone/Pod са на път да ускорят процеса на преминаване към ново поколение видео плейъри. С други думи, този своеобразен монопол наложен от Adobe е на път да се пречупи, тъй като на хоризонта се задава силуетът на друг каубой. Да, познахте - това е HTML5, препускащ на своя жребец. За жалост въпреки устрема му, този галоп ще продължи известно време, така че все още нашият каубой денем ще се лута в пуснията, а нощем ще седи край огъня с консерва боб в ръка.

Разбира се, както казах в някои от предишните статии, това че новите технологии все още не са във финалната си фаза, не означава, че не можем да ги ползваме и по този начин да движим целия процес към успешен завършек. Това е причината да пишем втория урок за HTML5. Ако сте пропуснали Основи на HTML5, в който добре е обяснена логиката на новия стандарти и основните тагове, то може да хвърлите едно бързо око.

Но стига толкова общи приказки, представям на вашето внимание, негово величество <video>! В тази статия ще се опитам да подбера и сортирам не само най-важното и ценното за новия таг, но и за това как да си направим базов видеоплейър с HTML5. Естествено всичко това ще го представя по колкото се може по-разбираем начин.

View DemoDownload

Искам да направя и едно последно уточнение преди да започнем. В статията ще се наблегне само на HTML5, а не на Flash. Няма да има сравнения помежду им, нито ще заемам страни. Из мрежата има стотици статии по въпроса и аз също съм на мнение, че Flash няма да изчезне скоро, въпреки, че преживява тежки времена.

Обща информация

И така, нека започнем. Реално елементът <video> е нов и е част от HTML5, като с него може да embed-вате (прикрепяте е най-логичният превод, който ми дойде) видео към вашите страници. Хубавото в случая е, че нямате нужда от каквито и да е досадни плъгини (визирам Flash), които пищят, че искат инсталация. Поддържа се от актуалните версии на Firefox, Safari, Opera и Chrome, като се очаква и Internet Explorer 9 да няма проблеми с него. По-старите версии на IE ще си карат на Flash. На мобилната сцена също имаме звезди - HTML5 се харесва на iPad, iPhone, iPod Touch и Android. Доколко вашият браузър поддържа HTML5 може да проверите тук.

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

Що е то звук и картина? Контейнери, кодеци и още нещо...

Материята е малко встрани от темата, но съм длъжен да спомена някои основни понятия, без които ще ви е трудно да се ориентирате. Говоря за наистина базови неща, защото за видео/аудио кодеци, енкодинг и пр. може да се говори с дни.

По принцип за нормалния потребител видеофайлът представлява име.avi, име.mkv или нещо от този род. Хората казват "този файл е в AVI формат". Да, ама не. Понятията трябва да се разграничават, за да не се чудите защо видеото на сайта ви не се възпроизвежда. И като деен член на HD отбора на Замунда ще споделя скромен опит.

Видеоконтейнери

Видеоконтейнерите могат да се възприемат буквално - те съхраняват видеофайл. Кодеците от своя страна са алгоритми, с които се енкодват (кодират/конвертират/компресират) видео файловете. Впоследствие това видео бива съхранявано във видеоконтейнер. Плейърите разчитат видеоконтейнера и после благодарение на кодека, декодират видеото в него, за да бъде то възпроизведено. Всеки контейнер има своите отличителни разширения. Популярните контейнери са MPEG 4 (.mp4, .m4v), AVI (.avi), OGG (.ogv, .ogg), Flash Video (.flv) и наскоро обявеният от Google - WebM. Измежду тях OGG е най-харесваният от браузърите, тъй като има нейтив поддръжка от Firefox, Chrome и Opera, докато Safari разчита на MPEG 4. WebM също се очаква да се поддържа нейтив от въпросните браузъри, но в бъдещите им версии. Освен това WebM контейнера ще разчита на специалния VP8 кодек, за който ще стане дума по-надолу и като цяло той ще има за цел да обедини различията във форматите на браузърите.

Видео и аудио кодеци

Видеокодеците от своя страна са хиляди, но тези, които на нас биха ни свършили работа са H.264, Theora и VP8. Първият е изключително популярен и 90% от съдържанието, което гледате било онлайн или офлайн е енкоднато с него. Поради широките възможности на H.264, той се ползва в продуктите на Apple, във Flash, Android, YouTube, 99% от HD риповете, които сваляте и във висококачествените Blu-ray рилийзи. Работният му принцип е на база профили, като различните устройства работят с различни профили. Единственият минус на този кодек е, че лицензът му е доста оплетен. Сегашният му "покровител" казва, че ще бъде безплатен за интернет браузърите до 2016 г., но не е лошо да се поразпитате по-сериозно, ако смятате да го ползвате с комерсиална цел. Theora от своя страна е безплатен за всякаква употреба и единственото, което ни засяга за него в момента е, че е ползваем във Firefox 3.5+. VP8 е кодекът, който ще "захранва" WebM контейнера. Той също е безплатен за употреба, но вероятно приложение ще намери малко по-напред във времето.

Ситуацията с аудиото е идентична - пълно е с кодеци, но нас ни интерсуват само MP3, AAC и Vorbis. По-интересното, което трябва да знаете за тях е, че MP3 е двуканален кодек, който е безплатен и който може да бъде "прикачен" към всеки контейнер. AAC е многоканален и доста гъвкав кодек, но за жалост платен, което малко го ограничава. Vorbis също е многоканален, но безплатен и може да се ембедва в OGG, WebM и MPEG 4 контейнери.

Като цяло 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), която ще ви е нужна по-нататък.

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

За да намерите софтуер, с който да конвертирате своите файлове, е достатъчно да напишете в Google convert *желан формат* to *желан формат*. Ще изскочат хиляди програмки, които ще ви свършат работа, но се предполага, че повечето от тях ще бъдат платени. Ето защо ви представям няколко, които са безплатни и много лесни за употреба. Първата е добре познатият видеоплейър VLC. С него може да конвертирате своите файлове във всички изброени по-горе комбинации. Друг полезен тул е Firefogg, който е екстенжън за Firefox и конвертира вашето видео в Theora+Vorbis или VP8+Vorbis, т.е. OGG или WebM. Много е удобен, но при мен имаше проблеми с рисайза на някои файлове. HandBrake пък се справя с H.264+AAC, т.е. MPEG 4. Добро предложение е уникално опростения от към функционалност и интерфейс Miro Video Converter. За жалост единственото, което прави той е да сменя форматите и нямате грам настройка на разположение, но когато те не са ви нужни, препоръчвам ви да го използвате. Може да пробвате и някои софутуери, които разполагат с огромна база от кодеци и конвертират почти всичко към всичко. Такива са MediaCoder или SUPER. Ако сте фенове на command-line туловете, вашият избор ще бъде ffmpeg2theora, която "мачка" към Theora+Vorbis. Като цяло най-трудно се енкодва към WebM поради факта, че форматът е нов и няма достатъчно софтуер за него. С това снаряжение е трудно някое видео да ви се опре, но все пак нищо не се знае.

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

Елементът <video> под ножа!

Всъщност "да си направим видеоплейър" е лесно. Достатъчен е един ред код:

<video src="video/startrek_trailer.mp4"></video>

Видео ще има, но ще изпитвате затруднения с възпроизвеждането му, тъй като няма да има контроли. Някои браузъри (Firefox, Chrome) предлагат контекстно меню (десен бутон), което оправя нещата. Ние обаче не се задоволяваме с подобни дреболии и ще разгледаме подробно атрибутите на елемента <video>, защото доста от тях са от голямо значение.

• autoplay - чрез него, видеото започва да се сваля и възпроизвежда веднага след зареждането на страницата. Полезно е, ако се очаква потребителят 100% да изгледа видеото (например при клик на филмче в YouTube) и е дразнещо, когато видеото е част от статия и не е нужно да започва веднага, тъй като има предварителни текстови обяснения. Друг пример са мобилните телефони. iPhone наппример не поддържа autoplay най-малкото, защото пести трафик.
• autobuffer/preload - започва буфериране на видеото веднага, след като страницата се зареди. Да не се бърка с autoplay, където видеото се възпроизвежда, като тук само се буферира и от вас зависи кога ще започне. Приложението обаче е сходно с това на autoplay. Имаме два атрибута, тъй като се очаква в скоро време вторият да замести първия. Засега обаче и двата намират приложение, така че експериментирайте.
• controls - с този атрибут включвате лентата с контроли под видеото. Без нея ще имате налични контроли само при десен клик. Те са основната гъзарийка на плейъра и са податливи на стилизация. Този процес обаче не е от най-лесните и доста хора оставят дифолтните контроли, а те от своя страна са различни под всеки браузър и устройство. Това не е голям проблем, но ако искате вашият плейър да е уникален, трябва да си поиграете с неговата визия. Имайте едно на ум, че вашите custom controls се пишат с JS и нямат да бъдат видими, ако по някаква причина той е изключен.
• loop - след своя край, видеото започва отново.
• poster - с този атрибут оказваме пътя до картинката, с която ще започва видеото. Ако не се сложи, то автоматично първият кадър ще се възприеме, като постер. Има слухове, че атрибутът не само не се поддържа от по-старите OS-и на iPhone/iPad (в iOS4 е оправено), ами и прави видеото негледаемо. Има съмнения и че не всички браузъри го поддържат, така че единственото универсално и леко извратено решение за момента е да "интегрирате" постер-изображението, като първи кадър от видеото. Разбира се, този процес в по-големите сайтове е автоматизиран.
• src - пътят до видеото. Ако искаме да използваме няколко файла, то този атрибут не ни е от полза, а тъй като по-горе разбрахме, че ще са ни нужни минимум две видеа, направо може да забравите за src. При използване на няколко файла се работи със <source> елемента, който се поставя във <video>. Може да поставяте колкото си пожелаете <source> елемента, като браузърът чете списъка отгоре надолу и избира първия файл, който може да възпроизведе. Примери ще видите по-надолу.
• width - ширината на елемента.
• height - височината на елемента.

Всъщност тези атрибути са в същината на <video> елемента. По принцип са лесни са за употреба, но е добре да си поиграете с тях под различни браузъри, устройства и операционни системи, за да сте по-сигурен в действията си. Ето един пример, който да обобщи малко знанията.

<video width="1280" height="544" controls autoplay>
	<source src="video/startrek_trailer.mp4" type="video/mp4" />
	<source src="video/startrek_trailer.ogv" type="video/ogg" />
</video>

Така ние ще възпроизведем видео с HD резолюция, което има контроли и благодарение на autoplay ще започне само. Вътре имаме 2 сорса и ако сте чели по-внимателно нагоре ще си спомните, че mp4 ще се възпроизведе от Safari/Chrome, а ogv от Firefox и Opera. Искам да вметна, че за момента е добре да слагате mp4 файла най-отгоре, тъй като има бъг под iPad, който възпроизвежда само и единствено първото видео. Освен това надявам се сте обърнали внимание, че width и height атрибутите изискват стойност, а controls и autoplay работят на принципа true/false, т.е. нужно е само да ги напишете, за да се включат.

Сега нека обърнем внимание на елемента <source>. Той има няколко атрибута, благодарение на които може по-лесно да ориентирате самия браузър какъв тип е файла. Първият, разбира се е src, чрез който указвате пътя до файла. Следващият препоръчителен, но според мен задължителен е type. Когато го има, браузърът прочита първо него, вижда дали може да пусне конкретния файл и ако не успее, минава на следващия. Така той помага много по-бързо да се установи форматът на контейнера и спестява адски много време в отчаяни опити за възпроизвеждане на формати, които не се поддръжат. По-любопитното е, че в type може дори да окажете какъв аудио и видео кодек сте използвали и ето веднага един пример:

<source src="video/startrek_trailer.ogv" type='video/ogg; codecs="theora, vorbis"' />

Обърнете внимание на кавичките - умните браузъри ги разбират (и ви поправят), но някои може да сгафят! Последният атрибут е media. Добре познат от <link>, той ни указва на какъв тип медия ще се гледа видеото - all, screen, handheld, tv и пр.

След всичко изчетено по-нагоре, вече знаете доста за <video> елемента и за това как да си направите плейър. Въпреки това има още няколко неща, които трябва да спомена, за да сте напълно подготвени за джунглата, в която се каните на навлезете. Едното от тях е евентуален проблем, който може да възникне и който се чувствам длъжен да опиша. Имайте предвид, че тествайки локално, вероятно вашите плейъри работят на 100%. Но когато качите проектът си някъде, има шанс видеото да не се възпроизвежда коректно или изобщо да не се вижда. Това вероятно ще бъде проблем на конфигурацията на уеб сървъра и по-точно MIME типовете (video/mp4, video/ogg и т.н.). Всъщност това, че са оказани в <source> елемента не е достатъчно и трябват да бъдат добавени към самия уеб сървър. Това става сравнително лесно - или намирате конфигурационния файл и там добавяте нужните редове или създавате .htaccess файл в папката с видеата. А нужните редове като за начало са:

• AddType video/ogg .ogv
• AddType video/mp4 .mp4
• AddType video/webm .webm

Добавяйте още, ако е нужно. Като цяло този проблем се проявява рядко, но го има, така че имайте едно на ум.

Остана едно единствено нещо, което трябва да направим, за да завършим нашия плейър. Трябва да му добавим флаш версия за вариантите, в които браузърът не поддържа HTML5. Става дума за нашите три малки, сладки идиотчета - IE6, IE7 и IE8. Голям процент от хората ги използват, така че трябва да се съобразяваме с това. Ето защо специално за тях ще поставим един <object> елемент (така се ембедва Flash за който не знае) във <video>. Готиното в случая е, че браузър, който не поддържа HTML5 ще игнорира <video> и разположените в него елементи, като ще прочете само <object>. Съответно обратното важи за браузъри поддържащи HTML5. За да се застраховате за варианта, в който HTML5 и Flash плейърите поради някаква причина фейлнат, може да показвате линкове за директен даунлоуд. Все пак това са много редки случаи, но като цяло не ви пречи да се презастраховате.

Няма да се впускам в подробни обяснения за атрибути и параметри на <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>

Както се подразбира от единия коментар по-горе, за да имате функциониращ Flash плейър, то трябва да имате свален такъв. На вашето внимание представям два от по-популярните - лидерът JW Player и Flowplayer.

Готовият плейър би трябвало да работи абсолютно навсякъде. Валиден е само под HTML5 Doctype, но може да се ползва и със HTML 4.01 и XHTML 1.

Ето и пълните HTML и CSS:

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8" />
<title>Всичко за HTML5 video или как да създадем видеоплейър!</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
	<div id="player">
		<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>
	</div>
</body>
</html>

CSS

body {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	line-height: 1.3em;
	background: #f2f2f2;
	color: #666;
}

#player {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1280px;
	height: 544px;
	margin: -272px 0 0 -640px;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
	box-shadow: 0 0 10px rgba(0,0,0,.5);
}

Статията стана доста теоретична, но както сами виждате практическата част не изисква толкова писане, колкото настройки и добро познаване на всички елементи и атрибути. За финал ще кажа само, че тъй като HTML5 <video> елемента, браузърите и останалите мобилни устройства, са в процес на развитие, много е вероятно нещо, някога или при определени условия да не работи. Ако намерите подобен феномен, побързайте да го споделите, за да се опитаме заедно да намерим решение.