cu ceva timp în urmă am menționat eticheta video, implementată special în html5. cu toate acestea, din păcate, utilizarea etichetei va cauza mai multe inconveniente decât să beneficieze. așadar, vă voi spune despre felul în care puteți face complet un format video.
pentru un proiect trebuia să găsesc posibilitatea de a deșuruba videoclipurile pe site. Nu a fost posibil să faci un jucător de la zero (pentru început, nu am un mediu de dezvoltare și nu l-am furnizat), așa că era necesar, de fapt, să găsești un candidat potrivit în fața unui jucător flash. nu a fost nevoie de nimic deosebit de complicat, deoarece datorită utilizatorilor YouTube este foarte ușor să navigați în acest tip de jucători;)
2 candidați localizați pe site-urile flv-mp3.com (un proiect de suspod'a) și Flowplayer . făcând fiecare câte o mică lovitură, prima fiind abandonată rapid în favoarea combinatului care asigură api-ul actual. dupa ce timpul a aratat ca intestinul interior nu ma lasat jos (desi unii au reusit sa ajunga in vtyuhat flv-mp3.com).
După cum știți, prima impresie este destul de înșelătoare și uneori este preferată dispozitivul cel mai puțin saturat (mai ales dacă utilizează limba maternă). Este această abordare care era în cerere pe flv-mp3: serviciul oferă posibilitatea de a "asambla" un jucător cu caracteristici specificate (în formă indicați fișierul redat, ecranul de protecție, dimensiunile și alți parametri) și obțineți codul de ieșire pentru a insera fișierul. Da, opțiunea poate părea foarte convenabilă, mai ales pentru cei care consideră html o vrăjitoare puternică, ca să nu mai vorbim de js și așa mai departe.
numai adăugarea periodică de videoclipuri pe site este puțin probabil să contribuie la entuziasmul de a construi în mod constant jucătorul de la sine. în mod alternativ, puteți explora toate setările și puteți automatiza prin limba serverului. dar acest principiu poate fi numit distorsionat (este mult mai ușor să încărcați videoclipuri pe YouTube și să obțineți codul gata de descărcare).
aici ajungem la lucrul care se poate numi deja o vrăjitoare. vrei să înțelegi magia javascript? Voi arăta că nu este deloc dificil (chiar mai ușor decât utilizarea unui constructor). și ajutor cu acest debitor. puteți alege o versiune de aici , dar prima versiune care este distribuită sub GPL3 este destul de potrivită pentru site-ul dvs.
Playerul acceptă redarea următorului conținut: flv, mp4, m4v (pentru imagini - jpg, gif, png). Videoclipul este acceptat de la versiunea 9, deci nu ar trebui să existe probleme de suport.
Descărcați arhiva împreună cu playerul și despachetați-o. Va trebui să încărcați 3 fișiere în site: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf și exemplu / flowplayer-NumVer.min.js , unde NumVer este doar numărul versiunii și poate fi, de exemplu, 3.2.7 .
Primul fișier conține panoul de control, cel de-al doilea - direct player-ul și al treilea este link-ul care oferă api. Primele 2 fișiere (* .swf) trebuie să fie în același folder. acum este timpul pentru cel mai simplu cod. poate fi:
<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>
Elementul div cu ID-ul jucătorului este containerul în care va fi deșurubat videoclipul. în al doilea rând este conexiunea la fișier javascript. Direct pentru ieșire este responsabilă o funcție flowplayer () , care trece 3 parametri:
- ID-ul elementului în care trebuie redat videoclipul;
- calea către player (și anume la player și nu la comenzile care vor fi încărcate automat);
- Unii parametri suplimentari.
Apropo, pe lângă identificator, puteți trece direct o referință la un obiect sau la un selector.
Codul de mai sus nu afișează nimic, dar oferă o idee despre cât de ușor este să conectați un fluxator la o pagină. Pentru a scoate video, trebuie să creați un al treilea parametru, iar acest lucru este, de altfel, destul de simplu.
pentru simplitate: al treilea parametru (config) este o matrice asociativă în care pot fi descrise următoarele elemente:
- clip - utilizând această cheie, puteți să "faceți" setări globale, de exemplu, dacă doriți să începeți automat tamponarea (autoBuffering) sau redarea (autoplay), cum să scalați conținutul (scalarea cu valoarea potrivită va păstra raportul original, poate doar asta). De asemenea, puteți specifica fișierul redat (url) și chiar suspenda evenimentele (funcții care vor fi numite, de exemplu, atunci când filmul începe să fie redat);
- playlistul este o listă regulată (listă). fiecare element poate fi un șir (în acest caz, șirul este adresa clipului care este redat) sau o matrice asociativă. în cel de-al doilea caz, setul de date poate fi privit ca un set de date similar cu cheia clipului din elementul anterior, adică puteți specifica utilizarea buffer-ului, începerea redării și așa mai departe;
- plugin - uri - servește pentru a extinde caracteristicile standard. Una dintre caracteristici este capacitatea de a rusi interfața chiar la fața locului.
Acum, un mic exemplu care include o demonstrație a posibilităților:
<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 "> fluxplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: : '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 '], // pentru a manipula controalele pluginurilor: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // șterge butoanele de retuș oprire: true, // add scrubber buton stop: true // false dezactivează derularea videoclipului}}}); </ script>
Codul prezentat afișează următoarele ca setări globale: dezactivarea redării automate a startului, dezactivarea tamponării automate, redimensionarea videoclipului pentru a se potrivi ferestrei. Ca fișier care poate fi redat, se utilizează o imagine și un videoclip, iar setările pentru imagine sunt suprascrise (deoarece ar trebui încărcate automat). când faceți clic pe imagine (sau pe butonul de redare), este afișat videoclipul. după cum puteți vedea, totul este foarte simplu. dacă doriți să adăugați un alt videoclip, pur și simplu adăugați un element nou în lista de redare, separate de o virgulă. dacă este necesară redarea automată a listei de redare, în setul de cadre asociative este setat, valoarea de redare automată este setată la true.
documentația care conține funcțiile API este localizată aici . dacă cineva nu înțelege limba engleză - nu contează, totul este destul de clar acolo. și după analizarea codului de mai sus, este destul de posibil să înțelegem ce este în docuri. Recomand foarte mult o privire, cu siguranta va exista o "setare" care va fi in cerere.
exemplu poate uite aici . nu uitați să consultați codul sursă (Ctrl + U)
Autori
offline 1 săptămână
x64 (aka andi)
Comentarii: 2842 Publicații: 395 Înregistrare: 02-04-2009
Vrei să înțelegi magia javascript?