Multimedia afspelen in HTML5

Wanneer we op het web werken, moeten we ervoor zorgen dat elke gebruiker een bevredigende ervaring op onze pagina heeft, vaak betekent dit dat we aanvullende of minder efficiënte code moeten maken, allemaal om ervoor te zorgen dat onze pagina niet faalt.
Met de nieuwe standaard HTML we hebben de nieuwe multimedia-elementen, zoals audio en video, aangezien beide een gemeenschappelijke oorsprong hebben, kunnen we hun formaten evalueren en op deze manier weten of de browser de gespecificeerde bestanden kan afspelen.
CanPlayType-methode
De methode canPlayType Het stelt ons in staat om te weten of een idee te hebben of de browser het multimediabestand dat we aangeven wel of niet kan afspelen.
Door deze methode te gebruiken kunnen we 3 soorten reacties krijgen:

• “” leeg geeft dit aan dat u het bestand niet in het opgegeven formaat kunt afspelen.
• kan zijn dit antwoord vertelt ons dat het formaat mogelijk kan worden afgespeeld.
• waarschijnlijk Met dit antwoord vertelt de browser ons dat er een grote kans is dat hij de inhoud in het gespecificeerde formaat kan reproduceren.

Laten we hieronder een code bekijken waarin we deze methode gebruiken op een multimediabestand:

 Voorbeeld Video kan niet worden weergegeven 
 
Eigendom
Waarde

 

 

Hier doen we gewoon wat we doen twee arrays, in de eerste plaatsen we de namen van de bestanden met verschillende extensies, in de tweede plaatsen we de formaten die we hebben, eenmaal daarmee gaan we door de reeks formaten en dan evalueren we met de methode canPlaytype om het antwoord te krijgen dat we nodig hebben.
Tot nu toe verloopt alles soepel, zodra we de evaluatie hebben, vragen we wie het antwoord heeft teruggestuurd waarschijnlijk en dat is degene die we zullen plaatsen voor reproductie.
Laten we eens kijken hoe dit eruitziet in de browser:

In dit specifieke voorbeeld gebruiken we Firefox, in dit geval is het formaat dat de browser kan reproduceren de webm en het is in feite degene die wordt getoond in het overeenkomstige element.
Zoals we kunnen zien, stelt deze methode ons in staat om verschillende opties vast te stellen en als we ons algoritme correct ontwikkelen, kunnen we een zeer robuuste functionaliteit uitvoeren waarmee we kunnen genieten van de voordelen van HTML5 in het beheren van multimedia in meerdere browsers zonder dat u zich zorgen hoeft te maken over de gebruikerservaring.
Hiermee ronden we onze tutorial af, nu we weten hoe we de verschillende multimediaformaten kunnen evalueren en hoe browsers ze allemaal kunnen behandelen.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