Използване на HTML5 за показване на видео в текущите браузъри

Хостинг на собствен HTML 5 Video vs. Използване на YouTube

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

Но използването на YouTube за вграждане на вашите видеоклипове има някои недостатъци

Повечето от проблемите с YouTube са от страна на потребителя, а не от страна на дизайнера, неща като:

• Бавно търсене и индексиране
• Прекъсвания на сървъра
• Съдържанието се премахва (привидно) произволно
• Твърде много лошо съдържание

Но има няколко причини, поради които YouTube е лош и за разработчиците на съдържание, включително:

• 10-минутна максимална продължителност за видеоклипове (за безплатни акаунти)
• Лошо изпълнение на качването
• YouTube получава неограничени права за използване на вашето видео
• Всеки потребител на YouTube получава неограничени права за използване на вашето видео

HTML5 Video дава някои предимства пред YouTube

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

Разбира се, HTML5 видео предлага някои недостатъци

Те включват:

• Трябва да кодирате видеоклипа си в поне три различни кодека.
• Трябва да включите някои JavaScript, за да осигурите браузъри, които не поддържат HTML5 ще работи.
• Вашият сървър трябва да може да се справи с изискванията за честотна лента на хостинг видеоклипове.

Бърз преглед на видео поддръжката в мрежата

Добавянето на видео към уеб страници отдавна е труден процес. Имаше толкова много неща, които можеха да се объркат:

• Първо, използвате етикет, за да вградите видеоклипа си във вашата страница. НО този маркер е остарял в полза на друг маркер. А някои браузъри така или иначе никога не го поддържаха добре.
• Така че превключвате към етикет, но по-старите браузъри не го поддържат, а по-новите браузъри са схематични в неговата поддръжка.
• Тогава мислите Flash! И кодирайте видеоклипа си като FLV файл. Но Flash вече не се поддържа на устройства с Windows.
• Така че решавате да качите видеоклипа си на сайт за вграждане на видео като YouTube, но тогава имате проблемите с YouTube, които обсъдихме.
• И накрая, решавате да използвате HTML5, но Internet Explorer не го поддържа (едва до Internet Explorer 9). И дори да го направите, има два поддържани стандарта за видео кодек и само един браузър, който може да използва и двата.

И така, какво трябва да направите? Отказът от видео вече не е опция за повечето сайтове, тъй като видеото става все по-важно. И много сайтове успешно преминаха към видео.

Следващите страници на тази статия ще ви преведат как да добавите видео към вашите уеб страници, които работят в Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 и 4, iPhone и Android и Internet Explorer 7 и 8. Освен това ще имате ключовете, от които се нуждаете, за да добавите поддръжка за други по-стари браузъри, ако е необходимо.

Създайте и редактирайте вашето видео

Първото нещо, от което се нуждаете, когато ще поставите видео на уеб страница, е действителното видео. Можете или да снимате непрекъснато, и да редактирате след това, за да създадете функция, или можете да я скриптирате и планирате предварително. Така или иначе работи добре, това е точно това, с което се чувствате удобно. Ако не знаете какъв тип видео трябва да направите, разгледайте тези идеи от Наръчника за настолни видео:

• Семейни видеопроекти
• Маркетингови и промоционални видеоклипове
• Видео виртуални обиколки
• Как да видеоклипове
• Сватбени видеоклипове

Научете как да записвате висококачествено видео

Уверете се, че знаете как да записвате на закрито и на открито, както и как да записвате аудио. Осветлението също е много важно - прекалено ярките снимки нараняват очите, а твърде тъмните просто изглеждат кални и непрофесионални. Дори ако планирате да имате 30-секундно видео на вашия сайт, колкото по-високо качество е, толкова по-добре ще се отрази на вашия уебсайт.

Не забравяйте също, че авторските права се отнасят за всички звуци или музика (както и за кадри), които може да искате да използвате във вашето видео. Ако нямате достъп до приятел, който може да напише и пусне песен за вас, ще трябва да го намерите безплатна музика за да играете във фонов режим. Има и места, където можете да запасите кадри, които да добавите към вашите видеоклипове.

Редактиране на вашето видео

Няма значение какъв софтуер за редактиране използвате, стига да сте запознати с него и да можете да го използвате ефективно. Gretchen, Desktop Video Guide, има някои професионални съвети за редактиране на видео, които могат да ви помогнат да редактирате вашите видеоклипове, така че да изглеждат страхотно.

Запазете вашето видео в MOV или AVI (или MPG, CD, DV)

За останалата част от този урок ще приемем, че вашето видео е запазено в някакъв вид висококачествен (некомпресиран) формат като AVI или MOV. Въпреки че можете да използвате тези файлове такива, каквито са, срещате всички проблеми с видеото, които вече обсъдихме. Следващите страници обясняват как да конвертирате файла си в три типа, така че да бъде видим от най-големия брой браузъри.

Конвертирайте видеото в Ogg за Firefox

Първият формат, в който ще конвертираме, е Ogg (понякога наричан Ogg-Theora). Този формат е такъв, който всички Firefox 3.5, Opera 10.5 и Chrome 3 могат да преглеждат.

За съжаление, докато Ogg има поддръжка от браузъра, много от добре познатите видео програми, които можете да закупите (Adobe Media Encoder, QuickTime и др.), Не предлагат опция за конвертиране на Ogg. Така че единственият начин да конвертирате видеоклипа си в Ogg е да намерите програма за преобразуване в мрежата.

Опции за преобразуване

Има онлайн инструмент, наречен Media-Convert, който твърди, че конвертира различни формати на видео (и аудио) в други видео (и аудио) формати. Когато го изпробвахме с моето 3-секундно тестово видео, не можахме да го накараме да работи на моя Mac. Но може да имате по-добър късмет. Този сайт има предимството да бъде безплатен.

Някои други инструменти, които открихме, включват:

• Miro Video Converter (Windows Macintosh): Тази програма има предимството да конвертира както в Ogg, така и в MP4 (H.264) и е с отворен код.
• Безплатен видео конвертор: Смятаме, че има както версия за Windows, така и за Macintosh, но беше трудно да се каже от техния сайт
• Обикновено Theora Encoder (Macintosh): Това е, което обикновено използваме.

След като запазите видеоклипа си във формат Ogg, запазете го на място на уебсайта си и отидете на следващата страница, за да го конвертирате в други формати за други браузъри.

Конвертирайте видеото в MP4 за Safari и Internet Explorer

Следващият формат, в който трябва да конвертирате видеоклипа си, е MP4 (H.264 видео), така че да може да се възпроизвежда в Internet Explorer 9 и по-нови версии, Safari 3 и 4 и iPhone и Android.

Този формат е по-лесно достъпен в търговски продукти и вероятно вече имате програма, която конвертира в MP4, ако имате видео редактор. Ако имате Adobe Premiere можете да използвате Adobe Video Encoder или ако имате QuickTime Pro, който също работи. Много от конверторите, които обсъдихме на предишната страница, също конвертират видеоклипове в MP4.

• MediaConvert: Онлайн инструмент за AWS.
• Miro Video Converter (Windows Macintosh): Тази програма има предимството да конвертира както в Ogg, така и в MP4 (H.264) и е с отворен код.
• СУПЕР (Windows): Ще конвертира много различни типове файлове в MP4
• Безплатен видео конвертор: Смятаме, че има както версия за Windows, така и за Macintosh, но беше трудно да се каже от техния сайт.

Добавете видеоелемента към вашата уеб страница

1. Създайте вашата уеб страница, както обикновено я създавате:

2. Вътре в тялото поставете
3. Решете какви атрибути искате да има вашето видео: Препоръчваме ви да използвате контроли и предварително зареждане. Използвайте опцията за плакат, ако видеото ви няма добра първа сцена.
   автоматично пускане - за да започне веднага след изтеглянето
4. контроли - позволяват на вашите читатели да контролират видеото (пауза, пренавиване, бързо превъртане напред)
5. цикъл - стартирайте видеото от самото начало, когато приключи
6. предварително зареждане - предварително изтеглете видеото, за да бъде по-бързо готово, когато клиентът кликне върху него
7. poster - дефинирайте изображението, което искате да използвате, когато видеото е спряно
8. След това добавете изходните файлове за двете версии на вашето видео (MP4 и OGG) вътре в
9. Отворете страницата в Chrome 1, Firefox 3.5, Opera 10 и / или Safari 4 и се уверете, че тя се показва правилно. Трябва да го тествате поне във Firefox 3.5 и Safari 4 - тъй като всеки от тях използва различен кодек.

Това е. След като поставите този код на място, ще имате видеоклип, който работи във Firefox 3.5, Safari 4, Opera 10 и Chrome 1. Но какво ще кажете за Internet Explorer?

Много е лесно да използвате HTML 5 за добавяне на видео към уеб страници. Повечето съвременни браузъри поддържат HTML 5 видео, въпреки че не всички го поддържат по един и същи начин. Но това означава, че ако запазите видеоклипа си както в Ogg, така и в MP4 формати, можете да напишете само четири или пет реда HTML, за да го покажете в повечето съвременни браузъри (с изключение на Internet Explorer 8). Ето как:

Напишете маркера на HTML 5 докт, така че браузърите да знаят да очакват HTML 5:

1. Създайте вашата уеб страница, както обикновено я създавате:

2. Вътре в тялото поставете
3. Решете какви атрибути искате да има вашето видео: Препоръчваме ви да използвате контроли и предварително зареждане. Използвайте опцията за плакат, ако видеото ви няма добра първа сцена.
   автоматично пускане - за да започне веднага след изтеглянето
4. контроли - позволяват на вашите читатели да контролират видеото (пауза, пренавиване, бързо превъртане напред)
5. цикъл - стартирайте видеото от самото начало, когато приключи
6. предварително зареждане - предварително изтеглете видеото, за да бъде по-бързо готово, когато клиентът кликне върху него
7. poster - дефинирайте изображението, което искате да използвате, когато видеото е спряно
8. След това добавете изходните файлове за двете версии на вашето видео (MP4 и OGG) вътре в
9. Отворете страницата в Chrome 1, Firefox 3.5, Opera 10 и / или Safari 4 и се уверете, че тя се показва правилно. Трябва да го тествате поне във Firefox 3.5 и Safari 4, тъй като всеки от тях използва различен кодек.

Това е. След като поставите този код, ще имате видеоклип, който работи във Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ и Chrome 1.

Тествайте в колкото можете повече браузъри

За ваше спокойствие трябва да тествате и в по-стари браузъри, за да видите какво правят, особено ако много от вашите читатели използват по-стари браузъри.

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

Установихме, че макар да е възможно да се използват инструменти като BrowserLab и AnyBrowser за тестване на видео, това не е толкова надеждно, колкото да изведете страницата в браузъра сами. Когато го направите, наистина можете да видите дали работи или не.

Тъй като сте се постарали да кодирате видеоклипа си в множество формати, трябва да го тествате, за да сте сигурни, че се показва в множество браузъри. Това означава, че поне трябва да го тествате във Firefox, Safari и IE.

За ваше спокойствие трябва да тествате и в по-стари браузъри, за да видите какво правят, особено ако много от вашите читатели използват по-стари браузъри.

Първи работа на видеото в по-стари браузъри

Както при всяка уеб страница, първо трябва да помислите колко е важно тези браузъри да работят. Ако 90% от вашите клиенти използват Netscape, тогава трябва да имате резервен план за тях. Но ако по-малко от 1% го правят, това може да не е толкова важно.

След като сте решили какви браузъри ще се опитате да поддържате, най-лесният начин е просто да създадете алтернативна страница, в която да гледат видеоклипа. На тази алтернативна страница бихте вградили видеоклип с помощта на HTML 4. И тогава или използвайте някаква форма на откриване на браузъра, за да ги пренасочите там, или просто добавете връзка към тази страница на тази.