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 се на потрошувачка страна, а не на дизајнерската страна, работи како:
- Бавно пребарување и индексирање
- Испади на серверот
- Содржината се отстранува (навидум) произволно
- Премногу лоша содржина
Но, постојат неколку причини зошто Јутјуб е лош и за развивачите на содржини, вклучувајќи ги и:
- 10-минутна максимална должина за видеа (бесплатно сметки)
- Слаба ефикасност за поставување
- YouTube добива неограничено користење на вашето видео
- Секој корисник на YouTube добива неограничено користење на вашето видео
HTML 5 видео дава некои предности во однос на YouTube
Користењето на HTML 5 за видео ќе ви овозможи да го контролирате секој аспект од вашето видео, од кој може да го видите, колку долго е, содржината која содржи, каде е хостирана и како функционира серверот. И HTML 5 видео ви дава можност да го кодифицирате вашето видео во онолку формати колку што ви е потребно за да бидете сигурни дека максималниот број на луѓе можат да го видат. Вашите клиенти не нудат додаток или чекаат додека Јутјуб не издаде понова верзија.
Се разбира, HTML 5 видео нуди некои недостатоци
Тие вклучуваат:
- Мора да го кодирате вашето видео во најмалку три различни кодеци
- Треба да вклучите некои JavaScript за да осигурите дека прелистувачите кои не поддржуваат HTML 5 ќе работат
- Вашиот сервер мора да биде во можност да се справи со пропусниот опсег барања на хостинг видеа
02 од 10
Брз преглед на видео поддршка на Интернет
Додавањето видео на веб-страници одамна е тежок процес. Имаше толку многу работи што можеа да тргнат наопаку:
- Прво, ја користите
- Така да се префрлите на ознаката
- Потоа мислите дека " Блиц !" И кодирање на вашето видео како FLV датотека. Но, Флеш не е поддржан на многу мобилни уреди, а многу луѓе го мразат Флеш, без оглед колку се користи (25% од испитаниците во мојата анкета прашуваат за тоа како мислите за Флеш изјавиле дека не можат да издржат Флеш на кој било начин).
- Така да одлучите да го поставите вашето видео на видео сајт за вградување како 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
Креирајте и уредувајте го вашето видео
Првото нешто што ви треба кога ќе го поставите видео на веб-страница е вистинското видео. Можете или да пукате постојано и да уредувате потоа за да креирате некоја функција, или можете да ја скриете и да ја планирате однапред пред време. Во секој случај добро функционира, тоа е само она што ви е удобно. Ако не знаете каков тип на видео треба да направите, проверете ги овие идеи од Desktop Video Guide:
- Проекти за семејни видео
- Маркетинг и промотивни видеа
- Видео виртуелни тури
- Како да Видеа
- Свадба Видеа
Научете како да снимате висококвалитетно видео
Бидете сигурни дека знаете како да снимате во затворени простории и на отворено, како и за снимање на аудио. Осветлувањето е исто така многу важно - снимките што се премногу светли ги повредуваат очите, и премногу темни само изгледаат калливи и непрофесионални. Дури и ако планирате само видео од 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. Но, можеби имаш подобра среќа. Оваа страница има корист од тоа да биде бесплатно.
Некои други алатки што ги најдовме вклучуваат:
- Миро Видео конвертор (Windows Macintosh) - Оваа програма има корист од конвертирање на Ogg и MP4 (H.264) и тоа е софтвер со отворен код.
- Koyote Video Converter (Windows)
- Слободен видео конвертер Мислиме дека ова има и верзија на Windows и Macintosh, но тоа беше тешко да се каже од нивната веб-страница
- Едноставен Theora Encoder (Macintosh) - ова е оној со кој се стремиме да го користиме.
Откако ќе го зачувате вашето видео зачувано во Ogg формат, зачувајте го на локација на вашата веб-страница и одете на следната страница за да го претворите во други формати за други прелистувачи.
05 од 10
Конвертирај видео на MP4 за Safari
Следниот формат во кој треба да го конвертирате вашето видео е MP4 (видео H.264), така што може да се репродуцира на Safari 3 и 4 и на iPhone и Android. Плус, H.264 видеата може лесно да се конвертираат во FLV фајлови за гледање на Flash.
Овој формат е повеќе лесно достапен во комерцијалните производи, и најверојатно веќе имате програма која ќе се претвора во MP4 ако имате видео едитор. Ако имате Adobe Premiere можете да го користите Adobe Video Encoder, или ако имате QuickTime Pro, кој ќе работи исто така. Многу од конвертерите што ги разгледавме на претходната страница исто така ќе ги претворат видеата во MP4.
- Media-Convert - онлајн алатка
- Миро Видео конвертор (Windows Macintosh) - Оваа програма има корист од конвертирање на Ogg и MP4 (H.264) и тоа е софтвер со отворен код.
- СУПЕР (Windows) - ќе конвертира многу различни типови датотеки во MP4 и FLV
- Слободен видео конвертер Мислиме дека ова има и верзија на Windows и Macintosh, но тоа беше тешко да се каже од нивната веб-страница
Зачувајте ја вашата MP4 датотека на вашиот веб-сајт, а потоа ќе треба да го претворите во Flash за Internet Explorer за да го користите.
06 од 10
Конвертирајте Видео во FLV за Internet Explorer
Најлесен начин да ги конвертирате видеата во FLV е да го користите Flash себе. Така ги конвертираме моите видеа на Flash. Но, ако немате Flash, тука се две популарни алатки за конвертирање на датотеки во FLV:
- СУПЕР (Windows) - ќе конвертира многу различни типови датотеки во MP4 и FLV
- ffmpegX (Macintosh) - ќе конвертира многу различни типови на датотеки во Mp4 и FLV.
Зачувајте ја вашата FLV датотека на вашата веб-страница и следната страница ќе ви покаже како да го напишете HTML за да можете да ги пуштите вашите видеа.
07 од 10
Додадете видео елемент на вашата веб-страница
Многу е лесно да се користи HTML 5 за да додадете видео на веб страници. Повеќето современи прелистувачи поддржуваат HTML 5 видео, иако тие не го поддржуваат на ист начин. Но, тоа значи дека ако го зачувате вашето видео како Ogg и MP4 формати, ќе можете да напишете само четири или пет линии на HTML за да го прикажете во повеќето модерни пребарувачи (освен Internet Explorer 8). Еве како:
- Напишете HTML 5 маркер за доктив, така што прелистувачите знаат да очекуваат HTML 5:
- Направете своја веб-страница како што нормално ја креирате:
title>
head>
<тело>
body>
html> - Во внатрешноста на телото, ставете ја
- Одлучете кои атрибути сакате вашето видео да има:
- autoplay - за да започнете веднаш штом ќе се преземе
- контроли - им овозможи на вашите читатели да го контролираат видеото (пауза, премотајте назад, брзо напред)
- јамка - започнете го видеото од почеток кога ќе заврши
- preload - претходно преземете го видеото така што ќе биде подготвено побрзо кога клиентот ќе кликне на него
- постер - дефинирајте ја сликата што сакате да ја користите кога видео е запрена
<преглед за видео контроли video>
- Потоа додадете ги изворните датотеки за двете верзии на вашето видео (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: Земете Флеш Видео плеер за вашиот веб-сајт
Препорачуваме да добивате FlowPlayer затоа што е Флеш видео плеер со отворен код кој можете да го инсталирате на вашиот веб сервер и да го користите секогаш кога имате Флеш видео за играње. Бесплатната верзија на FlowPlayer внесува реклами во вашите видеа, но исто така можете да купите комерцијални лиценци ако ви се потребни.
Следете ги инструкциите на сајтот FlowPlayer за да го инсталирате FlowPlayer на вашата веб-страница. Накусо, ќе инсталирате 2 SWF датотеки и датотека со JavaScript на вашиот сајт. На дното на HTML, (пред body> тагот) ќе додадете линија: