I den første av bloggene hans for PC Pro , webutvikler Ian Devlin avslører hvordan du kan legge inn video på nettstedet ditt med HTML5
hvem er dette telefonnummeret tilhører
Sannsynligvis den største og mest omtalte funksjonen i HTML5 er innebygd video. Foreløpig er den eneste metoden for å legge til videoinnhold på nettstedet ditt med et tredjeparts plugin som Flash, QuickTime eller RealPlayer. Med begynnelsen av HTML5 og videoelementet vil alt dette endres, med videostøtte som håndteres av nettleseren, og fjerner behovet for tredjepartsstøtte.
Flere nettlesere tilbyr allerede støtte for HTML5. Her skal vi avsløre hvordan du kan legge inn pluginfri video på nettstedet ditt og problemene du vil møte.
Filtyper og nettleserkompatibilitet
Til å begynne med tar vi en kort titt på de forskjellige videofiltypene som støttes i HTML5. Dette er Theora OGG og H.264 (.mp4). Ulike nettlesere støtter forskjellige typer, og noen støtter ingen i det hele tatt. Følgende tabell indikerer dette:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Kodeker og andre tekniske problemer
HTML5 i seg selv spesifiserer ikke en videokodek som skal brukes, og dette har ført til argumenter om hvilken det beste å bruke på nettet . Så for å dekke alle nettlesere, må vi støtte begge kodeker.
Og så er det selvfølgelig Internet Explorer. For øyeblikket støtter ingen av de utgitte versjonene av Internet Explorer videoelementet, og det kreves fortsatt et programtillegg for å spille av video. Dette vil endres med utgivelsen av Internet Explorer 9 (sannsynligvis tidlig neste år), når H.264 vil bli støttet, sammen med mange andre HTML5-godbiter.
Hvis du lurer på hvordan, kan du konvertere videofilene dine til OGG (du kan lese mer om Theora OGG-typen på TheoraCookbook ) filer ved hjelp av Miro Video Converter .
For ytterligere detaljert informasjon om videoelementet og kodene, gå til dykk ned i html5: video på nettet av Mark Pilgrim.
HTML5-kode
Nå går vi over til den faktiske HTML5-koden og hvordan vi kan få tingen til å fungere. HTML5 gir oss to nye elementer som vi kan bruke til å legge til video på websidene våre: elementet, som vi allerede har nevnt, og element. La oss se på hver av disse etter tur.
Elementet
Videoelementet kan ha følgende attributter:
| Egenskap | Beskrivelse |
|---|---|
| src | en gyldig URL til selve videofilen |
| Auto spill | en boolsk som indikerer om videoen skal spilles av automatisk |
| kontroller | en boolsk som indikerer at standard mediekontroller skal vises av nettleseren |
| Løkke | en boolsk som indikerer om videoen skal spilles gjentatte ganger |
| forhåndslast | indikerer til nettleseren om det er påkrevd med forhåndsinnlasting av selve videoen, eller om metadata alene er alt som trengs. Mulige verdier er:
|
| plakat | URL-en til en bildefil som skal vises når ingen videodata er tilgjengelig |
| bredde | bredden på videoen, i CSS-piksler |
| høyde | høyden på videoen, i CSS-piksler |
Fra dette kan det sees hvor enkelt det er å legge inn en OGG-video på nettstedet ditt ved hjelp av videoelementet alene:
Det er egentlig alt det er.
Enhver nettleser som støtter Theora OGG-formatet, skal nå vise og spille av videoen uten videre. Selvfølgelig er det ikke så enkelt som det, for som vi har sett fra tabellen ovenfor, ville koden bare fungere i Firefox, Chrome og Opera. Så vi må også ha en tilbakeslag til H.264. Dette kan oppnås ved hjelp av element, som lar oss definere flere mediekilder for videoelementet.
hvordan du ser på en venns steam-ønskeliste
Elementet
Kildeelementet har følgende attributter:
| Egenskap | Beskrivelse |
|---|---|
| src | en gyldig URL til selve mediefilen (i dette tilfellet video) |
| type | typen mediefil som må være en MIME-type , f.eks. type='video/ogg' indikerer at det er en Theora OGG-video, og du kan også tilby MIME-kodeken for å hjelpe nettleseren til å bestemme hvordan du skal spille av videoen ved å bruke type='video/ogg; codecs='theora, vorbis'. |
| halv | gir medieressursens tiltenkte mediatype og må være gyldig mediespørsmål , f.eks. media='handheld' indikerer at videoen er egnet for håndholdte enheter eller media='all and (min-device-height:720px)' som indikerer at videoen er passende for skjermer på 720 piksler eller mer. |
Merk: at kildeelementet er ugyldig og har en startkode, men ingen lukkekode
Det mest nyttige med kildeelementet er at vi kan bruke det til å stable de forskjellige filtypene, slik at nettleseren kan prøve hver i sin tur til den finner en den kan spilles av.
Bruke og sammen
For å stable videoer i de forskjellige typene i videoelementet, skriver vi inn koden som følger:
Your browser does not support the video element.
Ovennevnte kode vil nå fungere i alle nettlesere unntatt Internet Explorer, som vil vise meldingen angitt ovenfor.
Du kan teste dette selv ved å se HTML5 Test Video-siden, som inneholder en prøvevideo av en sommerfugl i både Theora OGG og MP4-format, så hvis du ser på dette i Firefox, Chrome, Safari, Opera eller på iPhone eller en Android-håndsett, du bør kunne se det.
De skarpe knivene blant dere vil nå legge merke til at vi kan dra nytte av denne stablingen og ha et tilbakefall til Flash (eller et annet plugin) nederst i stedet for å vise en beklager at du ikke kan se denne videomeldingen ved å bruke følgende kode :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Konklusjon
Som med de fleste HTML5-elementer, er nettleserstøtte for kilde- og videoelementene for øyeblikket ujevn. Det pågår for øyeblikket en stor debatt om kildeelementet vil drepe bruken av Flash som den mest populære metoden for å legge til videoinnhold på nettsteder. Jeg er ikke sikker på at det vil drepe Flash fullstendig, men likevel synes jeg det er greit å si at det er kommet for å bli og vil gi webutviklere en renere, enklere tilnærming til å legge inn video.
