HTML5 - Avancerad video

Märkt video de HTML5 Vi har många alternativ för att berika våra dokument för att göra våra sidor rikare när det gäller visuellt och hörbart innehåll, tack vare att vi inte är beroende av plugins eller tredje part kan vi manipulera våra videor på ett sätt som gör att vi kan uppnå våra mål utan problem.
Video förinspelning
När vi arbetar med tyngre innehåll som videor måste vi vara mycket försiktiga med att inte mätta sidan, eftersom detta istället för att berika vårt innehåll kan uppnå motsatt effekt och sakta ner vårt dokument och ge en dålig surfupplevelse.
Förutse detta i HTML5 I videoelementet tillåter det oss att ladda om videon som ska visas på detta sätt, se till att vi har lite innehåll innan vi visar det för användaren och därmed inte avbryter deras upplevelse på vår sida.
För detta kan vi använda följande attribut:
förspänning - är det attribut som gör att vi kan använda videoförladdningsfunktionen.
ingen - videon laddas inte förrän användaren spelar den.
metadata - endast metadata för videon kommer att förinstalleras, det vill säga detaljerna i videon som storlek, varaktighet etc.
bil - webbläsaren kan ladda ner videon automatiskt som den anser nödvändig, webbläsaren kan till och med ignorera denna instruktion, det är standardbeteendet.
Låt oss se ett litet kodexempel på hur du använder den här egenskapen:

 Exempel Video kan inte visas Video kan inte visas 

I följande bild ser vi hur webbläsaren tolkar samtalet till videon med hjälp av attributen ingen Y metadata:

Det är viktigt att betona att vi måste använda en balanserad användning av den här egenskapen, eftersom vi kan konsumera resurser i onödan såväl som bandbredd, vilket också kan leda till en dålig upplevelse av att använda vår sida.
Placera en omslagsbild för din video
Eftersom videon är en viktig del av vår sida kan vi inte låta den visa den första ramen eftersom den kan bryta motivet, för detta kan vi placera en omslagsbild eller Platshållare, med detta kan vi till och med styra vilken bild som ska visas om användaren ännu inte har gett ordern att spela upp videon, för detta kan vi använda affischattributen, för detta kan vi se följande kodexempel.

 Exempel på video kan inte visas  

Låt oss nu se lite hur webbläsaren tolkar detta och hur användaren skulle se det:

FÖRSTORA

För att uppnå denna effekt var det som gjordes en skärmdump av videon, sedan med fastigheten affisch vi kan placera denna bild som omslaget till vårt videoelement.
Med detta avslutar vi denna handledning, med dessa nya egenskaper kan vi på ett bättre sätt styra hur vi kan visa våra videor och på så sätt skapa nya, rikare och mer interaktiva dokument.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng