HTML5 - Geavanceerde video

Getagd video de HTML5 We hebben veel opties om onze documenten te verrijken, om onze pagina's rijker te maken in termen van visuele en auditieve inhoud, dankzij het feit dat we niet afhankelijk zijn van plug-ins of derden, kunnen we onze video's manipuleren op een manier die ons in staat stelt om onze doelstellingen zonder problemen te bereiken.
Video vooraf laden
Bij het werken met zwaardere inhoud zoals video's, moeten we heel voorzichtig zijn om de pagina niet te verzadigen, omdat dit in plaats van onze inhoud te verrijken het tegenovergestelde effect kan bereiken en ons document kan vertragen en een slechte browse-ervaring kan opleveren.
Hierop anticiperen HTML5 In het video-element kunnen we de video vooraf laden die op deze manier moet worden weergegeven, zodat we zeker weten dat we een beetje inhoud hebben voordat we deze aan de gebruiker laten zien en zo hun ervaring op onze pagina niet onderbreken.
Hiervoor kunnen we de volgende attributen gebruiken:
voorladen - is het attribuut waarmee we de functionaliteit voor het vooraf laden van video's kunnen gebruiken.
geen - de video wordt pas geladen als de gebruiker deze afspeelt.
metagegevens - alleen de metadata van de video worden vooraf geladen, dat wil zeggen de details van de video zoals grootte, duur enz.
auto - de browser kan de video automatisch downloaden als hij dat nodig acht, de browser kan deze instructie zelfs negeren, dit is het standaardgedrag.
Laten we een klein codevoorbeeld bekijken van het gebruik van deze eigenschap:

 Voorbeeld Video kan niet worden weergegeven Video kan niet worden weergegeven 

In de volgende afbeelding zien we hoe de browser de oproep naar de video interpreteert met behulp van de attributen geen Y metagegevens:

Het is belangrijk om te benadrukken dat we een evenwichtig gebruik van deze eigenschap moeten maken, omdat we onnodig bronnen en bandbreedte kunnen verbruiken, wat zich ook zou kunnen vertalen in een slechte ervaring bij het gebruik van onze pagina.
Plaats een omslagfoto voor je video
Omdat de video een belangrijk onderdeel van onze pagina is, kunnen we het eerste frame niet laten zien omdat het het ontwerp kan breken, hiervoor kunnen we een omslagafbeelding of tijdelijke aanduiding, hiermee kunnen we zelfs bepalen welke afbeelding wordt weergegeven als de gebruiker nog geen opdracht heeft gegeven om de video af te spelen, hiervoor kunnen we de posterattributen gebruiken, hiervoor kunnen we het volgende codevoorbeeld zien.

 Voorbeeld Video kan niet worden weergegeven  

Laten we nu eens kijken hoe de browser dit interpreteert en hoe de gebruiker het zou zien:

VERGROTEN

Om dit effect te bereiken, werd een screenshot van de video gemaakt en vervolgens met de eigenschap poster we kunnen deze afbeelding plaatsen als de omslag van ons video-element.
Hiermee sluiten we deze tutorial af, met deze nieuwe eigenschappen kunnen we op een betere manier bepalen hoe we onze video's kunnen tonen en op deze manier nieuwe, rijkere en meer interactieve documenten kunnen creëren.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven