HTML5 - Ingesloten multimedia

In HTML5 video- en audio-elementen hebben veel gemeenschappelijke factoren, daarom is het object HTMLMediaElement definieert de basiskenmerken van elk in de ZON.
Audio-elementen worden vertegenwoordigd door het object HTMLAudioElement, dit object vertegenwoordigt geen verhoging van de functionaliteiten van de HTMLMediaElement, aan de andere kant hebben we het object HTMLVideoElement die de video-elementen vertegenwoordigen en het tegenovergestelde van het object HTMLAudioElement dit als het enkele aanvullende kenmerken op de veronderstelt HTMLMediaElement.
Het audio-element
Het element Audio stelt ons in staat om audio-inhoud in onze HTML-documenten in te sluiten, het is nieuw in HTML5 en kan de volgende attributen bevatten: autoplay, preload, controls, loop, gedempt, src.
Laten we een codevoorbeeld bekijken van hoe u een audio-element in onze documenten kunt opnemen:

 Voorbeeld Audio-inhoud kan niet worden afgespeeld 

We merken dat we een label hebben, waar we het attribuut definiëren controles zodat we de knoppen kunnen hebben waarmee we het afspelen van het bestand kunnen manipuleren, met src we geven het pad naar het audiobestand aan en tot slot automatisch afspelen, aanwezig zijn geeft aan dat het bestand moet worden afgespeeld wanneer het document wordt geladen.
Zoals we kunnen zien, is het iets dat vrij eenvoudig te hanteren is, laten we in de volgende afbeelding zien hoe het eruit zou zien in onze browser:

Multimedia-informatie ophalen
Zoals we in het begin hadden vermeld, met het object HTMLMediaElement we hebben de gemeenschappelijke audio- en videokenmerken gegroepeerd en in het geval van video zijn enkele aanvullende kenmerken verhoogd.
De informatie die we met dit object kunnen verkrijgen is de volgende:

• automatisch afspelen Het vertelt ons of de automatische reproductie van het bestand is ingeschakeld of niet.
• canPlayType() vertelt ons of de browser het aangegeven bestand kan reproduceren.
• huidigeSrc laat u de huidige bron van het bestand weten.
• controles stelt ons in staat om te weten of vast te stellen of de afspeelknoppen op het bestand al dan niet aanwezig zijn.
• standaard gedempt geeft aan of stelt in of het bestand moet beginnen met het volume volledig stil.
• lus geeft aan of stelt in of het bestand moet worden doorgelust.
• gedempt verlaag het bestandsvolume
• voorladen geeft aan of stelt in dat het bestand wordt geladen voordat het wordt afgespeeld wanneer de pagina wordt geladen.
• src geeft het pad naar het mediabestand aan of stelt het in.
• volume stelt het volume van het afspelen van het bestand in of geeft het aan.

Zoals we hebben aangegeven, heeft het video-element enkele extra kenmerken, laten we eens kijken wat ze hieronder zijn:

• hoogte geeft de hoogte aan of stelt deze in.
• poster geeft de waarde aan van het posterattribuut waarmee we een omslagafbeelding voor de video kunnen plaatsen
• videoHoogte geeft de hoogte van de video aan of stelt deze in.
• videoBreedte geeft de breedte van de video aan of stelt deze in
• breedte geeft de breedte aan of stelt deze in.

In de volgende code zullen we zien hoe we informatie uit deze elementen kunnen halen en hoe we ze in ons document kunnen weergeven om het in de browser te zien:

 Voorbeeld Video kan niet worden weergegeven 
 
Eigendom
Waarde

 

 

Om deze tutorial af te ronden, laten we eens kijken wat de browser ons laat zien met deze code:

VERGROTEN

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