У првом од својих блогова за ПЦ Про , Веб Девелопер Иан Девлин открива како да уграђујете видео у вашу веб локацију помоћу ХТМЛ5
како гледати иоутубе на року
Вероватно највећа карактеристика ХТМЛ5-а о којој се највише говори о уграђеном видеу. Тренутно је једини начин додавања видео садржаја на вашу веб локацију независни додатак као што је Фласх, КуицкТиме или РеалПлаиер. Са освитом ХТМЛ5 и видео елемента, све ће се то променити, с тим што ће веб прегледач управљати видео подршком, уклањајући потребу за било којом подршком треће стране.
Неколико веб прегледача већ нуди подршку за ХТМЛ5. Овде ћемо открити како можете да уградите видео без додатака на своју веб локацију и проблеме са којима ћете се суочити.
Типови датотека и компатибилност прегледача
За почетак ћемо укратко погледати различите типове видео датотека подржаних у ХТМЛ5. То су Тхеора ОГГ и Х.264 (.мп4). Различити прегледачи подржавају различите типове, а неки уопште не подржавају ниједан. Следећа табела указује на ово:
| Тхеора ОГГ | Х.264 (мп4) | |
|---|---|---|
| Фирефок 3.5+ | ✓ | Икс |
| Цхроме 3+ | ✓ | ✓ |
| Сафари 3+ | Икс | ✓ |
| Опера 10.5+ | ✓ | Икс |
| Интернет Екплорер 8 | Икс | Икс |
| Интернет Екплорер 9 | Икс | ✓ |
| иПхоне | Икс | ✓ |
| Андроид | Икс | ✓ |
Кодеци и друга техничка питања
ХТМЛ5 сам не одређује видео кодек који ће се користити и то је довело до аргумената који је најбоље за употребу на вебу . Дакле, да бисмо покривали све прегледаче, морамо подржавати оба кодека.
А ту је наравно и Интернет Екплорер. Тренутно ниједна објављена верзија Интернет Екплорер-а не подржава видео елемент, а додатак је и даље потребан за репродукцију видео записа. Ово ће се променити издавањем Интернет Екплорер-а 9 (вероватно почетком следеће године), када ће бити подржан Х.264, заједно са многим другим ХТМЛ5 додацима.
У случају да се питате како, своје видео датотеке можете претворити у ОГГ (више о типу Тхеора ОГГ можете прочитати на ТхеораЦоокбоок ) датотеке помоћу Миро Видео Цонвертер .
За даље детаљне информације о видео елементу и кодецима, идите на зароните у хтмл5: видео на вебу Марк Пилгрим.
ХТМЛ5 код
Сада прелазимо на стварни ХТМЛ5 код и како можемо постићи да ствар функционише. ХТМЛ5 нам пружа два нова елемента која можемо користити за додавање видео записа на наше веб странице: елемент, који смо већ поменули, и елемент. Погледајмо сваки од њих редом.
Елемент
Видео елемент може имати следеће атрибуте:
| Атрибут | Опис |
|---|---|
| срц | важећу УРЛ адресу саме видео датотеке |
| аутоматско покретање | логичка вредност која показује да ли видео треба аутоматски репродуковати |
| контроле | логичка вредност која указује на то да прегледач треба да прикаже задате контроле медија |
| петља | логичка вредност која показује да ли видео треба репродуковати више пута |
| прелоад | указује прегледачу да ли је потребно прелиминарно преузимање самог видеа или су само метаподаци потребни. Могуће вредности су:
|
| плакат | УРЛ датотеке са сликама која ће се приказати када нема доступних видео података |
| ширина | ширина видео записа, у ЦСС пикселима |
| висина | висина видео записа, у ЦСС пикселима |
Из овога се види како је лако уградити ОГГ видео у вашу веб страницу само помоћу видео елемента:
То је заиста све.
Било који прегледач који подржава Тхеора ОГГ формат сада би требало успешно да приказује и репродукује ваш видео без даљег одлагања. Наравно, то није тако лако, јер као што смо видели из горње табеле, код би радио само у Фирефоку, Цхроме-у и Опери. Тако да морамо да имамо и резервни део за Х.264. То се може постићи коришћењем елемент, који нам омогућава да дефинишемо више извора медија за видео елемент.
како означити некога у албуму на фацебооку
Елемент
Изворни елемент има следеће атрибуте:
| Атрибут | Опис |
|---|---|
| срц | важећу УРЛ адресу саме медијске (у овом случају видео) датотеке |
| тип | врста медијске датотеке која мора бити МИМЕ тип , на пример. type='video/ogg' означава да се ради о Тхеора ОГГ видео запису, а такође можете да пружите МИМЕ кодек који ће прегледачу помоћи да одлучи како ће репродуковати видео запис помоћу type='video/ogg; codecs='theora, vorbis'. |
| пола | даје предвиђену врсту медија медијског ресурса и мора бити ваљана упит медија , на пример. media='handheld' означава да је видео погодан за ручне уређаје или media='all and (min-device-height:720px)' што указује да је видео прикладан за екране од 720 пиксела или више. |
Напомена: изворни елемент је воид и има почетну ознаку, али нема завршну ознаку
Најкориснија ствар код изворног елемента је та што можемо да га користимо за слагање различитих типова датотека, омогућавајући прегледачу да испроба сваки заузврат док не пронађе један који може да репродукује.
Користећи и заједно
Да бисмо видео записе слагали у различите типове унутар видео елемента, код уносимо на следећи начин:
Your browser does not support the video element.
Горњи код ће сада радити у свим прегледачима, осим у Интернет Екплореру, који ће приказати горе назначену поруку.
То можете сами тестирати тако што ћете погледати страницу ХТМЛ5 Тест Видео, која садржи пример видео лептира у формату Тхеора ОГГ и МП4, па ако ово гледате у Фирефоку, Цхромеу, Сафарију, Опери или на иПхонеу или Андроид телефон, требало би да будете у могућности да га видите.
Оштри ножеви међу вама сада ће приметити да можемо искористити ово слагање и имати резервни Фласх (или неки други додатак) на дну, уместо да прикажемо жао што не видите ову видео поруку, користећи следећи код :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Закључак
Као и код већине ХТМЛ5 елемената, подршка за прегледаче за изворне и видео елементе тренутно је подељена. Тренутно се такође води велика расправа о томе да ли ће изворни елемент убити употребу Фласх-а као најпопуларнијег метода додавања видео садржаја на веб локације. Нисам сигуран да ће у потпуности убити Фласх, али без обзира на то мислим да је поштено рећи да је ту да остане и да ће веб програмерима пружити чистији и лакши приступ уградњи видео записа.
