video sisestamine lehele: kasutage javascripti ja välgu
mõni aeg tagasi mainisin videomärgist, mis on spetsiaalselt rakendatud html5-s. kahjuks põhjustab märgise kasutamine pigem rohkem ebamugavusi kui kasu. seetõttu ütlen teile, kuidas saate ühe videoformaadiga täiesti teha.
ühe projekti jaoks oli mul vaja leida võimalus videolehekülgede lahti keeramiseks. Mängijat ei olnud võimalik välklambilt nullist teha (alguses ei ole mul arenduskeskkonda ja seda ei pakutud), seega oli vaja tegelikult leida sobiv mängija kandidaadile. midagi eriti keerulist ei olnud vajalik, sest tänu YouTube'i kasutajatele on seda tüüpi mängijates väga lihtne navigeerida;)
2 kandidaati, mis asuvad veebisaitidel flv-mp3.com (uppodʻa projekt) voogemängija . olles teinud väikese mütsi, loobuti esimesest kiiresti kombineerimisseadmest, mis andis praeguse api. kui aeg on näidanud, ei lasknud sisemine soole mind maha (kuigi mõnedel inimestel õnnestus vtyuhat flv-mp3.com-sse pääseda).
Nagu te teate, on esimene mulje pigem petlik ja eelistatakse mõnikord kõige vähem küllastunud seadet (eriti kui see kasutab emakeelt). Just selline lähenemine nõudis flv-mp3-i puhul: teenus annab võimaluse „kokku panna” kindlate omadustega mängija ( vormi märkige esitatav fail, pimenduspilt, mõõtmed ja mõned muud parameetrid) ning saate faili sisestamiseks väljundkoodi. Jah, valik võib tunduda väga mugav, eriti inimestele, kes peavad html-i tugevat nõid, rääkimata js-st ja nii edasi.
Ainult video perioodiline lisamine saidile ei aita tõenäoliselt kaasa mängija pidevale konstrueerimisele. Teise võimalusena saate uurida kõiki seadeid ja automatiseerida serveri keelt. kuid seda põhimõtet võib nimetada ainult moonutatuks (videote laadimine YouTube'is on palju lihtsam ja allalaadimiseks valmis valmis kood).
siin me jõuame selle asja juurde, mida võib juba nõnda kutsuda. tahad mõista javascripti maagiat? Ma näitan, et see ei ole üldse raske (isegi lihtsam kui konstruktori kasutamine). ja selle voogemängija abiga. saate valida versiooni siit , kuid esimene versioon, mida levitatakse GPL3 all, on teie saidile üsna sobiv.
Mängija toetab järgmise sisu esitamist: flv, mp4, m4v (piltidele - jpg, gif, png). Video on toetatud alates versioonist 9, seega ei tohiks toetada probleeme.
Laadige arhiiv mängijaga alla ja pakkige see lahti. Sa pead üles laadima 3 faili saidile: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf ja näide / flowplayer-NumVer.min.js , kus NumVer on just versiooni number ja võib olla näiteks 3.2.7 .
Esimene fail sisaldab juhtpaneeli, teine - otse mängija ja kolmas on link, mis annab api. Esimesed 2 faili (* .swf) peavad olema samas kaustas. nüüd on aeg lihtsaim kood. see võib olla:
<div id = "mängija" style = "laius: 640px; kõrgus: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> voogemängija ('mängija', '/src/player/flowplayer-3.2.7.swf', {}); </ script>
Mängija ID-ga div element on konteiner, milles video lahti keeratakse. teisel real on javascript-failide ühendus. Otse väljundi eest vastutab üks funktsioon voogesitusmängija () , mis läbib 3 parameetrit:
- Selle elemendi ID, milles video tuleks esitada;
- tee mängijale (nimelt mängijale ja mitte automaatselt laaditavatele juhtimisseadmetele);
- Mõned täiendavad parameetrid.
Muide, lisaks identifikaatorile saate otse viite ka objektile või valijale.
Ülaltoodud kood ei näita midagi, kuid annab ülevaate sellest, kui lihtne on ühendada voogemängija lehega. Video väljastamiseks peate looma kolmanda parameetri ja see on muide ka üsna lihtne.
lihtsuse huvides: kolmas parameeter (config) on assotsieeruv massiiv, milles saab kirjeldada järgmisi elemente:
- klipp - kasutades seda klahvi, saate "teha" globaalseid seadeid, näiteks, kas soovite automaatselt puhverdada (automaatne puhverdamine) või mängida (automaatne mängimine), kuidas sisu skaalata (sobitamine sobib algse kuvasuhte ja tavalise video puhul kasutatakse võib-olla ainult see). Saate määrata ka esitatava faili (url) ja isegi sündmuste peatamise (funktsioonid, mida nimetatakse näiteks filmi esitamise ajal);
- esitusloend on tavaline massiiv (loend). iga element võib olla string (sel juhul on string mängitava klipi aadress) või assotsieeruv massiiv. teisel juhul võib andmestikku vaadelda kui eelmise elemendi klippivõtmega sarnast andmekogumit, s.t saate määrata puhverdamise, mängimise alustamise ja nii edasi;
- pluginad - laiendab standardseid funktsioone. Üks omadustest on võime venitada ruutu kohapeal.
Nüüd on väike näide, mis sisaldab võimaluste demonstreerimist:
<div id = "mängija" style = "laius: 520px; kõrgus: 330px;"> </ div> <skriptitüüp = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> voogemängija ('mängija', '/ src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, scaling : 'fit'}, esitusloend: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg ", automaatpuhverdus: tõene, automaatne mängimine: tõsi},' http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], //, et manipuleerida pluginate kontrollidega: {controls: {url:' flowplayer.controls-3.2.16.swf ', esitusloend: vale , // eemaldab tagasikerimise nupud stop: true, // add stop button scrubber: true // false keelab video kerimise}}}); </ script>
Esitatud kood seab globaalsete seadistustena järgmised seaded: automaatse käivitamise keelamise keelamine, automaatse puhverdamise keelamine, video mastaapimine aknale. Esitatava failina kasutatakse pilti ja videot ning pildi seaded tühistatakse (kuna see tuleb automaatselt laadida). kui klõpsate pildil (või esitamisnupul), kuvatakse video. nagu näete, on kõik väga lihtne. kui soovite lisada veel ühe videoklipi, lisage esitusloendisse uus element komaga eraldatuna. kui esitusloendi automaatne taasesitus on vajalik, on assotsiatiivses massi klippis seatud automaatse taasesituse väärtus õige.
api funktsioone sisaldav dokumentatsioon asub siin . kui keegi ei mõista inglise keelt - see ei ole oluline, kõik on seal täiesti selge. ja pärast ülalkirjeldatud koodi analüüsimist on täiesti võimalik mõista, mis on dokkides. Ma soovitan piiluda, kindlasti on olemas „seade”, mis on nõudluse all.
näiteks saab vaata siit . ärge unustage vaadata lähtekoodi (Ctrl + U)
Kirjastaja
offline 1 nädal
x64 (teise nimega andi)
Kommentaarid: 2842 Väljaanded: 395 Registreerimine: 02-04-2009
Tahad mõista javascripti maagiat?