ўстаўка відэа на старонку: выкарыстоўваем javascript і flash

  1. аўтар публікацыі
  2. x64 (aka andi)

некаторы час таму я ўжо згадваў пра тэгу video, спецыяльна укаранёных у html5

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

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

на мой пошук «адгукнулася» 2 кандыдаты, якія размяшчаюцца на сайтах flv-mp3.com (праект ад uppod`а) і flowplayer . вырабячы невялікае потыкивание кожнага, ад першага хутка адмовіўся на карысць камбайна, які прадастаўляе цяперашні api. як паказаў час, ўнутры нюх мяне не падвяло (хоць сёй-той і выцягнем ўцюхаць flv-mp3.com).

як вядома, першае ўражанне бывае даволі зманліва, і перавагу парой аддаецца найменш насычанаму девайсу (асабліва, калі пры гэтым выкарыстоўваецца родная мова). менавіта гэты падыход быў запатрабаваны на flv-mp3: сэрвіс дае магчымасць «сабраць» плэер з зададзенымі характарыстыкамі (у форме паказваецца прайграваць файлы, застаўка, памеры і яшчэ некаторыя параметры) і атрымаць на выхадзе гатовы код для ўстаўкі файла. ды, варыянт можа здацца вельмі зручным, асабліва для людзей, якія лічаць html моцным колдунством, не кажучы пра js і іншае.

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

вось мы і падышлі да таго самага, што можна ўжо паўнавартасна назваць колдунством. вы ж хочаце спасцігнуць джаваскриптовой магіі? я пакажу, што гэта зусім не цяжка (нават прасцей, чым карыстацца канструктарам). а дапаможа ў гэтым flowplayer. версію по душе можна выбраць адсюль , Але для свайго сайта цалкам падыдзе самы першы варыянт, які распаўсюджваецца пад GPL3.

плэер падтрымлівае прайграванне наступнага кантэнту: flv, mp4, m4v (для малюнкаў - jpg, gif, png). відэа падтрымліваецца яшчэ з версіі 9, так што праблем з падтрымкай быць не павінна.

спампоўваем архіў з плэерам і распакоўваецца. на сайт спатрэбіцца заліць 3 файла: flowplayer.controls-NumVer.swf, flowplayer-NumVer.swf і example / flowplayer-NumVer.min.js, дзе NumVer - гэта проста № версіі, і можа быць, напрыклад, 3.2.7.

першы файл ўтрымлівае панэль кіравання, другі - непасрэдна плэер і трэці з'яўляецца сувязным звяном, якія прадстаўляюць api. першыя 2 файла (* .swf) павінны знаходзіцца ў адной тэчцы. зараз прыйшоў час для найпростага кода. ён можа быць такім:

<Div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ( 'player', '/src/player/flowplayer-3.2.7.swf', {}); </ Script>

элемент div з ідэнтыфікатарам player з'яўляецца кантэйнерам, у якім будзе адкручвацца відэа. у другім радку ідзе падключэнне JavaScript-файла. Непасрэдна за выснову адказвае адна функцыя flowplayer (), якой перадаюцца 3 параметру:

  1. ідэнтыфікатар элемента, у якім павінен прайгравацца ролік;
  2. шлях да плэера (менавіта да плэера, а не да элементаў кіравання, якія падгрузіць аўтаматычна);
  3. нейкія дадатковыя параметры.

дарэчы, акрамя ідэнтыфікатар можна перадаваць непасрэдна спасылку на аб'ект або селектар.

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

для прастаты: трэці парамерт (конфіг) - асацыятыўны масіў, у якім можна апісаць наступныя элементы:

  • clip - з дапамогай дадзенага ключа можна «зрабіць» глабальныя ўстаноўкі, напрыклад, ці павінна аўтаматычна запускацца буферызацыя (autoBuffering) або прайграванне (autoPlay), якім чынам маштабаваць змесціва (scaling са значэннем fit загадвае захаваць зыходныя прапорцыі, і для звычайнага відэа будзе выкарыстоўвацца, мабыць, толькі яно). можна таксама пазначыць прайграваць файлы (url), і нават падвесіць падзеі (функцыі, якія будуць выклікацца, напрыклад, пры старце прайгравання роліка);
  • playlist - звычайны масіў (спіс). кожны элемент можа быць радком (у гэтым выпадку радок - адрас прайграванага кліпа), альбо асацыятыўным масівам. у другім выпадку набор дадзеных можна разглядаць як набор дадзеных, аналагічных ключу clip з папярэдняга пункта, т. е. можна пазначыць выкарыстоўваць буферызацыю, пачатак прайгравання і т. д .;
  • plugins - служыць для пашырэння стандартных магчымасцяў. адной з фіч з'яўляецца магчымасць прама на месцы русіфікаваць інтэрфейс.

зараз невялікі прыклад, які ўключае дэманстрацыю магчымасцяў:

<Div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ( 'player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, scaling : 'fit'}, playlist: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: true, autoPlay: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // для маніпуляцыі з элементамі кіравання plugins: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // прыбірае кнопкі перамоткі stop: true, // дадаць кнопку стоп scrubber: true // значэнне false прыбірае прагортку відэа}}}); </ Script>

прадстаўлены код ўсталёўвае ў якасці глабальных налад наступныя: адключэнне аўта-запуску прайграванне, адключэнне аўта-буферызацыі, маштабаванне відэа па памеры акна. у якасці прайграваных файлаў выкарыстоўваецца карцінка і відэа, прычым, налады для карцінкі перавызначаны (т. к. яна павінна загружацца аўтаматычна). пры кліку на малюнку (або кнопцы play) уключаецца паказ відэа-роліка. як відаць, усё вельмі проста. калі патрабуецца дадаць яшчэ адзін ролік, проста праз коску дадаем у спіс playlist новы элемент. калі патрабуецца аўтаматычнае прайграванне плэй-ліста, у асацыятыўным масіве усталёўваецца clip значэнне autoPlay усталёўваецца ў true.

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

прыклад можна паглядзець тут . не забудзьцеся зазірнуць у зыходны код (Ctrl + U)

аўтар публікацыі

не ў сеткі 1 тыдзень

x64 (aka andi)

Каментары: 2842 Публікацыі: 395 Рэгістрацыя: 2009/04/02

Вы ж хочаце спасцігнуць джаваскриптовой магіі?