videó beillesztés az oldalon: javascript és flash használata

  1. Szerzők
  2. x64 (más néven andi)

Néhány évvel ezelőtt megemlítettem a videó címkét, amelyet kifejezetten html5-ben implementáltam

Néhány évvel ezelőtt megemlítettem a videó címkét, amelyet kifejezetten html5-ben implementáltam. sajnos azonban a címke használata több kellemetlenséget okoz, mint az előny. ezért elmondom, hogy hogyan lehet teljes mértékben egy videó formátumot csinálni.

egy projekthez meg kellett találnom a videofelvételek szétcsavarozásának lehetőségét. Nem lehetett egy játékosot semmiből készíteni vakuval (először nem volt fejlesztőkörnyezet, és nem adtam meg), ezért valójában szükséges volt egy megfelelő jelöltet találni egy flash lejátszóval szemben. semmi különös bonyolultságra nem volt szükség, mivel a YouTube-felhasználóknak köszönhetően nagyon könnyű navigálni az ilyen típusú játékosokban;)

2 pályázó található a flv-mp3.com webhelyen (egy uppodʻa projekt) és Flowplayer . miután egy kis piszkot készítettek, az elsőt gyorsan elhagyották a jelen api-t biztosító kombájn javára. az idő megmutatta, a belső bél nem hagyott le (bár néhány embernek sikerült bejutnia a vtyuhat flv-mp3.com-ba).

Mint tudják, az első benyomás meglehetősen megtévesztő, és néha a legkevésbé telített eszközt részesítik előnyben (különösen, ha az anyanyelvét használja). A flv-mp3-on ezt a megközelítést igényelték: a szolgáltatás lehetőséget nyújt arra, hogy „meghatározott” jellemzőkkel rendelkező játékosokat „összeállítson” forma jelezze a lejátszandó fájlt, a képernyővédőt, a méreteket és néhány más paramétert), és adja meg a kimeneti kódot a fájl behelyezéséhez. Igen, az opció nagyon kényelmes lehet, különösen azok számára, akik html-et tartanak erős boszorkánynak, nem is beszélve a js-ről és így tovább.

csak a videóknak a webhelyre történő időszakos hozzáadása nem valószínű, hogy hozzájárul ahhoz, hogy a játékos önmagában folyamatosan „építsen”. Alternatívaként az összes beállítást felfedezheti és automatizálhatja a szerver nyelvén. de ezt az elvet csak torzítottnak nevezhetjük (sokkal könnyebb betölteni a videókat a YouTube-on, és készen áll a letöltési kódra).

itt olyan dologhoz jutunk, amit már teljesen varázslónak nevezhetünk. meg akarod érteni a javascript mágiát? Megmutatom, hogy egyáltalán nem nehéz (még könnyebb, mint a kivitelező használata). és segíts ebben az áramlási játékban. kiválaszthat egy verziót innen , de az első verzió, amely a GPL3 alatt kerül terjesztésre, meglehetősen alkalmas az Ön webhelyére.

A lejátszó támogatja a következő tartalom lejátszását: flv, mp4, m4v (képek - jpg, gif, png). A videó a 9-es verzió óta támogatott, ezért nem lehet támogatási problémák.

Töltse le az archívumot a lejátszóval és csomagolja ki. 3 fájlt kell feltöltenie a webhelyre: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf és példa / flowplayer-NumVer.min.js , ahol a NumVer csak a verziószám, és lehet például 3.2.7 .

Az első fájl tartalmazza a vezérlőpanelt, a második - közvetlenül a lejátszó és a harmadik az a link, amely api-t biztosít. Az első 2 fájlnak (* .swf) ugyanabban a mappában kell lennie. most itt az ideje a legegyszerűbb kódnak. lehet:

<div id = "player" style = "szélesség: 640px; magasság: 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>

A játékos azonosítójával rendelkező div elem az a konténer, amelyben a videót kicsavarják. a második sorban a javascript fájlkapcsolat van. Közvetlenül a kimenetért felelős egy függvénytáblázat () , amely 3 paraméteren halad:

  1. Azon elem azonosítója, amelyben a videót kell lejátszani;
  2. a játékos elérési útja (nevezetesen a játékoshoz, és nem az automatikusan betöltendő vezérlőkhöz);
  3. Néhány további paraméter.

Egyébként, az azonosítón kívül közvetlenül is átmehet egy objektumra vagy választóra.

A fenti kód nem jelenít meg semmit, de egy ötlet arról, hogy mennyire könnyű az áramlási lejátszót egy oldalhoz csatlakoztatni. A videó kiadásához létre kell hozni egy harmadik paramétert, és ez egyébként is nagyon egyszerű.

az egyszerűség kedvéért: a harmadik paraméter (config) egy asszociatív tömb, amelyben a következő elemeket lehet leírni:

  • klip - ezzel a gombbal „készíthet” globális beállításokat, például azt, hogy automatikusan elkezdi-e elindítani a pufferelést (automatikus pufferelés) vagy lejátszást (automatikus lejátszás), hogyan kell méretezni a tartalmat (a méretezéssel az illeszkedés értékével megtartja az eredeti képarányt, és normál videó esetén használatos lesz) talán csak ez). Megadhatja a lejátszandó fájlt (url), és akár az eseményeket is felfüggesztheti (olyan funkciókat, amelyeket például a film lejátszásakor hívnak meg);
  • a lejátszási lista rendszeres tömb (lista). minden elem lehet egy string (ebben az esetben a karakterlánc a lejátszandó klip címe), vagy egy asszociatív tömb. a második esetben az adatkészlet az előző tétel klipkulcsához hasonló adatkészletnek tekinthető, azaz megadhatja a pufferelés használatát, a lejátszás megkezdését és így tovább;
  • bővítmények - a standard funkciók bővítésére szolgál. Az egyik jellemzője az a képesség, hogy a felületet a helyszínen rögtönözheti.

Most egy kis példa, amely bemutatja a lehetőségeket:

<div id = "player" style = "szélesség: 520px; magasság: 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', {klip: {autoPlay: false, automatikus pufferelés: hamis, méretezés : 'fit'}, lejátszási lista: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', automatikus pufferelés: igaz, automatikus lejátszás: igaz}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // a pluginok vezérlésének manipulálásához: {controls: {url:' flowplayer.controls-3.2.16.swf ', lejátszási lista: hamis , // eltávolítja a visszacsévélő gombokat stop: true, // stop stop scrubber: true // false letiltja a videó görgetését}}}); </ script>

A bemutatott kód globális beállításként a következőképpen állítja be: az automatikus indítás lejátszásának letiltását, az automatikus pufferelés letiltását, a videó méretezését az ablakhoz illesztve. Lejátszható fájlként egy képet és videót használ, és a kép beállításait felülbírálja (mivel automatikusan be kell tölteni). ha rákattint a képre (vagy a lejátszás gombra), megjelenik a videó. mint láthatod, minden nagyon egyszerű. Ha másik videofájlt szeretne hozzáadni, egyszerűen add hozzá egy új elemet a lejátszási listához, vesszővel elválasztva. ha a lejátszási lista automatikus lejátszása szükséges, az asszociatív tömb klipben be van állítva, az automatikus lejátszás értéke igaz.

az api funkciókat tartalmazó dokumentáció található itt . ha valaki nem érti az angol nyelvet - nem számít, mindent meglehetősen világos ott. és a fenti kód elemzése után teljesen megérthető, hogy mi van a dokkokban. Nagyon ajánlom a hallgatóságot, biztosan ott lesz egy „beállítás”, amely a keresletben lesz.

például lehet nézd meg . ne felejtsd el megnézni a forráskódot (Ctrl + U)

Szerzők

offline 1 hét

x64 (más néven andi)

Megjegyzések: 2842 Kiadványok: 395 Regisztráció: 2009-04-02

Meg akarod érteni a javascript mágiát?