HTML5 - Avanceret video

Mærket video de HTML5 Vi har mange muligheder for at berige vores dokumenter for at gøre vores sider rigere med hensyn til visuelt og auditivt indhold, takket være det faktum, at vi ikke er afhængige af plugins eller tredjeparter, kan vi manipulere vores videoer på en måde, der giver os mulighed for at nå vores mål uden problemer.
Video forudindlæsning
Når vi arbejder med tungere indhold som f.eks. Videoer, skal vi være meget forsigtige med ikke at mætte siden, da dette i stedet for at berige vores indhold kan opnå den modsatte effekt og bremse vores dokument og give en dårlig browseroplevelse.
Forventes dette i HTML5 I videoelementet giver det os mulighed for at forudindlæse videoen, der skal vises på denne måde, og sørge for, at vi har lidt indhold, før vi viser det til brugeren og dermed ikke afbryder deres oplevelse på vores side.
Til dette kan vi bruge følgende attributter:
forudindlæsning - er den attribut, der giver os mulighed for at bruge videoens forudindlæste funktionalitet.
ingen - videoen indlæses ikke, før brugeren afspiller den.
metadata - kun videoens metadata vil blive forudindlæst, det vil sige detaljerne i videoen, såsom størrelse, varighed osv.
bil - browseren kan downloade videoen automatisk, som den finder nødvendig, browseren kan endda ignorere denne instruktion, det er standardadfærden.
Lad os se et lille kodeeksempel på, hvordan du bruger denne ejendom:

 Eksempel Video kan ikke vises Video kan ikke vises 

I det følgende billede ser vi, hvordan browseren fortolker opkaldet til videoen ved hjælp af attributterne ingen Y metadata:

Det er vigtigt at understrege, at vi skal bruge en afbalanceret brug af denne ejendom, da vi kan forbruge ressourcer unødigt såvel som båndbredde, hvilket også kan udmønte sig i en dårlig oplevelse af at bruge vores side.
Placer et coverbillede til din video
Da videoen er en vigtig del af vores side, kan vi ikke lade den vise det første billede, da det kan bryde designet, for dette kan vi placere et forsidebillede eller pladsholder, med dette kan vi endda styre hvilket billede der skal vises, hvis brugeren endnu ikke har givet ordren til at afspille videoen, til dette kan vi bruge plakatattributterne, for dette kan vi se følgende kodeeksempel.

 Eksempelvideo kan ikke vises  

Lad os nu se lidt, hvordan browseren fortolker dette, og hvordan brugeren ville se det:

FORSTØRRE

For at opnå denne effekt var det, der blev gjort, et skærmbillede af videoen, derefter med ejendommen plakat vi kan placere dette billede som forsiden af ​​vores videoelement.
Med dette afslutter vi denne vejledning, med disse nye egenskaber kan vi på en bedre måde kontrollere den måde, hvorpå vi kan vise vores videoer og på denne måde skabe nye, rigere og mere interaktive dokumenter.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt