HTML 5 відэа тэг дазваляе лёгка дадаваць відэа на ваш вэб - старонак . Але ў той час як аказваецца лёгка на паверхні, ёсць шмат рэчаў, якія вы павінны зрабіць, каб атрымаць відэа і працуюць. Гэта кіраўніцтва правядзе вас праз крокі , каб стварыць старонку ў HTML 5 , які будзе працаваць відэа ва ўсіх сучасных браўзэрах.
- Хостынг вашых уласных HTML 5 відэа супраць Выкарыстання YouTube
- Кароткі агляд відэа Падтрымка ў Інтэрнэце
- Стварэнне і рэдагаванне відэа
- Пераўтварэнне відэа ў Ogg для Firefox
- Пераўтварэнне відэа ў MP4 для Safari
- Пераўтварэнне відэа ў FLV для Internet Explorer
- Дадайце элемент відэа на вэб-старонку
- Дадайце JavaScript і Flash - плэер , каб атрымаць у 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 Video Прапаноў некаторых недахопаў
Да іх адносяцца:
- Вы павінны кадзіраваць відэа, па меншай меры тры розных кодэкаў
- Вы павінны ўключыць некаторыя JavaScript для забеспячэння браўзэраў , якія не падтрымліваюць HTML 5 будзе працаваць
- Ваш сервер павінен быць у стане апрацоўваць патрабаванні да прапускной здольнасці хостынгу відэа
02 з 10
Кароткі агляд відэа Падтрымка ў Інтэрнэце
Даданне відэа на вэб-старонках ўжо даўно з'яўляецца складаным працэсам. Былі так шмат рэчаў, якія маглі б пайсці не так:
- Па-першае, можна выкарыстоўваць тэг
- Такім чынам, вы уключыце ў тэг <аб'ект>, але старыя браўзэры не падтрымліваюць і больш новыя браўзэры схематычныя у яго падтрымку.
- Тады вы думаеце , « Успышка !» І кадзіраваць відэа ў фармаце FLV. Але ўспышка не падтрымліваецца на шматлікіх мабільных прыладах і многія людзі ненавідзяць ўспышкі незалежна ад таго , як яна выкарыстоўваецца (25% рэспандэнтаў у маім апытанні не пыталіся пра тое , як вы ставіцеся да флэш заявілі , што яны не могуць стаяць 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
Стварэнне і рэдагаванне відэа
Першае, што вам трэба, калі вы збіраецеся размясціць відэа на вэб-старонцы фактычнае відэа. Вы можаце бесперапынна здымаць і рэдагаваць пазней, каб стварыць функцыю, ці вы можаце сцэнар яго і планаваць яго загадзя. У любым выпадку добра працуе, гэта проста тое, што вы камфортна. Калі вы не ведаеце, які тып відэа вы павінны зрабіць, праверыць гэтыя ідэі Кіраўніцтвы Video Desktop:
- Сям'я Відэа Праекты
- Маркетынгавыя і рэкламныя відэа
- Відэа Віртуальныя туры
- як відэа
- вясельная Відэа
Даведайцеся, як Запіс відэа высокай якасці
Пераканайцеся, што вы ведаеце, як запісваць у памяшканні і на адкрытым паветры, а таксама, як запісваць аўдыё. Асвятленне таксама вельмі важна - кадры, якія занадта ярка рэжуць вока, і занадта цёмныя проста выглядаюць бруднымі і непрафесійным. Нават калі вы толькі плануеце мець 30-секунднае відэа на вашым сайце, тым вышэй якасць, тым лепш яна будзе адлюстроўваць на вашым сайце.
Памятаеце таксама , што аўтарскае права распаўсюджваецца на любыя гукі або музыку (а таксама футадж) , якія вы можаце выкарыстоўваць у вашым відэа. Калі ў вас няма доступу да аднаго, які можа пісаць і гуляць песню для вас, вы павінны будзеце знайсці бязвыплатную музыку, каб гуляць у фонавым рэжыме. Ёсць таксама месцы, дзе можна назапасіць кадры, каб дадаць да відэа.
рэдагаванне відэа
Не мае значэння, якое праграмнае забеспячэнне для рэдагавання вы выкарыстоўваеце, толькі да таго часу, пакуль вы з ім знаёмыя і могуць эфектыўна выкарыстоўваць яго. Гретхен, Кіраўніцтва Video Desktop, маюць некаторыя прафесійныя парады для рэдагавання відэа, якія могуць дапамагчы вам рэдагаваць відэа, так што яны выглядаюць пышна.
Захоўваць відэа ў 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 Video Converter (Windows)
- Free Video Converter Мы лічым, што гэта мае як Windows, і версія для Macintosh, але гэта было цяжка сказаць, з іх сайта
- Просты Theora кадавальнік (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.
- Медыя-Convert - інтэрактыўны інструмент
- Miro Video Converter (Windows Macintosh) - Гэтая праграма мае перавагу пераўтварэнні ў абодвух Ogg і MP4 (H.264), і гэта з адкрытым зыходным кодам.
- SUPER (Windows) - будзе канвертаваць мноства розных тыпаў файлаў у MP4 і FLV
- Free Video Converter Мы лічым, што гэта мае як Windows, і версія для Macintosh, але гэта было цяжка сказаць, з іх сайта
Захавайце яго MP4 на ваш сайт, а затым вам трэба пераўтварыць яго ў флэш-памяці для 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:
- Стварэнне вэб-старонкі, як звычайна яго стварэння:
<Галава>
<Назва>
<Цела>
- Усярэдзіне корпуса, змесціце тэг <відэа>:
<Відэа>
- Вырашыце, якія атрыбуты вы хочаце, каб ваша відэа, каб:
- аўтазапуск - каб пачаць, як толькі ён загружаны
- кіравання - дазваляе вашым чытачам кіраваць відэа (паўза, перамотка назад, перамотка наперад)
- цыкл - запусціць відэа з самага пачатку, калі ён сканчаецца
- преднагрузки - папярэдне загрузіць відэа, так што яна гатовая хутчэй, калі карыстальнік націскае на яго
- плакат - вызначыць малюнак, якое вы хочаце выкарыстоўваць, калі відэа спынена
<Упраўлення відэа падціснуць>
- Затым дадайце зыходныя файлы для двух версій відэа (MP4 і OGG) усярэдзіне элемента <відэа>:
<Упраўлення відэа падціснуць>
<Крыніца SRC = тып "shasta.ogg" = 'відэа / OGG; Кодэкі = "Theora, Vorbis" '>
- Адкрыйце старонку ў 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 або <відэа> Tag
У наступным раздзеле мы пагаворым аб тым, што вы можаце зрабіць, каб атрымаць 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 Video Player для вашага сайта
Мы рэкамендуем атрымаць FlowPlayer, таму што гэта з'яўляецца адкрытым зыходным кодам флэш-відэа-плэер, які можна ўсталяваць на вэб-сэрвэры і выкарыстоўваць кожны раз, калі ў вас ёсць флэш-відэа, каб гуляць. У бясплатнай версіі FlowPlayer ўстаўляе рэкламу ў відэа, але вы таксама можаце набыць камерцыйную ліцэнзію, калі вы маеце патрэбу ў іх.
Выконвайце інструкцыі на сайце анімаваных вэб ўсталяваць FlowPlayer на сваім сайце. У двух словах, вы будзеце ўсталёўваць 2 SWF файлы і файл JavaScript на вашым сайце. У ніжняй частцы HTML, (перад тэгам ) трэба дадаць радок:
<Сцэнар SRC = "flowplayer.min.js">
Але Internet Explorer па-ранейшаму не будзе гуляць відэа, вы павінны навучыць яго, як распазнаваць HTML 5 тэгаў.
Крок 2: Паспрабуйце пераканаць у Internet Explorer для чытання HTML 5 тэгаў
Існуе зручны скрыпт на Google Code называецца «HTML Шив», які дапаможа IE распазнаваць HTML 5 элементаў. Такім чынам, у
вашай HTML-дакумент, які вы хочаце, каб спасылацца на яго. Лепш за ўсё, каб заключыць яго ў IE ўмоўныя каментары, каб іншыя браўзэры не блытаць:
<Сцэнар SRC = "http://html5shiv.googlecode.com/svn/trunk/html5.js">
Добра, зараз IE распазнае тэг <відэа>, але не будзе ведаць, што рабіць з зыходнымі файламі вы ўключаны да гэтага часу.
Крок 3: Даданне лініі крыніцы для FLV файлаў
Гэтак жа, як вы рабілі на папярэдняй старонцы, вы дадасце радок у HTML 5 ўнутры элемента <відэа>, які паказвае, дзе вы захавалі файл FLV на сэрвэры.
<Упраўлення відэа падціснуць>
<Крыніца SRC = тып "shasta.ogg" = 'відэа / OGG; Кодэкі = "Theora, Vorbis" '>
<Крыніца SRC = тып "shasta.flv" = 'відэа / х-FLV; Кодэкі = "On2 VP6, Sorenson іскра, відэа экран, экран відэа 2, H.264" '>
09 з 10
Дадайце JavaScript і Flash Player Атрымаць Internet Explorer для працы - Частка 2
На жаль, мы да гэтага часу не зроблена. Мы павінны зараз скажыце IE выкарыстоўваць відэаплэер FlowPlayer флэша мы б спасылку вышэй.
Крок 4: Павярніце <відэа> элемент у Flash
Для гэтага нам патрэбен іншы сцэнар. Мы атрымалі сцэнар з Dive Into HTML 5 . Але калі мы тэставалі яго, ён не працуе, пакуль мы не зрабілі пару карэкціровак:
- Вакол лініі 31: дадаць месцазнаходжанне вашай ўстаноўкі анімаваных вэб.
- Вакол лініі 42: змяніць тып файлаў
відэа / mp4
увідэа / х-FLV
- Вакол лініі 94: пачынаючы з
калі (!! $ && !! $ (дакумент) .ready) {
у канцы дакумента, змяніць гэты раздзел наступным чынам:// калі (!! $ && !! $ (дакумент) .ready) {
/ * Карыстальнікі JQuery можна ініцыялізаваць як толькі DOM гатовы * /
// $ (дакумент) .ready (html5_video_init);
//} яшчэ {
/ * Усе астатнія могуць пачакаць да OnLoad * /
/ * AddEvent функцыя праз http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * /
вар addEvent = функцыя (аб'ект, тып, п) {
калі (obj.addEventListener)
obj.addEventListener (тып, п, ілжыва);
інакш калі (obj.attachEvent)
obj.attachEvent ( 'на' + тыпу, функцыя () {вярнуцца fn.apply (аб'ект, новы Array (window.event));});
}
addEvent (акно, "нагрузка", html5_video_init);
//}
Пасля таго, як вы адрэдагавалі файл JavaScript, загрузіце яго на сервер, і спасылку на яго ў ніжняй частцы HTML-старонкі (перад ):
<Сцэнар SRC = "html5-video.js">
Уф! Зараз, калі вы зрабілі ўсё, што вы павінны загрузіць HTML, так што вы можаце пачаць тэставанне.
10 з 10
Тэставанне ў якасці многіх браўзэраў, як вы можаце
Тэставанне відэа-старонкі маюць вырашальныя значэнне, калі вы хочаце мець паспяховы запуск. Вы павінны быць упэўнены, каб праверыць сваю старонку ў самых папулярных браўзэрах і версіях для вашага сайта.
Мы выявілі, што ў той час як гэта можна выкарыстоўваць такія інструменты, як BrowserLab і AnyBrowser, каб праверыць відэа, гэта не так надзейна, як выхоўвае старонку ў браўзэры самастойна. Калі вы робіце, што вы сапраўды можаце ўбачыць, калі ён працуе ці не.
Так як вы пайшлі на ўсе праблемы, каб кадзіраваць відэа ў трох фарматах, вы павінны праверыць, каб пераканацца, што ён адлюстроўвае ва ўсіх трох. Гэта азначае, што, як мінімум, вы павінны праверыць яго ў:
- Firefox 3.5
- Сафары 3 ці 4
- Internet Explorer 7 або 8
Вы можаце праверыць у Chrome, але так як Chrome будзе разглядаць усе тры метаду (нават ўспышкі, калі ў вас ёсць убудова), гэта цяжка сказаць, калі ёсць праблема з адной з двух іншых ці якога кодэка Chrome выкарыстоўвае.
Для вашага спакою, вы павінны таксама праверыць у старых браўзэрах, каб убачыць, што яны робяць, асабліва калі шмат вашых чытачоў выкарыстоўваць старыя браўзэры.
Атрыманне відэа, якія працуюць у старых браўзэрах
Як і з любой вэб-старонкі, вы павінны спачатку разгледзець, як важна, каб атрымаць гэтыя браўзэры працуюць. Калі 90% вашых кліентаў выкарыстоўваць Netscape, то вы павінны мець запасны план для іх. Але калі ён складае менш за 1% зрабіць, гэта, магчыма, не мае значэння, так шмат.
Пасля таго, як вы вырашылі, што браўзэры вы збіраецеся паспрабаваць падтрымку, самы просты спосаб, каб проста стварыць альтэрнатыўную старонку для іх, каб прагледзець відэа ст. На гэтай альтэрнатыўнай старонцы вы б ўбудаваць відэа з дапамогай HTML 4. А потым альбо выкарыстоўваць некаторую форму выяўлення браўзэра, каб перанакіраваць іх там ці проста дадаць спасылку на гэтую старонку на гэтым.