I den første af hans blogs til PC Pro , web-udvikler Ian Devlin afslører, hvordan man integrerer video på dit websted med HTML5
hvordan man installerer pvr på kodi
Sandsynligvis den største og mest omtalte funktion i HTML5 er integreret video. I øjeblikket er den eneste metode til at tilføje videoindhold til dit websted med et tredjeparts plugin som Flash, QuickTime eller RealPlayer. Med begyndelsen af HTML5 og videoelementet vil alt dette ændre sig, idet videosupport håndteres af webbrowseren og fjerner behovet for tredjeparts support.
Flere webbrowsere tilbyder allerede support til HTML5. Her vil vi afsløre, hvordan du kan integrere plugin-fri video på dit websted og de problemer, du står over for.
Filtyper og browserkompatibilitet
Til at begynde med kigger vi kort på de forskellige videofiltyper, der understøttes i HTML5. Disse er Theora OGG og H.264 (.mp4). Forskellige browsere understøtter forskellige typer, og nogle understøtter slet ingen. Følgende tabel viser 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 | ✓ |
Codecs og andre tekniske problemer
HTML5 selv angiver ikke en videokodec, der skal bruges, og dette har ført til argumenter for, hvilken der er det bedste at bruge til internettet . Så for at dække alle browsere er vi nødt til at understøtte begge codecs.
Og så er der selvfølgelig Internet Explorer. I øjeblikket understøtter ingen af de frigivne versioner af Internet Explorer videoelementet, og der kræves stadig et plugin for at afspille video. Dette vil ændre sig med frigivelsen af Internet Explorer 9 (sandsynligvis i starten af næste år), når H.264 understøttes sammen med mange andre HTML5-godbidder.
Hvis du undrer dig over, hvordan du kan konvertere dine videofiler til OGG (du kan læse mere om Theora OGG-typen på TheoraCookbook ) filer ved hjælp af Miro Video Converter .
For yderligere detaljerede oplysninger om videoelementet og codecs, gå over til dykke ned i html5: video på nettet af Mark Pilgrim.
HTML5-kode
Nu går vi videre til den aktuelle HTML5-kode, og hvordan vi kan få tingene til at fungere. HTML5 giver os to nye elementer, som vi kan bruge til at tilføje video til vores websider: element, som vi allerede har nævnt, og element. Lad os se på hver af disse igen.
Elementet
Videoelementet kan have følgende attributter:
| Attribut | Beskrivelse |
|---|---|
| src | en gyldig URL til selve videofilen |
| automatisk afspilning | en boolsk, der angiver, om videoen skal afspilles automatisk |
| kontrolelementer | en boolsk, der angiver, at standardmediekontrollerne skal vises af browseren |
| løkke | en boolsk, der angiver, om videoen skal afspilles gentagne gange |
| forudindlæsning | angiver over for browseren, om forebyggende download af selve videoen er påkrævet, eller om metadata alene er alt, hvad der er nødvendigt. Mulige værdier er:
|
| plakat | URL'en til en billedfil, der skal vises, når der ikke findes nogen videodata |
| bredde | bredden af videoen i CSS-pixels |
| højde | højden af videoen i CSS-pixels |
Herfra kan det ses, hvor let det er at integrere en OGG-video på dit websted ved hjælp af videoelementet alene:
Det er virkelig alt der er ved det.
Enhver browser, der understøtter Theora OGG-formatet, skal nu med succes vise og afspille din video uden yderligere ado. Selvfølgelig er det ikke så let som det, for som vi har set fra tabellen ovenfor, ville koden kun fungere i Firefox, Chrome og Opera. Så vi skal også have et tilbagefald til H.264. Dette kan opnås ved hjælp af element, som giver os mulighed for at definere flere mediekilder til videoelementet.
hvordan man tilføjer nye skrifttyper til Google Docs
Elementet
Kildeelementet har følgende attributter:
| Attribut | Beskrivelse |
|---|---|
| src | en gyldig URL til selve mediefilen (i dette tilfælde video) |
| type | typen af mediefilen, der skal være en MIME-type , f.eks. type='video/ogg' angiver, at det er en Theora OGG-video, og du kan også give MIME-codec til at hjælpe browseren med at beslutte, hvordan videoen skal afspilles ved hjælp af type='video/ogg; codecs='theora, vorbis' |
| halvt | angiver den tilsigtede mediatype for medieressourcen og skal være gyldig medieforespørgsel , f.eks. media='handheld' angiver, at videoen er egnet til håndholdte enheder eller media='all and (min-device-height:720px)' hvilket indikerer, at videoen er passende til skærme på 720 pixels eller mere. |
Bemærk: at kildeelementet er ugyldigt og har et starttag, men ikke et afsluttende tag
Det mest nyttige ved kildeelementet er, at vi kan bruge det til at stable de forskellige filtyper, så browseren kan prøve hver efter hinanden, indtil den finder en, som den kan afspille.
Brug og sammen
For at stable videoer i de forskellige typer inden for videoelementet, indtaster vi koden som følger:
Your browser does not support the video element.
Ovenstående kode fungerer nu i alle browsere undtagen Internet Explorer, som viser den meddelelse, der er angivet ovenfor.
Du kan teste dette selv ved at se siden HTML5 Test Video, som indeholder en prøvevideo af en sommerfugl i både Theora OGG- og MP4-format, så hvis du ser dette i Firefox, Chrome, Safari, Opera eller på iPhone eller en Android-håndsæt, du skal kunne se det.
De skarpe knive blandt jer vil nu bemærke, at vi kan drage fordel af denne stabling og have et tilbagefald til Flash (eller et andet plugin) i bunden i stedet for at vise en ked af, at du ikke kan se denne videobesked ved hjælp af følgende kode :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Konklusion
Som med de fleste HTML5-elementer er browserstøtte til kilde- og videoelementerne i øjeblikket ujævn. Der er også en stor debat i øjeblikket om, hvorvidt kildeelementet vil dræbe brugen af Flash som den mest populære metode til at tilføje videoindhold til websteder. Jeg er ikke sikker på, at det vil dræbe Flash fuldstændigt, men ikke desto mindre synes jeg det er rimeligt at sige, at det er kommet for at blive og vil give webudviklere en renere og lettere tilgang til at integrere video.
