HTML5 Видео 10 неща, които дизайнерите трябва да знаят

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

През последните години Flash-базиран мултимедиен плейър в повече от достатъчен за стрийминг в мрежата и тази технология все още е необходима за поддържане на стари браузъри. Но за щастие модерните стандарти са напреднали и включването на HTML5 видео отваря врати за десетки нови възможности.

В това ръководство бих искал да предложа въведение в HTML5 видео за мрежата. Необходима е известна практика да се разбере родният браузър и цялата му функционалност. И най-добрият начин да се запознаете е да се гмуркате първо в главата!

1. Видове медии

Когато работите с флаш видеоплейър, твърде често се свързва всички видео формати в .flv. Докато това работи, повечето flv файлове не могат да запазят качеството никъде близо до по-напредналите файлови формати / кодеци. Има три важни типа видео, които се поддържат от HTML5: MP4, WebM и Ogg / Ogv. MPEG-4 типът на файла обикновено е кодиран в H.264, което позволява възпроизвеждане в Flash плейъри на трети страни. Това означава, че не е необходимо да запазвате .flv видеоклип, който да поддържа резервен метод! WebM и Ogg са два много по-нови типа файлове, свързани с HTML5 видеоклипа. Ogg използва кодирането на Theora, което се основава на стандартния аудио формат с отворен код. Те могат да бъдат запаметени с разширение .ogg или .ogv.

WebM е проект на Google, който можете да прочетете повече на уеб сайта на WebM Project. Форматът вече се поддържа от Opera, Google Chrome, Firefox 4+ и наскоро Internet Explorer 9. Все още не е познат от повечето уеб специалисти, но WebM е водещият видео медиен формат в бъдещето на уеб видеото.

2. Поддръжка на браузъра

И така, кой от тези типове файлове ви е необходим за вашия уеб сайт? В идеалния случай всички 3 биха били страхотни, тъй като те осигуряват пълния спектър на поддръжка. И все пак това не е реалистично и всъщност можете да покриете всички бази само с две от тях. Ето разбивка на това, което работи за всеки браузър:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - Не HTML5, само Flash!

Ако си спомняте, по-рано споменах, че повечето флаш видео плейъри ще поддържат MP4 файлове, стига да са кодирани в H.264. Като такъв, всеки от тези браузъри ще вгради MP4 + Flash като последна мярка. Това означава, че само трябва да създадете две различни видео формати, които поддържат всички браузъри. MP4 за Safari / IE9 и избор между WebM или Ogg за останалите.

По мое мнение аз силно препоръчвам да се придържате към формата WebM. Той има някои големи имена зад проекта (а именно Google) и е спечелил много сцепление в HTML5 общността. Ogg / Ogv ще се поддържа, но най-вероятно ще загуби популярността си при по-малките размери на файловете на WebM. Можете да прочетете свързана с бъдещето на видеото в интернет, написана от Шон Голиер.

3. Вграждане на прости HTML5 видеоклипове

Нека сега разгледаме синтаксиса, необходим за вграждане на пробен код. Всичко, от което се нуждаем е HTML5 видео маркерът, който препраща към всеки URL на филм.

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

Ние предлагаме вътрешни формати MP4 и WebM във видео елемента. Ако нито едно от тях не може да бъде заредено, показваме грешка, която потребителят може да актуализира.

4. Предлагането на Flash Fallback

Примерът по-горе е идеален за всички уеб-браузъри, съвместими със стандартите. И все пак трябва да вземем под внимание, че светът не винаги е на върха на технологиите. Трябва да поддържаме потребителите на по-стари версии на Safari, Mozilla Firefox и особено Internet Explorer.

Най-добрият начин да постигнете това е чрез резервен играч на Flash. Те могат да бъдат добавени с помощта на закрепвам или обект тагове за позоваване на .swf файл на трета страна. JW Player и Flowplayer са две безплатни решения с отворен код, които можете да обмислите. Но също така проверете премиум видео плейърите на ActiveDen, които могат да достигнат най-евтините $ 15 - $ 20.

Сега нека да настроим кода по-горе, за да включим резервен плейър, който да поддържа почти всеки съществуващ браузър.

5. Поддръжка на мобилни устройства

Тази тема все още се дискутира силно, тъй като мобилната индустрия е толкова млада. Apple излезе с поддръжка за MP4 на Mac и iOS устройства. Това означава, че можете да създавате поточно .mp4 видео файлове на вашия iPad, iPhone или iPod Touch в стандартния видео интерфейс. Това покрива голяма част от пазарния дял.

Напоследък устройствата с Android трудно успяха да стигнат до същото ниво на поддръжка. Въпреки това Google най-накрая прие .mp4 уеб стрийминг, който сега се възползва от почти всички мобилни потребители. И тъй като Flash не е опция тук, MP4 е най-доброто решение. Ето защо искате първо да вградите .mp4 кода, така че iOS устройствата да могат да разпознаят файла веднага.

6. Safari User Agent

Една грешка, която трябва да се спомене е съществуваща между Flash плейъри и родния HTML5 .mp4 стрийминг на Safari. Тъй като браузърът може да поддържа и двата файла, може да имате проблеми с изтеглянето на HTML5 видео потока на мястото на Flash. Въпреки това благодарение на този страхотен блог пост в TUAW е лесно да промените потребителския си браузър агент.

Това ще накара уеб страницата ви да разпознае браузъра като работещ на друго устройство. Най-вероятно ще изберете iPad, който НЕ поддържа никакво възпроизвеждане на Flash. Това е единственият сериозен проблем, с който може да се сблъскате, когато тествате MP4 родния и flash методите на възпроизвеждане.

7. Управление на контролите на плейъра

Вярвате или не, но има и методи, които можете да използвате за манипулиране на контролите за видео плейър HTML5. Всичко това може да се направи в JavaScript, като се извади от набор от отворени методи. Има прекалено много, за да се изброят тук, но опитайте се да прегледате документите на W3C медийните елементи за повече подробности.

За да ви даде обща идея, Opera dev блог е публикувал някои кратки уроци, които са чудесни за начинаещи. Дори и да не сте вдигнали JavaScript или jQuery и преди, все още е лесно да се справите с това. Можете да извикате специфични атрибути на видео носителя като заглушен или текущо време. След това можете да извършвате действия (затъмняване на фона, показване на реклами) въз основа на тези критерии, като манипулирате DOM в jQuery.

Същият разработчик в статията на Opera предоставя работна демонстрация на техния скриптов видеоплейър. Възможността да персонализирате собствения си потребителски интерфейс е изключителен. Той просто показва как се превръща в мощен HTML5 видео.

8. Преобразуване на видео формат

Това е друг голям проблем, който най-вероятно ще обърка по-малко технологично подготвените лица. Вие просто искате да получите вашия сайт и стрийминг и сега трябва да се справят с конвертиране на видеоклипове? Ами всъщност не е толкова трудно.

За да се справите с MP4, който е най-големият ви приоритет, можете да използвате HandBrake, който е безплатен, отворен код, който работи на всички 3 основни операционни системи. Той ще поддържа H.264 заедно с няколко други кодека, което го прави най-добрият вариант за потребителите на freebie. Ако имате пари да платите, трябва да препоръчам Xilisoft конвертор, който е на Mac App Store само за $ 40 доживотна лицензия.

Изглежда, че маршрутът на WebM прави живота много по-лесен. Miro Video Converter е безплатен инструмент за Windows и OS X, който произвежда качествени WebM файлове. Той също така може да направи Ogg Theora кодиране, което излиза с доста голямо качество, както добре.

9. Изграждане на Web Player

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

Кодът е малко интензивен за новодошлите, тъй като изисква модерно CSS насочване и малко формално jQuery. Има и други рамки, върху които вече можете да създадете персонализиран дизайн на плейъра. Подобно представяне на слайдшоу е чудесно въведение в изграждането на HTML5 видео плейър.

Изграждане на HTML5 видео плейър

10. Библиотека на VideoJS

VideoJS вероятно е любимото ми решение за HTML5 видео плейъри. Всичко, от което се нуждаете, е самостоятелният JavaScript и CSS стиловете, включени някъде в документа ви. След това ще напишете стандартния HTML5 видео код с някои допълнителни класове за кожа. По-долу добавих пробния им код:

Ако се случи да стартирате WordPress блог, можете да опитате и техния персонализиран WP плъгин. Тя автоматично ще включи библиотеката js / css на страници, на които се показва HTML5 видео. Можете да направите това от всеки пост или редактор на страници, използвайки кратки кодове (вижте тук).

заключение

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