ХТМЛ5 видео ознака олакшава додавање видео записа у ваш веб странице. Али иако се на површини чини лако, постоји много ствари које требате учинити да бисте покренули видео. Овај водич ће вас провести кроз кораке за креирање странице у ХТМЛ5 који ће се покретати видео у свим модерним прегледачима.
- Хостинг сопственог ХТМЛ5 видео вс. Коришћење ИоуТубе-а
- Кратки преглед видео подршке на Интернету
- Направите и уредите свој видео
- Конвертујте видео у Огг за Фирефок
- Претворите видео у МП4 за Сафари и интернет претраживач
- Додајте видео елемент на своју веб страницу
- Додајте ЈаваСцрипт Плаиер да би Интернет Екплорер радио
- Тестирајте у што више прегледача
01
од 07
Хостинг сопственог ХТМЛ 5 Видео вс. Коришћење ИоуТубе-а
ИоуТубе је сјајна веб локација. Олакшава уградњу видео записа веб странице брзо и уз неке мање изузетке прилично је неометано у извођењу тих видео записа. Ако објавите видео на ИоуТубе-у, можете бити прилично уверени да ће га неко моћи погледати.
Али коришћење ИоуТубе-а за уграђивање видео снимака има неке недостатке
Већина проблема са ЈуТјуб су на страни потрошача, а не на страни дизајнера, ствари попут:
- Споро претраживање и индексирање
- Испади сервера
- Садржај се уклања (наизглед) произвољно
- Превише лошег садржаја
Али постоје неки разлози због којих је ИоуТубе лош и за програмере садржаја, укључујући:
- 10-минутно максимално трајање видео записа (за бесплатне налоге)
- Лоше перформансе отпремања
- ИоуТубе добија неограничена права на коришћење вашег видеа
- Било који корисник ИоуТубе-а стиче неограничена права на коришћење вашег видеа
ХТМЛ5 Видео даје неке предности у односу на ИоуТубе
Користећи ХТМЛ5 фор видео вам омогућава да контролишете сваки аспект вашег видеа, од тога ко га може гледати, колико је дугачак, шта садржај садржи, где је хостован и како сервер функционише. И ХТМЛ5 даје вам могућност да свој видео кодирате у онолико формата колико вам је потребно како бисте били сигурни да га може гледати максималан број људи. Вашим купцима није потребан додатак нити да чекају док ИоуТубе не објави новију верзију.
Наравно, ХТМЛ5 видео нуди неке недостатке
Ови укључују:
- Видео морате кодирати у најмање три различита кодека.
- Морате да укључите неки ЈаваСцрипт да бисте осигурали прегледаче који не подржавају ХТМЛ5 ће радити.
- Ваш сервер мора бити у стању да се избори са пропусним опсегом за хостинг видео снимака.
02
од 07
Кратки преглед видео подршке на Интернету
Додавање видео записа на веб странице дуго је био тежак процес. Било је толико ствари које би могле поћи по злу:
- Прво, користите ознаку за уградњу видео записа на страницу. АЛИ та ознака је застарела у корист друге ознаке. А неки прегледачи га ионако никад нису добро подржавали.
- Па се пребаците на ознака, али старији прегледачи то не подржавају, а новији прегледачи су у основи подржани.
- Онда помислиш Фласх! И кодирајте свој видео као ФЛВ датотеку. Али Фласх више није подржан на Виндовс уређајима.
- Дакле, одлучили сте да свој видео отпремите на веб локацију за уградњу видео записа попут ИоуТубе-а, али тада имате проблема са ИоуТубеом о којима смо разговарали.
- Коначно, одлучили сте да користите ХТМЛ5, али Интернет Екплорер га не подржава (не пре Интернет Екплорер 9). Па чак и ако то учините, постоје два подржана стандарда за видео кодек и само један прегледач који може да користи оба.
Па шта би требало да радиш? Одустајање од видео записа више није опција за већину веб локација, јер видео постаје све важнији. И многе веб локације су успешно прешле на видео.
Следеће странице овог чланка водиће вас кроз додавање видео записа на ваше веб странице које раде у Фирефоку 3.5, Опера 10.5, Цхроме 3.0, Сафари 3 и 4, иПхоне и Андроид и Интернет Екплорер 7 и 8. Такође ћете имати кључеве потребне за додавање подршке за друге старије прегледаче ако је потребно.
03
од 07
Направите и уредите свој видео
Прво што вам треба када желите да поставите видео на веб страницу је стварни видео. Можете снимати континуирано и накнадно уређивати да бисте створили функцију или је можете сценарисати и испланирати пре времена. Било како било добро функционише, само је оно што вам прија. Ако не знате коју врсту видео записа треба да направите, погледајте ове идеје из Водича за радне површине за видео:
- Породични видео пројекти
- Маркетинг и промотивни видео
- Видео виртуелне туре
- Како да видео
- Веддинг Видеос
Научите како да снимате висококвалитетни видео
Уверите се да знате како да снимате у затвореном и на отвореном, као и како да снимате звук. Осветљење је такође веома важно - пресветли снимци боле очи, а претамни изгледају мутно и непрофесионално. Чак и ако на вашој веб локацији планирате да имате само 30 секунди видео записа, што је бољи квалитет, то ће се боље одразити на вашој веб локацији.
Запамтите такође да се ауторска права односе на било који звук или музику (као и на залихе) које бисте можда желели да користите у свом видео запису. Ако немате приступ пријатељу који може да вам напише и одсвира песму, мораћете да је пронађете музика без накнаде да се игра у позадини. Постоје и места на којима можете да залихе снимака да бисте додали у своје видео записе.
Уређивање вашег видео записа
Није важно који софтвер за уређивање користите, само уколико сте га упознали и можете га ефикасно користити. Гретцхен, Десктоп Видео Гуиде, садржи неколико професионалних савета за уређивање видео записа који вам могу помоћи да уредите своје видео записе тако да изгледају сјајно.
Сачувајте видео у МОВ или АВИ (или МПГ, ЦД, ДВ)
За остатак овог водича претпоставићемо да је ваш видео запис сачуван у некој врсти висококвалитетног (некомпресованог) формата као што је АВИ или МОВ. Иако ове датотеке можете користити такве какве јесу, наилазите на све проблеме са видео записом о којима смо већ разговарали. Следеће странице објашњавају како датотеку претворити у три врсте тако да је може видети највећи број прегледача.
04
од 07
Конвертујте видео у Огг за Фирефок
Први формат у који ћемо претворити је Огг (понекад се назива Огг-Тхеора). Овај формат могу да виде сви Фирефок 3.5, Опера 10.5 и Цхроме 3.
Нажалост, иако Огг има подршку за прегледаче, многи познати видео програми које можете купити (Адобе Медиа Енцодер, КуицкТиме итд.) Не нуде Огг конверзију. Дакле, једини начин да свој видео претворите у Огг је проналазак програма за конверзију на Интернету.
Опције конверзије
Постоји мрежни алат назван Медиа-Цонверт који тврди да претвара различите формате видео (и аудио) у друге видео (и аудио) формате. Када смо га испробали са мојим тестним видео снимком од 3 секунде, нисмо успели да успе на мом Мацу. Али можда ћете имати више среће. Предност ове странице је што је бесплатна.
Неки други алати које смо пронашли укључују:
- Миро Видео Цонвертер (Виндовс Мацинтосх): Овај програм има предност претварања у Огг и МП4 (Х.264) и то је отворени извор.
- Бесплатно Видео Цонвертер: Мислимо да ово има верзију за Виндовс и Мацинтосх, али било је тешко рећи са њихове веб локације
- Једноставни Тхеора Енцодер (Мацинтосх): Ово је оно које обично користимо.
Након што сачувате видео запис у формату Огг, сачувајте га на локацији на својој веб локацији и идите на следећу страницу да бисте га конвертовали у друге формате за друге прегледаче.
05
од 07
Конвертујте видео у МП4 за Сафари и Интернет Екплорер
Следећи формат у који треба да претворите видео је МП4 (Х.264 видео) како би се могао репродуковати у Интернет Екплореру 9 и новијим верзијама, Сафари 3 и 4, као и на иПхонеу и Андроиду.
Овај формат је лакше доступан у комерцијалним производима и вероватно већ имате програм који се претвара у МП4 ако имате уређивач видео записа. Ако имате Адобе Премиере можете да користите Адобе Видео Енцодер или ако имате КуицкТиме Про који такође ради. Многи претварачи о којима смо разговарали на претходној страници такође конвертују видео записе у МП4.
- МедиаЦонверт: Интернет АВС алат.
- Миро Видео Цонвертер (Виндовс Мацинтосх): Овај програм има предност претварања у Огг и МП4 (Х.264) и то је отворени извор.
- СУПЕР (Виндовс): Претвориће много различитих типова датотека у МП4
- Бесплатно Видео Цонвертер: Мислимо да ово има и верзију за Виндовс и Мацинтосх, али било је тешко рећи са њихове веб локације.
06
од 07
Додајте видео елемент на своју веб страницу
- Креирајте своју веб страницу онако како бисте је иначе креирали:
- Унутар тела поставите
- Одлучите које атрибуте желите да има ваш видео: Препоручујемо вам употребу контрола и унапред учитавања. Користите опцију постер ако ваш видео нема добру прву сцену.
аутоматска репродукција - да започне чим се преузме - контроле - омогућите читаоцима да контролишу видео запис (пауза, премотавање уназад, премотавање унапред)
- лооп - покрените видео од почетка када се заврши
- унапред учитај - унапред преузми видео запис тако да брже буде спреман када купац кликне на њега
- постер - дефинишите слику коју желите да користите када се видео заустави
- Затим додајте изворне датотеке за две верзије вашег видео записа (МП4 и ОГГ) у
- Отворите страницу у Цхроме 1, Фирефок 3.5, Опера 10 и / или Сафари 4 и уверите се да се правилно приказује. Требали бисте га тестирати у најмање Фирефок 3.5 и Сафари 4 - јер сваки користи другачији кодек.
То је то. Једном када поставите овај код, имаћете видео који ради у Фирефоку 3.5, Сафари 4, Опера 10 и Цхроме 1. Али шта је са Интернет Екплорер-ом?
Веома је једноставно користити ХТМЛ 5 за додавање видео записа на веб странице. Већина савремених прегледача подржава ХТМЛ 5 видео, иако га сви не подржавају на исти начин. Али то значи да ако видео сачувате у форматима Огг и МП4, можете да напишете само четири или пет редова ХТМЛ-а да би се приказао у већини савремених прегледача (осим у Интернет Екплореру 8). Ево како:
Напишите ХТМЛ 5 маркер докторског типа тако да прегледачи знају да очекују ХТМЛ 5:
- Креирајте своју веб страницу онако како бисте је иначе креирали:
- Унутар тела поставите
таг: - Одлучите које атрибуте желите да има ваш видео: Препоручујемо вам употребу контрола и унапред учитавања. Користите опцију постер ако ваш видео нема добру прву сцену.
аутоматска репродукција - да започне чим се преузме - контроле - омогућите читаоцима да контролишу видео запис (пауза, премотавање уназад, премотавање унапред)
- лооп - покрените видео од почетка када се заврши
- унапред учитај - унапред преузми видео запис тако да брже буде спреман када купац кликне на њега
- постер - дефинишите слику коју желите да користите када се видео заустави
- Затим додајте изворне датотеке за две верзије вашег видео записа (МП4 и ОГГ) у
елемент: - Отворите страницу у Цхроме 1, Фирефок 3.5, Опера 10 и / или Сафари 4 и уверите се да се правилно приказује. Требали бисте га тестирати у најмање Фирефок 3.5 и Сафари 4, јер сваки користи другачији кодек.
То је то. Једном када поставите овај код, имаћете видео који ради у Фирефоку 3.5, Сафари 4, Опера 10, Интернет Екплорер 9+ и Цхроме 1.
07
од 07
Тестирајте у што више прегледача
Да бисте се спокојно осећали, требало би да тестирате и у старијим прегледачима да бисте видели шта раде, посебно ако велики број читалаца користи старије прегледаче.
Тестирање видео страница је пресудно ако желите успешно покретање. Обавезно тестирајте своју страницу у најпопуларнијим прегледачима и верзијама своје веб локације.
Открили смо да, иако је могуће користити алате попут БровсерЛаб и АниБровсер за тестирање видео записа, то није толико поуздано као лично отварање странице у прегледачу. Када то учините, заиста можете видети да ли ради или не.
Пошто сте се потрудили да кодирате свој видео у више формата, требало би да га тестирате како бисте били сигурни да се приказује у више прегледача. То значи да бисте га требали тестирати у Фирефоку, Сафарију и ИЕ.
Можете да тестирате у Цхроме-у, али пошто Цхроме може да види обе методе, тешко је рећи да ли постоји проблем или који кодек Цхроме користи.
Да бисте се спокојно осећали, требало би да тестирате и у старијим прегледачима да бисте видели шта раде, посебно ако велики број читалаца користи старије прегледаче.
Покретање видео записа у старијим прегледачима
Као и на било којој веб страници, прво бисте требали размислити колико је важно да ти прегледачи раде. Ако 90% ваших купаца користи Нетсцапе, требало би да имате резервни план за њих. Али ако то ради мање од 1%, то можда неће бити толико важно.
Једном када одлучите које прегледаче ћете покушати да подржите, најлакши начин је једноставно створити алтернативну страницу у којој ће они моћи да виде видео. На ту алтернативну страницу уградили бисте видео користећи ХТМЛ 4. А онда или користите неки облик откривања прегледача да бисте их тамо преусмерили или само додајте везу до те странице на овој.