vaizdo įterpimas puslapyje: naudokite „JavaScript“ ir „flash“

  1. Leidinio autorius
  2. x64 (dar žinomas kaip andi)

prieš kurį laiką minėjau vaizdo žymą, specialiai įdiegtą html5

prieš kurį laiką minėjau vaizdo žymą, specialiai įdiegtą html5. tačiau, deja, žymos naudojimas sukels daugiau nepatogumų, o ne naudos. todėl pasakysiu, kaip galite visiškai atlikti vieną vaizdo formatą.

vienam projektui reikėjo rasti galimybę atjungti vaizdo įrašus svetainėje. Negalima žaisti žaidėjo nuo nulio blykstėje (pradžioje neturiu vystymosi aplinkos ir nepateikiau), todėl iš tikrųjų reikėjo rasti tinkamą kandidatą flash grotuvo akivaizdoje. nieko ypatingo sudėtingumo nereikėjo, nes „YouTube“ naudotojų dėka labai lengva naršyti tokiuose žaidimuose;)

2 kandidatai, esantys svetainėse flv-mp3.com (projektas iš uppodʻa) ir srauto žaidėjas . po to, kai buvo padaryta nedidelė kišenė, pirmoji buvo greitai atsisakyta derinio naudai, teikianti dabartinę api. Laikas parodė, kad vidinis žarnas man neleido (nors kai kurie žmonės sugebėjo patekti į vtyuhat flv-mp3.com).

Kaip žinote, pirmasis įspūdis yra gana apgaulingas, o pirmenybė kartais suteikiama mažiausiai prisotintam įrenginiui (ypač jei ji naudoja gimtąją kalbą). Būtent šis požiūris buvo reikalingas „flv-mp3“: paslauga suteikia galimybę „surinkti“ žaidėją su konkrečiomis savybėmis ( forma nurodykite grojamą failą, ekrano užsklandą, matmenis ir kitus parametrus) ir gaukite išvesties kodą, kad galėtumėte įterpti failą. Taip, variantas gali atrodyti labai patogu, ypač tiems, kurie mano, kad html yra stipri ragana, jau nekalbant apie js ir pan.

tik periodiškas vaizdo įrašų įtraukimas į svetainę mažai tikėtina, kad prisidėtų prie nuolatinio „žaidėjo statymo“ entuziazmo. Arba galite ieškoti visų nustatymų ir automatizuoti serverio kalbą. tačiau šis principas gali būti vadinamas tik iškraipytu (daug lengviau įkelti vaizdo įrašus „YouTube“ ir gauti paruoštą kodą atsisiųsti).

čia mes atėjome į tą dalyką, kuris jau gali būti visiškai vadinamas burtininku. norite suprasti javascript magiją? Parodysiu, kad tai visai nėra sunku (net lengviau nei naudojant konstruktorių). ir padėkite šiam srauto žaidėjui. galite pasirinkti versiją iš čia , bet pirmoji versija, platinama pagal GPL3, yra tinkama jūsų svetainei.

Grotuvas palaiko tokį turinį: flv, mp4, m4v (vaizdams - jpg, gif, png). Vaizdo įrašas yra palaikomas nuo 9 versijos, todėl neturėtų būti jokių problemų.

Atsisiųskite archyvą su grotuvu ir išpakuokite. Jums reikės įkelti 3 failus į svetainę: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf ir pavyzdį / flowplayer-NumVer.min.js , kur NumVer yra tik versijos numeris, ir gali būti, pavyzdžiui, 3.2.7 .

Pirmajame faile yra valdymo pultas, antrasis - tiesiogiai grotuvas ir trečiasis yra nuoroda, kuri suteikia api. Pirmieji 2 failai (* .swf) turi būti tame pačiame aplanke. dabar atėjo laikas paprasčiausiajam kodui. tai gali būti:

<div id = "player" style = "plotis: 640px; aukštis: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> srauto žaidėjas ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

Div elementas su grotuvo ID - tai konteineris, kuriame vaizdo įrašas bus atsuktas. antroje eilutėje yra „JavaScript“ failo ryšys. Tiesioginis išėjimas yra atsakingas už vieną funkciją „ flowplayer“ () , kuris praeina 3 parametrus:

  1. Elemento, kuriame turi būti atkuriamas vaizdo įrašas, ID;
  2. kelią į žaidėją (būtent į žaidėją, o ne valdiklius, kurie bus automatiškai įkelti);
  3. Kai kurie papildomi parametrai.

Beje, be identifikatoriaus, galite tiesiogiai perduoti nuorodą į objektą arba selektorių.

Aukščiau pateiktas kodas nieko nerodo, tačiau jis suteikia idėją, kaip lengvai prijungti srauto grotuvą prie puslapio. Norėdami išleisti vaizdo įrašą, reikia sukurti trečiąjį parametrą, ir, beje, tai taip pat yra gana paprasta.

paprastumui: trečiasis parametras (config) yra asociatyvi masyvas, kuriame galima apibūdinti šiuos elementus:

  • klipas - naudodami šį klavišą, galite „nustatyti“ pasaulinius nustatymus, pavyzdžiui, ar norite automatiškai pradėti buferį (automatinį buferį) arba žaisti (automatinis paleidimas), kaip keisti turinį (mastelio keitimas su tinkamumo verte išlaikys pradinį vaizdo santykį ir įprastas vaizdo įrašas bus naudojamas, gal tik tai). Taip pat galite nurodyti atkuriamą failą (url) ir netgi sustabdyti įvykius (funkcijos, kurios bus vadinamos, pvz., Kai filmas pradės žaisti);
  • grojaraštis yra įprastas masyvas (sąrašas). kiekvienas elementas gali būti eilutė (šiuo atveju eilutė yra atkuriamo klipo adresas) arba asociatyvi masyvas. Antruoju atveju duomenų rinkinys gali būti vertinamas kaip duomenų rinkinys, panašus į ankstesnio elemento klipo raktą, t. y. galite nurodyti naudoti buferį, pradėti žaisti ir pan .;
  • papildiniai - skirtas išplėsti standartines funkcijas. Vienas iš bruožų yra gebėjimas rusifikuoti sąsają tiesiai vietoje.

Dabar mažas pavyzdys, kuriame pateikiamos galimybių demonstracijos:

<div id = "player" style = "plotis: 520px; aukštis: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> srauto žaidėjas ('player', '/src/player/flowplayer-3.2.7.swf', {klipas: {autoPlay: false, autoBuffering: false, scaling : „fit“}, grojaraštis: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', automatinis buferizavimas: tiesa, autoPlay: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // manipuliuoti įskiepių valdikliais: {control: {url:' flowplayer.controls-3.2.16.swf ', grojaraštis: klaidingas , // pašalina perjungimo mygtukus stop: true, // add stop button scrubber: true // false išjungia vaizdo slinkimą}}}); </ script>

Pateiktame kode nustatomi šie bendrieji nustatymai: automatinio paleidimo išjungimas, automatinio buferio išjungimas, vaizdo mastelio keitimas, kad tilptų langą. Kaip atkuriamas failas, naudojamas paveikslėlis ir vaizdo įrašas, o nuotraukos nustatymai yra nepaisomi (kadangi jie turėtų būti įkelti automatiškai). kai spustelėsite paveikslėlį (arba atkūrimo mygtuką), rodomas vaizdo įrašas. kaip matote, viskas yra labai paprasta. jei norite pridėti kitą vaizdo įrašą, tiesiog pridėkite naują įrašą į grojaraštį, atskirtą kableliu. jei reikalingas automatinis grojaraščio atkūrimas, asociatyviniame masyvo įraše nustatoma, kad automatinio paleidimo vertė nustatoma tiesai.

dokumentai, kuriuose yra api funkcijos čia . jei kas nors nesupranta anglų kalbos - nesvarbu, viskas yra gana aiški. išanalizavęs pirmiau pateiktą kodą, visiškai suprantama, kas yra dokuose. Aš labai rekomenduoju žiūrėti, kad tikrai būtų „nustatymas“, kuris bus paklausus.

pavyzdys gali žiūrėkite čia . nepamirškite pažvelgti į šaltinio kodą (Ctrl + U)

Leidinio autorius

neprisijungęs 1 savaitė

x64 (dar žinomas kaip andi)

Komentarai: 2842 Leidiniai: 395 Registracija: 02-04-2009

Norite suprasti javascript magiją?
IRC (Internet Relay Chat)