HTML5-videotaggen gör det enkelt att lägga till video på dina webbsidor. Men medan det verkar lätt på ytan finns det många saker du behöver göra för att få din video igång. Denna handledning tar dig genom stegen för att skapa en sida i HTML5 som kör video i alla moderna webbläsare.
- Hyr din egen HTML5-video vs. Använda YouTube
- Snabb översikt över videostöd på webben
- Skapa och redigera din video
- Konvertera videon till Ogg för Firefox
- Konvertera videon till MP4 för Safari
- Konvertera videon till FLV för Internet Explorer
- Lägg till videoelementet på din webbsida
- Lägg till JavaScript och Flash Player för att få Internet Explorer att fungera
- Testa i så många webbläsare som möjligt
Hålla din egen HTML 5 Video vs Använda YouTube
YouTube är en bra webbplats. Det gör det enkelt att bädda in video till webbsidor snabbt, och med några mindre undantag är det ganska smidigt vid genomförandet av dessa videoklipp. 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 videoklipp har några nackdelar
De flesta av 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 är dåligt för innehållsutvecklare också, inklusive:
- 10 minuter max längd för videoklipp (gratis konton)
- Dålig uppladdning
- YouTube får obegränsade användningsrättigheter för ditt videoklipp
- Alla YouTube-användare får obegränsade användningsrättigheter för din video
HTML5-video ger några fördelar över YouTube
Genom att använda HTML5 för video kan du styra alla aspekter av din video, från vem som kan visa den, hur länge den är, vad innehållet innehåller, var det är värd och hur servern utförs. Och HTML5-video ger dig möjlighet att koda din video i så många format som du behöver för att se till att det maximala antalet personer kan se det. Dina kunder behöver inte ett plugin eller vänta tills YouTube släpper ut 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 vissa JavaScript för att säkerställa att webbläsare som inte stöder HTML5 kommer att fungera
- Din server måste kunna hantera bandbreddskrav för värdvideor
Fortsätt läsa nedan
02 av 10Snabb översikt över videostöd på webben
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 till din sida. MEN den taggen avlägsnas till förmån för en annan tagg. Och vissa webbläsare har aldrig stött det bra ändå.
- Så du byter till tagg, men äldre webbläsare stöder inte det och nyare webbläsare är sketchy i sitt stöd.
- Då tycker du Flash! Och koda din video som en FLV-fil. Men Flash stöds inte på många mobila enheter och många hatar Flash, oavsett hur den används (25% av respondenterna i min omröstning frågar om hur du känner om Flash uppgav att de inte kan stå på Flash på något sätt).
- Så du bestämmer dig för att ladda upp din video till en videoinbäddningsplats 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 till Internet Explorer 9). Och även om du gör det finns två video codec-standarder som stöds och endast en webbläsare som kan använda båda. Browser Support för Video Codecs och Containers
Så vad ska du göra? Att ge upp video ä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 hjälper dig att lägga till video på dina webbsidor som fungerar i Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 och 4, iPhone och Android, Flash och Internet Explorer 7 och 8. Du kommer att Har också de nycklar du behöver lägga till stöd för andra äldre webbläsare om det behövs.
Fortsätt läsa nedan
03 av 10Skapa och redigera din video
Det första du behöver när du ska lägga 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 du kan skripta det och planera det före tid. Hur som helst fungerar bra, det är bara 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:
- Familjvideoprojekt
- Marknadsföring och reklamfilmer
- Video Virtuella turer
- Hur man gör videor
- Bröllop Videos
Lär dig hur du spelar in video med hög kvalitet
Se till att du vet hur man spelar in inomhus och utomhus samt hur man spelar in ljud. Belysning är också mycket viktigt - skott som är för ljusa gör ont i ögonen, och för mörk ser du bara lerig och oprofessionell. Även om du bara planerar att få en 30-sekunders video på din webbplats, desto högre kvalitet är det, desto bättre kommer det att reflektera på din webbplats.
Kom också ihåg att upphovsrätten gäller alla ljud eller musik (samt stock footage) 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 sång för dig, måste du hitta royaltyfri musik för att spela i bakgrunden. Det finns också platser du kan stock footage att lägga till i dina videoklipp.
Redigering av din video
Det spelar ingen roll vilken redigeringsprogram 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 videoredigerings tips som kan hjälpa dig att redigera dina videoklipp så att de ser bra ut.
Spara din video till en MOV eller AVI (eller MPG, CD, DV)
För resten av denna handledning kommer vi att anta att du har sparat din video i någon typ av högkvalitativt (icke-komprimerat) format som AVI eller MOV. Medan du kan använda dessa filer som de är, löser du alla problem med video som vi redan har diskuterat. På följande sidor kommer du att förklara hur du konverterar filen till tre typer så att den kan ses av det största antalet webbläsare.
04 av 10Konvertera videon till Ogg för Firefox
Det första formatet vi kommer att konvertera till är Ogg (kallas ibland Ogg-Theora). Det här formatet är en som Firefox 3.5, Opera 10.5 och Chrome 3 alla kan visa.
Tyvärr, medan Ogg har webbläsarstöd, erbjuder många av de välkända videoprogrammen du kan köpa (Adobe Media Encoder, QuickTime, etc.) inte ett Ogg-konverteringsalternativ. Så det enda sättet att konvertera din video till Ogg är att hitta ett konverteringsprogram på webben.
Konverteringsalternativ
Det finns ett onlineverktyg som heter Media-Convert som hävdar att konvertera olika format av video (och ljud) till andra videoformat (och ljud). När vi provade det med min 3-sekunders testvideo kunde vi inte få det till jobbet på min Mac. Men du kanske har bättre tur. Den här webbplatsen har fördelen att vara fri.
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.
- Koyote Video Converter (Windows)
- Gratis Video Converter Vi tycker att detta har både en Windows och en Macintosh-version, men det var svårt att berätta från deras webbplats
- Simple Theora Encoder (Macintosh) - det här är det vi brukar använda.
När du har sparat din video i Ogg-format, spara den till en plats på din webbplats och gå till nästa sida för att konvertera den till andra format för andra webbläsare.
Fortsätt läsa nedan
05 av 10Konvertera videon till MP4 för Safari
Nästa format du ska konvertera din video till är MP4 (H.264 video) så att den kan spelas på Safari 3 och 4 och iPhone och Android. Dessutom kan H.264-videor enkelt konverteras till FLV-filer för att titta på Flash.
Detta format är mer 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 kan du använda Adobe Video Encoder, eller om du har QuickTime Pro som också fungerar. Många av de omvandlare vi diskuterade på föregående sida kommer också att konvertera videor till MP4.
- MediaConvert - Ett online AWS-verktyg.
- 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 och FLV
- Gratis Video Converter Vi tycker att detta har både en Windows och en Macintosh-version, men det var svårt att berätta från deras webbplats.
Spara din MP4-fil till din webbplats och då måste du konvertera den till Flash för att Internet Explorer ska kunna använda.
06 av 10Konvertera videon till FLV för Internet Explorer
Det enklaste sättet att konvertera videor till FLV är att använda Flash själv. Så konverterar vi mina videor till Flash. Men om du inte har Flash, är det här två populära verktyg för att konvertera filer till FLV:
- SUPER (Windows) - konverterar många olika filtyper till MP4 och FLV
- ffmpegX (Macintosh) - konverterar många olika filtyper till MP4 och FLV.
Spara din FLV-fil till din webbplats och på nästa sida kommer du att visa hur du skriver HTML-koden så att du kan spela dina videoklipp.
Fortsätt läsa nedan
07 av 10Lägg till videoelementet på din webbsida
Det är väldigt lätt att använda HTML 5 för att lägga till video på webbsidor. De flesta moderna webbläsare stöder HTML 5-video, även om de inte alla stöder det på samma sätt. Men vad det betyder är att om du sparar din video som både Ogg och MP4-format, kommer du att kunna skriva bara fyra eller fem linjer 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 doctype-markören så att webbläsare vet att de förväntar sig HTML 5:
- Skapa din webbsida som du normalt skulle skapa den:
- Inne i kroppen, placera
- Bestäm vad du vill att din video ska ha: Vi rekommenderar att du använder kontroller och förinstallerar. Använd posteralternativet om din video inte har en bra första scen.
- autoplay - för att starta så snart den är nedladdad
- kontroller - låta dina läsare styra videon (pausa, spola tillbaka, spola framåt)
- loop - starta videon från början när den slutar
- förladdning - ladda ner videon så att den är klarare när kunden klickar på den
- poster - definiera bilden du vill använda när videon är stoppad
- Lägg sedan till källfilerna för de två versionerna av din video (MP4 och OGG) inuti
- Ö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 minst Firefox 3.5 och Safari 4 - eftersom de alla använder en annan codec.
Det är allt. När du har den här koden på plats får du en video som fungerar i Firefox 3.5, Safari 4, Opera 10 och Chrome 1. Men hur är det med Internet Explorer?
Internet Explorer gillar inte HTML 5 eller
I nästa avsnitt talar vi om vad du kan göra för att få IE 8 att spela bra med dina HTML 5-videotaggar och visa en video. Du måste använda Flash.Den goda nyheten är att IE 9 förväntas stödja HTML 5 och videotaggen.
08 av 10Lägg till JavaScript och Flash Player för att få Internet Explorer att fungera
Du kanske har märkt att i HTML-koden på föregående sida fanns ingen källlinje för FLV-filen. Och om du testat den där sidan i Internet Explorer skulle det inte fungera. Det beror på att Internet Explorer inte känner igen HTML 5 och det kan inte spela antingen OGG- eller MP4-videor nativt. För att få Internet Explorer 7 och 8 att fungera måste du spela den som Flash. Men det finns fler steg för att få det till jobbet än att bara lägga till FLV-filen.
Steg 1: Få en Flash Video Player för din webbplats
Vi rekommenderar att du får FlowPlayer eftersom det är en Flash-spelare med öppen källkod som du kan installera på din webbserver och använder när du har Flash-video för att spela. Den fria versionen av FlowPlayer sätter in reklam för dina videoklipp, men du kan också köpa kommersiella licenser om du behöver dem.
Följ instruktionerna på FlowPlayer-webbplatsen för att installera FlowPlayer på din webbplats. I ett nötskal kommer du att installera 2 SWF-filer och en JavaScript-fil på din webbplats. Längst ner i din HTML, (före tagg) lägger du till en rad:
Men Internet Explorer spelar fortfarande inte upp videon, du måste lära dig hur man känner igen HTML 5-taggar.
Steg 2: Övertyga Internet Explorer för att läsa HTML 5-taggar
Det finns ett praktiskt skript på Google Code som heter "HTML Shiv" som hjälper IE att känna igen HTML 5-element. Så i
av ditt HTML-dokument som du vill referera till det. Det är bäst att bifoga det i IE villkorliga kommentarer så att andra webbläsare inte är förvirrade:
Okej, nu kommer IE att känna igen
