1. autori
2. x64 (zv. andi)

prije nekog vremena spomenuo sam video tag, posebno implementiran u html5. međutim, nažalost, upotreba oznake uzrokovat će više neugodnosti nego koristi. stoga ću vam ispričati način na koji možete u potpunosti obaviti jedan video format.

za jedan projekt morao sam pronaći mogućnost odvrtanja videa na stranici. Nije bilo moguće napraviti igrač od nule na flashu (za početak, nemam razvojno okruženje i nisam ga pružio), pa je bilo potrebno, zapravo, pronaći prikladnog kandidata u lice flash playera. ništa posebno komplicirano nije potrebno, jer zahvaljujući korisnicima usluge YouTube vrlo je lako upravljati ovom vrstom igrača;)

2 kandidata se nalaze na stranicama flv-mp3.com (projekt iz uppodʻa) i Flowplayer , nakon što je napravila mali rukav, prvi je brzo napušten u korist kombajna koji je pružao sadašnji api. kako se vrijeme pokazivalo, unutarnji crijevo me nije iznevjerilo (iako su se neki ljudi uspjeli upasti u vtyuhat flv-mp3.com).

Kao što znate, prvi dojam je prilično varljiv, a prednost se ponekad daje najmanje zasićenom uređaju (pogotovo ako koristi maternji jezik). Upravo takav pristup bio je tražen na flv-mp3: usluga pruža mogućnost “okupljanja” igrača s određenim karakteristikama (u obrazac označite datoteku koja se reproducira, čuvar zaslona, ​​dimenzije i neke druge parametre) i dobit ćete izlazni kod za umetanje datoteke. Da, opcija se može činiti vrlo prikladnom, pogotovo za ljude koji smatraju HTML snažnom vješticom, da ne spominjemo js i tako dalje.

samo povremeno dodavanje videozapisa na web-lokaciju vjerojatno neće pridonijeti entuzijazmu stalnog “konstruiranja” samog igrača. Alternativno, možete istražiti sve postavke i automatizirati jezik poslužitelja. ali to se načelo može nazvati iskrivljeno (puno je lakše učitati videozapise na YouTubeu i dobiti spreman kod za preuzimanje).

ovdje dolazimo do onoga što se već može u potpunosti nazvati čarobnicom. želite shvatiti čaroliju javascripta? Pokazat ću da to uopće nije teško (čak i lakše nego koristiti konstruktora). i pomoći s ovim igračem. možete odabrati verziju odavde , ali prva verzija koja se distribuira pod GPL3 sasvim je prikladna za vašu stranicu.

Uređaj podržava reprodukciju sljedećeg sadržaja: flv, mp4, m4v (za slike - jpg, gif, png). Videozapis je podržan od verzije 9 pa ne bi trebalo biti problema s podrškom.

Preuzmite arhivu s playerom i raspakirajte ga. Morat ćete učitati 3 datoteke na stranicu: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf i primjer / flowplayer-NumVer.min.js , gdje je NumVer samo broj inačice i može biti, na primjer, 3.2.7 .

Prva datoteka sadrži upravljačku ploču, druga - izravno igrač, a treća je veza koja pruža API. Prve 2 datoteke (* .swf) moraju biti u istoj mapi. sada je vrijeme za najjednostavniji kod. može biti:

<div id = "player" style = "širina: 640px; visina: 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>

Element div s ID-om igrača je spremnik u kojem će se videozapis odvrnuti. u drugoj liniji je javascript datoteka. Izravno za izlaz je odgovorna jedna funkcija flowplayer () , koja prolazi 3 parametra:

1. ID elementa u kojem bi se video trebao reproducirati;
2. put do igrača (naime igrača, a ne kontrola koje će se automatski učitati);
3. Neki dodatni parametri.

Usput, pored identifikatora, možete izravno proslijediti referencu na objekt ili selektor.

Gornji kod ne prikazuje ništa, ali daje predodžbu o tome kako je lako povezati pretvarača protoka na stranicu. Za izlaz video, morate stvoriti treći parametar, a to je, usput, također vrlo jednostavno.

radi jednostavnosti: treći parametar (config) je asocijativno polje u kojem se mogu opisati sljedeći elementi:

• isječak - pomoću ove tipke možete "napraviti" globalne postavke, primjerice, želite li automatski pokrenuti međuspremanje (autoBuffering) ili reprodukciju (autoPlay), kako skalirati sadržaj (skaliranje s vrijednošću prilagodbe zadržat će izvorni omjer, a za normalni video će se koristiti, možda samo to). Također možete odrediti datoteku koja se reproducira (url), pa čak i obustaviti događaje (funkcije koje će se zvati, na primjer, kada film počne svirati);
• popis za reprodukciju je regularni niz (popis). svaki element može biti niz (u ovom slučaju, niz je adresa isječaka koji se reproducira) ili asocijativni niz. u drugom slučaju, skup podataka može se promatrati kao skup podataka sličan tipki za isječak iz prethodne stavke, tj. možete odrediti za upotrebu međuspremanja, početak reprodukcije i tako dalje;
• dodataka - služi za proširenje standardnih značajki. Jedna od značajki je mogućnost rusifikacije sučelja na licu mjesta.

Sada mali primjer koji uključuje demonstraciju mogućnosti:

<div id = "player" style = "širina: 520px; visina: 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', {isječak: {autoPlay: false, autoBuffering: false, skaliranje : 'fit'}, popis za reprodukciju: [{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 manipuliranje kontrolama dodataka: {control: {url:' flowplayer.controls-3.2.16.swf ', popis za reprodukciju: false , // uklanja natrag tipke za zaustavljanje: true, // add stop button scrubber: true // false onemogućuje pomicanje videa}}}); </ script>

Prikazani kod postavlja sljedeće globalne postavke: onemogućavanje automatskog pokretanja reprodukcije, onemogućavanje automatskog međuspremanja, skaliranje videozapisa kako bi odgovaralo prozoru. Kao datoteka koja se može reproducirati, upotrebljavaju se slika i videozapis, a postavke za sliku se zamjenjuju (budući da bi trebale biti učitane automatski). kada kliknete na sliku (ili gumb za reprodukciju), prikazuje se videozapis. kao što možete vidjeti, sve je vrlo jednostavno. ako želite dodati još jedan videoisječak, jednostavno dodajte novu stavku na popis za reprodukciju, odvojenu zarezom. ako je potrebna automatska reprodukcija popisa za reprodukciju, u isječku asocijativnog niza postavljena je vrijednost autoPlay postavljena na true.

nalazi se dokumentacija koja sadrži api funkcije ovdje , ako netko ne razumije engleski - to nije važno, sve je sasvim jasno tamo. i nakon analize gore navedenog koda, sasvim je moguće razumjeti što se nalazi na dokovima. Toplo preporučujem zaviriti, sigurno će biti "postavka" koja će biti tražena.

primjer može pogledajte ovdje , ne zaboravite pogledati izvorni kôd (Ctrl + U)

autori

izvan mreže 1 tjedan

x64 (zv. andi)

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