Share
I dag skal jeg lære deg hvordan du viser video på nettet ved hjelp av en åpen kildekspiller. Vi vil dekke alle trinnene, inkludert å konvertere en video til flv-filformatet, og innebygge en tilpasset spiller ved hjelp av SWFObject. Det beste er at detaljhandel Adobe Flash ikke er nødvendig.
Det første trinnet med å legge inn en video er koding av en video i .flv-format. Nesten alle online web-spillere bruker .flv som standard for å spille av filer.
For denne opplæringen kan du laste ned prøvevideoen jeg har brukt kalt Trusted Computing på archive.org (Regissert av: Benjamin Stephan og Lutz Vogel.)
Hvis du ikke har Macromedia Flash, hopper du over til 1b.
Åpne Macromedia Flash Video Encoder og legg videoen til køen Fil> Legg til. Klikk deretter Start kø i Fil> Startkø, og du er ferdig med å kode filen i .flv-format.
Merk: Tilpasningen på dette trinnet er minimal. For mer kontroll over videostørrelse og komprimering, hopp til trinn 1b eller 1c.
Det er mange alternativer når du kodes inn i FLV. Windows-alternativet for denne opplæringen er Riva FLV Encoder fordi den er gratis og tilpassbar.
Last ned og installer Riva FLV Encoder fra Riva nettsted.
Når du har åpnet, legger du til videoen til innspillingsvinduet ved hjelp av blaeknappen. Programmet vil automatisk sende videoen til samme katalog.
Deretter justerer vi innstillingene i høyre del. For denne enkle videoen bruker vi videostørrelsen på 320x240 og beholder alle andre innstillinger som standard. For å starte kodingen klikker du på FLV Encode nederst på programmet.
Merk: Prøv å holde filstørrelsen lavere ved å justere innstillingene og holde oppløsningen nede. Jo større videoen er, desto lenger tid tar det å laste.
Valget for Mac i denne opplæringen er ffmpegX.
Last ned og installer ffmpegX encoderen fra deres nettside.
Når du har åpnet, legger du til videoen til innspillingsvinduet ved hjelp av den åpne knappen. Programmet lagrer utdataene videoen i samme katalog, men du må oppdatere filnavnet til TrustedComputing_LAFKON_LOW.flv.
Neste endrer målformatet til FLV og klikk på kode. For å gjøre endringer i videostørrelsen og komprimeringen, klikk på de forskjellige fanene.
Merk: Prøv å holde filstørrelsen lavere ved å justere innstillingene og holde oppløsningen nede. Jo større videoen, desto lengre tid det tar å laste.
I denne opplæringen bruker vi open source MPW Player for å spille av våre flashfiler.
Hovedårsakene er at MPW-spilleren er åpen kildekode og tilbyr både enkel tilpasning og mer dybde tilpassing.
For å laste ned spilleren, besøk MPW Player nettsiden. Nettstedet er på spansk, men bare klikk på den blå nedlastningsknappen.
De nødvendige filene er mpw_player.swf og inneholder mappen. Merk: Plasser den kodede flvfilen, TrustedComputing_LAFKON_LOW.flv, i samme mappe som spilleren og html-filen.
Lag et tomt HTML-dokument og legg til skriptetiketter for swfobject i hodet på dokumentet. Swfobject.js-filen er plassert i mappen i nedlastingen fra mpw-spilleren.
Deretter vil vi sette inn den faktiske flash-spilleren og redigere en linje. Plasser navnet på videofilen, TrustedComputing_LAFKON_LOW.flv, under den variable flv.
Denne div er erstattet av javascript ved hjelp av swfobject
Nå har vi en fungerende spiller med standard utseende.
Å tilpasse spilleren er svært viktig, og det er grunnen til at vi bruker MPW Player. For å gjøre oppdateringer til spilleren alt vi trenger å gjøre er å legge til variabler i JavaScript.
Den første tilpasningen til spilleren vil legge til et forhåndsvisningsside for videoen. For å legge til et bilde, legg til variabelen jpg og deretter plasseringen av bildet. Bildet som brukes i opplæringen, heter images_27_6 / hvordan-til-spill-video-bruk-en-åpen-source-player_10.jpg - et skjermbilde fra videoen. Merk: Ikke glem skriptetikettene i dokumentets hode.
Denne div er erstattet av javascript ved hjelp av swfobject
For å gjøre ytterligere endringer, legg til flere variabler. Her er et utvalg av alle standardvariabler lagt til med kommentarer som forklarer hvert formål.
Denne div er erstattet av javascript ved hjelp av swfobject
Ved å legge inn spilleren med SWFObject, kan vi bruke et plassholderbilde eller tekst hvis brukeren ikke har flash eller javascript. En stor grunn til dette er at mange datamaskiner eller enheter som iPhone ikke har Flash eller JavaScript aktivert.
I dette eksemplet vil vi bruke et enkelt bilde, men noen kode vil fungere. SWFObject erstatter alt innhold inne i en referert div. Når en bruker mangler JavaScript eller Flash, viser nettleseren bare div-innholdet. I dette tilfellet er innholdet som vises bare den samme jpg-filen, images_27_6 / how-to-play-video-bruk-en-åpen-source-player_10.jpg, som vi brukte til en forhåndsvisning.
For å sette mer enn én spiller på en enkelt side, bare sørg for at hver referanse div har et unikt navn. Oppdater deretter JavaScript-referansen for å matche div-id.
MPW-spilleren kan også brukes som lydspiller. Alt vi trenger å gjøre er å legge til variabelen mp3 i stedet for flv.
MPW Player er åpen kildekode, noe som betyr at noen kan laste ned og gjøre endringer i spilleren. For å laste ned kildekoden til spilleren, besøk denne nettsiden og last ned "MPW Player SRC".
MPW Player er ikke perfekt for alle webvideoer. Prøv disse andre gratis spillerne, da de kan fungere bedre for deg.
Denne opplæringen viste deg hvordan du kan kode en video i flv og tilpasse en åpen kildekspiller for å vise video og lyd på nettet.
Accentsconagua