videoindsættelse på siden: brug javascript og flash

1. Publikationsforfatter

For en tid siden nævnte jeg videotaggen, der blev implementeret specielt i html5. Men desværre vil brugen af ​​mærket medføre større ulempe frem for gavn. Derfor fortæller jeg dig om, hvordan du helt kan gøre med et videoformat.

for et projekt havde jeg brug for at finde muligheden for at afskrive videoer på webstedet. Det var ikke muligt at lave en spiller fra bunden på en flash (for en start har jeg ikke et udviklingsmiljø og ikke leverede det), så det var faktisk nødvendigt at finde en passende kandidat i ansigtet af en flash player. intet særligt kompliceret var påkrævet, da takket være YouTube-brugere er meget let at navigere i denne slags spillere;)

2 kandidater placeret på webstederne flv-mp3.com (et projekt fra uppod'a) og Flowplayer . Efter at have lavet et lille poke hver, blev den første hurtigt forladt til fordel for den kombination, der leverede den nuværende api. som tiden har vist, slap den indre tarm ikke mig (selvom nogle mennesker lykkedes at komme ind i vtyuhat flv-mp3.com).

Som du ved er det første indtryk temmelig vildledende, og der gives nogle gange fortrinsvis den mindst mættede enhed (især hvis den bruger modersmål). Det er denne tilgang, der var efterspurgt på flv-mp3: tjenesten giver mulighed for at "samle" en spiller med specificerede egenskaber (i formular Angiv den fil, der afspilles, pauseskærmen, dimensioner og nogle andre parametre) og få outputkoden til at indsætte filen. Ja, muligheden kan virke meget praktisk, især for folk der anser html for en stærk heks, for ikke at nævne js og så videre.

kun den periodiske tilføjelse af videoer til webstedet er usandsynligt at bidrage til entusiasmen om konstant at "opbygge" spilleren alene. Alternativt kan du undersøge alle indstillinger og automatisere via server sproget. men dette princip kan kun kaldes forvrænget (det er meget nemmere at indlæse videoer på YouTube og få klar kode til at downloade).

her kommer vi til det meget, der allerede kan kaldes en sorceress. du vil forstå javascript magi? Jeg vil vise, at det slet ikke er vanskeligt (endnu lettere end at bruge en konstruktør). og hjælp med denne flowplayer. Du kan vælge en version herfra , men den allerførste version, der distribueres under GPL3, er ret egnet til dit websted.

Afspilleren understøtter afspilning af følgende indhold: flv, mp4, m4v (til billeder - jpg, gif, png). Videoen understøttes siden version 9, så der skal ikke være nogen supportproblemer.

Download arkivet med afspilleren og pakk det ud. Du skal overføre 3 filer til webstedet: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf og eksempel / flowplayer-NumVer.min.js , hvor NumVer er bare versionsnummeret og kan for eksempel være 3.2.7 .

Den første fil indeholder kontrolpanelet, den anden - direkte afspilleren og den tredje er linket der giver api. De første 2 filer (* .swf) skal være i samme mappe. nu er det tid til den enkleste kode. det kan være:

Div- elementet med afspilleren ID er den beholder, hvor videoen skrues af. i den anden linje er javascript filforbindelsen. Direkte for output er ansvarlig en funktion flowplayer () , som passerer 3 parametre:

1. identifikatoren for det element, hvor videoen skal afspilles
2. stien til afspilleren (nemlig til afspilleren, og ikke til de betjeningselementer, der automatisk skal indlæses);
3. Nogle ekstra parametre.

Af den måde kan du udover identifikatoren direkte sende en henvisning til et objekt eller en vælger.

Koden ovenfor viser ikke noget, men det giver en ide om, hvor nemt det er at forbinde en flowplayer til en side. For at output video, skal du oprette en tredje parameter, og det er forresten ganske enkelt også.

for enkelhed: den tredje parameter (config) er et associativt array, hvori de følgende elementer kan beskrives:

• klip - ved hjælp af denne nøgle kan du "lave" globale indstillinger, for eksempel om du vil starte automatisk buffering (autoBuffering) eller afspilning (autoPlay), hvordan du skalere indholdet (skalering med værdien af ​​pasform holder det oprindelige billedforhold og for normal video vil blive brugt, måske kun det). Du kan også angive den fil, der skal afspilles (url), og endda suspendere hændelser (funktioner, der vil blive kaldt, for eksempel når filmen begynder at spille);
• afspilningsliste er en regelmæssig matrix (liste). hvert element kan være en streng (i dette tilfælde er strengen adressen til klipet, der afspilles) eller et associativt array. i det andet tilfælde kan datasættet ses som et datasæt svarende til klippetasten fra det foregående element, dvs. du kan angive at bruge buffering, starte afspilning osv .;
• plugins - tjener til at udvide standardfunktioner. Et af funktionerne er evnen til at ryste grænsefladen lige på stedet.

Nu et lille eksempel, der indeholder en demonstration af mulighederne:

Den præsenterede kode angiver følgende som globale indstillinger: Deaktivering af automatisk startafspilning, deaktivering af automatisk buffering, skalering af video for at passe til vinduet. Som en afspilningsfil anvendes et billede og en video, og indstillingerne for billedet overskrides (da det skal indlæses automatisk). Når du klikker på billedet (eller afspilningsknappen), vises videoen. Som du kan se, er alt meget simpelt. Hvis du vil tilføje et andet videoklip, skal du blot tilføje et nyt element til afspilningslisten, adskilt af et komma. hvis automatisk afspilning af afspilningslisten er påkrævet, er der indstillet i det associative array klip, er værdien af ​​automatisk afspilning sat til ægte.

Dokumentation indeholdende api-funktioner er placeret her . hvis nogen ikke forstår engelsk - det er ligegyldigt, alt er helt klart der. og efter at have analyseret koden ovenfor, er det helt muligt at forstå, hvad der ligger i havnen. Jeg anbefaler stærkt en kig, der er sikkert en "indstilling", der vil være efterspurgt.

eksempel kan se her . glem ikke at kigge på kildekoden (Ctrl + U)

Publikationsforfatter

offline 1 uge

x64 (aka andi)