HTML5 Videos 10 saker Designers behöver veta

HTML5-revolutionen är spännande webbdesigners från alla delar av världen. De nya specifikationerna stödjer dussintals element och attribut för att bygga semantiska webbplatser. Dessa nya funktioner inkluderar multimedia-taggar för ljud och videoformat.

Under de senaste åren är en Flash-baserad mediaspelare som är mer än tillräcklig för streaming på webben och denna teknik är fortfarande nödvändig för att stödja äldre webbläsare. Men tack och lov har moderna standarder avancerat och införandet av HTML5-video öppnar dörrar för dussintals nya möjligheter.

I den här guiden vill jag erbjuda en introduktion till HTML5-video för webben. Det kommer att ta lite övning att förstå den inbyggda in-browser-spelaren och all dess funktionalitet. Och det bästa sättet att bli bekant är att dyka i huvudet först!

1. Typ av media

När du arbetar med en flash-videospelare är det alltför vanligt att associera alla videoformat i .flv. Medan detta fungerar kan de flesta flv-filer inte behålla kvalitet någonstans i närheten av de mer avancerade filformat / codecs. Det finns 3 viktiga videotyper som stöds av HTML5: MP4, WebM och Ogg / Ogv. MPEG-4-filtypen är generellt kodad i H.264 som tillåter uppspelning i Flash-spelare från tredje part. Det betyder att du inte behöver behålla en .flv-video kopia för att stödja en återgångsmetod! WebM och Ogg är två mycket nyare filtyper relaterade till HTML5-video. Ogg använder Theora-kodning som baseras på öppen källkods standard ljudfilformat. Dessa kan sparas med en .ogg eller .ogv-förlängning.

WebM är ett projekt som läggs ut av Google som du kan läsa mer om på WebM Projects webbplats. Formatet stöds redan av Opera, Google Chrome, Firefox 4+ och senast Internet Explorer 9. Det är fortfarande okänt av de flesta webbproffs, men WebM är det ledande formatet för videoformat i framtiden för webbvideo.

2. Browser Support

Så vilken av dessa filtyper behöver du för din webbplats? Bra helst skulle alla 3 vara bra eftersom de ger hela supportspektrumet. Ändå är det inte realistiskt, och i själva verket kan du täcka alla baser med bara två av dem. Här är en sammanfattning av vad som fungerar för varje webbläsare:

Mozilla Firefox - WebM, Ogg
Google Chrome - WebM, Ogg
Opera - WebM, Ogg
Safari - MP4
Internet Explorer 9 - MP4
Internet Explorer 6-8 - Ingen HTML5, Endast Flash!

Om du kommer ihåg tidigare nämnde jag att de flesta flash-videospelare kommer att stödja MP4-filer så länge de är kodade i H.264. Som sådan kommer alla dessa webbläsare bädda in MP4 + Flash som en slutgiltig utväg. Det betyder att du bara behöver skapa två olika videoformat för att stödja alla webbläsare. MP4 för Safari / IE9 och ett val mellan WebM eller Ogg för resten.

Enligt min åsikt rekommenderar jag starkt att hålla fast vid WebM-formatet. Det har några stora namn bakom projektet (nämligen Google) och har fått mycket drag i HTML5-samhället. Ogg / Ogv kommer att stödjas men kommer sannolikt att förlora i popularitet för WebMs mindre filstorlekar. Du kan läsa en relaterad bit på framtidens video på webben skrivet av Sean Golliher.

3. Inbäddning av enkla HTML5-videoklipp

Låt oss nu titta på den syntax som krävs för att bädda in några exempelkod. Allt vi behöver är HTML5-videotaggen för att referera till varje filmadress.

Lägg märke till kontroller och autospela attribut behöver inte ställas in med några värden. Jag inkluderade också a affisch attribut som förinstallerar en bild över videospelaren före streaming. Detta är en vanlig förhandsvisning med många webbspelare.

Vi erbjuder både MP4 och WebM-format internt till videoelementet. Om ingen av dessa kan laddas upp visar vi ett fel för användaren att uppdatera webbläsaren.

4. Erbjuder en Flash Fallback

Exemplet ovan är perfekt för alla standardkompatibla webbläsare. Ändå måste vi också överväga att världen inte alltid ligger i teknikens spets. Vi behöver stödja användare på äldre versioner av Safari, Mozilla Firefox och särskilt Internet Explorer.

Det bästa sättet att uppnå detta är genom en Flash-fallback-spelare. Dessa kan läggas till med hjälp av bädda in eller objekt taggar för att referera till en tredje part .swf-fil. JW Player och Flowplayer är två gratis öppen källkodslösningar du kan överväga. Men kolla även ut premium videospelare på ActiveDen som kan gå så billigt som $ 15- $ 20.

Låt oss nu justera koden ovan för att inkludera en Flashback-spelare för att stödja nästan alla webbläsare som finns.

5. Support för mobila enheter

Det här ämnet diskuteras fortfarande, eftersom mobilbranschen är så ung. Apple kom ut med stöd för MP4 på Mac och iOS-enheter. Det betyder att du kan importera .mp4 videofiler på din iPad, iPhone eller iPod Touch i standard video-gränssnitt. Detta täcker mycket av marknadsandelen.

Nyligen har Android-enheter haft svårt att nå samma stödnivå. Men Google har äntligen antagit .mp4 web streaming som nu kapitaliserar på nästan alla mobila användare. Och eftersom Flash inte är ett alternativ här är MP4 den bästa lösningen. Det är därför som du vill bädda in .mp4-koden först så att iOS-enheter kan känna igen filen omedelbart.

6. Safari User Agent

En bugg som måste nämnas är en befintlig mellan Flash-spelare och inbyggd HTML5 .mp4-streaming på Safari. Eftersom webbläsaren kan stödja båda filerna kan du ha problem med att få HTML5-videoströmmen i stället för Flash. Tack vare det här stora blogginlägget på TUAW är det enkelt att byta användaragent.

Detta kommer att tvinga din webbsida att känna igen webbläsaren som körs på en annan enhet. Mest troligt skulle du välja iPad, som inte stöder någon Flash-uppspelning. Det här är den enda stora problemet du kan komma på när du testar MP4-inbyggda och flash-uppspelningsmetoder.

7. Hantera spelarens kontroller

Tro det eller inte, det finns också metoder du kan använda för att manipulera HTML5-videospelarens kontroller. Det kan alla göras i JavaScript genom att dra från en uppsättning öppna metoder. Det finns alldeles för många att lista här, men försök att skumma genom W3C media element docs för mer information.

För att ge dig en allmän uppfattning har Opera dev blogg lagt upp några korta handledning som är bra för nybörjare. Även om du aldrig har plockat upp JavaScript eller jQuery innan, är det fortfarande enkelt att slå marken med den här. Du kan ringa på specifika attribut av videomediet, t.ex. dämpad eller aktuell tid. Då kan du utföra åtgärder (dimma bakgrunden, visningsannonser) baserat på dessa kriterier genom att manipulera DOM i jQuery.

Samma utvecklare i Opera-artikeln ger en fungerande demo av sin skriptade videospelare. Möjligheten att anpassa dina egna gränssnittskontroller är enastående. Det går bara för att visa hur kraftfull HTML5-video blir.

8. Konvertera videoformat

Detta är en annan stor fråga som sannolikt kommer att förvirra mindre tekniskt kunniga personer. Du vill bara få din webbplats upp och strömma och nu måste du hantera konverteringsvideo? Jo det är faktiskt inte allt så svårt.

För att hantera MP4 som är din största prioritet, kan du använda HandBrake som är en fri, öppen källkodslösning som körs på alla 3 stora operativsystem. Det kommer att stödja H.264 tillsammans med några andra codecs vilket gör detta till det bästa alternativet för freebie-användare. Om du har pengar till skalet måste jag rekommendera Xilisoft-omvandlaren som finns på Mac App Store för endast en livstidslicens på $ 40.

Det ser ut som WebM-rutten gör livet mycket enklare. Miro Video Converter är ett gratis verktyg för Windows och OS X som producerar stora WebM-filer av hög kvalitet. Det kan också göra Ogg Theora-kodningen vilket också kommer ut med ganska bra kvalitet.

9. Bygga en webbspelare

Videoformat med HTML5-specifikationer är fortfarande nya för utvecklare. Det finns öppna protokoll som bara väntar på att spelas med för att möjliggöra anpassade kontroller, reglage, ikoner för uppspelning / paus, etc. Om du känner dig djärv, kolla in den här handledningen om hur du gör din egen HTML5-spelare (publicerad på Splashnology).

Koden är lite intensiv för nykomlingar eftersom det kräver avancerad CSS-inriktning och lite formellt jQuery. Det finns andra ramar du kan bygga på som redan erbjuder en anpassad spelardesign. På samma sätt är denna slideshare-presentation en bra introduktion till att bygga en HTML5-videospelare.

Bygga en HTML5 Video Player

10. VideoJS-biblioteket

VideoJS är förmodligen min favoritlösning för HTML5-videospelare. Allt du behöver är deras självhäftade JavaScript och CSS stilark inkluderat någonstans i ditt dokument. Då skriver du standard HTML5 videokod med några ytterligare klasser för sköljning. Jag lade till deras provkod nedan:

Om du råkar köra en WordPress-blogg kan du också prova deras anpassade WP-plugin. Det kommer automatiskt att inkludera biblioteket js / css på sidor där du visar HTML5-video. Och du kan göra det inom en post- eller sidredigerare med hjälp av kortnummer (se här).

Slutsats

Jag hoppas att den här introduktionsguiden kan röra ditt intresse för webvideoens framtid. Med fler användare att vända sig till mobil är det viktigt att HTML5-standarder antas för dessa typer av media. Webben bör göras enklare så att utvecklare kan producera fullt stödda lösningar mycket snabbare. Vi skulle gärna höra dina idéer och förslag till framtiden för HTML5-video. Om du vill dela är du välkommen att lämna en kommentar i nedanstående diskussionsområde.