vstavljanje videoposnetka na stran: uporabite javascript in flash

  1. Založnik
  2. x64 (alias)

pred časom sem omenil video tag, posebej implementiran v html5

pred časom sem omenil video tag, posebej implementiran v html5. Vendar pa bo uporaba oznake povzročila več nevšečnosti kot koristi. zato vam bom povedal, kako lahko popolnoma izpolnite eno obliko videoposnetka.

za en projekt sem moral najti možnost odvijanja videov na spletnem mestu. Ni bilo mogoče narediti igralca iz nič na bliskavici (za začetek, nimam razvojnega okolja in ga nisem zagotovil), zato je bilo potrebno v resnici poiskati primernega kandidata v obraz bliskavice. nič posebej zapletenega ni bilo potrebno, saj je zahvaljujoč uporabnikom YouTube zelo preprosto krmariti po tej vrsti igralcev;)

2 kandidata se nahajata na straneh flv-mp3.com (projekt iz uppodʻa) in pretočni predvajalnik . ko je naredil majhen poker, je bil prvi hitro opuščen v korist kombajna, ki je zagotavljal sedanji api. ko se je čas pokazal, me notranjost črevesja ni razočarala (čeprav so nekateri ljudje uspeli priti v vtyuhat flv-mp3.com).

Kot veste, je prvi vtis precej varljiv in včasih je prednost dana najmanj nasičeni napravi (še posebej, če uporablja materni jezik). Takšen pristop je bil povpraševan po flv-mp3: storitev ponuja možnost »sestave« igralca z določenimi lastnostmi (v obliki označite datoteko, ki jo želite predvajati, ohranjevalnik zaslona, ​​dimenzije in nekatere druge parametre) in dobite izhodno kodo za vstavljanje datoteke. Da, možnost se morda zdi zelo priročna, zlasti za ljudi, ki menijo, da je html močna čarovnica, da ne omenjam js in tako naprej.

samo redno dodajanje videoposnetkov na spletno mesto verjetno ne bo prispevalo k navdušenju nad nenehnim „konstruiranjem“ predvajalnika. Lahko pa tudi raziščete vse nastavitve in jih avtomatizirate prek jezika strežnika. vendar se to načelo lahko imenuje le popačeno (veliko lažje je naložiti videoposnetke na YouTube in dobiti pripravljeno kodo za prenos).

tu pridemo do samega dejstva, ki ga lahko že v celoti imenujemo čarovnica. želite razumeti čarobnost javascripta? Pokazal bom, da to sploh ni težko (celo lažje kot pri konstruktorju). in pomagajte pri tem predvajalniku pretoka. lahko izberete različico od tukaj , vendar je prva različica, ki se distribuira pod GPL3, zelo primerna za vašo spletno stran.

Predvajalnik podpira predvajanje naslednje vsebine: flv, mp4, m4v (za slike - jpg, gif, png). Videoposnetek je podprt od različice 9, tako da ne bi smelo biti težav s podporo.

Prenesite arhiv s predvajalnikom in ga razpakirajte. Na spletno mesto boste morali naložiti 3 datoteke: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf in primer / flowplayer-NumVer.min.js , kjer je NumVer le številka različice in je lahko npr. 3.2.7 .

Prva datoteka vsebuje nadzorno ploščo, drugi - neposredno igralec, tretji pa povezavo, ki omogoča api. Prvi dve datoteki (* .swf) morata biti v isti mapi. zdaj je čas za najpreprostejšo kodo. lahko je:

<div id = "player" style = "širina: 640px; višina: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> pretočno predvajalnik ('predvajalnik', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

Element div z ID-jem igralca je vsebnik, v katerem bo video odvit. v drugi vrstici je povezava z datoteko javascript. Neposredno za izhod je odgovorna ena funkcija flowplayer () , ki prehaja 3 parametre:

  1. ID elementa, v katerem naj se predvaja video;
  2. pot do igralca (in sicer igralca, ne pa kontrolnikov, ki bodo samodejno naloženi);
  3. Nekateri dodatni parametri.

Mimogrede, poleg identifikatorja lahko neposredno posredujete sklic na predmet ali izbirnik.

Zgornja koda ne prikaže ničesar, vendar daje idejo, kako enostavno je povezati predvajalnik pretoka na stran. Za izhod videa, morate ustvariti tretji parameter, in to, mimogrede, je tudi precej preprosta.

zaradi enostavnosti: tretji parameter (config) je asociativno polje, v katerem lahko opišemo naslednje elemente:

  • posnetek - s to tipko lahko ustvarite globalne nastavitve, na primer, ali želite samodejno začeti pufriranje (autoBuffering) ali predvajanje (autoPlay), kako prilagoditi vsebino (spreminjanje z vrednostjo prilagoditve bo ohranilo prvotno razmerje stranic in za običajni video bo uporabljeno, morda samo to). Določite lahko tudi datoteko, ki se predvaja (url), in celo ustavite dogodke (funkcije, ki bodo klicane, na primer, ko se film začne predvajati);
  • seznam predvajanja je navaden niz (seznam). vsak element je lahko niz (v tem primeru niz predstavlja naslov posnetka, ki se predvaja) ali asociativno polje. v drugem primeru se podatkovni niz lahko obravnava kot niz podatkov, ki je podoben tipki za posnetek iz prejšnjega elementa, t.j. lahko določite uporabo puferskega načina, začetek predvajanja in tako naprej;
  • plugins - služi za razširitev standardnih funkcij. Ena od funkcij je zmožnost Russify vmesnika desno na kraju samem.

Zdaj majhen primer, ki vključuje predstavitev možnosti:

<div id = "player" style = "širina: 520px; višina: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('predvajalnik', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, lestvica : 'fit'}, seznam predvajanja: [{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 '], // za manipulacijo kontrolnikov vtičnikov: {control: {url:' flowplayer.controls-3.2.16.swf ', seznam predvajanja: false , // odstrani gumbe za previjanje nazaj: true, // add stop gumb za pometanje: true // false onemogoči drsenje videa}}}); </ script>

Predstavljena koda določa naslednje globalne nastavitve: onemogočanje samodejnega zagona predvajanja, onemogočanje samodejnega medpomnjenja, prilagajanje videoposnetka velikosti okna. Kot predvajalna datoteka uporabljamo sliko in videoposnetek in nastavitve za sliko preglasimo (ker naj se samodejno naloži). ko kliknete sliko (ali gumb za predvajanje), se prikaže videoposnetek. kot lahko vidite, je vse zelo preprosto. če želite dodati še en video posnetek, na seznam predvajanja dodajte nov element , ki ga ločite z vejico. če je potrebno samodejno predvajanje seznama predvajanja, je v posnetku asociativnega niza nastavljena vrednost AutoPlay na true.

dokumentacija, ki vsebuje funkcije api tukaj . če nekdo ne razume angleško - ni pomembno, vse je povsem jasno. in po analizi zgoraj navedene kode, je povsem mogoče razumeti, kaj je v dokih. Zelo priporočam, da pokukate, zagotovo bo "nastavitev", ki bo v povpraševanju.

primer poglej tukaj . ne pozabite pogledati izvorne kode (Ctrl + U)

Založnik

brez povezave 1 teden

x64 (alias)

Komentarji: 2842 Publikacije: 395 Registracija: 02-04-2009

Želite razumeti čarobnost javascripta?
IRC (Internet Relay Chat)