HTML5-videoer 10 ting designere trenger å vite

HTML5-revolusjonen er spennende webdesignere fra alle deler av verden. De nye spesifikasjonene støtter dusinvis av elementer og attributter for å bygge semantiske nettsteder. Disse nye funksjonene inkluderer multimedia-koder for lyd og videoformater.

I de siste årene er en Flash-basert mediespiller i mer enn nok for streaming på nettet, og denne teknologien er fortsatt nødvendig for å støtte eldre nettlesere. Men heldigvis har moderne standarder avansert og inkludering av HTML5-video åpner dører for dusinvis av nye muligheter.

I denne veiledningen vil jeg gjerne tilby en introduksjon til HTML5-video for Internett. Det vil ta litt øvelse for å forstå den innfødte nettleseren og all dens funksjonalitet. Og den beste måten å bli kjent med er dykking i hodet først!

1. Typer medier

Når du jobber med en flash-videospiller, er det altfor vanlig å knytte alle videoformater i .flv. Mens dette gjør det, kan de fleste flv-filer ikke beholde kvalitet hvor som helst i nærheten av de mer avanserte filformatene / codecs. Det er 3 viktige videotyper som støttes av HTML5: MP4, WebM og Ogg / Ogv. MPEG-4-filtypen er vanligvis kodet i H.264 som gjør det mulig for avspilling i tredjeparts Flash-spillere. Dette betyr at du ikke trenger å beholde en .flv video kopi for å støtte en tilbakebetaling metode! WebM og Ogg er to mye nyere filtyper relatert til HTML5 video. Ogg bruker Theora-kodingen som er basert på åpen kildekode-standard lydfilformat. Disse kan lagres med en .ogg eller .ogv-utvidelse.

WebM er et prosjekt utgitt av Google som du kan lese mer om på WebM Projects nettsted. Formatet støttes allerede av Opera, Google Chrome, Firefox 4+ og senest Internet Explorer 9. Det er fortsatt ukjent av de fleste webprofessorer, men WebM er det ledende videoformatformatet i fremtiden for webvideo.

2. Nettleserstøtte

Så hvilken av disse filtyper trenger du for nettstedet ditt? Vel idealt ville alle 3 være gode da de gir hele støttespekteret. Likevel er dette ikke realistisk, og faktisk kan du dekke alle basene med bare to av dem. Her er en oversikt over hva som fungerer for hver nettleser:

• 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, nevnte jeg at de fleste flash-videospillere vil støtte MP4-filer så lenge de er kodet i H.264. Som sådan vil hver av disse nettleserne legge inn MP4 + Flash som en endelig utvei. Dette betyr at du bare trenger å opprette to forskjellige videoformater for å støtte alle nettlesere. MP4 for Safari / IE9 og et valg mellom WebM eller Ogg for resten.

Etter min mening anbefaler jeg på det sterkeste å stikke med WebM-formatet. Det har noen store navn bak prosjektet (nemlig Google) og har fått mye trekkraft i HTML5-fellesskapet. Ogg / Ogv vil bli støttet, men vil mest sannsynlig tape ut i popularitet til WebMs mindre filstørrelser. Du kan lese et relatert stykke på fremtiden for video på nettet skrevet av Sean Golliher.

3. Inkludering Enkle HTML5-videoer

La oss nå se på syntaksen som kreves for å legge inn noen prøvekode. Alt vi trenger er HTML5-videotaggen for å referere til hver filmadresser.

Legg merke til kontroller og Auto spill attributter trenger ikke settes med noen verdier. Jeg inkluderte også a plakat attributt som laster inn et bilde over videospilleren før streaming. Dette er en vanlig forhåndsvisning med mange webspillere.

Vi tilbyr både MP4 og WebM formater intern til videoelementet. Hvis ingen av disse kan lastes, viser vi en feil for brukeren å oppdatere nettleseren sin.

4. Tilbyr en Flash Fallback

Eksemplet ovenfor er perfekt for alle nettlesere som er kompatible med nettverket. Likevel må vi også vurdere at verden ikke alltid er i toppmoderne teknologi. Vi må støtte brukere på eldre versjoner av Safari, Mozilla Firefox, og spesielt Internet Explorer.

Den beste måten å oppnå dette på er gjennom en Flash-fallback-spiller. Disse kan legges til ved hjelp av embed eller gjenstand tags for å referere til en tredjeparts .swf-fil. JW Player og Flowplayer er to gratis open source-løsninger du kan vurdere. Men også sjekke ut premium videospillere på ActiveDen som kan gå så billig som $ 15- $ 20.

La oss nå tilpasse koden ovenfor for å inkludere en Flashback-spilleren som støtter nesten alle nettlesere som eksisterer.

5. Støtte for mobilenhet

Dette emnet er fortsatt høyt debatt siden mobilindustrien er så ung. Apple kom ut med støtte for MP4 på Mac og iOS-enheter. Dette betyr at du kan importere .mp4-videofiler på din iPad, iPhone eller iPod Touch i standard video-brukergrensesnitt. Dette dekker mye av markedsandelen.

Nylig har Android-enheter hatt en vanskelig tid å komme til samme nivå av støtte. Men Google har endelig vedtatt .mp4 web streaming som nå kapitaliserer på nesten alle mobile brukere. Og siden Flash ikke er et alternativ her, er MP4 den beste løsningen tilgjengelig. Dette er grunnen til at du vil legge inn .mp4-koden først slik at iOS-enheter kan gjenkjenne filen umiddelbart.

6. Safari Brukeragent

En feil som må nevnes er en eksisterende mellom Flash-spillere og native HTML5 .mp4 streaming på Safari. Siden nettleseren kan støtte begge filene, kan det hende du har problemer med å få HTML5-videostrømmen i stedet for Flash. Men takket være dette flotte blogginnlegget på TUAW er det enkelt å endre brukeren til å surfe.

Dette vil tvinge nettsiden din til å gjenkjenne nettleseren som kjører på en annen enhet. Mest sannsynlig vil du velge iPad, som IKKE støtter noen avspilling av Flash. Dette er det eneste store problemet du kan komme inn i når du tester MP4 innfødte og flashavspillingsmetoder.

7. Administrer spillerkontroll

Tro det eller ikke, det finnes også metoder du kan bruke til å manipulere HTML5 videospiller kontroller. Det kan alle gjøres i JavaScript ved å trekke fra et sett med åpne metoder. Det er alt for mange til å liste ut her, men prøv å skumme gjennom W3C-medieelementdokumentene for mer informasjon.

For å gi deg en generell ide, har Opera dev blog lagt ut noen korte opplæringsprogrammer som er gode for nybegynnere. Selv om du aldri har plukket opp JavaScript eller jQuery før, er det fortsatt enkelt å slå bakken i gang med denne. Du kan ringe på bestemte attributter av videomediet, for eksempel dempet eller nåværende tid. Da kan du utføre handlinger (dim bakgrunnen, visningsannonser) basert på disse kriteriene ved å manipulere DOM i jQuery.

Den samme utvikleren i Opera-artikkelen gir en fungerende demo av sin skriptede videospiller. Muligheten til å tilpasse dine egne brukergrensesnittkontroller er enestående. Det går bare for å vise hvor kraftig HTML5-video blir.

8. Videoformatkonvertering

Dette er et annet stort problem som sannsynligvis vil forvirre mindre teknologiske kunnskaper. Du vil bare få nettstedet ditt opp og streaming og nå må du håndtere konverteringsvideoer? Vel, det er egentlig ikke så vanskelig.

For å håndtere MP4 som er din største prioritet, kan du bruke HandBrake som er en gratis, åpen kildekode løsning som kjører på alle 3 store OS. Det vil støtte H.264 sammen med noen andre kodeker som gjør dette til det beste alternativet for freebie-brukere. Hvis du har penger til å skille ut, må jeg anbefale Xilisoft-omformer som er på Mac App Store for bare en $ 40 levetidslisens.

Det ser ut som WebM-ruten gjør livet enklere. Miro Video Converter er et gratis verktøy for Windows og OS X som produserer flotte WebM-filer av høy kvalitet. Det kan også gjøre Ogg Theora-kodingen som også kommer med ganske god kvalitet.

9. Bygg en web-spiller

Videoformater med HTML5-spesifikasjoner er fortsatt nye for utviklere. Det er åpne protokoller som bare venter på å bli spilt med for å tillate tilpassede kontroller, glidebrytere, spill / pause-ikoner, etc. Hvis du føler deg dristig, sjekk ut denne veiledningen om hvordan du lager din egen HTML5-spiller (publisert på Splashnology).

Koden er litt intens for nykommere da det krever avansert CSS-målretting og litt formell jQuery. Det er andre rammer du kan bygge på som allerede tilbyr en tilpasset spillerkonstruksjon. På samme måte er denne slideshare-presentasjonen en god introduksjon til å bygge en HTML5 videospiller.

Bygg en HTML5 Video Player

10. VideoJS-biblioteket

VideoJS er trolig min favoritt løsning på HTML5 videospillere. Alt du trenger er deres selvbetjente JavaScript og CSS stilark inkludert et sted i dokumentet. Deretter skriver du standard HTML5 videokode med noen ekstra klasser for skinning. Jeg la sin prøvekode nedenfor:

Hvis du tilfeldigvis kjører en WordPress-blogg, kan du også prøve deres egendefinerte WP-plugin. Det vil automatisk inkludere biblioteket js / css på sider der du viser HTML5 video. Og du kan gjøre dette fra alle post- eller sideditorer ved hjelp av kortkoder (se her).

Konklusjon

Jeg håper denne innledende veiledningen kan røre din interesse for fremtiden for webvideo. Med flere brukere å snu til mobil er det viktig at HTML5-standarder er vedtatt for disse typer media. Weben skal gjøres enklere, slik at utviklere kan produsere fullt støttede løsninger mye raskere. Vi vil gjerne høre dine ideer og forslag til fremtiden for HTML5-video. Hvis du vil dele, vær så snill å legge igjen en kommentar i diskusjonsområdet nedenfor.