videoinnsetting på siden: bruk javascript og flash

1. Forfattere

for en tid siden nevnte jeg video-taggen, spesielt implementert i html5. Dessverre vil bruken av taggen føre til mer ulempe enn å ha nytte. derfor vil jeg fortelle deg hvordan du kan gjøre helt med ett videoformat.

for et prosjekt måtte jeg finne muligheten for å skru av videoer på nettstedet. Det var ikke mulig å lage en spiller fra begynnelsen til et blunk (for en start har jeg ikke et utviklingsmiljø og ikke gitt det), så det var nødvendig å finne en passende kandidat i ansiktet av en flash-spiller. Det var ikke noe spesielt komplisert, siden takk til YouTube-brukere er veldig enkelt å navigere i denne typen spillere;)

2 kandidater ligger på nettstedene flv-mp3.com (et prosjekt fra oppod'a) og Flowplayer . Etter å ha gjort et lite poke hver, ble den første raskt forlatt til fordel for kombinasjonen som ga nåværende api. Som tiden har vist, sluttet det indre tarmet meg ikke (selv om noen klarte å komme inn i vtyuhat flv-mp3.com).

Som du vet er det første inntrykket ganske villedende, og det er ofte gitt preferanse til den minst mettede enheten (spesielt hvis den bruker morsmålet). Det er denne tilnærmingen som var etterspurt på flv-mp3: tjenesten gir muligheten til å "sette sammen" en spiller med spesifiserte egenskaper (i skjema angi filen som spilles, skjermsparer, dimensjoner og noen andre parametere) og få utdatakoden til å sette inn filen. Ja, alternativet kan virke veldig praktisk, spesielt for folk som vurderer html en sterk heks, for ikke å nevne js og så videre.

bare det periodiske tillegget av videoer til nettstedet er usannsynlig å bidra til entusiasmen om å konstant "bygge" spilleren av seg selv. Alternativt kan du utforske alle innstillingene og automatisere via serverens språk. men dette prinsippet kan bare kalles forvrengt (det er mye lettere å laste inn videoer på YouTube og få klar kode for nedlasting).

her kommer vi til selve saken som allerede kan bli fullt kalt en sorceress. du vil forstå javascript magi? Jeg vil vise at det ikke er vanskelig (enda enklere enn å bruke en konstruktør). og hjelp med denne flytespilleren. Du kan velge en versjon herfra , men den aller første versjonen som distribueres under GPL3 er ganske egnet for nettstedet ditt.

Spilleren støtter avspilling av følgende innhold: flv, mp4, m4v (for bilder - jpg, gif, png). Videoen støttes siden versjon 9, så det burde ikke være noen støtteproblemer.

Last ned arkivet med spilleren og pakk det ut. Du må laste opp 3 filer til nettstedet: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf og example / flowplayer-NumVer.min.js , hvor NumVer er bare versionsnummeret, og kanskje for eksempel 3.2.7 .

Den første filen inneholder kontrollpanelet, den andre - direkte spilleren og den tredje er lenken som gir api. De første 2 filene (* .swf) må være i samme mappe. nå er det tid for den enkleste koden. det kan være:

Div- elementet med spiller-IDen er beholderen der videoen blir skrudd ut. i den andre linjen er javascriptfilforbindelsen. Direkte for utgangen er ansvarlig en funksjon flytespiller () , som passerer 3 parametere:

1. ID av elementet der videoen skal spilles;
2. banen til spilleren (nemlig til spilleren, og ikke til kontrollene som vil bli lastet automatisk);
3. Noen ekstra parametere.

For øvrig, i tillegg til identifikatoren, kan du direkte sende en referanse til et objekt eller en velger.

Koden ovenfor viser ikke noe, men det gir en ide om hvor enkelt det er å koble en flowplayer til en side. For å utføre video må du opprette en tredje parameter, og dette er for øvrig ganske enkelt.

for enkelhet: den tredje parameteren (config) er en assosiativ array der de følgende elementene kan beskrives:

• klipp - ved hjelp av denne tasten kan du "lage" globale innstillinger, for eksempel om du vil starte automatisk buffering (autoBuffering) eller å spille (autoPlay), hvordan skalere innholdet (skalering med verdien av passform vil beholde det opprinnelige formatforholdet og for vanlig video vil bli brukt, kanskje bare det). Du kan også spesifisere filen som spilles (url), og til og med suspendere hendelser (funksjoner som vil bli kalt, for eksempel når filmen begynner å spille);
• spilleliste er en vanlig rekkefølge (liste). hvert element kan være en streng (i dette tilfellet er strengen adressen til klippet som spilles), eller en assosiativ array. i det andre tilfellet kan datasettet settes som et datasett som ligner klippetasten fra forrige element, dvs. du kan spesifisere for å bruke buffering, begynne å spille osv.
• plugins - tjener til å utvide standardfunksjoner. En av funksjonene er muligheten til å Russifisere grensesnittet rett på stedet.

Nå et lite eksempel som inkluderer en demonstrasjon av mulighetene:

Den presenterte koden angir følgende som globale innstillinger: deaktivering av automatisk start avspilling, deaktivering av automatisk buffering, skalering av video for å passe til vinduet. Som en spillbar fil, brukes et bilde og en video, og innstillingene for bildet overstyres (siden det skal lastes automatisk). Når du klikker på bildet (eller avspillingsknappen), vises videoen. Som du kan se, er alt veldig enkelt. Hvis du vil legge til et annet videoklipp, legger du ganske enkelt til et nytt element i spillelisten, adskilt av et komma. Hvis automatisk avspilling av spillelisten er påkrevd, er det satt i det assosiative gruppeklippet, er verdien for autoPlay satt til ekte.

Dokumentasjon som inneholder api-funksjoner er plassert her . hvis noen ikke forstår engelsk - det spiller ingen rolle, alt er helt klart der. og etter å ha analysert koden ovenfor, er det ganske mulig å forstå hva som ligger i havna. Jeg anbefaler på det sterkeste en titt, sikkert det vil være en "innstilling" som vil være etterspurt.

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

Forfattere

frakoblet 1 uke

x64 (aka andi)