Använda HTML5 för att visa video i nuvarande webbläsare

Värd för din egen HTML 5-video vs. Använda YouTube

YouTube är en fantastisk webbplats. Det gör det enkelt att bädda in video i webbsidor snabbt, och med några mindre undantag är ganska sömlöst i dess utförande av dessa videor. Om du lägger upp en video på YouTube kan du vara ganska säker på att någon kommer att kunna titta på den.

Men att använda YouTube för att bädda in dina videor har vissa nackdelar

De flesta problemen med Youtube är på konsumentsidan, snarare än på designersidan, saker som:

• Långsam sökning och indexering
• Serveravbrott
• Innehållet tas bort (till synes) godtyckligt
• För mycket dåligt innehåll

Men det finns några anledningar till att YouTube också är dåligt för innehållsutvecklare, inklusive:

• Maximal längd på 10 minuter för videor (gratis konton)
• Dålig uppladdningsprestanda
• YouTube får obegränsade användningsrättigheter till din video
• Alla YouTube-användare får obegränsade användningsrättigheter till din video

HTML5-video ger några fördelar över YouTube

Använder sig av HTML5 för video kan du styra alla aspekter av din video, från vem som kan se den, hur länge den är, vad innehållet innehåller, var den är värd och hur servern presterar. Och HTML5 ger dig möjlighet att koda din video i så många format som du behöver för att se till att maximalt antal personer kan se den. Dina kunder behöver inte ett plugin eller vänta tills YouTube släpper en nyare version.

Naturligtvis erbjuder HTML5-video några nackdelar

Dessa inkluderar:

• Du måste koda din video i minst tre olika codecs.
• Du måste inkludera JavaScript för att säkerställa webbläsare som inte stöder HTML5 kommer att funka.
• Din server måste kunna hantera bandbreddskraven för värdvideor.

Snabb översikt över videostöd på webben

Att lägga till video på webbsidor har länge varit en svår process. Det var så många saker som kunde gå fel:

• Först använder du tagg för att bädda in din video på din sida. MEN den taggen utfas till förmån för en annan tagg. Och vissa webbläsare stödde det ändå aldrig bra.
• Så du byter till tag, men äldre webbläsare stöder det inte och nyare webbläsare är skissartade i dess stöd.
• Då tänker du Blixt! Och koda din video som en FLV-fil. Men Blixt stöds inte längre på Windows-enheter.
• Så du bestämmer dig för att ladda upp din video till en videoinbäddningssida som YouTube, men då har du problemen med YouTube som vi diskuterade.
• Slutligen bestämmer du dig för att gå med HTML5, men Internet Explorer stöder det inte (inte förrän Internet Explorer 9). Och även om du gör det finns det två videokodekstandarder som stöds och endast en webbläsare som kan använda båda.

Så vad ska du göra? Att ge upp videon är inte längre ett alternativ för de flesta webbplatser, eftersom videon blir allt viktigare. Och många webbplatser har framgångsrikt bytt till video.

Följande sidor i den här artikeln kommer att gå igenom hur du lägger till en video på dina webbsidor som fungerar i Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 och 4, iPhone och Android och Internet Explorer 7 och 8. Du kommer också att ha de nycklar du behöver för att lägga till stöd för andra äldre webbläsare om det behövs.

Skapa och redigera din video

Det första du behöver när du ska lägga upp en video på en webbsida är den faktiska videon. Du kan antingen skjuta kontinuerligt och redigera efteråt för att skapa en funktion, eller så kan du skanna den och planera den i förväg. Hur som helst fungerar bra, det är precis vad du är bekväm med. Om du inte vet vilken typ av video du ska göra, kolla in dessa idéer från Desktop Video Guide:

• Familjeprojekt
• Marknadsförings- och reklamfilmer
• Video virtuella rundturer
• Hur man gör videor
• Bröllop videor

Lär dig att spela in video av hög kvalitet

Se till att du vet hur du spelar in inomhus och utomhus samt hur du spelar in ljud. Belysning är också mycket viktigt - skott som är för ljusa skadar ögonen och för mörkt ser bara lerigt och oprofessionellt ut. Även om du bara planerar att ha en 30-sekunders video på din webbplats, desto högre kvalitet är desto bättre kommer den att återspeglas på din webbplats.

Kom också ihåg att upphovsrätt gäller alla ljud eller musik (såväl som arkivfilmer) som du kanske vill använda i din video. Om du inte har tillgång till en vän som kan skriva och spela en låt åt dig måste du hitta royaltyfri musik att spela i bakgrunden. Det finns också platser du kan spela in bilder för att lägga till i dina videor.

Redigera din video

Det spelar ingen roll vilken redigeringsprogramvara du använder, bara så länge du är bekant med den och kan använda den effektivt. Gretchen, Desktop Video Guide, har några professionella videoredigeringstips som kan hjälpa dig att redigera dina videor så att de ser bra ut.

Spara din video till en MOV eller AVI (eller MPG, CD, DV)

Under resten av denna handledning kommer vi att anta att du har din video sparad i någon form av högkvalitativt (icke-komprimerat) format som AVI eller MOV. Medan du kan använda dessa filer som de är, stöter du på alla problem med videon som vi redan har diskuterat. Följande sidor förklarar hur du konverterar din fil till tre typer så att den kan ses av det största antalet webbläsare.

Konvertera videon till Ogg för Firefox

Det första formatet vi kommer att konvertera till är Ogg (kallas ibland Ogg-Theora). Detta format är ett som Firefox 3.5, Opera 10.5 och Chrome 3 alla kan visa.

Tyvärr, även om Ogg har webbläsarsupport, erbjuder många av de välkända videoprogrammen som du kan köpa (Adobe Media Encoder, QuickTime, etc.) inte ett Ogg-omvandlingsalternativ. Så det enda sättet att konvertera din video till Ogg är att hitta ett omvandlingsprogram på webben.

Omvandlingsalternativ

Det finns ett onlineverktyg som heter Media-Convert som gör anspråk på att konvertera olika videoformat (och ljud) till andra videoformat (och ljud). När vi försökte det med min 3-sekunders testvideo kunde vi inte få den att fungera på min Mac. Men du kan ha bättre tur. Den här webbplatsen har fördelen att den är gratis.

Några andra verktyg vi hittade inkluderar:

• Miro Video Converter (Windows Macintosh): Detta program har fördelen att konvertera till både Ogg och MP4 (H.264) och det är öppen källkod.
• Gratis videokonverterare: Vi tror att det här har både en Windows- och en Macintosh-version, men det var svårt att säga från deras webbplats
• Enkel Theora Encoder (Macintosh): Det här är det vi brukar använda.

När du har sparat din video i Ogg-format, spara den på en plats på din webbplats och gå till nästa sida för att konvertera den till andra format för andra webbläsare.

Konvertera videon till MP4 för Safari och Internet Explorer

Nästa format du ska konvertera din video till är MP4 (H.264-video) så att den kan spelas på Internet Explorer 9 och senare, Safari 3 och 4, och iPhone och Android.

Det här formatet är lättare tillgängligt i kommersiella produkter, och du har förmodligen redan ett program som konverterar till MP4 om du har en videoredigerare. Om du har Adobe Premiere du kan använda Adobe Video Encoder, eller om du har QuickTime Pro som också fungerar. Många av de omvandlare som vi diskuterade på föregående sida konverterar också videor till MP4.

• MediaConvert: Ett AWS-verktyg online.
• Miro Video Converter (Windows Macintosh): Detta program har fördelen att konvertera till både Ogg och MP4 (H.264) och det är öppen källkod.
• SUPER (Windows): Konverterar många olika filtyper till MP4
• Gratis videokonverterare: Vi tror att det här har både en Windows- och en Macintosh-version, men det var svårt att säga från deras webbplats.

Lägg till videoelementet på din webbsida

1. Skapa din webbsida som du normalt skulle skapa den:

2. Placera inuti kroppen
3. Bestäm vilka attribut du vill att din video ska ha: Vi rekommenderar att du använder kontroller och förspänning. Använd affischalternativet om din video inte har en bra första scen.
   autoplay - för att starta så snart det har laddats ner
4. kontroller - låt dina läsare styra videon (pausa, spola tillbaka, spola framåt)
5. loop - starta videon från början när den slutar
6. förinladdning - hämta videon så att den är klar snabbare när kunden klickar på den
7. affisch - definiera bilden du vill använda när videon stoppas
8. Lägg sedan till källfilerna för de två versionerna av din video (MP4 och OGG) inuti
9. Öppna sidan i Chrome 1, Firefox 3.5, Opera 10 och / eller Safari 4 och se till att den visas korrekt. Du bör testa det i åtminstone Firefox 3.5 och Safari 4 - eftersom de använder olika kod.

Det är allt. När du har den här koden på plats har du en video som fungerar i Firefox 3.5, Safari 4, Opera 10 och Chrome 1. Men hur är det med Internet Explorer?

Det är väldigt enkelt att använda HTML 5 för att lägga till en video på webbsidor. De flesta moderna webbläsare stöder HTML 5-video, även om de inte alla stöder den på samma sätt. Men vad detta betyder är att om du sparar din video i både Ogg- och MP4-format, kan du bara skriva fyra eller fem rader HTML för att få den att visas i de flesta moderna webbläsare (förutom Internet Explorer 8). Här är hur:

Skriv HTML 5-doktypmarkören så att webbläsare vet att förvänta sig HTML 5:

1. Skapa din webbsida som du normalt skulle skapa den:

2. Placera inuti kroppen
3. Bestäm vilka attribut du vill att din video ska ha: Vi rekommenderar att du använder kontroller och förspänning. Använd affischalternativet om din video inte har en bra första scen.
   autoplay - för att starta så snart det har laddats ner
4. kontroller - låt dina läsare styra videon (pausa, spola tillbaka, spola framåt)
5. loop - starta videon från början när den slutar
6. förinladdning - hämta videon så att den är klar snabbare när kunden klickar på den
7. affisch - definiera bilden du vill använda när videon stoppas
8. Lägg sedan till källfilerna för de två versionerna av din video (MP4 och OGG) inuti
9. Öppna sidan i Chrome 1, Firefox 3.5, Opera 10 och / eller Safari 4 och se till att den visas korrekt. Du bör testa det i åtminstone Firefox 3.5 och Safari 4 eftersom de använder var sin kod.

Det är allt. När du har den här koden på plats har du en video som fungerar i Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ och Chrome 1.

Testa i så många webbläsare som möjligt

För din sinnesfrid bör du också testa i äldre webbläsare för att se vad de gör, speciellt om många av dina läsare använder äldre webbläsare.

Att testa videosidor är avgörande om du vill ha en lyckad lansering. Du bör vara säker på att testa din sida i de mest populära webbläsarna och versionerna för din webbplats.

Vi har funnit att även om det är möjligt att använda verktyg som BrowserLab och AnyBrowser för att testa video är det inte lika tillförlitligt som att ta upp sidan i en webbläsare själv. När du gör det kan du verkligen se om det fungerar eller inte.

Eftersom du gjorde allt för att koda din video i flera format, bör du testa den för att se till att den visas i flera webbläsare. Detta innebär att du åtminstone bör testa det i Firefox, Safari och IE.

För din sinnesfrid bör du också testa i äldre webbläsare för att se vad de gör, speciellt om många av dina läsare använder äldre webbläsare.

Få videon att fungera i äldre webbläsare

Som med alla webbsidor bör du först överväga hur viktigt det är att få dessa webbläsare att fungera. Om 90% av dina kunder använder Netscape bör du ha en reservplan för dem. Men om mindre än 1% gör det kanske det inte spelar så stor roll.

När du väl har bestämt dig för vilka webbläsare du ska försöka stödja, är det enklaste sättet att helt enkelt skapa en alternativ sida där de kan se videon. På den alternativa sidan skulle du bädda in en video med HTML 4. Och använd antingen någon form av webbläsardetektering för att omdirigera dem dit eller lägg bara till en länk till den sidan på den här.