Bruke HTML5 til å vise video i gjeldende nettlesere

Hosting din egen HTML 5-video vs. Bruke YouTube

YouTube er et flott nettsted. Det gjør det enkelt å bygge inn video i nettsider raskt, og med noen mindre unntak er det ganske sømløst i gjennomføringen av disse videoene. Hvis du legger ut en video på YouTube, kan du være ganske trygg på at noen vil kunne se den.

Men å bruke YouTube til å bygge inn videoene dine har noen ulemper

De fleste problemene med YouTube er på forbrukersiden, snarere enn på designersiden, ting som:

• Sakte søk og indeksering
• Serverbrudd
• Innhold blir fjernet (tilsynelatende) vilkårlig
• For mye dårlig innhold

Men det er noen grunner til at YouTube også er dårlig for innholdsutviklere, inkludert:

• Maksimal lengde på 10 minutter for videoer (gratis kontoer)
• Dårlig opplastingsytelse
• YouTube får ubegrensede bruksrettigheter til videoen din
• Enhver YouTube-bruker får ubegrensede bruksrettigheter til videoen din

HTML5-video gir noen fordeler over YouTube

Ved hjelp av HTML5 for video lar deg kontrollere alle aspekter av videoen din, fra hvem som kan se den, hvor lenge den er, hva innholdet inneholder, hvor den er vert og hvordan serveren utfører. Og HTML5 gir deg muligheten til å kode videoen din i så mange formater som du trenger for å sikre at maksimalt antall personer kan se den. Kundene dine trenger ikke et plugin eller å vente til YouTube lanserer en nyere versjon.

Selvfølgelig tilbyr HTML5-video noen ulemper

Disse inkluderer:

• Du må kode videoen din i minst tre forskjellige kodeker.
• Du må ta med noe JavaScript for å sikre nettlesere som ikke støtter HTML5 skal jobbe.
• Serveren din må kunne håndtere båndbreddekravene til å være vert for videoer.

Rask oversikt over videostøtte på nettet

Å legge til video på websider har lenge vært en vanskelig prosess. Det var så mange ting som kunne gå galt:

• Først bruker du tag for å legge inn videoen din på siden din. MEN den taggen er utfaset til fordel for en annen tag. Og noen nettlesere støttet det uansett aldri bra.
• Så du bytter til tag, men eldre nettlesere støtter ikke det, og nyere nettlesere støtter det.
• Da tenker du Blits! Og kod videoen din som en FLV-fil. Men Blits støttes ikke lenger på Windows-enheter.
• Så du bestemmer deg for å laste opp videoen din til et videoinnblandingsside som YouTube, men så har du problemene med YouTube vi diskuterte.
• Til slutt bestemmer du deg for å gå med HTML5, men Internet Explorer støtter ikke det (ikke før Internet Explorer 9). Og selv om du gjør det, er det to videokodekstandarder som støttes, og bare en nettleser som kan bruke begge.

Så hva skal du gjøre? Å gi opp video er ikke lenger et alternativ for de fleste nettsteder, ettersom videoen blir mer og mer viktig. Og mange nettsteder har vellykket byttet til video.

De følgende sidene i denne artikkelen vil lede deg gjennom hvordan du legger til en video på websidene dine som fungerer i Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 og 4, iPhone og Android, og Internet Explorer 7 og 8. Du vil også ha nøklene du trenger for å legge til støtte for andre eldre nettlesere om nødvendig.

Opprett og rediger videoen din

Det første du trenger når du skal sette en video på en webside, er den faktiske videoen. Du kan enten skyte kontinuerlig og redigere etterpå for å opprette en funksjon, eller du kan skripte den og planlegge den på forhånd. Uansett fungerer det bra, det er akkurat hva du er komfortabel med. Hvis du ikke vet hvilken type video du skal lage, kan du sjekke ut disse ideene fra Desktop Video Guide:

• Familie videoprosjekter
• Markedsførings- og salgsfremmende videoer
• Video virtuelle turer
• Hvordan videoer
• Bryllupsvideoer

Lær hvordan du tar opp video av høy kvalitet

Sørg for at du vet hvordan du tar opp innendørs og utendørs samt hvordan du tar opp lyd. Belysning er også veldig viktig - skudd som er for lyse skader øynene, og for mørke ser bare gjørmete og uprofesjonelt ut. Selv om du bare planlegger å ha en 30-sekunders video på nettstedet ditt, jo høyere kvalitet er det jo bedre vil det gjenspeile på nettstedet ditt.

Husk også at copyright gjelder lyd eller musikk (samt arkivfilmer) som du kanskje vil bruke i videoen din. Hvis du ikke har tilgang til en venn som kan skrive og spille en sang for deg, må du finne royalty-fri musikk å spille i bakgrunnen. Det er også steder du kan lagre opptak for å legge til i videoene dine.

Redigering av videoen

Det spiller ingen rolle hvilken redigeringsprogramvare du bruker, så lenge du er kjent med den og kan bruke den effektivt. Gretchen, Desktop Video Guide, har noen profesjonelle videoredigeringsråd som kan hjelpe deg med å redigere videoene dine slik at de ser bra ut.

Lagre videoen din i en MOV eller AVI (eller MPG, CD, DV)

For resten av denne opplæringen kommer vi til å anta at du har videoen din lagret i noen form for høykvalitets (ikke-komprimert) format som AVI eller MOV. Mens du kan bruke disse filene som de er, får du alle problemene med videoen som vi allerede har diskutert. De følgende sidene forklarer hvordan du konverterer filen din til tre typer, slik at den kan vises av flest nettlesere.

Konverter videoen til Ogg for Firefox

Det første formatet vi vil konvertere til er Ogg (noen ganger kalt Ogg-Theora). Dette formatet er formatet som Firefox 3.5, Opera 10.5 og Chrome 3 alle kan vise.

Dessverre, mens Ogg har nettleserstøtte, tilbyr mange av de kjente videoprogrammene du kan kjøpe (Adobe Media Encoder, QuickTime, etc.) ikke et Ogg-konverteringsalternativ. Så den eneste måten å konvertere videoen din til Ogg er å finne et konverteringsprogram på nettet.

Konverteringsalternativer

Det er et nettverktøy kalt Media-Convert som hevder å konvertere forskjellige videoformater (og lyd) til andre videoformater (og lydformater). Da vi prøvde det med min 3 sekunders testvideo, kunne vi ikke få den til å fungere på min Mac. Men du kan ha bedre hell. Dette nettstedet har fordelen av å være gratis.

Noen andre verktøy vi fant inkluderer:

• Miro Video Converter (Windows Macintosh): Dette programmet har fordelen av å konvertere til både Ogg og MP4 (H.264), og det er åpen kildekode.
• Gratis videokonverterer: Vi tror dette har både en Windows- og en Macintosh-versjon, men det var vanskelig å si fra siden deres
• Enkel Theora Encoder (Macintosh): Dette er den vi pleier å bruke.

Når du har lagret videoen din i Ogg-format, lagrer du den på et sted på nettstedet ditt og går til neste side for å konvertere den til andre formater for andre nettlesere.

Konverter videoen til MP4 for Safari og Internet Explorer

Det neste formatet du bør konvertere videoen til, er MP4 (H.264-video), slik at den kan spilles på Internet Explorer 9 og nyere, Safari 3 og 4, og iPhone og Android.

Dette formatet er lettere tilgjengelig i kommersielle produkter, og du har sannsynligvis allerede et program som konverterer til MP4 hvis du har en videoredigerer. Hvis du har Adobe Premiere du kan bruke Adobe Video Encoder, eller hvis du har QuickTime Pro som også fungerer. Mange av omformerne vi diskuterte på forrige side konverterer også videoer til MP4.

• MediaConvert: Et online AWS-verktøy.
• Miro Video Converter (Windows Macintosh): Dette programmet har fordelen av å konvertere til både Ogg og MP4 (H.264), og det er åpen kildekode.
• SUPER (Windows): Konverterer mange forskjellige filtyper til MP4
• Gratis videokonverterer: Vi tror dette har både en Windows- og en Macintosh-versjon, men det var vanskelig å si fra siden deres.

Legg til videoelementet på websiden din

1. Opprett websiden slik du vanligvis oppretter den:

2. Plasser den i kroppen
3. Bestem hvilke attributter du vil at videoen din skal ha: Vi anbefaler at du bruker kontroller og forhåndslast. Bruk plakatalternativet hvis videoen din ikke har en god første scene.
   autoplay - for å starte så snart den er lastet ned
4. kontroller - la leserne dine kontrollere videoen (pause, spole tilbake, spole fremover)
5. loop - start videoen fra begynnelsen når den slutter
6. forhåndsinnlasting - last ned videoen slik at den er klar raskere når kunden klikker på den
7. plakat - definer bildet du vil bruke når videoen stoppes
8. Deretter legger du til kildefilene for de to versjonene av videoen din (MP4 og OGG) inne i
9. Åpne siden i Chrome 1, Firefox 3.5, Opera 10 og / eller Safari 4 og sørg for at den vises riktig. Du bør teste det i minst Firefox 3.5 og Safari 4 - da de bruker hver sin kodek.

Det er det. Når du har denne koden på plass, har du en video som fungerer i Firefox 3.5, Safari 4, Opera 10 og Chrome 1. Men hva med Internet Explorer?

Det er veldig enkelt å bruke HTML 5 for å legge til en video på websidene. De fleste moderne nettlesere støtter HTML 5-video, selv om de ikke alle støtter den på samme måte. Men hva dette betyr er at hvis du lagrer videoen din i både Ogg- og MP4-format, kan du bare skrive fire eller fem linjer med HTML for å få den til å vises i de fleste moderne nettlesere (unntatt Internet Explorer 8). Dette er hvordan:

Skriv HTML 5-dokumenttypemarkøren slik at nettlesere vet å forvente HTML 5:

1. Opprett websiden slik du vanligvis oppretter den:

2. Plasser den i kroppen
3. Bestem hvilke attributter du vil at videoen din skal ha: Vi anbefaler at du bruker kontroller og forhåndslast. Bruk plakatalternativet hvis videoen din ikke har en god første scene.
   autoplay - for å starte så snart den er lastet ned
4. kontroller - la leserne dine kontrollere videoen (pause, spole tilbake, spole fremover)
5. loop - start videoen fra begynnelsen når den slutter
6. forhåndsinnlasting - last ned videoen slik at den er klar raskere når kunden klikker på den
7. plakat - definer bildet du vil bruke når videoen stoppes
8. Deretter legger du til kildefilene for de to versjonene av videoen din (MP4 og OGG) inne i
9. Åpne siden i Chrome 1, Firefox 3.5, Opera 10 og / eller Safari 4 og sørg for at den vises riktig. Du bør teste det i minst Firefox 3.5 og Safari 4, da de bruker hver sin kodek.

Det er det. Når du har denne koden på plass, har du en video som fungerer i Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ og Chrome 1.

Test i så mange nettlesere du kan

For din sjelefred bør du også teste i eldre nettlesere for å se hva de gjør, spesielt hvis mange av leserne bruker eldre nettlesere.

Å teste videosider er avgjørende hvis du vil ha en vellykket lansering. Du bør være sikker på å teste siden din i de mest populære nettleserne og versjonene for nettstedet ditt.

Vi har funnet ut at det er mulig å bruke verktøy som BrowserLab og AnyBrowser for å teste video, men det er ikke like pålitelig som å hente opp siden i en nettleser selv. Når du gjør det, kan du virkelig se om det fungerer eller ikke.

Siden du prøvde å kode videoen din i flere formater, bør du teste den for å sikre at den vises i flere nettlesere. Dette betyr at du i det minste bør teste det i Firefox, Safari og IE.

For din sjelefred bør du også teste i eldre nettlesere for å se hva de gjør, spesielt hvis mange av leserne bruker eldre nettlesere.

Få videoen til å fungere i eldre nettlesere

Som med enhver webside, bør du først vurdere hvor viktig det er å få disse nettleserne til å fungere. Hvis 90% av kundene dine bruker Netscape, bør du ha en reserveplan for dem. Men hvis mindre enn 1% gjør det, betyr det kanskje ikke så mye.

Når du har bestemt deg for hvilke nettlesere du skal prøve å støtte, er den enkleste måten å lage en alternativ side der de kan se videoen. På den alternative siden vil du legge inn en video ved hjelp av HTML 4. Og bruk enten en eller annen form for nettleseroppdagelse for å omdirigere dem dit, eller bare legg til en lenke til den siden på denne.