1. Autori
2. x64 (aka andi)

pred nejakým časom som spomenul video tag, špeciálne implementovaný v html5. používanie tagu však bohužiaľ spôsobí skôr nepríjemnosti než úžitok. Preto vám povieme o spôsobe, akým môžete úplne robiť s jedným formátom videa.

pre jeden projekt som potreboval nájsť možnosť odskrutkovania videí na stránke. Nie je možné urobiť hráča od nuly na záblesku (na začiatok nemám vývojové prostredie a neposkytol ho), takže v skutočnosti bolo potrebné nájsť vhodného kandidáta tvárou v tvár prehrávaču flash. nebolo potrebné nič zvlášť zložité, pretože vďaka používateľom služby YouTube sa v tomto druhu hráčov veľmi ľahko orientujú;)

2 kandidáti umiestnení na stránkach flv-mp3.com (projekt z uppodʻa) a Flowplayer , po vytvorení malého poke bol prvý rýchlo opustený v prospech kombajnu poskytujúceho súčasný api. Ako sa ukázalo, vnútorný črevo ma nenechal dole (hoci niektorí ľudia sa dostali do vtyuhat flv-mp3.com).

Ako viete, prvý dojem je dosť klamný a uprednostňuje sa niekedy najmenej nasýtené zariadenie (najmä ak používa rodný jazyk). Je to práve tento prístup, ktorý sa požadoval na flv-mp3: služba poskytuje možnosť „zostaviť“ hráča so špecifikovanými vlastnosťami (napr. formulár označte súbor, ktorý sa práve prehráva, šetrič obrazovky, rozmery a niektoré ďalšie parametre) a zadajte výstupný kód na vloženie súboru. Áno, možnosť sa môže zdať veľmi pohodlná, najmä pre ľudí, ktorí považujú html za silnú čarodejnicu, nehovoriac o js a tak ďalej.

je nepravdepodobné, že iba pravidelné pridávanie videí na stránku prispeje k nadšeniu neustáleho „konštruovania“ hráča samotného. alternatívne môžete preskúmať všetky nastavenia a automatizovať ich prostredníctvom jazyka servera. ale tento princíp sa dá nazvať len skreslený (je oveľa jednoduchšie načítať videá na YouTube a získať pripravený kód na stiahnutie).

tu sa dostávame k tej veci, ktorá sa už dá úplne nazvať čarodejnicou. chcete pochopiť javascript magic? Ukážem, že to nie je vôbec ťažké (dokonca jednoduchšie ako používanie konštruktora). a pomoc s týmto prietokomerom. si môžete vybrať verziu odtiaľto , ale úplne prvá verzia, ktorá je distribuovaná pod GPL3, je celkom vhodná pre vaše stránky.

Prehrávač podporuje prehrávanie nasledujúceho obsahu: flv, mp4, m4v (pre obrázky - jpg, gif, png). Video je podporované od verzie 9, takže by nemali byť žiadne problémy s podporou.

Stiahnite si archív s prehrávačom a rozbaľte ho. Budete musieť nahrať 3 súbory na stránku: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf a example / flowplayer-NumVer.min.js , kde NumVer je len číslo verzie a môže byť napríklad 3.2.7 .

Prvý súbor obsahuje ovládací panel, druhý - priamo prehrávač a tretí je odkaz, ktorý poskytuje api. Prvé 2 súbory (* .swf) musia byť v rovnakom priečinku. Teraz je čas na najjednoduchší kód. môže to byť:

<div id = "player" štýl = "šírka: 640px; výška: 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>

Prvok div s ID hráča je kontajner, v ktorom bude video odskrutkované. v druhom riadku je pripojenie súboru javascript. Priamo pre výstup zodpovedá jedna funkcia flowplayer () , ktorá prechádza 3 parametre:

1. ID prvku, v ktorom sa má video prehrať;
2. cesta k hráčovi (konkrétne k hráčovi, a nie k ovládačom, ktoré budú automaticky načítané);
3. Niektoré ďalšie parametre.

Mimochodom, okrem identifikátora, môžete priamo odovzdať odkaz na objekt alebo selektor.

Vyššie uvedený kód nič nezobrazuje, ale dáva predstavu o tom, aké ľahké je pripojiť flowplayer na stránku. Ak chcete na výstup video, musíte vytvoriť tretí parameter, a to, mimochodom, je tiež veľmi jednoduché.

pre jednoduchosť: tretí parameter (config) je asociatívne pole, v ktorom možno opísať nasledujúce prvky:

• klip - pomocou tohto kľúča môžete „vytvoriť“ globálne nastavenia, napríklad, či chcete automaticky spustiť ukladanie do vyrovnávacej pamäte (autoBuffering) alebo prehrávanie (automatické prehrávanie), ako škálovať obsah (škálovanie s hodnotou prispôsobenia zachová pôvodný pomer strán a pre normálne video sa použije, možno len to). Môžete tiež špecifikovať prehrávaný súbor (url) a dokonca pozastaviť udalosti (funkcie, ktoré sa budú volať, napríklad pri spustení prehrávania videozáznamu);
• playlist je bežné pole (zoznam). každý prvok môže byť reťazec (v tomto prípade reťazec je adresa prehrávaného klipu) alebo asociatívne pole. v druhom prípade môže byť dátová množina vnímaná ako dátová množina podobná kl'účovému kľúču z predchádzajúcej položky, t. j. môžete špecifikovať, aby sa používalo ukladanie do vyrovnávacej pamäte, začalo hrať a tak ďalej;
• pluginy - slúži na rozšírenie štandardných funkcií. Jednou z funkcií je schopnosť Russify rozhranie priamo na mieste.

Teraz malý príklad, ktorý obsahuje ukážku možností:

<div id = "player" štýl = "šírka: 520px; výška: 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', {clip: {autoPlay: false, autoBuffering: false, škálovanie : 'fit'}, zoznam skladieb: [{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 '], // na manipuláciu s ovládacími prvkami pluginov: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // odstráni tlačidlá spätného chodu stop: true, // pridá tlačidlo stop scrubber: true // false vypne rolovanie videa}}}); </ script>

Predložený kód nastavuje ako globálne nastavenia nasledovné: vypnutie automatického spustenia prehrávania, vypnutie automatického ukladania do vyrovnávacej pamäte, škálovanie videa tak, aby sa zmestilo do okna. Ako súbor, ktorý sa dá prehrať, sa použije obrázok a video a nastavenia obrázka sa prepíšu (pretože by sa mali automaticky načítať). keď kliknete na obrázok (alebo tlačidlo prehrávania), zobrazí sa video. Ako vidíte, všetko je veľmi jednoduché. Ak chcete pridať ďalší videoklip, jednoducho pridajte novú položku do zoznamu skladieb oddelenú čiarkou. ak sa vyžaduje automatické prehrávanie zoznamu skladieb, v klipe asociatívneho poľa sa nastaví hodnota autoPlay na hodnotu true.

sa nachádza dokumentácia obsahujúca funkcie api tu , ak niekto nerozumie anglicky - na tom nezáleží, všetko je tam celkom jasné. a po analýze vyššie uvedeného kódu je celkom možné pochopiť, čo je v dokoch. Vrelo odporúčam nahliadnuť, určite tam bude "nastavenie", ktoré bude v dopyte.

napríklad pozrite sa sem , nezabudnite sa pozrieť na zdrojový kód (Ctrl + U)

Autori

offline 1 týždeň

x64 (aka andi)

Komentáre: 2842 Publikácie: 395 Registrácia: 02-04-2009