Vigtigste Smartphones Tilføjelse af video til dit websted med HTML5

Tilføjelse af video til dit websted med HTML5



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

Tilføjelse af video til dit websted med HTML5

NYHEDERonyHDRBack_Web-462x369

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 OGGH.264 (mp4)
Firefox 3.5+x
Chrome 3+
Safari 3+x
Opera 10.5+x
Internet Explorer 8xx
Internet Explorer 9x
iPhonex
Androidx

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:

AttributBeskrivelse
srcen gyldig URL til selve videofilen
automatisk afspilningen boolsk, der angiver, om videoen skal afspilles automatisk
kontrolelementeren boolsk, der angiver, at standardmediekontrollerne skal vises af browseren
løkkeen boolsk, der angiver, om videoen skal afspilles gentagne gange
forudindlæsningangiver 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:

  • ingen - angiver, at videoen ikke skal forudindlæses (da den sandsynligvis ikke kræves)
  • metadata - videoen kræves sandsynligvis ikke, men dens metadata (f.eks. dimensioner, varighed) er ønskelig
  • auto - informerer browseren om at forsøge at downloade hele videoen
  • (tom streng) - betyder det samme som auto
plakatURL'en til en billedfil, der skal vises, når der ikke findes nogen videodata
breddebredden af ​​videoen i CSS-pixels
højdehø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:

AttributBeskrivelse
srcen gyldig URL til selve mediefilen (i dette tilfælde video)
typetypen 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'
halvtangiver 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.

Interessante Artikler

Redaktørens Valg

Sådan slettes alle senere videoer på YouTube
Sådan slettes alle senere videoer på YouTube
https://youtu.be/9Wo9nO_8CqE YouTube-appen har en funktion til at gemme videoer og se senere. Det
Microsoft forbedrer brugergrænsefladen Favoritter i Edge-browseren
Microsoft forbedrer brugergrænsefladen Favoritter i Edge-browseren
Microsoft har annonceret en opdatering til brugergrænsefladen til favoritruden i Edge-browseren. Ud over den indstilling til rudefastgørelse, som vi tidligere har dækket, er der en ny træstil-visning og muligheden for at omarrangere poster direkte med træk-n-slip uden at åbne bogmærkehåndteringen. Ifølge virksomheden modtog de
Sådan rettes det, når en Discord-opdatering mislykkes
Sådan rettes det, når en Discord-opdatering mislykkes
Når Discord ikke opdaterer, er det normalt et forbindelsesproblem eller korrupte filer. Følg disse gennemprøvede trin for at få Discord opdateret og online igen.
Sådan rettes en Xbox-controller, der blinker eller blinker
Sådan rettes en Xbox-controller, der blinker eller blinker
Normalt har en blinkende controller en nem løsning. Her er, hvordan du kan få din til at holde op med at blinke eller blinke med nogle få trin.
Final Cut Pro X: hvorfor tager det så lang tid at gengive video?
Final Cut Pro X: hvorfor tager det så lang tid at gengive video?
Jeg er en fan af Final Cut Pro X eller FCPX, som det er kendt for sine fans. Det er en opdateret version af den meget elskede Final Cut Pro, som en enorm mængde professionelt video arbejder på
Sådan ændres størrelsen på rullebjælkens bredde i Windows 8.1
Sådan ændres størrelsen på rullebjælkens bredde i Windows 8.1
I Windows 8 overraskede Microsoft mange brugere ved at fjerne de klassiske indstillinger for udseende, der var i Windows i årevis. Microsoft besluttede at slette brugergrænsefladen for alle avancerede indstillinger for udseende sammen med de klassiske og grundlæggende temaer i Windows 8 og 8.1. I denne vejledning ser vi på, hvordan du ændrer rullebjælkens bredde
Fix: Windows 10 Sticky Notes-app synkroniserer ikke noter
Fix: Windows 10 Sticky Notes-app synkroniserer ikke noter
Her er de løsninger, du kan prøve, hvis synkroniseringsfunktionen ikke fungerer korrekt i den moderne Sticky Notes-app til Windows 10.