Видео ознака ХТМЛ 5 олакшава додавање видео записа на своје Веб странице . Али, док се чини да је лако на површини, има много ствари које треба да урадите да бисте видео и покренули свој видео. Овај туторијал ће вас провести кроз кораке за креирање странице у ХТМЛ-у 5 који ће покренути видео у свим модерним претраживачима.
- Хостинг Иоур Овн ХТМЛ 5 Видео насупрот коришћења ИоуТубе-а
- Брзи преглед видео подршке на Вебу
- Креирајте и измените свој видео
- Претворите Видео у Огг за Фирефок
- Претворите Видео у МП4 за Сафари
- Претворити Видео у ФЛВ за Интернет Екплорер
- Додајте видео елемент на вашу веб страницу
- Додајте ЈаваСцрипт и Фласх Плаиер да бисте добили Интернет Екплорер за рад у делу 1
- Тестирајте како што више претраживача можете
01 од 10
Хостинг Иоур Овн ХТМЛ 5 Видео насупрот коришћења ИоуТубе-а
ИоуТубе је одлична локација. Омогућава брзо уграђивање видео записа на Веб странице , а са неколицином изузетака прилично је неприметно у извршавању тих видео записа. Ако објавите видео на ИоуТубе-у, можете бити прилично поуздани да ће неко моћи да га гледа.
Али коришћење ИоуТубе-а за уградњу видеа има неке недостатке
Већина проблема са ИоуТубе-ом су на потрошачкој страни, а не на страни дизајнера, ствари попут:
- Споро претрагу и индексирање
- Извиђања сервера
- Садржај се уклања (наизглед) произвољно
- Превише лошег садржаја
Али постоје неки разлози због којих је ИоуТубе лош за програмера садржаја, укључујући:
- 10-минутна максимална дужина видео записа (за бесплатне рачуне)
- Слаби учинак преноса
- ИоуТубе добија неограничена права коришћења на ваш видео
- Сваки корисник ИоуТубе-а добива неограничена права коришћења на ваш видео
ХТМЛ 5 Видео даје неке предности преко ИоуТубе-а
Употреба ХТМЛ-а 5 за видео омогућит ће вам да контролишете сваки аспект вашег видеа, од ко га може погледати, колико дуго је, шта садржи садржај, гдје је хостован и како сервер ради. ХТМЛ 5 видео вам даје прилику да кодирате свој видео у онолико формата колико вам је потребно да бисте били сигурни да је максималан број људи може гледати. Вашим корисницима није потребан додатак или чекати да ИоуТубе пусти новију верзију.
Наравно, ХТМЛ 5 Видео нуди неке недостатке
Ови укључују:
- Морате кодирати свој видео у најмање три различите кодеке
- Морате укључити неки ЈаваСцрипт како бисте осигурали да прегледачи који не подржавају ХТМЛ 5 ће радити
- Ваш сервер мора бити у могућности да управља захтевима пропусног опсега хостинг видео снимака
02 од 10
Брзи преглед видео подршке на Вебу
Додавање видео записа на Веб странице дуго је био тежак процес. Било је толико ствари које би могло да крене наопако:
- Прво, користите <ембед> таг да бисте уградили видео на своју страницу. АЛИ та ознака је застарјела у корист друге ознаке. И неки претраживачи га никада нису добро подржавали.
- Дакле, прелазите на ознаку <објецт>, али старији претраживачи то не подржавају, а нови претраживачи су скривени у својој подршци.
- Онда мислите " Фласх !" И кодирати свој видео као ФЛВ датотеку. Али Фласх није подржан на многим мобилним уређајима, а многи људи мрзе Фласх без обзира на то како се користи (25% испитаника у мојој анкети питају како се осећате о Фласх-у изјавили да не могу поднијети Фласх на било који начин).
- Зато одлучите да отпремите видео на сајт за уградњу видео записа као што је ИоуТубе, али онда имате питања са ИоуТубе-ом о којима смо разговарали.
- Коначно, одлучите да идете са ХТМЛ-ом 5, али Интернет Екплорер га не подржава (а не Интернет Екплорер 9). Чак и ако имате, постоје два стандарда за видео кодек који су подржани и само један претраживач који могу користити и оба. Бровсер подршка за видео кодексе и контејнере
Па шта би требао да урадиш? Давање на видео више није опција за већину сајтова, пошто видео постаје све важнији. И многе локације су успешно прешле на видео.
Наредне странице овог чланка ће вас упутити како да додате видео на своје Веб странице које раде у Фирефок 3.5, Опера 10.5, Цхроме 3.0, Сафари 3 и 4, иПхоне и Андроид, Фласх и Интернет Екплорер 7 и 8. Ви ћете такође имате кључеве који су вам потребни за додавање подршке за друге старије прегледаче ако је потребно.
03 од 10
Креирајте и измените свој видео
Прва ствар коју требате када ставите видео на Веб страницу је стварни видео. Можете стално снимати и уредити накнадно како бисте креирали функцију, или можете скриптирати и планирати унапред. У сваком случају добро функционише, то је само оно што вам се допада. Ако не знате који тип видеа требате направити, погледајте ове идеје из Десктоп Видео Гуиде:
- Породични видео пројекти
- Маркетинг и промоције
- Видео виртуелни излети
- Како до видеа
- Вјенчање видеа
Сазнајте како да снимите видео високе квалитете
Побрините се да знате како снимати у затвореном простору и на отвореном, као и како снимати звук. Осветљење је такође веома важно - снимци који су превише светли боли очи, а превише тамне само изгледају блатне и непрофесионалне. Чак и ако планирате само 30 секунди видео на својој веб локацији, што је бољи квалитет, он ће се рефлектовати на вашој веб страници.
Запамтите такође да се ауторско право односи на било који звук или музику (као и снимке) који бисте можда желели да користите у вашем видео снимку. Ако немате приступ пријатељу који може да пише и репродукује песму за вас, мораћете да пронађете музику без музике за играње у позадини. Такође постоје места на којима можете да снимите видео записе како бисте их додали у своје видео записе.
Уређивање вашег видео записа
Није важно који софтвер за уређивање користите, само док сте упознати са њим и можете га ефикасно користити. Гретцхен, Десктоп Видео Гуиде, има неке професионалне савете за уређивање видео снимака које вам могу помоћи да мењате своје видео записе тако да изгледају сјајно.
Сачувајте свој видео на МОВ или АВИ (или МПГ, ЦД, ДВ)
За остатак овог туторијала, претпостављамо да сте видео снимили у некој врсти висококвалитетног (некомпримованог) формата као што је АВИ или МОВ. Док можете користити ове датотеке какве јесу, налазите се у свим проблемима с видео записима о којима смо већ разговарали. Следеће странице ће објаснити како претворити датотеку у три типа, тако да га може погледати највећи број претраживача.
04 од 10
Претворите Видео у Огг за Фирефок
Први формат у који ћемо се претворити је Огг (понекад се зове Огг-Тхеора). Овај формат је тај који Фирефок 3.5, Опера 10.5 и Цхроме 3 могу сви прегледати.
Нажалост, док Огг подржава претраживач, многи од познатих видео програма које можете купити (Адобе Медиа Енцодер, КуицкТиме, итд.) Не нуде Огг конверзију опцију. Једини начин да претворите видео у Огг је проналажење програма конверзије на Вебу.
Опције конверзије
Постоји онлине алат под називом Медиа-Цонверт који претпоставља претварање различитих формата видео (и аудио) у друге видео (и аудио) формате. Када смо је пробали са мојим 3-секундним тестом видео снимка, нисмо могли да радимо на свом Мац-у. Али можда ћеш имати среће. Ова страница има право да буде слободна.
Неки други алати које смо пронашли укључују:
- Миро Видео Цонвертер (Виндовс Мацинтосх) - Овај програм има користи од претварања на Огг и МП4 (Х.264) и то је опен соурце.
- Коиоте Видео Цонвертер (Виндовс)
- Фрее Видео Цонвертер Мислимо да има и Виндовс и Мацинтосх верзију, али је било тешко рећи на њиховој веб локацији
- Једноставан Тхеора Енцодер (Мацинтосх) - ово је онај кога намеравате да користите.
Када снимите видео у Огг формату, сачувајте га на локацији на својој веб локацији и идите на следећу страницу како бисте је претворили у друге формате за друге прегледаче.
05 од 10
Претворите Видео у МП4 за Сафари
Следећи формат у који бисте требали претворити видео у МП4 (Х.264 видео), тако да се може играти на Сафари 3 и 4 и иПхоне и Андроид. Осим тога, Х.264 видео записи се лако претварају у ФЛВ датотеке за гледање на Фласх.
Овај формат је лакше доступан у комерцијалним производима, а вероватно већ имате програм који ће се претворити у МП4 ако имате видео едитор. Ако имате Адобе Премиере можете користити Адобе Видео Енцодер, или ако имате КуицкТиме Про који ће такође радити. Многи претварачи о којима смо разговарали на претходној страници такође ће претворити видео записе у МП4.
- Медиа-Цонверт - онлине алат
- Миро Видео Цонвертер (Виндовс Мацинтосх) - Овај програм има користи од претварања на Огг и МП4 (Х.264) и то је опен соурце.
- СУПЕР (Виндовс) - претворити много различитих типова датотека у МП4 и ФЛВ
- Фрее Видео Цонвертер Мислимо да има и Виндовс и Мацинтосх верзију, али је било тешко рећи на њиховој веб локацији
Сачувајте своју МП4 датотеку на својој веб локацији, а затим ћете је морати претворити у Фласх за Интернет Екплорер за кориштење.
06 од 10
Претворити Видео у ФЛВ за Интернет Екплорер
Најлакши начин за претварање видео записа у ФЛВ је коришћење Фласх-а. Тако претварамо своје видео записе у Фласх. Али ако немате Фласх, овде су два популарна алата за претварање датотека у ФЛВ:
- СУПЕР (Виндовс) - претворити много различитих типова датотека у МП4 и ФЛВ
- ффмпегКс (Мацинтосх) - претворити много различитих типова датотека на Мп4 и ФЛВ.
Сачувајте своју ФЛВ датотеку на својој веб страници, а на следећој страници ће се приказати како написати ХТМЛ како бисте могли да репродукујете своје видео записе.
07 од 10
Додајте видео елемент на вашу веб страницу
Веома је лако користити ХТМЛ 5 за додавање видео записа на Веб странице. Већина модерних претраживача подржава ХТМЛ 5 видео, иако их сви не подржавају на исти начин. Међутим, то значи да ако уштедите видео као Огг и МП4 формате, моћи ћете да напишете само четири или пет линија ХТМЛ-а како бисте га приказали у већини модерних претраживача (осим Интернет Екплорер-а 8). Ево како:
- Напишите ХТМЛ 5 доктип маркер тако да бровсери знају да очекују ХТМЛ 5:
- Креирајте своју Веб страницу као што бисте то нормално креирали:
<хтмл>
<хеад>
<титле>
<боди>
- Унутар тела поставите ознаку <видео>:
<видео>
- Одлучите који атрибути желите да ваш видео има:
- аутоплаи - да започнете чим се преузме
- контроле - допустите својим читаоцима да контролишу видео (паузу, премотавање уназад, брзо премотавање унапред)
- петље - покрените видео од почетка када се заврши
- прелоад - унапред преузмите видео тако да је спремнији брже када корисник кликне на њега
- постер - дефинишите слику коју желите да користите када је видео заустављен
<видео контрола прелоад>
- Затим додајте изворне датотеке за две верзије вашег видео записа (МП4 и ОГГ) унутар елемента <видео>:
<видео контрола прелоад>
<соурце срц = "схаста.мп4" типе = 'видео / мп4; кодеки = "авц1.42Е01Е, мп4а.40.2" '>
<соурце срц = "схаста.огг" типе = 'видео / огг; кодеки = "тхеора, ворбис" '>
- Отворите страницу у Цхроме 1, Фирефок 3.5, Опера 10 и / или Сафари 4 и проверите да ли се исправно приказује. Требали бисте га тестирати у најмање Фирефок 3.5 и Сафари 4 - пошто сваки од њих користи другачији кодек.
То је то. Једном када имате овај код на месту ћете имати видео који ради у Фирефок 3.5, Сафари 4, Опера 10 и Цхроме 1. Али шта је са Интернет Екплорер-ом?
Интернет Екплорер не воли ХТМЛ 5 или ознаку <видео>
У следећем одељку ћемо причати о томе шта можете да урадите да бисте добили добар ИЕ 8 са ХТМЛ ознакама видеа и приказали видео. Морате користити Фласх. Добра вијест је да се очекује да ИЕ 9 подржава ХТМЛ 5 и видео ознаку.
08 од 10
Додајте ЈаваСцрипт и Фласх Плаиер да бисте добили Интернет Екплорер за рад
Можда сте приметили да на ХТМЛ-у претходне странице није било линије изворних датотека за ФЛВ датотеку. А ако сте тестирали ту страницу у програму Интернет Екплорер, то не би функционисало. То је зато што Интернет Екплорер не препознаје ХТМЛ 5 и не може репродуцирати ни видео нити ОГГ или МП4 видео записе. Да би Интернет Екплорер 7 и 8 могли да раде, потребно је да је репродукује као Фласх. Међутим, има више корака да се ради о раду него само додавање ФЛВ датотеке.
Корак 1: Узмите фласх видео плејер за вашу веб страницу
Препоручујемо да добијете ФловПлаиер зато што је Фласх видео плаиер са отвореним изворима који можете инсталирати на вашем Веб серверу и користити кад год имате Фласх видео за репродукцију. Бесплатна верзија ФловПлаиер убацује рекламе у своје видео записе, али такође можете купити комерцијалне лиценце ако су вам потребне.
Пратите упутства на ФловПлаиер сајту да бисте инсталирали ФловПлаиер на вашој веб страници. На кратко ћете инсталирати 2 СВФ датотеке и датотеку ЈаваСцрипт на вашој веб локацији. На дну ХТМЛ-а, (прије ознаке ) додате линију:
<сцрипт срц = "фловплаиер.мин.јс">
Али Интернет Екплорер још увек неће репродуковати видео, морате га научити како препознати ознаке ХТМЛ 5.
Корак 2: убедите Интернет Екплорер да прочита ХТМЛ 5 ознаке
Постоји практичан скрипт на Гоогле коду под називом "ХТМЛ Схив" који ће помоћи ИЕ у препознавању ХТМЛ 5 елемената. Дакле, у <хеад> вашем ХТМЛ документу желите да га реферишете. Најбоље је да га приложите у условним коментарима ИЕ тако да други претраживачи нису збуњени:
<сцрипт срц = "хттп://хтмл5схив.гооглецоде.цом/свн/трунк/хтмл5.јс">
У реду, сада ће ИЕ препознати ознаку <видео>, али неће знати шта да ради са досадашњим изворним датотекама.
Корак 3: Додајте изворну линију за ФЛВ датотеку
Као што сте и учинили на претходној страници, додали ћете линију ХТМЛ 5 унутар елемента <видео> који означава где сте сачували ФЛВ датотеку на вашем серверу.
<видео контрола прелоад>
<соурце срц = "схаста.мп4" типе = 'видео / мп4; кодеки = "авц1.42Е01Е, мп4а.40.2" '>
<соурце срц = "схаста.огг" типе = 'видео / огг; кодеки = "тхеора, ворбис" '>
<соурце срц = "схаста.флв" типе = 'видео / к-флв; цодецс = "Он2 ВП6, Соренсон Спарк, Сцреен видео, Сцреен видео 2, Х.264" '>
09 од 10
Додајте ЈаваСцрипт и Фласх Плаиер да бисте добили Интернет Екплорер за рад - Дио 2
Нажалост, још увек нисмо завршени. Морамо сада рећи ИЕ-у да користи ФловПлаиер Фласх видео плејер на који смо горе наведени.
Корак 4: окрените <видео> Елемент Инто Фласх
За ово нам је потребна још једна скрипта. Добили смо сценарио од Диве Инто ХТМЛ 5 . Али када смо га тестирали, то није функционисало све док не направимо неколико подешавања:
- Око линије 31: додајте локацију своје ФловПлаиер инсталације.
- Око линије 42: промените тип датотеке са
видео / мп4
довидео / к-флв
- Око линије 94: почевши од
ако (!! $ && !! $ (документ) .реади) {
до краја документа, промените тај део како бисте прочитали:// ако (!! $ && !! $ (документ) .реади) {
/ * Корисници јКуери могу иницијализирати чим ДОМ буде спреман * / /
// $ (документ) .реади (хтмл5_видео_инит);
//} елсе {
/ * Сви остали могу да сачекају док онлоад * /
/ * аддЕвент функција преко хттп://ввв.илфилософо.цом/блог/2008/04/14/аддевент-пресервинг-тхис/ * /
вар аддЕвент = функција (обј, тип, фн) {
ако (обј.аддЕвентЛистенер)
обј.аддЕвентЛистенер (тип, фн, фалсе);
друго ако (обј.аттацхЕвент)
обј.аттацхЕвент ('он' + тип, функција () {повратак фн.аппли (обј, нови Арраи (виндов.евент));});
}
аддЕвент (прозор, "лоад", хтмл5_видео_инит);
//}
Када измените датотеку ЈаваСцрипт, отпремите је на свој сервер и повежите га на дну ХТМЛ странице (пре ):
<сцрипт срц = "хтмл5-видео.јс">
Душо! Сада када сте све то урадили, требали бисте отпремити ХТМЛ тако да можете започети тестирање.
10 од 10
Тестирајте како што више претраживача можете
Тестирање видео страница је критично ако желите да успјешно покренете. Требали бисте бити сигурни да тестирате своју страницу у најпопуларнијим претраживачима и верзијама за вашу веб страницу.
Нашли смо да, иако је могуће користити алате као што су БровсерЛаб и АниБровсер за тестирање видео записа, није толико поуздано као што сами подижете страницу у прегледачу. Када то урадите, заиста можете да видите да ли ради или не.
Пошто сте отишли до свих проблема да кодирате свој видео у три формата, требало би да га тестирате како бисте били сигурни да ће се приказати у сва три. То значи, најмање, да га тестирате у:
- Фирефок 3.5
- Сафари 3 или 4
- Интернет Екплорер 7 или 8
Можете да тестирате у Цхроме-у, али пошто Цхроме приказује све три методе (чак и Фласх, ако имате додатак), тешко је рећи да ли постоји проблем са једним од других или који код користи Цхроме.
За вашу безбрижност, такођер бисте требали тестирати старије прегледаче да бисте видели шта раде, посебно ако многи ваши читаоци користе старије прегледаче.
Добијање видео записа у старијим прегледачима
Као и са било којом Веб страницом, требало би прво размотрити колико је важно да се ови претраживачи раде. Ако 90% ваших купаца користи Нетсцапе, онда бисте им требали имати резервни план за њих. Међутим, ако је мање од 1%, то можда није толико важно.
Једном када одлучите о којим претраживачима ћете покусати да подржите, најлакши начин је једноставно направити алтернативну страницу за њих да бисте видели видео. На тој алтернативној страници, уграђивали бисте видео помоћу ХТМЛ 4. А затим било да користите неки облик откривања прегледача да их тамо преусмјерите или само додате везу на ту страницу на овом.