Маркерът HTML 5 улеснява добавянето на видео към вашите уеб страници . Но докато изглежда, че е лесно на повърхността, има много неща, които трябва да направите, за да получите вашето видео. Този урок ще ви преведе през стъпките за създаване на страница в HTML 5, която ще пуска видео във всички съвременни браузъри.
- Хоствайте свой собствен HTML 5 видео срещу използването на YouTube
- Бърз преглед на поддръжката на видео в мрежата
- Създайте и редактирайте видеоклипа си
- Конвертиране на видео към Ogg за Firefox
- Превърнете видеото в MP4 за Safari
- Конвертирайте видеоклипа във FLV за Internet Explorer
- Добавете видео елемента към уеб страницата си
- Добавете JavaScript и Flash Player, за да получите Internet Explorer за работа част 1
- Тествайте в толкова браузъри, колкото можете
01 от 10
Хоствайте свой собствен HTML 5 видео срещу използването на YouTube
YouTube е чудесен сайт. Улеснява бързото вграждане на видео в уеб страници и с някои малки изключения е сравнително безпроблемно при изпълнението на тези видеоклипове. Ако публикувате видеоклип в YouTube, можете да сте сигурни, че всеки ще може да го гледа.
Но използването на YouTube за поставяне на видеоклиповете Ви има някои недостатъци
Повечето от проблемите с YouTube са от страна на потребителите, а не от страна на дизайнерите, като например:
- Бавно търсене и индексиране
- Спиране на сървъра
- Съдържанието се отстранява (на пръв поглед) произволно
- Твърде много лошо съдържание
Но има няколко причини, поради които YouTube е лошо и за разработчиците на съдържание, включително:
- 10-минутна максимална дължина за видеоклипове (за безплатни сметки)
- Лоша ефективност при качване
- YouTube получава неограничено право на използване на видеоклипа ви
- Всеки потребител на YouTube получава неограничени права за използване на видеоклипа ви
HTML 5 видео дава някои предимства в YouTube
Използването на HTML 5 за видео ще ви позволи да контролирате всички аспекти на видеоклипа си, кой може да го преглежда, колко време е, какво представлява съдържанието, къде се хоства и как изпълнява сървърът. И HTML 5 видео ви дава възможност да кодирате видеоклипа си в толкова формати, колкото е необходимо, за да сте сигурни, че максималният брой хора може да го видите. Клиентите ви не се нуждаят от приставка или да чакат, докато YouTube пусне по-нова версия.
Разбира се, HTML 5 видео предлага някои недостатъци
Те включват:
- Трябва да кодирате видеоклипа си в най-малко три различни кодека
- Трябва да включите JavaScript, за да сте сигурни, че браузърите, които не поддържат HTML 5, ще работят
- Вашият сървър трябва да може да се справи с изискванията за трафик на хостинг
02 от 10
Бърз преглед на поддръжката на видео в мрежата
Добавянето на видео към уеб страници отдавна е труден процес. Имаше толкова много неща, които можеха да се объркат:
- Първо, използвате маркера
- Така че превключвате на маркера
- Тогава мислите, че " Flash !" Кодирайте видеоклипа си като FLV файл. Но Flash не се поддържа на много мобилни устройства и много хора мразят Flash без значение как се използват (25% от респондентите в моя анкета питат как се чувствате за Flash заявиха, че не могат да поставят Flash по никакъв начин).
- Така че решавате да качите видеоклипа си на сайт за вграждане на видео като YouTube, но след това имате проблеми с YouTube, за които говорихме.
- И накрая, решавате да отидете с HTML 5, но Internet Explorer не го поддържа (не до Internet Explorer 9). И дори да го направите, има два стандарта за видео кодек, които се поддържат и само един браузър, който може да използва и двете. Поддръжка на браузъри за видео кодеци и контейнери
И така, какво трябва да направите? Предоставянето на видео вече не е опция за повечето сайтове, тъй като видеото става все по-важно. И много сайтове успешно са преминали на видео.
Следващите страници на тази статия ще ви помогнат да добавите видео към уеб страниците си, работещи в Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 и 4, iPhone и Android, Flash и Internet Explorer 7 и 8. имате и необходимите ключове, за да добавите поддръжка за други по-стари браузъри, ако е необходимо.
03 от 10
Създайте и редактирайте видеоклипа си
Първото нещо, от което се нуждаете, когато ще поставите видеоклип на уеб страница, е действителното видео. Можете или да снимате непрекъснато и да редактирате след това, за да създадете функция, или можете да я напишете и планирате предварително. Така или иначе работи добре, това е просто каквото ти е удобно. Ако не знаете какъв тип видеоклип трябва да направите, разгледайте тези идеи от Ръководството за видео настолни компютри:
- Семейни видео проекти
- Маркетинг и рекламни видеоклипове
- Видео виртуални обиколки
- Как да видеоклипове
- Сватбени видеоклипове
Научете как да записвате видеоклипове с високо качество
Уверете се, че знаете как да записвате на закрито и на открито, както и как да записвате аудио. Осветлението също е много важно - изстрелите, които са прекалено ярки, нараниха очите, а прекалено тъмно изглеждат кални и непрофесионални. Дори ако планирате да имате 30 секунди видеоклип на вашия сайт, толкова по-високо качество ще е по-добре, което ще отрази на вашия уеб сайт.
Не забравяйте също, че авторските права се отнасят за всички звуци или музика (както и кадри за снимане), които може да искате да използвате във видеоклипа си. Ако нямате достъп до приятел, който може да напише и възпроизведе песен за вас, ще трябва да намерите музика, която да не се възпроизвежда на фона. Има и места, на които можете да снимате кадри, за да добавите към видеоклиповете си.
Редактиране на видеоклипа ви
Няма значение какъв софтуер за редактиране използвате, толкова дълго, колкото сте запознати с него и го използвате ефективно. Gretchen, Desktop Video Guide, има някои професионални съвети за редактиране на видео, които могат да ви помогнат да редактирате видеоклиповете си така, че да изглеждат страхотно.
Запазете видеоклипа си в MOV или AVI (или MPG, CD, DV)
За останалата част от този урок ще предположим, че вашето видео е запазено в някакъв вид висококачествен (не-компресиран) формат като AVI или MOV. Докато можете да използвате тези файлове, каквито са, можете да се сблъскате с всички проблеми с видеоклипа, които вече сме обсъждали. Следващите страници ще ви обяснят как да конвертирате файла в три типа, така че да се вижда от най-много браузъри.
04 от 10
Конвертиране на видео към 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) и е с отворен код.
- Koyote видео конвертор (Windows)
- Free Video Converter Смятаме, че това има версия на Windows и Macintosh, но е трудно да се каже от сайта им
- Simple Theora Encoder (Macintosh) - това е онзи, който обикновено използваме.
След като запазите видеоклипа във формат Ogg, го запазете в местоположение на уебсайта си и отидете на следващата страница, за да го превърнете в други формати за други браузъри.
05 от 10
Превърнете видеото в MP4 за Safari
Следващият формат, в който трябва да конвертирате видеоклипа си, е MP4 (видеозапис H.264), така че да може да се възпроизвежда в сафари 3 и 4 и iPhone и Android. Освен това, видеоклиповете от H.264 могат лесно да се преобразуват в FLV файлове за гледане на Flash.
Този формат е по-лесно достъпен в търговски продукти и вероятно имате вече програма, която ще се преобразува в MP4, ако имате видео редактор. Ако имате Adobe Premiere, можете да използвате Adobe Video Encoder или ако имате QuickTime Pro, който също ще работи. Много от конверторите, които обсъждахме на предишната страница, също ще конвертират видеоклипове в MP4.
- Media-Convert - онлайн инструмент
- Miro Video Converter (Windows Macintosh) - Тази програма има полза от преобразуването както в Ogg, така и в MP4 (H.264) и е с отворен код.
- SUPER (Windows) - ще конвертира много различни видове файлове в MP4 и FLV
- Free Video Converter Смятаме, че това има версия на Windows и Macintosh, но е трудно да се каже от сайта им
Запазете файла MP4 в уебсайта си и след това ще трябва да го преобразувате в Flash за Internet Explorer, който да го използвате.
06 от 10
Конвертирайте видеоклипа във FLV за Internet Explorer
Най-лесният начин да конвертирате видеоклипове в FLV е да използвате самата Flash. Ето как преобразуваме видеоклиповете си в Flash. Но ако нямате Flash, тук има два популярни инструмента за конвертиране на файлове в FLV:
- SUPER (Windows) - ще конвертира много различни видове файлове в MP4 и FLV
- ffmpegX (Macintosh) - ще конвертира много различни типове файлове в Mp4 и FLV.
Запазете FLV файла си в уебсайта си и следващата страница ще ви покаже как да напишете HTML, за да можете да възпроизвеждате видеоклиповете си.
07 от 10
Добавете видео елемента към уеб страницата си
Много е лесно да използвате HTML 5 за добавяне на видео към уеб страници. Повечето съвременни браузъри поддържат HTML 5 видео, въпреки че не всички го поддържат по същия начин. Но това означава, че ако запазите видеоклипа си като формат Ogg и MP4, ще можете да напишете само четири или пет реда HTML, за да го покажете в повечето съвременни браузъри (с изключение на Internet Explorer 8). Ето как:
- Запишете маркера HTML 5 doctype, така че браузърите да знаят, че очакват HTML 5:
- Създайте своята уеб страница, както обикновено я създавате:
<Глава>
<Заглавието>
<Тяло>
- Вътре в тялото поставете маркера
- Решете кои атрибути искате да съдържа вашето видео:
- автоматично стартиране - да започне веднага щом бъде изтеглено
- контроли - позволете на вашите читатели да контролират видеото (пауза, назад, бързо превъртане напред)
- loop - стартирайте видеото от началото, когато свърши
- предварително зареждане - изтеглете предварително видеоклипа, така че да е готов по-бързо, когато клиентът кликне върху него
- плакат - дефинирайте изображението, което искате да използвате, когато видеото е спряно
- След това добавете изходните файлове за двете версии на видеоклипа (MP4 и OGG) в елемента
- Отворете страницата в 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?
Internet Explorer не харесва HTML 5 или етикета <видео>
В следващия раздел ще обсъдим какво можете да направите, за да получите IE 8, за да играете добре с вашите HTML 5 видео маркери и да покажете видео. Трябва да използвате Flash. Добрата новина е, че IE 9 се очаква да поддържа HTML 5 и видео маркера.
08 от 10
Добавете JavaScript и Flash Player, за да получите Internet Explorer да работи
Възможно е да сте забелязали, че в HTML на предишната страница няма източник за FLV файла. И ако сте тествали тази страница в Internet Explorer, нямаше да работи. Това е така, защото Internet Explorer не разпознава HTML 5 и не може да възпроизвежда видеоклипове OGG или MP4. За да можете да работите с Internet Explorer 7 и 8, трябва да го възпроизведете като Flash. Но има още стъпки, за да се получи работа, отколкото просто да добавите FLV файла.
Стъпка 1: Вземи Flash Player за вашия уеб сайт
Препоръчваме ви да получите FlowPlayer, защото е Flash видео плейър с отворен код, който можете да инсталирате на уеб сървъра си и да го използвате, когато имате Flash видео за възпроизвеждане. Безплатната версия на FlowPlayer вмъква реклами във вашите видеоклипове, но можете да закупите и търговски лицензи, ако имате нужда от тях.
Следвайте инструкциите на сайта FlowPlayer, за да инсталирате FlowPlayer на уебсайта си. С две думи, ще инсталирате 2 SWF файла и един JavaScript файл на вашия сайт. В долната част на вашия HTML (преди маркера ) ще добавите ред: