HTML5-videoer 10 ting designere behøver at vide

HTML5-revolutionen er spændende webdesignere fra alle områder af kloden. De nye specifikationer understøtter snesevis af elementer og attributter til at bygge semantiske hjemmesider. Disse nye funktioner omfatter multimedietags til lyd- og videoformater.

I de forløbne år er en Flash-baseret medieafspiller mere end tilstrækkelig til streaming på internettet, og denne teknologi er stadig nødvendig for at understøtte legacy browsere. Men heldigvis har moderne standarder avanceret, og inddragelsen af HTML5-video åbner døre for snesevis af nye muligheder.

I denne vejledning vil jeg gerne tilbyde en introduktion til HTML5 video til internettet. Det vil tage en vis praksis for at forstå den indfødte in-browser-afspiller og alle dens funktionaliteter. Og den bedste måde at blive bekendt på er at dykke i hovedet først!

1. Typer af medier

Når du arbejder med en flash-videoafspiller, er det alt for almindeligt at forbinde alle videoformater i .flv. Selvom dette virker, kan de fleste FLV-filer ikke bevare kvalitet overalt i nærheden af de mere avancerede filformater / codecs. Der er 3 vigtige videotyper, som understøttes af HTML5: MP4, WebM og Ogg / Ogv. MPEG-4-filtypen er generelt kodet i H.264, som giver mulighed for afspilning i tredjeparts Flash-afspillere. Det betyder, at du ikke behøver at holde en .flv-video kopi for at understøtte en back-up-metode! WebM og Ogg er to meget nyere filtyper relateret til HTML5 video. Ogg bruger Theora-kodning, som er baseret på open source-standard lydfilformat. Disse kan gemmes med en .ogg eller .ogv udvidelse.

WebM er et projekt udgivet af Google, som du kan læse mere om på WebM Projects hjemmeside. Formatet understøttes allerede af Opera, Google Chrome, Firefox 4+ og senest Internet Explorer 9. Det er stadig ukendt af de fleste web-fagfolk, men WebM er det førende videoformat i fremtiden for webvideo.

2. Browser Support

Så hvilken af disse filtyper har du brug for til din hjemmeside? Godt ideelt ville alle 3 være gode, da de giver det fulde supportspektrum. Men det er ikke realistisk, og i virkeligheden kan du dække alle baserne med kun to af dem. Her er en oversigt over hvad der virker for hver browser:

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

Hvis du husker, tidligere nævnte jeg, at de fleste flash-videospillere vil understøtte MP4-filer, så længe de er kodet i H.264. Som sådan vil hver af disse browsere indlejre MP4 + Flash som en endelig udvej. Det betyder, at du kun skal oprette to forskellige videoformater til understøttelse af alle browsere. MP4 til Safari / IE9 og et valg mellem WebM eller Ogg for resten.

Efter min mening anbefaler jeg stærkt at holde fast i WebM formatet. Det har nogle store navne bag projektet (nemlig Google) og har fået en masse trækkraft i HTML5-fællesskabet. Ogg / Ogv vil blive understøttet, men vil sandsynligvis tabe popularitet i WebMs mindre filstørrelser. Du kan læse et relateret stykke på fremtiden for video på nettet skrevet af Sean Golliher.

3. Embedding Simple HTML5 Videos

Lad os nu se på den syntakse, der kræves for at indlejre nogle eksempler. Alt, hvad vi behøver, er HTML5-videotaggen til at referere til hver filmwebadresse.

Bemærk det kontroller og automatisk afspilning attributter behøver ikke at indstilles med nogen værdier. Jeg omfattede også a plakat attribut som preloads et billede over videospiller før streaming. Dette er et almindeligt eksempel med mange webspillere.

Vi tilbyder både MP4 og WebM formater internt til videoelementet. Hvis ingen af disse kan indlæses, viser vi en fejl for brugeren at opdatere deres browser.

4. Tilbyd en Flash Fallback

Eksemplet ovenfor er perfekt til alle standarder, der er kompatible med web browsere. Men vi skal også overveje, at verden ikke altid er i spidsen for teknologien. Vi skal støtte brugere på ældre versioner af Safari, Mozilla Firefox og især Internet Explorer.

Den bedste måde at opnå dette på er gennem en Flash-afspiller. Disse kan tilføjes ved hjælp af indlejre eller objekt tags til henvisning til en tredjeparts .swf-fil. JW Player og Flowplayer er to gratis open source-løsninger, du kan overveje. Men også tjek premium videospilere på ActiveDen, som kan gå så billigt som $ 15 - $ 20.

Lad os nu justere koden ovenfor for at inkludere en Flashback-afspiller, der understøtter næsten alle browsere, der eksisterer.

5. Mobile Device Support

Dette emne er stadig meget debatteret, da mobilindustrien er så ung. Apple kom ud med støtte til MP4 på Mac og iOS-enheder. Dette betyder at du kan streame .mp4-videofiler på din iPad, iPhone eller iPod Touch i standard video-UI. Dette dækker meget af markedsandelen.

For nylig har Android-enheder haft en vanskelig tid på at nå det samme niveau af support. Men Google har endelig vedtaget .mp4 web streaming, som nu kapitaliserer på næsten alle mobile brugere. Og da Flash ikke er en mulighed her, er MP4 den bedste løsning til rådighed. Det er derfor, du vil indlejre .mp4-koden først, så iOS-enheder kan genkende filen straks.

6. Safari User Agent

En fejl, der skal nævnes, er en eksisterende mellem Flash-afspillere og native HTML5 .mp4 streaming på Safari. Da browseren kan understøtte begge filer, har du muligvis problemer med at få HTML5-videostreamen i stedet for Flash. Men takket være dette store blogindlæg på TUAW er det nemt at ændre din browserbrugeragent.

Dette vil tvinge din webside til at genkende browseren som kører på en anden enhed. Mest sandsynligt ville du vælge iPad, som IKKE understøtter nogen Flash afspilning. Dette er det eneste store problem, du kan lide, når du tester MP4 native & flash afspilningsmetoder.

7. Administrer afspillerkontroller

Tro det eller ej, der er også metoder, du kan bruge til at manipulere HTML5 video player controls. Det kan alle gøres i JavaScript ved at trække fra et sæt åbne metoder. Der er alt for mange til at liste ud her, men prøv at skumme gennem W3C medieelementdokumenterne for flere detaljer.

For at give dig en generel ide, har Opera dev blog skrevet nogle korte tutorials, som er gode til nybegyndere. Selvom du aldrig har hentet JavaScript eller jQuery før, er det stadig nemt at slå jorden i gang med denne. Du kan ringe på specifikke attributter af videomediet som f.eks dæmpet eller nuværende tid. Derefter kunne du udføre handlinger (dæmp baggrunden, displayannoncer) baseret på disse kriterier ved at manipulere DOM'en i jQuery.

Den samme udvikler i Opera-artiklen giver en fungerende demo af deres scripted videospiller. Muligheden for at tilpasse dine egne brugerkontroller er udestående. Det går bare for at vise, hvor kraftig HTML5 video bliver.

8. Videoformatkonvertering

Dette er et andet stort problem, som sandsynligvis vil forvirre mindre tech-savvy individer. Du vil bare få dit websted op og streaming, og nu skal du håndtere konverteringsvideoer? Nå er det faktisk ikke så svært.

For at håndtere MP4, som er din største prioritet, kan du bruge HandBrake, som er en gratis, open source-løsning, der kører på alle 3 store operativsystemer. Det understøtter H.264 sammen med et par andre codecs, hvilket gør dette til den bedste løsning for freebie-brugere. Hvis du har penge til skal ud, skal jeg anbefale Xilisoft konverter, som er på Mac App Store for kun en $ 40 levetidslicens.

Det ser ud som, at WebM-ruten gør livet meget lettere. Miro Video Converter er et gratis værktøj til Windows og OS X, der producerer store WebM-filer af høj kvalitet. Det kan også gøre Ogg Theora-kodningen, som også kommer ud med ganske stor kvalitet.

9. Opbygning af en Web Player

Videoformater med HTML5-specifikationer er stadig nye for udviklere. Der er åbne protokoller, der bare venter på at blive afspillet med for at tillade brugerdefinerede kontroller, skydere, afspilning / pause ikoner osv. Hvis du føler dig fed, skal du tjekke denne vejledning om, hvordan du laver din egen HTML5-afspiller (offentliggjort på Splashnology).

Koden er lidt intens for nytilkomne, da det kræver avanceret CSS-målretning og en smule formelt jQuery. Der er andre rammer, du kan bygge på, som allerede tilbyder et tilpasset spiller design. Tilsvarende er denne slideshare præsentation en god introduktion til at opbygge en HTML5 videospiller.

Opbygning af en HTML5 Video Player

10. VideoJS Bibliotek

VideoJS er nok min favorit løsning til HTML5 videospillere. Alt du behøver, er deres selvbetjente JavaScript og CSS stilark inkluderet et eller andet sted i dit dokument. Derefter skriver du standard HTML5 videokoden med nogle yderligere klasser til skinning. Jeg tilføjede deres prøvekode nedenfor:

Hvis du tilfældigvis kører en WordPress-blog, kan du også prøve deres brugerdefinerede WP-plugin. Det vil automatisk inkludere biblioteket js / css på sider, hvor du viser HTML5 video. Og du kan gøre dette inden for enhver post eller side editor med kortnumre (se her).

Konklusion

Jeg håber, at denne indledende vejledning kan røre din interesse for fremtiden for webvideo. Når flere brugere vender sig til mobil, er det vigtigt, at der vedtages HTML5-standarder for disse typer medier. Weben skal gøres enklere, så udviklere kan producere fuldt understøttede løsninger meget hurtigere. Vi vil gerne høre dine ideer og forslag til fremtiden for HTML5 video. Hvis du gerne vil dele, er du velkommen til at skrive en kommentar i nedenstående diskussionsområde.