Дастаўляйце відэа на працоўны стол і мабільныя прылады

Задаволены

• Што такое HTML5?
• Што такое відэа HTML5?
• Кантэйнеры
• MPEG-4
• Яйцо
• WebM
• Flash Video
• Кодэкі: відэа
• H.264
• Тэара
• VP8
• VP6
• Кодэкі: аўдыя
• AAC
• Ворбіс
• MP3
• Сумяшчальнасць з кантэйнерамі / кодэкамі
• Палепшаная разметка HTML5
• Патэнцыйныя праблемы
• Інтэграцыя Flash Video
• Вярніцеся да Flash
• Вярніцеся да HTML5
• Што далей?

З увядзеннем HTML5 распрацоўшчыкі набылі новы інструмент для дастаўкі відэа да сваёй аўдыторыі. Нароўні Flash Player - усталяваны ў 99 працэнтах персанальных камп'ютэраў з падключэннем да Інтэрнэту - HTML5 гатовы стаць галоўным гульцом у свеце відэа.

Аднак у лепшым ці ў горшым выпадку спецыфікацыя HTML5 не вызначае жорстка ўсіх аспектаў дастаўкі відэа, і непазбежныя войны фарматаў, якія ўзнікаюць у такіх выпадках, крыху абцяжарваюць жыццё распрацоўшчыкаў і стваральнікаў кантэнту. У гэтай шматсерыйнай серыі разглядаецца, як арыентавацца ў гэтых пастаянна зменлівых водах. У гэтай першай частцы будзе абмяркоўвацца, як выкарыстоўваць HTML5 сумесна з Flash Player, каб дасягнуць як мага больш шырокай аўдыторыі, і як стварыць відэаактывы ва ўсіх формах, неабходных для дасягнення гэтай мэты.

Будучыя растэрміноўкі прадэманструюць, як даць кароткі агляд варыянтаў праграмнага забеспячэння для кадавання, як выкарыстоўваць JavaScript для ацэнкі і рэагавання на шматлікія канфігурацыі аглядальніка карыстальніка, якія могуць наведваць вашы старонкі, а таксама агляд некаторых з самых папулярных відэаплэераў JavaScript, якія будуць зрабіце цяжкі ўздым за вас.

Што такое HTML5?

Першае, што сапраўды трэба сказаць, гэта тое, што HTML5 не з'яўляецца стандартам. Ён усё яшчэ змяняецца, і гэта можа аказаць вялікі ўплыў на дзяцей, якія прынялі на ўзбраенне. Праект спецыфікацыі HTML5 быў пачаты ў 2004 г. Рабочай групай па тэхналогіях веб-гіпертэкставых тэхналогій (WHATWG), калекцыяй галіновых гульцоў, заснаванай прыватнымі асобамі Apple, Mozilla Foundation і Opera Software. Затым Кансорцыум па шырокаму сеціву (W3C) прыняў яго ў якасці рабочага праекта ў 2007 г. Апошні званок спецыфікацыі (з мэтай экспертнай і грамадскай праверкі спецыфікацыі ў амаль канчатковай форме) быў выдадзены ў маі 2011 г. чакана, гэта нават не поўная функцыя. Эксперты не чакаюць, што спецыфікацыя будзе ратыфікавана W3C да 2014 г. да 2022 г., у залежнасці ад таго, чыю здагадку ты таксама слухаеш, і калі яна была зроблена.

Цікавы факт: хаця ў цяперашні час W3C па-ранейшаму выкарыстоўвае HTML5 у якасці манікера спецыфікацыі, WHATWG - які многія лічаць галоўнай сілай развіцця HTML - адмовіўся ад будучых намаганняў. Ён плануе прытрымлівацца "HTML" і называе яго "жыццёвым узроўнем".

Што ўсё гэта значыць? На дадзены момант гэта на самай справе азначае толькі тое, што раннія людзі павінны быць гатовыя да змен, паколькі спецыфікацыя праходзіць канчатковы, хаця і шматгадовы этап. Сёння даступна шмат функцый HTML5, і большасць экспертаў сыходзяцца ў меркаванні, што радыкальныя змены ў характарыстыках не верагодныя.

Бяда ў тым, што да гэтага часу мы гаварылі толькі пра афіцыйны стандарт, які стаў адносна хуткім часам. Іншая справа - рэалізацыя гэтага стандарту. Кожны браўзэр і кожная версія кожнага аглядальніка рэалізуюць функцыі HTML5 у рознай ступені і з розным поспехам. Гэта робіць справы больш складанымі для распрацоўшчыкаў, і мы толькі пачынаем. Вось кароткі здымак сумяшчальнасці аглядальніка і мабільнай аперацыйнай сістэмы (АС), калі гаворка ідзе пра асноўныя функцыі відэа HTML5:

Што такое відэа HTML5?

Па сутнасці, відэа HTML5 - гэта некалькі тэгаў разметкі і дапаўненняў да аб'ектнай мадэлі дакумента JavaScript. У самай простай рэалізацыі відэа HTML5 выглядае так:

video src = "vid.mp4" width = "320" height = "240" control> / video>

Але перш чым мы зможам значна лепш выкарыстаць разметку, нам трэба зразумець, што гэта толькі невялікая частка карціны. Магчыма, больш важным (і, безумоўна, больш складаным), чым разметка, з'яўляецца фармат самога зместу. Хоць тэрмін фармат выкарыстоўваецца досыць свабодна, ён часцей за ўсё ў сукупнасці ўяўляе не толькі алгарытмы сціскання і распакавання відэа- і аўдыяданых, але і кантэйнер, які забяспечвае іх перадачу ў згуртаванай і карыснай форме. Прасцей кажучы, кантэйнер - гэта абгортка для відэа, аўдыё і звязанага з імі змесціва.

Адна з самых вялікіх праблем, з якой сутыкаюцца распрацоўшчыкі HTML5, заключаецца ў тым, што бягучая спецыфікацыя праекта HTML5 не рэкамендуе падтрымліваць аглядальнікі аднаго фармату відэа. Камандам кожнага браўзэра застаецца вызначыць, які фармат відэа лепш за ўсё падыходзіць для задачы. Гэта прывяло да расколатай рэалізацыі функцый відэа і стварае значную перашкоду, якую стваральнікі кантэнту павінны пераадолець. На самай справе, каб падтрымаць дастаўку відэа HTML5 ва ўсіх найбольш шырока выкарыстоўваюцца браўзэрах, распрацоўшчык павінен альбо стварыць тры асобныя файлы для кожнага відэа, альбо абапірацца на сервернае рашэнне, якое імкліва перакадуе (пераўтворыць з аднаго фармату ў іншы).

Кантэйнеры

У гэтым артыкуле мы абмяркуем наша абмеркаванне кантэйнерамі, сумяшчальнымі з HTML5 і Flash, і, у асноўным, часткамі відэа і аўдыя ў іх. Аднак гэтыя абгорткі могуць таксама падтрымліваць дадатковыя функцыі, такія як субтытры, інфармацыя пра раздзелы і метададзеныя, а таксама тое, як сінхранізуюцца ўсе гэтыя тыпы дадзеных. У некаторых выпадках кантэйнеры падтрымліваюць іншыя параметры, такія як кіраванне лічбавымі правамі (DRM), асноўныя параметры 3D-рэндэрынгу і падтрымка апаратнага рэндэрынгу.

Ёсць чатыры асноўныя кантэйнеры, якія падтрымліваюцца HTML5 і / або Flash. Плюсы і мінусы кожнага фармату ў асноўным заключаюцца ў відэа- і аўдыяфункцыях, якія яны ўключаюць (пра што я раскажу праз хвіліну), але некаторыя асаблівасці, характэрныя для кантэйнераў, патрабуюць згадваць і тут.

MPEG-4

MPEG-4 (дакладней MPEG-4, частка 14) - гэта ўласны кантэйнер, які кантралюецца групай экспертаў па рухомым малюнку. Выкарыстанне знаёмага пашырэння файла .mp4 (хаця .m4v часам выкарыстоўваецца таксама), кантэйнер MPEG-4, магчыма, найбольш вядомы. Яна сыходзіць каранямі ў кантэйнер QuickTime ад Apple (які звычайна выкарыстоўвае .mov пашырэнне) і ў цяперашні час з'яўляецца найбольш распаўсюджаным выбарам для настольных і мабільных прылад для прайгравання відэа. Гэта, напрыклад, кантэйнер, які выкарыстоўваецца ў экасістэме iTunes Mac / Windows / iPhone / iPad / iTouch. Аднак з-за праблем з патэнтамі і ліцэнзаваннем гэта павольна мяняецца, і ініцыятыва HTML5 паскарае гэтыя змены. У якасці кантэйнера MPEG-4 адметны тым, што падтрымлівае кіраванне лічбавымі правамі - важная асаблівасць для некаторых стваральнікаў кантэнту, а таксама прывабная тым, што апаратнае паскарэнне (на аснове мікрасхем, альбо дапаможнае кадаванне і / альбо дэкадаванне падчас выканання) шырока даступна для гэтага фармату. Акрамя ўключэння ў спецыфікацыю HTML5, Flash Player таксама падтрымлівае кантэйнер MPEG-4.

Яйцо

Ogg - гэта бясплатны фармат адкрытага кантэйнера, які падтрымліваецца Фондам Xiph.Org. Хоць Фонд Xiph.Org рэкамендуе выкарыстоўваць .ogv пашырэнне файла, даволі часта можна бачыць відэафайлы Ogg з .ogg прыбудова. Ogg родам з АС Linux і падтрымліваецца ў аперацыйных сістэмах Mac і Windows кампанентамі QuickTime. АС Windows таксама можа выкарыстоўваць пашырэнне Windows Media Player альбо фільтры DirectShow для адлюстравання змесціва Ogg.

WebM

Нядаўна Google прадставіў кантэйнер WebM як транспартны сродак для бясплатнага адкрытага відэа- і аўдыякантэнту. Ён выкарыстоўвае .webm пашырэнне файла і заснавана на кантэйнеры Matroska.

Апаратнае паскарэнне ўжо даступна для файлаў WebM, і Adobe абвясціла, што будучыя версіі Flash Player будуць падтрымліваць кантэйнер WebM.

Flash Video

У кантэйнеры Flash Video выкарыстоўваюцца два кантэйнеры. FLV - гэта стары, уласны фармат, які падтрымлівае версіі Flash Player, якія вяртаюцца да версіі 7, уведзенай у 2003 г. Flash Player версіі 9, абнаўленне 3, укараніў падтрымку фармату F4V, які заснаваны на MPEG-4. (Згаданыя раней, сапраўдныя кантэйнеры MPEG-4 падтрымліваюцца Flash Player пры выкарыстанні версіі 9 з абнаўленнем 3 і больш позняй версіі.)

Flash Player не разлічвае на пашырэнні файлаў для прайгравання сумяшчальных відэафайлаў, але пашырэнні, якія звычайна выкарыстоўваюцца для кожнага кантэйнера, ёсць .flv і .f4vадпаведна. (Фармат F4V таксама ўключае ў сябе .f4p пашырэнне для абароненага відэа.) Flash Player 10.2 і больш позняя версія падтрымлівае апаратнае паскарэнне для Flash Video.

Асноўная задача кантэйнера - аб'яднаць відэа- і аўдыязмест. Адказнасць за кіраванне гэтымі актывамі кодэкі.

Кодэкі: відэа

Кодэкі - гэта алгарытмы, якія выкарыстоўваюцца для кадавання актываў падчас аўтарызацыі і дэкадавання іх для прайгравання падчас выканання. (Тэрмін кодэк - гэта портманта, атрыманы ад "кодэр" / "дэкодэр".) Вытворцы праграмнага і апаратнага забеспячэння (напрыклад, кампаніі, якія стаяць за браўзэрамі і мабільнымі прыладамі) павінны вырашыць, якія кантэйнеры і кодэкі падтрымліваць з дапамогай такіх тэхналогій, як HTML5 і Flash Video. Такія фактары, як якасць, памер файла, прапускная здольнасць і падобныя праблемы, гуляюць ролю ў гэтым рашэнні.

Адным з найбуйнейшых такіх фактараў з'яўляецца ўздзеянне патэнтаў і выдаткаў на ліцэнзаванне, а імкненне да бясплатных і адкрытых кодэкаў з'яўляецца асноўнай прычынай фрагментацыі відэа фарматаў, з якой зараз сутыкаюцца распрацоўшчыкі вэб-відэа. Ёсць шмат кодэкаў, але для гэтага абмеркавання мы спынімся на чатырох асноўных кодэках для дастаўкі HTML5 і Flash. Спачатку відэакадэкі: H.264, Theora, VP8 і VP6. Патэнты H.264 і VP6 з'яўляюцца абмежаванымі і спаганяюць плату за ліцэнзію, у той час як Theora і VP8 бясплатныя і альбо не абцяжараныя патэнтамі, альбо ўтрымліваюцца пад мандатам не выконваць гэтыя патэнты.

H.264

Таксама называецца MPEG-4, частка 10 альбо пашыранае кадаванне відэаAVC), H.264 быў распрацаваны MPEG і стаў стандартам у 2003 годзе. Гэта высакаякасны кодэк, аптымізаваны для і прылады з высокай прапускной здольнасцю / працэсарам, ад тэлефонаў да прайгравальнікаў Blu-ray. Яго спецыфікацыя ўключае "профілі", пачынаючы ад Зыходны ўзровень да Высокая, якія дыктуюць розную ступень якасці і дадатковыя функцыі. Ён таксама ўключае ў сябе маштабуюцца профілі, якія дазваляюць аднавіць адзін файл на аснове магчымасцей прайгравання. Ён падтрымліваецца як з дапамогай праграмнага, так і апаратнага паскарэння і шырока выкарыстоўваецца ва ўсім, пачынаючы ад мабільных прылад і заканчваючы відэа высокай выразнасці ў эфіры, DVD і падобных асяроддзях. H.264 з'яўляецца часткай кантэйнера MPEG-4 і таксама шырока выкарыстоўваецца ў Flash Video альбо непасрэдна, альбо як частка кантэйнера F4V.

Тэара

Theora - гэта бясплатны адкрыты відэакодэк. Хоць іншыя ўтрыманні могуць выкарыстоўваць Theora ў якасці відэакодэка, але часцей за ўсё гэта звязана з фарматам Ogg. Першапачаткова On2 Technologies распрацавала тое, што стане Theora, як VP3. Theora была атрымана з VP3 пасля таго, як On2 выпусціў VP3 у грамадскае здабытак. Зараз Xiph.Org Foundation падтрымлівае кодэк. Ён патрабуе ліцэнзійных пагадненняў і не абцяжараны вядомымі патэнтамі, акрамя арыгінальных патэнтаў VP3, якія атрымалі ліцэнзію на бясплатную ліцэнзію. Theora з'яўляецца роднай для Linux і падтрымліваецца ў аперацыйных сістэмах Mac і Windows праз кодэры / дэкодэры з адкрытым зыходным кодам.

VP8

Таксама распрацаваны On2 Technologies, VP8 вядомы якасцю, аналагічнай высокаму профілю H.264, але з нізкай складанасцю дэкадавання, аналагічнай базаваму профілю H.264. Google набыў VP8 ад On2, каб стаць відэакодэкам кантэйнера WebM. Google даў безадзыўнае абяцанне не выконваць адпаведныя патэнты, робячы VP8 бязвыплатным, робячы яго прывабнай альтэрнатывай H.264. Звычайна гэта падтрымліваецца праграмным кадаваннем і дэкадаваннем, але апаратнае паскарэнне ўжо выкарыстоўваецца і расце.

VP6

VP6 - гэта кодэк, які найбольш часта выкарыстоўваецца ў фармаце FLV Flash Video. Гэта дастаткова якасны кодэк, які таксама ўключае такія прывабныя функцыі, як падтрымка альфа-канала.

Спрыяючы ўражлівай бягучай тэме ў гэтым артыкуле, On2 Technologies таксама распрацаваў VP6. Ліцэнзія на Macromedia (а потым Adobe), VP6, абмежаваная патэнтамі і праблемамі ліцэнзавання. Гэта і той факт, што для прайгравання неабходны Flash Player, робіць FLV Flash Video Format менш прывабным доўгатэрміновым рашэннем для многіх распрацоўшчыкаў, але пры гэтым выконвае індывідуальныя патрэбы - асабліва, калі гаворка ідзе пра выкарыстанне альфа-версіі каналаў.

Кодэкі: аўдыя

Як і ў выпадку з відэа, існуе мноства аўдыякодэкаў, але тут мы спынімся на AAC, Vorbis і MP3, бо яны часцей за ўсё выкарыстоўваюцца з відэаактывамі HTML5 і Flash.

AAC

Пашыранае аўдыякадаванне (AAC) было распрацавана як магчымы пераемнік фармату MP3. Вядома, што ён мае лепшую якасць, чым MP3, але з аднолькавым бітрэйт. Таксама можна кадаваць файл AAC, выкарыстоўваючы любы бітрэйт, у той час як для кадавання MP3 патрабуецца адна з некалькіх загадзя зададзеных бітавых хуткасцей. AAC - адзін з кодэкаў, які выкарыстоўваецца ў кантэйнеры MPEG-4, і аўдыякодэк, які найбольш часта выкарыстоўваецца для гэтага кантэйнера для сумяшчальнасці з HTML5. Фармат падтрымлівае кіраванне лічбавымі правамі, але абцяжараны патэнтамі і пытаннямі ліцэнзавання. Звычайна ён расшыфроўваецца з дапамогай праграмнага забеспячэння, але некаторыя рэалізацыі апаратнага дэкадавання існуюць.

Ворбіс

Vorbis часцей за ўсё асацыюецца з кантэйнерам Ogg, але можа выкарыстоўвацца ў MP4, WebM і іншых фарматах. Гэта адзіны бясплатны, адкрыты кодэк сярод тых, якія шырока выкарыстоўваюцца ў Flash і HTML5 і не абцяжараны патэнтамі. На самай справе, распрацоўка Vorbis была пачата, калі былі абвешчаны ліцэнзійныя зборы для фармата MP3. Ён вядомы тым, што мае якасць гуку, параўнальнае альбо вышэйшае, чым MP3 або AAC, але з меншымі памерамі файлаў і папулярны ў гульнявой індустрыі. Фармат з'яўляецца ўласным для Linux і Android і падтрымліваецца ў аперацыйных сістэмах Mac і Windows з дапамогай фільтраў QuickTime Components і DirectShow, а таксама спецыяльных праграмных плэераў.

MP3

Вы ведаеце, што такое MP3, так? Гэта ў значнай ступені стандарт для партатыўных лічбавых гукавых прылад, а таксама выкарыстоўваецца ў фармаце FLV Flash Video. Ён запатэнтаваны, патрабуе ліцэнзійных збораў і павінен кадавацца з адной з некалькіх загадзя вызначаных бітавых хуткасцей.

Сумяшчальнасць з кантэйнерамі / кодэкамі

Як бачыце, нават агляд відэакодэкаў, аўдыякодэкаў і кантэйнераў, даступных для HTML5 і Flash-відэа ў адзін абзац, усё яшчэ патрабуе трохі часу і ўвагі для перапрацоўкі. Тым не менш, гэта выдаткаваны час, бо гэты матэрыял важны, калі вы хочаце даставіць відэаактывы як мага больш шырокай аўдыторыі. Чаму? Таму што, як ужо было сказана коратка, сярод асноўных браўзэраў і мабільных аперацыйных сістэм, ні адзін фармат не падтрымліваецца паўсюдна.

Такім чынам, гэта пакідае нас на шляху машыны часу ў цяжкія дні 1997 года, калі асноўная частка нашай працы ў якасці распрацоўшчыкаў мела справу з неадпаведнасцямі паміж браўзэрамі і аперацыйнымі сістэмамі. У наступнай табліцы прыведзены здымак сумяшчальнасці фарматаў відэа (кантэйнеры, відэакодэкі і аўдыякодэкі) і асноўных настольных аглядальнікаў і мабільных аперацыйных сістэм.

У табліцы паказана некалькі рэчаў, вартых увагі. Па-першае, пустая ячэйка азначае адсутнасць падтрымкі, а запоўненая ячэйка паказвае версію, у якой была дададзена падтрымка фармату відэа. (Зорачкі выкарыстоўваюцца для абазначэння таго, што падтрымка даступная з дапамогай старонніх праграм, такіх як убудовы.)

Па-другое, у той час як Chrome на момант напісання артыкула падтрымліваў усе тры фарматы відэа, якія ў будучыні могуць змяніцца. † Google абвясціў, што Chrome адмовіцца ад падтрымкі відэакодэка H.264 з выхадам версіі 11.0 - выдатны прыклад згаданага вышэй змяняецца ландшафту HTML5 - хоць, падобна, рашэнне было адкладзена.

І, нарэшце, не любы фармат падтрымліваецца усімі браўзэрамі. Маючы справу з сучаснымі браўзэрамі, можна звярнуцца да ўсіх карыстальнікаў HTML5 з дапамогай камбінацыі MPEG-4 і WebM. Аднак, калі (як адзін з прыкладаў) карыстальнік мае версію 3.6 Firefox, толькі відэа Ogg адпавядае патрабаванням.

Акрамя таго, калі карыстальнік не абнавіўся да HTML5-сумяшчальнай версіі свайго пераважнага браўзэра, выкарыстанне Flash Player для прайгравання відэа, верагодна, лепшае рашэнне для гэтага карыстальніка. У выніку мы атрымліваем тры альбо больш версій кожнага відэа, каб дасягнуць як мага больш шырокай аўдыторыі.

Але задавальненне на гэтым не спыняецца. Апроч палітычных рашэнняў, такіх як адмова Google ад падтрымкі H.264, памылкі, ідыясінкразіі і адсутнасць парытэту на ўсіх платформах азначаюць, што нават адзін браўзэр або аперацыйная сістэма не заўсёды апрацоўвае відэа аднолькава. Некаторыя з гэтых пытанняў будуць разгледжаны далей у гэтым артыкуле, але, у двух словах, паспяховая дастаўка відэа на некалькі платформаў патрабуе пэўнага планавання і абыходных шляхоў. Што прымушае нас паглядзець на палепшаную версію разметкі HTML5, уведзеную коратка раней у гэтым артыкуле. Уводзячы ў мікс тэг HTML5 source>> і сочачы за вядомымі патэнцыяльнымі праблемамі, можна эфектыўна спраўляцца з большасцю дзівацтваў.

Палепшаная разметка HTML5

Першая версія разметкі відэа HTML5, якая абмяркоўвалася, выглядала так:

video src = "vid.mp4" width = "320" height = "240" control> / video>

Ключавой праблемай з'яўляецца тое, што крыніца відэа вызначаецца з дапамогай атрыбута src тэга video>. Гэта дазваляе толькі адну крыніцу для элемента video>. Такі падыход не рэкамендуецца з-за адсутнасці ўніверсальнай падтрымкі аднаго фармату відэа.

Калі вы апусціце атрыбут src і замест гэтага дадаеце тэгі HTML5 source>, як паказана ніжэй, браўзэр запусціцца з першай крыніцы і, калі не падтрымліваецца, пераходзіць да наступнай крыніцы і г.д.

шырыня відэа = "320" вышыня = "240" poster = "vid.png" элементы кіравання> крыніца src = "vid.webm" type = ’video / webm; codecs = "vp8, vorbis" ’> крыніца src =" vid.mp4 "type =’ video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '> крыніца src = "vid.ogv" type = ’video / ogg; codecs = "theora, vorbis" ’> / video>

Гэтая другая версія разметкі даволі простая. Пачынаецца з вызначэння элемента HTML5 з памерамі 320 х 240 пікселяў, дадае неабавязковы атрыбут плаката для адлюстравання нерухомага малюнка да прайгравання відэа (альбо, у некаторых аглядальніках, да загрузкі відэа), і адлюстроўвае ўласныя элементы прайгравання, прадастаўленыя браўзэр. Калі апошні атрыбут апушчаны, элементы кіравання не адлюстроўваюцца, што дазваляе распрацоўшчыку ствараць уласныя ўласныя элементы кіравання з выкарыстаннем JavaScript. Мы разгледзім гэты працэс у наступнай частцы гэтай серыі.

Дадатковыя атрыбуты для відэаэлемента ўключаюць:

• папярэдняй загрузкі: мяркуе, якую частку відэаматэрыялу трэба папярэдне загрузіць. Варыянты ўключаюць няма, метададзеныя (для атрымання такіх рэчаў, як памеры, працягласць, першы кадр і г.д.), і аўто (каб дазволіць аглядальніку папярэдне загрузіць столькі актыву, колькі гэта практычна)
• аўтазапуск: Boolean, які вызначае, ці прайграецца відэа адразу пасля загрузкі
• аўдыя: дыктуе пачатковы стан гуку (у цяперашні час толькі прыглушаны падтрымліваецца)
• пятля: Boolean, які вызначае, ці вяртаецца відэа да пачатку для прайгравання пасля поўнага прайгравання

Першы зыходны тэг ва ўзоры разметкі ідэнтыфікуе відэафайл WebM. Калі гэта не падтрымліваецца, выкарыстоўваецца файл MPEG-4. І калі MPEG-4 несумяшчальны, выкарыстоўваецца відэафайл Ogg. Ва ўсіх выпадках атрыбут type паказвае тып кантэйнера і кодэкі, неабходныя для прайгравання.

Патэнцыйныя праблемы

У залежнасці ад таго, наколькі ўсёабдымнай вы хочаце быць пры арыентацыі на аўдыторыю, вы можаце сутыкнуцца з некалькімі вядомымі праблемамі. На шчасце, іх рашэнні даволі простыя.

• Перш за ўсё, пераканайцеся, што ваш сервер падтрымлівае тыпы mime, неабходныя для прайгравання кожнага фармату відэа, які вы выкарыстоўваеце. Адзін просты спосаб дасягнуць гэтага - стварыць .htaccess файл у тым самым каталогу, што і ваш HTML-файл, і выкарыстоўвайце дырэктыву AddType, каб дадаць неабходныя тыпы mime:

AddType video / ogg .ogv AddType video / mp4 .mp4 AddType video / webm .webm

• iOS 3.x не любіць атрыбут poster. Апусціце гэта з тэгу video>
• На iPad iOS 3.x відэа не будзе прайгравацца, пакуль крыніца mp4> не будзе ўказана першай
• Android 2.3 не любіць атрыбут type. Апусціце яго з крыніцы MP4 (адзіны кантэйнер, які ў цяперашні час падтрымлівае Android)

Такім чынам, каб абысці вядомыя праблемы з дастаўкай HTML5 і дасягнуць старых версій iOS і Android, выкарыстоўвайце гэтую чацвёртую версію разметкі HTML5, якую мы распрацавалі. Звярніце ўвагу, што атрыбут poster элемента відэа быў выдалены, крыніца MP4 была пералічана першай, а атрыбут тыпу апошняга выдалены.

шырыня відэа = "320" вышыня = "240" элементы кіравання> крыніца src = "vid.mp4"> крыніца src = "vid.webm" type = ’video / webm; codecs = "vp8, vorbis" ’> крыніца src =" vid.ogv "type =’ video / ogg; codecs = "theora, vorbis" ’> / video>

Мы скончылі працу, неабходную для ахопу самай шырокай аўдыторыі HMTL5, але што нам рабіць з браўзэрамі, якія не сумяшчальныя з HTML5?

Інтэграцыя Flash Video

Нягледзячы на ​​разгул прапаганды, Flash Player па-ранейшаму з'яўляецца ўражлівай сілай і да гэтага часу шырока выкарыстоўваецца. У многіх выпадках вы можаце аддаць перавагу альбо запатрабаваць дастаўку відэа Flash Player для падтрымкі патрэбнай функцыі. Некалькі з гэтых функцый я распавяду ў наступнай частцы гэтага артыкула. Аднак значна важней той факт, што відэа HMTL5 нават не будзе працаваць для вельмі вялікай часткі карыстальнікаў. Гэта занадта новае, каб дасягнуць таго віду пранікнення, якім карыстаецца Flash Player.

Хуткі погляд на NetMarketShareСтатыстыка версіі аглядальніка для настольных кампутараў паказвае, што блізка да 50 адсоткаў аглядальнікаў, якія выкарыстоўваюцца сёння, не сумяшчальныя з HMTL5. Гэта будзе працягваць мяняцца па меры таго, як усё больш карыстальнікаў абнаўляюць браўзэры, а мабільны рынак будзе працягваць рабіць дастаўку відэа HTML5 усё больш і больш важнай. Аднак сёння ігнараванне Flash Player непазбежна азначае значна меншую аўдыторыю вашага кантэнту.

На шчасце, вы можаце праграмаваць свае старонкі для дастаўкі Flash-змесціва пры жаданні - альбо як рэзервовы варыянт ад HTML5, альбо як першы выбар, вяртаючыся да HTML5 пры неабходнасці.

Вярніцеся да Flash

Самы просты падыход да дастаўкі відэа з выкарыстаннем HTML5 і Flash Player - гэта скарыстацца тым, як аглядальнікі аналізуюць HTML. Вы можаце прыгадаць, што пры выкарыстанні тэгаў video> і source> аглядальнік, сумяшчальны з HTML5, будзе праходзіць праз прадастаўленыя крыніцы, пакуль не знойдзе сумяшчальны фармат відэа. Можна лічыць, што гэты працэс працягваецца ў пэўным сэнсе, бо калі браўзэр не падтрымлівае элемент HTML5 video>, гэтыя тэгі будуць ігнаравацца.

Такім чынам, размяшчэнне аб'екта Flash-прайгравальніка ў канцы поўнага спісу крыніц HTML5 азначае, што сумяшчальныя з HTML5 браўзэры з часам знойдуць неабходныя актывы для прайгравання відэа, а ўсе іншыя аглядальнікі будуць прайграваць відэа з дапамогай Flash Player. (Гэта, вядома, мяркуе, што Flash Player усталяваны, але мы абмяркуем гэта праз момант.) Гэты падыход быў папулярызаваны тэхнікай Kroc Camen Video for Everybody і прывабны тым, што не патрабуе JavaScript або складанага кадавання.

Вось апошні прыклад разметкі HTML5, які выкарыстоўваецца ў гэтым артыкуле. У гэтым вельмі простым прыкладзе выкарыстоўваецца строб-прайгравальнік Media Framework з адкрытым зыходным кодам, распрацаваны Adobe, у якасці Flash-прайгравальніка.

шырыня відэа = "320" вышыня = "240" элементы кіравання> крыніца src = "vid.mp4"> крыніца src = "vid.webm" type = ’video / webm; codecs = "vp8, vorbis" ’> крыніца src =" vid.ogv "type =’ video / ogg; codecs = "theora, vorbis" '> шырыня аб'екта = "320" вышыня = "240"> param name = "movie" value = "StrobeMediaPlayback.swf"> param name = "flashvars" value = "src = http: // yourdomain.com/vid.mp4 "> param name =" allowFullScreen "value =" true "> / object> / video>

Гэта ўсё. Як бачыце, разметка HTML5 улічвае просты спіс вядомых праблем, абмяркоўваемых тут, і вяртаецца да Flash Player, калі HTML5 Video не падтрымліваецца.

Вярніцеся да HTML5

Калі вы аддаеце перавагу пачаць з відэа, адлюстраванага Flash Player, і вярнуцца да HTML5 - магчыма таму, што вы хочаце прапанаваць пэўную функцыю альбо хочаце больш паслядоўныя элементы кіравання плэерам, калі гэта магчыма - вы можаце выкарыстоўваць JavaScript для выканання гэтай задачы.

У гэтым простым прыкладзе для вырабу складаных рэчаў выкарыстоўваецца бібліятэка JavaScript SWFObject. Ён не толькі выявіць наяўнасць Flash Player, але і вызначыць, ці выкарыстоўваецца мінімальная версія. Калі знойдзена сумяшчальная версія Flash Player, SWFObject заменіць змест указанага div> неабходным HTML для ўбудавання Flash Player. У адваротным выпадку нічога не будзе зроблена, і HTML5-код ​​у div> застанецца рабіць сваю працу.

script type = "text / javascript" src = "swfobject.js"> / script> script type = "text / javascript"> var flashvars = {}; параметры var = {}; атрыбуты var = {}; flashvars.src = "http://yourdomain.com/vid.mp4"; swfobject.embedSWF ("StrobeMediaPlayback.swf", "flashcontent", "320", "240", "10.0.0", false, flashvars, params, attributes); / script> body> div id = "flashcontent"> video width = "320" height = "240" controls> source src = "vid.mp4"> source src = "vid.webm" type = ’video / webm; codecs = "vp8, vorbis" ’> крыніца src =" vid.ogv "type =’ video / ogg; codecs = "theora, vorbis" ’> / video> / div> / body>

Магчыма, лепшая перавага гэтага падыходу ў тым, што вы можаце выкарыстоўваць змесціва div>, каб элегантна прапанаваць карыстальніку набыць Flash Player, калі гэта сапраўды лепш для пэўнай задачы. На самай справе, SWFObject падтрымлівае опцыю Express Install Flash Player для аўтаматызацыі гэтага працэсу пры жаданні.

Што далей?

Я спадзяюся, што ў гэтым артыкуле прыводзяцца асновы, неабходныя для разумення як спосабу дастаўкі відэаактываў да самай шырокай аўдыторыі, але і некаторыя тэхнічныя асновы, неабходныя для аптымізацыі рэсурсаў для выканання гэтай задачы. У наступнай частцы мы прывядзем да працы гэтыя асновы, абмеркаваўшы:

• Выберыце праграмныя пакеты для кадавання для стварэння відэафайлаў.
• Прыклады, калі Flash Player з'яўляецца лепшым інструментам для працы, і калі HTML5 можа быць пераважным.
• Прыклад кода JavaScript для сітуацый, якія патрабуюць індывідуальнага рашэння плэера.
• І агляд некаторых лепшых бібліятэк JavaScript для апрацоўкі ўсёй гэтай працы.

Да сустрэчы!