ХТМЛ5 Видео 10 ствари које дизајнери треба да знају

ХТМЛ5 револуција је узбудљива веб дизајнера из свих подручја свијета. Нове спецификације подржавају на десетине елемената и атрибута за изградњу семантичких веб страница. Ове нове функције укључују мултимедијалне ознаке за аудио и видео формате.

У протеклим годинама је Фласх-базирани медиа плаиер био више него довољан за стреаминг на Вебу и ова технологија је још увијек неопходна за подршку старијим претраживачима. Али, срећом, модерни стандарди су напредовали и укључивање ХТМЛ5 видеа отвара врата за десетине нових могућности.

У овом водичу желим да вам понудим увод у ХТМЛ5 видео за Веб. Потребна је нека пракса да би се разумио матерњи ин-бровсер плејер и сва његова функционалност. А најбољи начин да се упознате је да се најприје рони у глави!

1. Врсте медија

Када радите са фласх видео плејером, превише је уобичајено повезивати све видео формате у .флв. Иако ово функционише, већина ФЛВ датотека не може да задржи квалитет у близини напреднијих формата датотека / кодека. Постоје 3 важне врсте видео записа које подржавају ХТМЛ5: МП4, ВебМ и Огг / Огв. МПЕГ-4 тип датотеке је обично кодиран у Х.264, што омогућава репродукцију у Фласх плаиерима трећих страна. То значи да не морате да сачувате видео записе .флв да бисте подржали замењив метод! ВебМ и Огг су два много новија типа датотека везана за ХТМЛ5 видео. Огг користи Тхеора енцодинг који се базира на стандардном формату аудио датотеке отвореног кода. Они се могу сачувати са .огг или .огв екстензијом.

ВебМ је пројекат који је Гоогле испоручио, а више о томе можете прочитати на ВебМ Пројецт веб страници. Формат је већ подржан од стране Опера, Гоогле Цхроме, Фирефок 4+ и недавно Интернет Екплорер 9. Већина веб професионалаца је још увек непозната, али ВебМ је водећи формат видео медија у будућности веб видеа.

2. Подршка за претраживач

Која од ових врста датотека вам је потребна за ваш сајт? У идеалном случају, све три би биле сјајне јер би пружале пун спектар подршке. Ипак, ово није реално, и заправо, можете покрити све базе само са два. Следи преглед онога што функционише за сваки прегледач:

• Мозилла Фирефок - ВебМ, Огг
• Гоогле Цхроме - ВебМ, Огг
• Опера - ВебМ, Огг
• Сафари - МП4
• Интернет Екплорер 9 - МП4
• Интернет Екплорер 6-8 - Нема ХТМЛ5, само Фласх!

Ако се сећате, раније сам поменуо да ће већина фласх видео плејера подржавати МП4 фајлове све док су кодирани у Х.264. Као такав, сваки од ових претраживача ће уградити МП4 + Фласх као крајње рјешење. То значи да само требате креирати два различите видео формате који подржавају све прегледаче. МП4 за Сафари / ИЕ9 и избор између ВебМ или Огг за остатак.

По мом мишљењу препоручујем да се држите ВебМ формата. Има нека велика имена иза пројекта (наиме Гоогле) и стекао је велику вучу у ХТМЛ5 заједници. Огг / Огв ће бити подржан, али ће највероватније изгубити популарност за мање величине датотека ВебМ-а. Можете прочитати сличан чланак о будућности видеа на вебу који је написао Сеан Голлихер.

3. Уградња једноставног ХТМЛ5 видеа

Погледајмо сада синтаксу која је потребна за уградњу неког узорка кода. Све што нам треба је ХТМЛ5 видео ознака за референцу сваког УРЛ-а филма.

Нотице тхе контроле и аутоматско покретање атрибути не морају да буду подешени са било којим вредностима. Такође сам укључио а плакат атрибут који претходно учитава слику преко видео плејера пре стриминга. Ово је уобичајени преглед са многим веб играчима.

Унутар видео елемента нудимо и МП4 и ВебМ формате. Ако ниједно од ових не може бити учитано, приказујемо грешку за корисника да ажурира свој претраживач.

4. Понуда Фласх Фаллбацк-а

Горе наведени пример је савршен за све веб-прегледнике који су усклађени са стандардима. Ипак, такође морамо да узмемо у обзир да свет није увек на врхунцу технологије. Морамо да подржимо кориснике на старијим верзијама Сафари, Мозилла Фирефок и посебно Интернет Екплорер.

Најбољи начин да се то постигне је Фласх плаиер. Они се могу додати помоћу уграђивање или објекат ознаке за референцу треће стране .свф датотеке. ЈВ Плаиер и Фловплаиер су два слободна опен соурце рјешења која можете размотрити. Такође проверите премиум видео плејере на АцтивеДен-у који могу бити јефтинији од $ 15 - $ 20.

Сада ћемо подесити горњи код да укључимо флеш плејер који подржава скоро сваки постојећи претраживач.

5. Подршка за мобилне уређаје

О овој теми се и даље јако расправља јер је мобилна индустрија тако млада. Аппле је изашао са подршком за МП4 на Мац и иОС уређајима. То значи да на стандардном видео корисничком интерфејсу можете репродуковати видео записе .мп4 на свом иПад-у, иПхоне-у или иПод Тоуцх-у. Ово покрива велики дио тржишног удјела.

Недавно су се Андроид уређаји тешко носили са истим нивоом подршке. Међутим, Гоогле је коначно усвојио .мп4 веб стреаминг који сада капитализира на готово свим мобилним корисницима. А пошто Фласх није опција, МП4 је најбоље решење. Зато прво желите да уградите .мп4 код, тако да иОС уређаји могу одмах да препознају датотеку.

6. Сафари кориснички агент

Једна грешка која се мора споменути је она која постоји између Фласх плаиера и изворног ХТМЛ5 .мп4 стреаминга на Сафарију. Пошто претраживач може да подржи оба фајла, можда ћете имати проблема са преузимањем ХТМЛ5 видео записа уместо Фласх-а. Међутим, захваљујући овом одличном блог посту на ТУАВ-у, лако је променити кориснички агент за претраживање.

Ово ће натерати вашу веб страницу да препозна прегледач као да је покренут на другом уређају. Највјероватније би сте одабрали иПад, који НЕ подржава било коју Фласх репродукцију. Ово је једини велики проблем на који можете наићи приликом тестирања МП4 нативе & фласх метода репродукције.

7. Управљајте контролама плејера

Вјеровали или не, постоје и методе које можете користити за управљање ХТМЛ5 контролама видео плаиера. Све се то може урадити у ЈаваСцрипту повлачењем из скупа отворених метода. Постоји превише начина да се овде наброје, али покушајте да прегледате В3Ц документе за елементе медија за више детаља.

Да би вам дао општу идеју, Опера дев блог је објавио кратке туторијале који су одлични за почетнике. Чак и ако никада раније нисте покупили ЈаваСцрипт или јКуери, још увијек је једноставно погодити земљу са овом. Можете позвати специфичне атрибуте видео медија као што су мутед или тренутно време. Тада можете извести акције (замаглити позадину, приказати огласе) на основу ових критерија манипулацијом ДОМ-а у јКуери.

Исти програмер у чланку Опере обезбеђује радни демо њиховог скриптованог видео плејера. Могућност прилагођавања властитих контрола корисничког сучеља је изванредна. То само показује да је моћан ХТМЛ5 видео.

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

Ово је још једно велико питање које ће вероватно збунити појединце који су мање паметни. Ви само желите да се ваш вебсите горе и стреаминг и сада морате носити с претворити видео? Па то заправо и није тако тешко.

Да бисте се бавили МП4 који је ваш највећи приоритет, можете користити ХандБраке који је бесплатан, опен соурце решење које ради на сва три главна оперативна система. Подржаће Х.264 заједно са још неколико других кодека који ово чине најбољом опцијом за бесплатне кориснике. Ако имате новац за испоруку, морам препоручити Ксилисофт конвертер који је на Мац Апп Стореу за само 40 $ доживотну лиценцу.

Изгледа да ВебМ пут чини живот много лакшим. Миро Видео Цонвертер је бесплатан алат за Виндовс и ОС Кс који производи одличне ВебМ датотеке. Такође може да направи Огг Тхеора енкодирање које излази са прилично великим квалитетом.

9. Изградња Веб плејера

Видео формати са ХТМЛ5 спецификацијама су још увек нови за програмере. Постоје отворени протоколи који само чекају да се играју да би омогућили прилагођене контроле, клизаче, иконе за репродукцију / паузу, итд..

Код је мало интензиван за новопридошлице јер захтева напредно ЦСС циљање и мало формалног јКуери-а. Постоје и други оквири на којима можете да направите прилагођени дизајн плејера. Слично томе, ова презентација је одличан увод у изградњу ХТМЛ5 видео плејера.

Изградња ХТМЛ5 видео плејера

10. ВидеоЈС Либрари

ВидеоЈС је вероватно моје омиљено решење за ХТМЛ5 видео плејере. Све што вам треба је ЈаваСцрипт и ЦСС стил који су укључени негдје у вашем документу. Онда напишете стандардни ХТМЛ5 видео код са неким додатним класама за скиннинг. У наставку сам додао њихов узорак кода:

Ако случајно покренете ВордПресс блог, можете пробати и њихов прилагођени ВП плугин. Он ће аутоматски укључити библиотеку јс / цсс на странице на којима приказујете ХТМЛ5 видео. И то можете урадити унутар било ког поста или уређивача страница помоћу кратких кодова (погледајте овде).

Закључак

Надам се да ће вам овај уводни водич пружити интерес за будућност веб видеа. Са више корисника који се окрећу мобилном, важно је да ХТМЛ5 стандарди буду усвојени за ове врсте медија. Веб би требало да буде једноставнији тако да програмери могу брже да производе потпуно подржана решења. Волели бисмо да чујемо ваше идеје и предлоге за будућност ХТМЛ5 видеа. Ако желите да поделите, слободно оставите коментар у области за дискусију у наставку.