Bruke HTML5 til å vise video i nåværende nettlesere

HTML5-videotaggen gjør det enkelt å legge til video på websidene dine. Men mens det virker lett på overflaten, er det mange ting du trenger å gjøre for å få videoen oppe. Denne opplæringen tar deg gjennom trinnene for å lage en side i HTML5 som vil kjøre video i alle de moderne nettleserne.

• Hosting din egen HTML5 Video vs bruk av YouTube
• Rask oversikt over videosupport på nettet
• Lag og rediger videoen din
• Konverter videoen til Ogg for Firefox
• Konverter videoen til MP4 for Safari
• Konverter videoen til FLV for Internet Explorer
• Legg til videoelementet på websiden din
• Legg til JavaScript og Flash Player for å få Internet Explorer til å fungere
• Test i så mange nettlesere som du kan

01 av 10

Hosting din egen HTML 5 Video vs bruk av YouTube

YouTube er et flott nettsted. Det gjør det enkelt å legge inn video på websider raskt, og med noen mindre unntak er det ganske sømløst i utførelsen av disse videoene. Hvis du legger inn en video på YouTube, kan du være ganske sikker på at alle vil kunne se den.

Men å bruke YouTube til å legge inn videoene dine, har noen ulemper

De fleste problemene med YouTube er på forbrukssiden, i stedet for på designer siden, ting som:

• Sakte søking 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:

• 10 minutters maksimal lengde for videoer (gratis kontoer)
• Dårlig opplasting
• YouTube får ubegrensede bruksrettigheter til videoen din
• En hvilken som helst YouTube-bruker får ubegrenset bruksrett til videoen din

HTML5 Video gir noen fordeler over YouTube

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

Selvfølgelig, HTML5 Video tilbyr noen ulemper

Disse inkluderer:

• Du må kodes videoen din i minst tre forskjellige kodeker
• Du må inkludere noe JavaScript for å sikre at nettlesere som ikke støtter HTML5, vil fungere
• Serveren din må kunne håndtere båndbreddekravene for hosting-videoer

Fortsett å lese nedenfor

02 av 10

Rask oversikt over videosupport 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 tagg for å legge inn videoen din på siden din. MEN den taggen er deprecated til fordel for en annen tagg. Og noen nettlesere støttet det aldri bra uansett.
• Så du bytter til tag, men eldre nettlesere støtter ikke den og nyere nettlesere er sketchy i sin støtte.
• Da tror du Flash! Og kode videoen som en FLV-fil. Men Flash støttes ikke på mange mobile enheter, og mange hater Flash, uansett hvordan den brukes. (25% av respondentene i min meningsmåling spør om hvordan du føler om Flash, uttalt at de ikke kan stå Flash på noen måte).
• Så du bestemmer deg for å laste opp videoen din til et videoinnleggingsområde som YouTube, men da har du problemer med YouTube som vi diskuterte.
• Endelig bestemmer du å gå med HTML5, men Internet Explorer støtter ikke den (ikke til Internet Explorer 9). Og selv om du gjør det, er det to video codec-standarder som støttes og bare en nettleser som kan bruke begge. Nettleserstøtte for Video Codecs og Containere

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

Følgende sider i denne artikkelen vil hjelpe deg med å legge til video på websidene dine som fungerer i Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 og 4, iPhone og Android, Flash og Internet Explorer 7 og 8. Du vil Har også nøklene du trenger for å legge til støtte for andre eldre nettlesere om nødvendig.

Fortsett å lese nedenfor

03 av 10

Lag og rediger videoen din

Det første du trenger når du skal legge inn en video på en nettside, er den faktiske videoen. Du kan enten skyte kontinuerlig og redigere etterpå for å opprette en funksjon, eller du kan skanne den og planlegge den forut for tiden. Uansett fungerer det bra, det er bare hva du er komfortabel med. Hvis du ikke vet hvilken type video du bør gjøre, sjekk disse ideene fra Desktop Video Guide:

• Familievideo prosjekter
• Markedsføring og salgsfremmende videoer
• Video virtuelle turer
• Slik Videoer
• Bryllup videoer

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

Pass på at du vet hvordan du spiller innendørs og utendørs, samt hvordan du spiller inn lyd. Belysning er også veldig viktig - skudd som er for lyse, øker øynene, og for mørk 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, desto bedre reflekterer det på nettstedet ditt.

Husk også at opphavsrett gjelder for eventuelle lyder eller musikk (samt lageropptak) 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 royaltyfri musikk for å spille i bakgrunnen. Det er også steder du kan lagre opptak til å legge til i dine videoer.

Redigerer videoen din

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

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

For resten av denne opplæringen, kommer vi til å anta at du har lagret videoen din i noen form for høy kvalitet (ikke-komprimert) format som AVI eller MOV. Mens du kan bruke disse filene som de er, løper du inn i alle problemene med video som vi allerede har diskutert. Følgende sider vil forklare hvordan du konverterer filen til tre typer slik at den kan ses av det største antallet nettlesere.

04 av 10

Konverter videoen til Ogg for Firefox

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

Dessverre, selv om 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 til Ogg er å finne et konverteringsprogram på nettet.

Konverteringsalternativer

Det er et onlineverktøy kalt Media-Convert som hevder å konvertere ulike formater av video (og lyd) til andre videoformater (og lyd). Da vi prøvde det med min 3-sekunders testvideo, kunne vi ikke få det 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 er:

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

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

Fortsett å lese nedenfor

05 av 10

Konverter videoen til MP4 for Safari

Det neste formatet du bør konvertere videoen til, er MP4 (H.264 video) slik at den kan spilles på Safari 3 og 4 og iPhone og Android. I tillegg kan H.264-videoer enkelt konverteres til FLV-filer for å se på Flash.

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, kan du bruke Adobe Video Encoder, eller hvis du har QuickTime Pro som også fungerer. Mange av omformerne vi diskuterte på forrige side, vil også konvertere 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 og FLV
• Gratis Video Converter Vi tror dette har både en Windows og en Macintosh-versjon, men det var vanskelig å fortelle fra deres nettsted.

Lagre MP4-filen på nettstedet ditt, og deretter må du konvertere den til Flash for Internet Explorer å bruke.

06 av 10

Konverter videoen til FLV for Internet Explorer

Den enkleste måten å konvertere videoer til FLV er å bruke Flash selv. Slik konverterer vi videoene mine til Flash. Men hvis du ikke har Flash, er det to populære verktøy for å konvertere filer til FLV:

• SUPER (Windows) - konverterer mange forskjellige filtyper til MP4 og FLV
• ffmpegX (Macintosh) - konverterer mange forskjellige filtyper til MP4 og FLV.

Lagre FLV-filen på nettstedet ditt, og neste side vil vise deg hvordan du skriver HTML-en slik at du kan spille av videoene dine.

Fortsett å lese nedenfor

07 av 10

Legg til videoelementet på websiden din

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

Skriv HTML 5 doktypemarkøren, slik at nettlesere vet å forvente HTML 5:

1. Opprett websiden din som du vanligvis vil opprette den:

2. Sett inn i kroppen, plasser
3. Bestem hvilke attributter du vil at videoen din skal ha: Vi anbefaler at du bruker kontroller og forhåndsbelastning. Bruk plakatalternativet hvis videoen ikke har en god første scene.
   1. autoplay - for å starte så snart den er lastet ned
   2. kontroller - la leserne kontrollere videoen (pause, spole tilbake, spole fremover)
   3. loop - start videoen fra begynnelsen når den slutter
   4. forhåndslast - last ned videoen slik at den er klar raskere når kunden klikker på den
   5. plakat - definer bildet du vil bruke når videoen er stoppet
4. Legg deretter til kildefilene for de to versjonene av videoen din (MP4 og OGG) inne i
5. Å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 hver bruker en annen kodek.

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

Internet Explorer liker ikke HTML 5 eller

I neste avsnitt, snakker vi om hva du kan gjøre for å få IE 8 til å spille pent med HTML 5-videoene dine og vise en video. Du må bruke Flash.Den gode nyheten er at IE 9 forventes å støtte HTML 5 og videotaggen.

08 av 10

Legg til JavaScript og Flash Player for å få Internet Explorer til å fungere

Du har kanskje lagt merke til at i HTML-koden for den forrige siden var det ingen kildelinje for FLV-filen. Og hvis du testet den siden i Internet Explorer, ville det ikke fungere. Det er fordi Internet Explorer ikke gjenkjenner HTML 5, og det kan ikke spille enten OGG eller MP4-videoer nativt. For å få Internet Explorer 7 og 8 til å fungere, må du spille av videoen som Flash. Men det er flere skritt for å få det til jobb enn å bare legge til FLV-filen.

Trinn 1: Få en Flash Video Player for ditt nettsted

Vi anbefaler å få FlowPlayer fordi det er en åpen kildekode Flash-videospiller som du kan installere på din webserver og bruke når du har Flash-video for å spille. Den gratis versjonen av FlowPlayer legger inn reklame for videoene dine, men du kan også kjøpe kommersielle lisenser hvis du trenger dem.

Følg instruksjonene på FlowPlayer-siden for å installere FlowPlayer på nettstedet ditt. I et nøtteskall installerer du 2 SWF-filer og en JavaScript-fil på nettstedet ditt. På bunnen av HTML-koden din (før tag) du legger til en linje:

Men Internet Explorer vil fortsatt ikke spille videoen, du må lære det å kjenne igjen HTML 5-koder.

Trinn 2: Overbevise Internet Explorer for å lese HTML 5-tagger

Det er et praktisk skript på Google Code kalt "HTML Shiv" som vil hjelpe IE til å gjenkjenne HTML 5-elementer. Så i av HTML-dokumentet du vil referere det til. Det er best å vedlegge det i IE betingede kommentarer, slik at andre nettlesere ikke er forvirrede:

Ok, nå vil IE gjenkjenne

Trinn 3: Legg til en kilde linje for FLV filen

På samme måte som du gjorde på forrige side, legger du til en linje i HTML 5-en din i

Fortsett å lese nedenfor

09 av 10

Legg til JavaScript og Flash Player for å få Internet Explorer til å fungere - Del 2

Dessverre er vi fortsatt ikke ferdige. Vi må nå fortelle IE å bruke FlowPlayer Flash-videospilleren vi hadde referert til ovenfor.

Trinn 4: Vri på

For dette trenger vi et annet skript. Vi fikk skriptet fra Dive Into HTML 5. Men da vi testet det, virket det ikke før vi gjorde noen justeringer:

• Rundt linje 31: Legg til plasseringen av FlowPlayer-installasjonen.
• Rundt linje 42: Endre filtype fra video / mp4 til video / x-flv
• Rundt linje 94: begynner med hvis (!! $ && !! $ (dokument) .ready) {til slutten av dokumentet, endre den delen for å lese:

  // hvis (!! $ && !! $ (dokument) .ready) {/ * jQuery-brukere kan initialisere så snart DOM er klar * /// $ (dokument) .ready (html5_video_init);//} annet {/ * Alle andre kan vente til onload * // * addEvent-funksjon via http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * /var addEvent = funksjon (obj, type, fn) {hvis (obj.addEventListener)obj.addEventListener (type, fn, false);ellers hvis (obj.attachEvent)obj.attachEvent ('on' + type, funksjon () {return fn.apply (obj, new Array (window.event));});}addEvent (vindu, "last", html5_video_init);//}

Når du har redigert JavaScript-filen, laster du den opp til serveren din, og kobler til den nederst på HTML-siden din (før ):

Puh! Nå som du har gjort alt det, bør du laste opp HTML-en slik at du kan begynne å teste.

10 av 10

Test i så mange nettlesere som du kan

Testing av videosider er kritisk hvis du vil ha en vellykket start. 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 mens det er mulig å bruke verktøy som BrowserLab og AnyBrowser til å teste video, er det ikke like pålitelig som å få opp siden på en nettleser selv. Når du gjør det, kan du virkelig se om det fungerer eller ikke.

Siden du dro til alle problemer med å kode videoen i tre formater, bør du teste den for å sikre at den vises i alle tre. Dette betyr at du i det minste bør teste det i:

• Firefox 3.5
• Safari 3 eller 4
• Internet Explorer 7 eller 8

Du kan teste i Chrome, men siden Chrome viser alle tre metodene (til og med Flash, hvis du har pluginet), er det vanskelig å fortelle om det er et problem med en av de to andre eller hvilken kodek Chrome bruker.

For trygghet, bør du også teste i eldre nettlesere for å se hva de gjør, spesielt hvis mange lesere bruker eldre nettlesere.

Få videoen til å arbeide i eldre nettlesere

Som med en hvilken som helst nettside, 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 tilbakekallingsplan for dem. Men hvis mindre enn 1% gjør det, spiller det ingen rolle så mye.

Når du har bestemt hvilke nettlesere du skal forsøke å støtte, er det enklest å opprette en alternativ side for å se videoen. På den alternative siden vil du legge inn en video ved hjelp av HTML 4. Og så enten bruk noen form for nettleserdeteksjon for å omdirigere dem der, eller bare legg til en link til den siden på denne.