andew
2015-08-10T19:23:37+00:00
28-02-2016T17:11:05+00:00
11937
Het artikel beschrijft de structuur van de HTML5-container voor audio en video, de video-, audio-, bron-, track-tags en hun attributen met mogelijke waarden. Er worden HTML-sjablonen en voorbeelden gegeven van de implementatie van het afspelen van multimediabestanden op basis van de mogelijkheden die in de browser zijn ingebouwd. De verbinding met het videotekstspoor van ondertitels, titels en inhoudsopgave met behulp van bestanden in WEBVTT-formaat met voorbeelden wordt getoond. HTML5-codesjablonen met micro-markup van schema.org voor audio en video worden gepresenteerd. De belangrijkste webformaten van audio- en videobestanden met hun MIME-typen en hulpmiddelen voor het converteren van video en audio naar deze formaten worden aangegeven.
HTML5 bevat nieuwe functies waarmee u audio- en videobestanden rechtstreeks in de browser kunt afspelen zonder programma's van derden te gebruiken. Ondanks het feit dat HTML5 niet langer nieuw is, zijn er tot nu toe nog steeds meningsverschillen over de manier waarop browsers video- en audiotags verwerken en hoe de speler zelf wordt weergegeven. Sommigen doen het beter met elke nieuwe versie, terwijl anderen nog steeds achterlopen. Wereldwijd is de trend dat browsers steeds meer functionaliteit zullen bieden voor het afspelen van multimediabestanden.
Screencast: voorbeeld van het gebruik van sjablonenVideo downloaden
Screencast: voorbeelden van het gebruik van sjablonen uit het artikel - website
HTML5-video en -audio is een evoluerende standaard en is niet gekoppeld aan enig audio- of videoformaat, dus er zijn verschillen tussen browsers in wat ze ondersteunen. formaten audio- en videobestanden. Dit verschil wordt nu gecompenseerd door het originele bestand te coderen met verschillende codecs en al deze bestandsversies te koppelen aan tags of via geneste tags< source src=" URL">. Er zijn echter leiders in opkomst onder de audio- en videobestandsformaten die door browsers worden ondersteund. Voor video is dit uiteraard het mp4-formaat (H.264), en voor audio het mp3- en m4a-formaat. Nu kunnen waarschijnlijk alle browsers bestanden van deze formaten afspelen. Ook zijn de browsers Firefox, Chrome en Opera overeengekomen de WEBM-standaard als gangbaar videoformaat te ondersteunen. Vanuit mijn oogpunt zou de optimale optie voor het gebruik van HTML5-video en -audio nu een schema zijn gebaseerd op het gebruik van één multimediabestand in mp4-formaat ( H.264) voor video en m4a voor audio en JS HTML5-speler. Er is slechts één bestand in het opgegeven formaat verbonden met de audio- of videocontainer. Tegenwoordig kunnen de meeste browsers het mp4-formaat afspelen. De verbonden JS-bibliotheek stijlt de speler die in de browser is ingebouwd. Als de browser het mp4 / m4a-formaat niet ondersteunt, implementeert de JS-speler in dit geval de verbinding van een Flash-speler om het multimediabestand af te spelen. Gezien het feit dat het mp4-formaat erg populair is geworden, kan men hopen op een lage kans op problemen met het afspelen ervan in browsers. Dit schema vereist slechts één multimediabestand in het opgegeven formaat, waardoor schijfruimte en bronnen worden bespaard voor het verwerken van bestanden. Bovendien zal een dergelijk plan strategisch correcter zijn, aangezien de trend is dat browsers steeds beter worden in het implementeren van HTML5-video en -audio.
Om aan de HTML5-speler aan te geven welk bestand moet worden afgespeeld, moet u naast de bestands-URL ook het MIME-type van het bestand doorgeven, zodat de browser begrijpt welke codec hij moet gebruiken. De onderstaande tabel bevat de meest voorkomende bestandsformaten en hun MIME-typen.
Bestandsformaten en hun MIME-typen| Audio-mp3 | mp3 | audio/mpeg |
| Geluid mp4 | m4a | geluid/mp4 |
| Audiowebm | webm | audio/webm |
| Audio ogg | ogg | audio/ogg |
| Video mp4 (H.264) | mp4 | filmpje/mp4 |
| Videowebm | webm | video/webm |
| Video ogg | Ov | video/ogg |
Om video- en audiobestanden naar de bovenstaande webformaten te coderen, kunt u een open programma gebruiken dat het converteren van audio- en videobestanden naar de belangrijkste webformaten ondersteunt ( MP4, WebM, Ogg Theora, MP3, enz.). Miro Video Converter is beschikbaar voor verschillende besturingssystemen - Windows, Mac en Linux en is een grafische shell voor consolehulpprogramma's die handig zijn om te gebruiken op een webserver om gedownloade video en audio automatisch te verwerken.
: HTML5-audiovoorbeeldcode met micromarkering van schema.org: audioheaderHTML5-audio wordt niet ondersteund door uw browser.
Audio downloaden
Dit is hoe de micro-opmaakgegevens die uit de code worden geëxtraheerd, eruit zullen zien voor de hierboven beschreven audiosjabloon.
Audioobject itemType = http://schema.org/AudioObjectnaam = Audiotitelbeschrijving = Audiobeschrijving... isfamilievriendelijk = waar coderingsformaat = mp3-duur = PT04M59S uploaddatum = 31-12-2015 image = Volledige URL naar afbeelding.jpg alternatieve naam = Alternatief title audio contenturl href = URL naar file.mp3 text = Download audio auteur person itemType = http://schema.org/Person url href = URL text = Naam auteur name = Naam auteur image = Volledige url naar person.jpg
De minimale audio-opmaak volgens schema.org moet itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" bevatten. De overige eigenschappen zijn optioneel.
Voorbeeld van standaard HTML5-taggebruik:In de demo heb ik CSS-stijlen op de tag toegepast via het class-attribuut om de breedte van het videogebied dynamisch te maken, afhankelijk van de schermgrootte. De speler past zichzelf aan in hoogte. Probeer het formaat van uw browservenster aan te passen om te zien hoe het werkt. Daarom zijn er in de codebron voor deze demo geen breedte- en hoogtekenmerken voor de tag; deze zijn vervangen door CSS-stijlen. Maar deze methode wordt niet weergegeven in de sjablooncodelijst, omdat is al iets bijzonders.
HTML5-videovoorbeeldcode met micro-markup van schema.org: videotitel
Kijk op YouTube
HTML5-video wordt niet ondersteund door uw browser.
Video downloaden: videotitel
Dit is hoe de micro-opmaakgegevens die uit de code worden geëxtraheerd, eruit zullen zien voor de hierboven beschreven videosjabloon.
Videoobject itemType = http://schema.org/VideoObject name = Videotitel thumbnail imageobject itemType = http://schema.org/ImageObject contenturl = URL naar video-thumbnail.jpg|png breedte = 100 hoogte = 100 duur = PT14M59S isfamilievriendelijk = ware uploaddatum = 31-12-2015 beschrijving = Korte beschrijving van de video... url href = URL naar file.mp4 text = Videotitel auteur person itemType = http://schema.org/Person url href = URL naar auteur webpaginatekst = naam auteur naam = naam auteur afbeelding = Volledige URL naar auteur.jpg thumbnailurl = URL naar bestand.jpg|png
Minimum nodig Voor zoekmachines moet video-opmaak volgens schema.org alle itemprop-eigenschappen bevatten die in de voorbeeldcode worden weergegeven, met uitzondering van het itemprop ="author"-blok, dat optioneel is voor zoekmachines en kan worden verwijderd als er geen gegevens zijn. om het te vullen. Voor videothumbnail vereist Yandex dat u micro-markeringen specificeert volgens schema.org als itemprop ="thumbnail" in de vorm van een ImageObject , en Googlen vereist het specificeren van itemprop ="thumbnailUrl" , dus je moet het video-thumbnail-bestand twee keer invoegen, en daarom kreeg de tweede img-tag de weergave: geen stijl om niet in de browser te worden weergegeven. In plaats van een img-tag met display:none te gebruiken, kunt u deze eigenschap via het href-attribuut aan de link-tag doorgeven. Ondanks het feit dat micro-opmaak kan worden verzonden via meta- en link-tags die niet aan de gebruiker worden getoond, wordt het nog steeds aanbevolen om, indien mogelijk, micro-opmaak vooral toe te voegen aan tags die wel aan de gebruiker worden weergegeven. Validatie van micro-opmaak van schema.org kan worden gedaan met behulp van deze links: , . Het belangrijkste voordeel van het gebruik van micro-markup is het gemak van dergelijke inhoud voor zoekrobots en sociale netwerkrobots. Deze robots extraheren gelabelde gegevens en aggregeren deze. Daarom verbetert het gebruik van micro-markup SEO website en vergemakkelijkt de automatische verspreiding van gegevens op sociale netwerken. Een gedetailleerde beschrijving van Schema.org micro-markup voor video's gemarkeerd met het VideoObject-schema op de website. Het is ook vermeldenswaard dat voor gevallen waarin u een video niet rechtstreeks op uw website invoegt, maar met behulp van videohostingwidgets Yandex.Video of YouTube, u uw HTML-codeblok kunt toevoegen met een beschrijving van de video onder het widgetcodeblok en sluit de Schema.org-opmaak voor deze video in. Tegelijkertijd moet u als URL-parameter (een link naar een video) geen directe link naar een statisch bestand opgeven, maar een link opgeven die is ontvangen van de videohosting. Hoewel de Schema.org-specificatie zegt dat de link naar een direct bestand moet zijn, verwerken zoekmachines ook links naar video's van videohosting ( zie voorbeelden op de Yandex-website in de sectie Webmaster), ondanks het feit dat u het bestand via een dergelijke link niet kunt downloaden en u het niet rechtstreeks in uw HTML5-mediaspeler op de pagina kunt bekijken, alleen in de videohostingwidget.
Als u wordt geconfronteerd met de vraag van welke hosting u multimedia-audio- en videobestanden moet downloaden, bekijk dan het artikel waarin de optie wordt beschreven om mediabestanden vanaf Yandex Disk in een WEB-pagina in te voegen.
Kenmerken en tags:De attributen src , preload , autoplay , mediagroup , loop , muted , controls zijn algemene attributen voor alle media-elementen, inclusief tags en .
autoplay attribuut: óf óf- Het autoplay-attribuut wordt gespecificeerd door zijn aanwezigheid in de tag of en het is niet nodig om een waarde voor dit attribuut in te stellen; alleen de aanwezigheid ervan is voldoende. Voor HTML-editors die elementcode bewerken, kunt u dit attribuut instellen als autoplay = "autoplay", wat gelijk staat aan het simpelweg aanwezig hebben van het attribuut. De aanwezigheid van het autoplay-attribuut vertelt de browser dat het bestand onmiddellijk moet worden afgespeeld nadat de webpagina is geladen. Dienovereenkomstig overschrijft het autoplay-attribuut de waarden van het preload-attribuut, dat bepaalt hoe de video in de speler wordt geladen, omdat de video onmiddellijk moet beginnen met spelen en daarom moet worden geladen. Standaard is er geen autoplay-kenmerk.
- Het besturingsattribuut vertelt de browser om het bedieningspaneel van de speler weer te geven wanneer de pagina is geladen maar de opname nog niet is begonnen met spelen. Dit attribuut wordt, net als het autoplay-attribuut, alleen gespecificeerd door zijn aanwezigheid in de tag of, en vereist geen waarde; alleen zijn aanwezigheid is voldoende. Standaard is dit attribuut afwezig, d.w.z. De speler toont het bedieningspaneel niet voordat het afspelen begint. Wanneer het bestand begint te spelen, verschijnt het configuratiescherm wanneer u met de muis over het afspeelgebied beweegt.
- Het loop-attribuut zorgt ervoor dat de speler het bestand in een loop afspeelt. Een attribuut wordt alleen gespecificeerd door zijn aanwezigheid in de tag of en heeft geen parameters. Standaard is er geen luskenmerk.
- het preload-attribuut specificeert het laden van een bestand samen met het laden van een webpagina en neemt een van de volgende drie waarden aan:
- geen - download het bestand niet samen met het laden van de webpagina. Dit betekent dat het bestand pas in de speler wordt geladen nadat u op de afspeelknop hebt gedrukt. Dit kan handig zijn om het laden van pagina's te versnellen. De waarde none is de standaardwaarde voor het preload-attribuut, dus het is mogelijk om het preload-attribuut helemaal niet in de tag in te voegen, of in dit geval.
- metadata - downloadt het bestand niet samen met het laden van de webpagina, maar downloadt de metadata van het multimediabestand.
- auto - voer een volledige bestandsdownload uit samen met het laden van de webpagina. Bij deze optie laden browsers het mediabestand automatisch samen met de webpagina, maar dit heeft geen invloed op het laden van de pagina zelf en de weergave ervan in de browser. Als het preload ="" attribuut met een lege waarde is opgegeven in de tag of, wordt de automatische waarde ervoor gebruikt.
- Het preload-kenmerk wordt overschreven als het autoplay-kenmerk wordt gebruikt.
- het src-attribuut van de tag of stelt u in staat onmiddellijk het pad naar het multimediabestand in de tag in te stellen. Het pad kan compleet zijn, wat het protocol en domein aangeeft, of relatief ten opzichte van de hoofdmap van de huidige site. U kunt ook het pad naar het bestand opgeven in tags die zijn ingesloten in een audio- of videocontainer.< source src=" URL"> .
- het posterattribuut wordt alleen in de tag gebruikt en specificeert de URL van de afbeelding (gif, png, jpeg, etc.) die wordt getoond terwijl de video niet beschikbaar is. Als het posterkenmerk niet is ingesteld, probeert de browserspeler het eerste frame van de video weer te geven.
- de attributen width en height zijn alleen van toepassing op de tag en stellen respectievelijk de breedte en hoogte van het afspeelgebied van de videospeler in. Er wordt verwacht dat de waarde een positief geheel getal is, gespecificeerd in pixels of percentages. Het instellen van deze kenmerken heeft invloed op de weergavegrootte van de video, maar verandert niets aan de beeldverhouding van de video. De video past zich aan de opgegeven afmetingen aan, terwijl de verhoudingen behouden blijven. Als de opgegeven afmetingen niet overeenkomen met de verhoudingen van de video, verschijnen er donkere strepen langs de boven- en/of zijkanten van de video. Daarom is het raadzaam om bij het instellen van deze parameters de verhouding ervan dezelfde te maken als die van de video die wordt afgespeeld, of alleen de breedte in te stellen, waarna de speler de hoogte zelf zal aanpassen.
- Als een of beide van deze parameters niet zijn opgegeven, worden de niet-gespecificeerde parameter(s) overgenomen van de overeenkomstige afbeeldingsgrootte die is opgegeven in het posterkenmerk.
- Als het posterattribuut ontbreekt, worden deze parameters als volgt ingesteld: voor breedte = 300 px en voor hoogte = 150 px.
- Om de afmetingen van het videogebied niet te berekenen en te coördineren op basis van de verhoudingen van de clip zelf, raad ik aan slechts één breedteparameter in te stellen, waarna de hoogte (hoogte) van het afspeelgebied automatisch wordt geselecteerd op basis van de videoverhoudingen .
- gedempt attribuut: óf óf
- Het crossorigin-attribuut vertelt de browser dat hij een CORS-verzoek voor dit element moet uitvoeren. Standaard is het attribuut afwezig, wat betekent dat er helemaal geen CORS-verzoeken worden gebruikt. Als het attribuut aanwezig is, zijn de mogelijke waarden anoniem en use-credentials . CORS () is een technologie in moderne browsers waarmee u machtigingen kunt beheren voor het laden van bronnen op de huidige webpagina vanuit andere domeinen dan het domein van de huidige pagina. Met browserondersteuning voor de CORS-standaard kunt u veilige gegevensuitwisseling tussen domeinen implementeren door een speciaal verzoek (header) uit te voeren naar het domein van de huidige pagina om te bepalen of bronnen van een ander gespecificeerd domein op deze pagina mogen worden geladen. Als reactie op een dergelijk verzoek moet de server de domeinen aangeven waarvan het downloaden van bronnen is toegestaan.
- Met het mediagroup-attribuut kunt u de besturing van meerdere mediabestanden combineren in één MediaController door een groep mediabestanden op verschillende plaatsen op de pagina te maken. Deze groep wordt gelijktijdig beheerd voor alle bestanden die erin zijn opgenomen. Dit is bijvoorbeeld handig als u dezelfde video tegelijkertijd op verschillende plaatsen op de pagina met verschillende ondertitels of verschillende video's wilt afspelen en bedienen.
Tags en vereisen een afsluitende tag.
Voor die gevallen waarin de browser geen HTML5 en tags ondersteunt, wat nu zeer zeldzaam is, wordt er een sms-bericht geschreven vóór de afsluitende tag van de container en wordt er meestal een link toegevoegd om het bestand te downloaden. Als de in de browser ingebouwde HTML5-speler bovendien wordt bestuurd door een JS-bibliotheek (JS-speler), dan verbinden de meeste een Flash-speler als het onmogelijk is om HTML5-video en audio in de browser af te spelen omdat de browser geen video en audio ondersteunt tags of het multimediabestandsformaat.
Label:Het pad naar het bestand dat wordt afgespeeld kan ook worden opgegeven met behulp van een tag, waarbij het src-attribuut tussen de tags of wordt geplaatst. De tag heeft geen afsluitende tag.
In de meeste gevallen ziet de tag er als volgt uit:
en het bevat altijd het attribuut src en type, dat in de meeste gevallen alleen een MIME-type heeft.
Tag-attributen:- het src= "URL" attribuut van de tag specificeert de URL naar het multimediabestand. Het pad kan compleet zijn, wat het protocol en domein aangeeft, of relatief ten opzichte van de hoofdmap van de site.
- het type="MIME-type" attribuut van de tag, of beter gezegd type="MIME-type; codecs="codec"" specificeert het MIME-type en de codec van het bestand. Voor audio is het voldoende om het MIME-type op te geven, bijvoorbeeld voor .mp3 - type="audio/mpeg". Hoewel volgens de specificatie voor video de codec ook moet worden opgegeven in het type-attribuut, wordt nu vaak alleen het MIME-type zonder codec gespecificeerd, waardoor dit aan de browsers wordt overgelaten.
- Het media-attribuut ="all|braille|handheld|print|screen|speech|projection|tty|tv" van de tag specificeert het type apparaat waarvoor het bestand moet worden afgespeeld. De standaardwaarde is alles, dus in de meeste gevallen wordt dit kenmerk helemaal niet gespecificeerd, tenzij u specifiek het apparaat voor afspelen wilt identificeren.
Voor HTML5-video is het ook mogelijk om een extra track in de speler weer te geven met informatie zoals ondertitels, bijschriften, hoofdstukken, beschrijvingen (nog niet ondersteund) en metadata (nog niet ondersteund). Deze functie wordt geïmplementeerd door tags met de juiste attributen binnen de tag toe te voegen.
- heeft geen afsluitende tag.
Met de tag kunt u extra trackbestanden aan de video koppelen in het speciale WebVTT-formaat (Web Video Text Tracks Format), die de weergegeven tekstberichten weergeven met hun tijdsreferentie aan het videobestand. De WebVTT-standaard ondersteunt niet alleen de weergave van tekstberichten, maar biedt ook CSS-stijlopties en opties voor plaatsing in het videoweergavegebied. Momenteel worden WebVTT-bestanden voornamelijk gebruikt om tekstondertitels aan video's toe te voegen, wat door bijna alle browsers wordt ondersteund. Andere kenmerken van de WebVTT-standaard zijn nog niet volledig geïmplementeerd door de browsers zelf. Voor een vollediger gebruik van WebVTT is het daarom beter om JS-spelers te gebruiken. WebVTT-bestanden kunnen ook niet-standaard door JS-spelers worden gebruikt om aanvullende gegevens naar de JS-speler over te dragen, zoals bijvoorbeeld URL's van afbeeldingsvoorbeelden voor videoframes. Over de vraag hoe u voorbeelden van videoframes kunt weergeven op de terugspoelschaal van de speler (Scrub Bar Thumbnails), zoals dat gebeurt op videohostingsites. Hier moet gezegd worden dat dergelijke functionaliteit nog niet beschikbaar is in spelers die in browsers zijn ingebouwd en daarom via JS-spelers als add-on wordt geïmplementeerd. Om dit te doen, sluit u een JS-bibliotheek (js-speler) aan, die de controle over het HTML5-video- en audio-object overneemt en de styling ervan uitvoert. Dergelijke JS-spelers voor het weergeven van voorbeelden van videoframes gebruiken niet standaard WEBVTT-bestanden van de tag om de URL's van voorbeeldafbeeldingen er doorheen te verzenden.
Een WebVTT-bestand is een gewoon tekstbestand met de extensie .vtt waarin, in de vorm van een regel-voor-regel lijst, tijdstempels met begin- en eindtijden en tekstberichten voor uitvoer naar deze tags worden geschreven. U kunt meerdere WebVTT-bestanden met tekst in verschillende talen aan de container koppelen. Voor elke taal moet u een afzonderlijk bestand maken en elk bestand verbinden via het . Tags moeten na alle tags in de container worden ingevoegd, maar vóór HTML5-videofoutmeldingen. De tag met het ondertitelbestand in de standaardtaal moet als eerste tussen de tags in de huidige container worden geplaatst.
Een WEBVTT-bestand kan een of meer tijdstempels bevatten. Het bestand begint met het woord WEBVTT. Lege regels scheiden tijdstempels met de bijbehorende tekst en attributen. De tekst kan HTML- en CSS-opmaakelementen bevatten. Er kan een ID voor worden geplaatst vóór een tijdstempel, zodat er met speciale uitdrukkingen naar kan worden verwezen. Al deze details worden beschreven in de WEBVTT-standaard.
- specificeert het tracktype en kan de volgende waarden aannemen:
- ondertitels - ondertitels in de vorm van tekst die over de video wordt weergegeven. Voor het bestand dat wordt afgespeeld, kunt u ondertitels in verschillende talen instellen om hun keuze in de speler weer te geven, als deze dit ondersteunt. In de meeste gevallen wordt dit type gebruikt omdat het door de meeste browsers wordt ondersteund.
- ondertitels - ondertitels in de vorm van tekst en geluid die over de video worden weergegeven. Vergelijkbaar met ondertitels, maar naast tekst kunnen ze ook geluidseffecten en andere audio-informatie bevatten.
- hoofdstukken - hoofdstukken die in tekst als lijstmenu worden weergegeven en bedoeld zijn voor snelle navigatie door het mediabestand.
- beschrijvingen - beschrijvingen, dit zijn tekstbestanden met videobeschrijvingen om ze in schermlezer af te spelen.
metadata - metadata voor het doorgeven van js-scripts.
Het src-attribuut van de tag specificeert de URL naar het trackbestand met aanvullende informatie. Het bestand dat aan de tag is gekoppeld, heeft het WebVTT-formaat en de .vtt-extensie.
Het srclang attribuut van de tag specificeert de taal van de track via de taalcode. Voor het Russisch is het gelijk aan "ru", voor het Engels "en".
Het labelkenmerk van de tag specificeert de tracknaam die in de speler wordt weergegeven. Als het attribuut niet is ingesteld, toont de browser de servicenaam.
Het standaardattribuut van de tag specificeert de standaardselectie van deze track als er andere tracks in de videocontainer aanwezig zijn. Slechts één van meerdere tags kan een standaardattribuut hebben. Het is beter om de standaardtrack als eerste te plaatsen tussen andere aangesloten tracks.Tot voor kort was het inbedden van geluid in een webpagina niet zo eenvoudig. Over het algemeen zijn er enkele die slimmere en betere implementaties bieden, maar de meeste methoden beperken u tot het gebruik van een bepaalde browser en bepaalde plug-ins.
Met de komst van Flash-technologie op de markt is deze taak veel eenvoudiger geworden, omdat je met de Flash-plug-in elke animatie of geluid in een pagina kunt insluiten, en de technologie wordt door de meeste browsers ondersteund. Maar de vraag naar Flash verdwijnt geleidelijk na de lancering van innovatieve apparaten van Apple: iPhone en iPad. Zoals u weet, rust Apple zijn apparaten in principe niet uit met Flash-ondersteuning en groeit het aantal productgebruikers snel.
Kortom, er is hier wat verwarring.
Gelukkig heeft HTML5 het leven voor ontwikkelaars veel gemakkelijker gemaakt, omdat de technologie een audio-element bevat. Met dit element kunt u audiobestanden in elke webpagina insluiten en een controlepaneel implementeren met behulp van javascript. Belangrijker nog is dat de technologie geen extra plug-ins vereist en in bijna alle browsers wordt ondersteund, met uitzondering van vroege versies (we zullen het later over browserondersteuning hebben!).
In ons artikel van vandaag vertellen we je hoe je geluiden kunt insluiten met behulp van het audio-element. We zullen ook leren hoe u het afspeelproces kunt besturen met behulp van javascript, en zullen u ook proberen te vertellen over technologische ondersteuning tussen browsers.
HTML5-audio-element
Dit element is uiterst eenvoudig te gebruiken. In ons voorbeeld van vandaag zullen we Bing Crosby's "White Christmas" insluiten:
Er is hier niet veel uitleg nodig. Net zoals u een afbeelding invoegt met de img-tag, kunt u op dezelfde manier geluid invoegen met de audio-tag.
Ondersteuning voor meerdere browsers
Het is onwaarschijnlijk dat het bovenstaande voorbeeld in alle browsers werkt. Dit is waar het bestandsformaat een rol speelt.
Sommige browsers kunnen mp3-bestanden afspelen, maar geen ogg-bestanden, terwijl andere het tegenovergestelde doen. De meeste browsers kunnen .wav-bestanden afspelen, maar vanwege het grote formaat is het ongepast om als audio voor een website te gebruiken.
Hier is een tabel met browsers die ondersteuning voor geluidsformaten tonen:
Welke formaten ondersteunt uw browser? Bepaal dit door.
Zoals u in de tabel kunt zien, is de meest optimale implementatieoptie het koppelen van beide bestandsformaten.
Om dit te doen, kunt u meerdere bronelementen aan het audio-element toevoegen en daarin de paden naar de verschillende formaten specificeren. De browser speelt het eerste bestand af dat het ondersteunt. Hier is een voorbeeld:
Dit betekent natuurlijk dat je zowel een mp3- als een OGG-versie van je audiobestand moet maken (hier komt ) te hulp, maar dit is de enige manier om ondersteuning voor meerdere browsers te bieden.
Vroege versies van Internet Explorer (versies 7 en 8) ondersteunen het audio-element helemaal niet. Later in het artikel zullen we echter bekijken hoe we dit probleem kunnen omzeilen.
Automatische geluidsweergave
Hoewel de bovenstaande code audio insluit, wordt deze niet afgespeeld. Als we willen dat het geluid automatisch wordt afgespeeld wanneer de pagina wordt geladen, moeten we het autoplay-attribuut aan het element toevoegen:
Bedieningsknoppen toevoegen
Hoewel automatisch afspelen nuttig kan zijn, is het in veel gevallen vervelend of volkomen ongepast. Daarom kunnen we extra bedieningsknoppen voor audio-elementen installeren, zodat de gebruiker zelf kan beslissen:
Dit voegt een horizontale balk toe met een pauze-/afspeelknop, een tijdlijn met een schuifregelaar en een volumeregelaar. Alles is ongeveer hetzelfde als je kunt zien op de speler op YouTube.
Het is belangrijk om te onthouden dat het configuratiescherm afhankelijk van de browser zal verschillen. De browser op een iPhone heeft bijvoorbeeld geen volumeschuifregelaar omdat het apparaat aparte knoppen heeft om de audioniveaus te regelen.
Lus afspelen
Als u een luskenmerk aan het audio-element toevoegt, wordt de audio voor onbepaalde tijd afgespeeld.
Dit kan handig zijn voor het inschakelen van achtergrondmuziek of geluidseffecten in games.
U kunt ook het preload-attribuut gebruiken, dat de browser vertelt wanneer en waar een specifiek audiobestand moet worden geladen.
Het vooraf laden van het audiobestand betekent dat de audio onmiddellijk kan worden afgespeeld wanneer de gebruiker op de afspeelknop drukt.
Er zijn verschillende betekenissen voor dit kenmerk:
“geen” – de browser mag het gedownloade bestand niet opleggen. Die. Als u zeker weet dat de meeste gebruikers het bestand niet zullen afspelen, gebruikt u deze optie. Of gebruik het wanneer u zoveel mogelijk serverbandbreedte wilt besparen.
"metadata" - de parameter is vergelijkbaar met geen, behalve dat u de browser op de hoogte stelt van de mogelijkheid om metadata te laden, zoals de duur van de audiotrack, maar niet het audiobestand zelf.
“auto” – u staat toe dat de browser het audiobestand zelf downloadt.
Bijvoorbeeld:
Houd er rekening mee dat vooraf laden slechts een gemaksfunctie is, omdat sommige browsers deze opdracht eenvoudigweg negeren en beginnen te doen wat ze willen.
Afspeelbediening via javascript
Het mooie van JavaScript-elementen is dat ze zo gemakkelijk te manipuleren zijn met JavaScript. Het audio-element biedt veel handige parameters en bedieningsmethoden:
Play() – start het afspelen vanaf de huidige positie;
Pause() – stop het afspelen op de huidige positie;
canPlayType(type) – bepaal of de browser het afspelen van dit mediatype ondersteunt;
duur – duur van het nummer in seconden;
currentTime – huidige positie in seconden. U kunt deze optie ook instellen om de afspeelpositie te verplaatsen.
Met behulp van de hierboven voorgestelde opties en methoden kunnen we enkele basisbedieningsknoppen maken:
Muziek afspelen
Pauzeer muziek
Stop met muziek
Bekijk de demo: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html
Ondersteuning voor eerdere versies van Internet Explorer
In de meeste gevallen ondersteunt de browser van de gebruiker het HTML5-element. Maar helaas ondersteunen IE-browsers versie 7 en zelfs 8 dit element niet (hoewel versie 9 al ondersteuning biedt). Het is belangrijk om een terugdraaiversie te overwegen voor gebruikers die in 2008 zijn gebleven.
Een zeer grove maar effectieve methode is om speciale opmerkingen te gebruiken om browsergegevens te markeren en deze een objectaanwijzer naar het geluidsbestand te geven. De browser zal dus vaak een ingebouwde controller weergeven waarmee gebruikers muziek op een bijna HTML5-audio-achtige manier kunnen afspelen, pauzeren of terugspoelen. Hier is een voorbeeld:
Muziek afspelen
Pauzeer muziek
Stop met muziek
document.getElementById("playButton").onclick = function() ( document.getElementById("myTuneObj").play() );
document.getElementById("pauseButton").onclick = function() ( document.getElementById("myTuneObj").pause() );
document.getElementById("stopButton").onclick = function() ( document.getElementById("myTuneObj").stop() );
Het bovenstaande voorbeeld werkt in alle browsers die HTML5 Audio ondersteunen, en werkt ook in IE-versies 7 en 8. Met behulp van opmerkingen leiden we de bedieningselementen voor de knoppen rechtstreeks door naar het audiobestand.
Een andere manier om terug te draaien is door een Flash-speler in de pagina in te sluiten. Hier wordt gesproken over terugdraaien in de vorm van een Flash-speler.
Conclusie
In ons artikel van vandaag hebben we geleerd hoe je audiobestanden kunt insluiten met HTML5. Het audio-element is niet alleen eenvoudig te gebruiken, maar we kunnen het ook aanpassen en het afspelen regelen via javascript.
Wil je meer weten over het audio-element in HTML5? Bekijk dan eens.
Hoewel de ondersteuning momenteel in sommige browsers (zoals oudere versies van IE) afneemt, kunt u deze indien nodig eenvoudig terugdraaien, wat tegenwoordig steeds minder gebruikelijk wordt.
Met de komst van snel genoeg internetverbindingen was Flash het enige hulpmiddel om geluiden op websites af te spelen. Maar HTML5 zal de manier waarop geluiden op internet worden afgespeeld fundamenteel veranderen. In dit artikel wil ik u in detail vertellen hoe u de tag op uw sites kunt gebruiken.
We gebruiken het om een audiobestand op de pagina in te voegen. Hieronder ziet u het eenvoudigste voorbeeld van het gebruik van een tag; het laadt een mp3-bestand en speelt het af. Let op het autopaly-attribuut, dat wordt gebruikt om automatisch audio af te spelen. U mag echter niet automatisch geluiden op de site afspelen, omdat dit gebruikers zal irriteren.- Een geluid in een loop afspelen Wil je een geluid in een loop afspelen? Het lusattribuut helpt u hierbij. Maar nogmaals, je moet autoplay en loop-weergave niet overmatig gebruiken als je niet wilt dat de gebruiker de site voortijdig verlaat.
- Bedieningselementen weergeven In plaats van dat geluiden automatisch worden afgespeeld, wat beslist een slechte gewoonte is, kunt u beter toestaan dat bepaalde bedieningselementen in de browser worden weergegeven, zoals de volume- en afspeelknoppen (pauze). Dit is eenvoudig te doen door simpelweg het kenmerk 'controls' toe te voegen.
- Verschillende bestandsformaten De tag wordt door de meeste moderne browsers ondersteund, maar het probleem is dat verschillende browsers verschillende bestandsformaten ondersteunen. Safari kan bijvoorbeeld mp3's afspelen, maar Firefox niet, en speelt in plaats daarvan OGG-bestanden af. De oplossing voor dit probleem is om beide formaten te gebruiken, zodat elke bezoeker de audio kan horen, ongeacht welke browser hij gebruikt.
Dat is alles voor vandaag.
Ik hoop dat dit artikel je heeft geholpen de basismogelijkheden van de HTML5-tag te begrijpen.
1. Maak op de hosting waar uw site zich bevindt, in de hoofdmap (de map waar het indexbestand zich bevindt), de audiomap. In de toekomst plaats je er alle audiobestanden in.
3. Selecteer nu de bestanden die je nodig hebt, bij voorkeur in mp3-formaat. Maak een audiomap in de hoofdmap van de site en upload deze.
4. Het enige dat overblijft is het invoeren van de verbindingscode van de speler. Het is geschikt voor elke site. Op de juiste plaats hoeft u alleen maar het pad naar het spelerbestand en het audiobestand aan te geven, waarbij u respectievelijk de woorden uw_domein en audio_bestandsnaam vervangt:
En alles is klaar! Je kunt ook naar het werkende voorbeeld kijken.
De eerste manier is de embed-tag. Het embed-element wordt gebruikt om objecten te laden en weer te geven (bijvoorbeeld videobestanden, flash-films, sommige audiobestanden, enz.) die de browser in eerste instantie niet begrijpt.
De syntaxis is vrij eenvoudig:
Een afsluitende tag is niet vereist.
Kijk nu naar een voorbeeld van een record met attributen, en hieronder met hun decodering:
Embed tag-attributen voor het afspelen van audio in html
breedte - paneelbreedte in pixels (of percentage)
hoogte - paneelhoogte in pixels (of percentage)
uitlijnen - positie van het paneel ten opzichte van de tekst, mogelijke waarden zijn links, rechts, midden
verborgen - hiermee kunt u het paneel verbergen, attribuutwaarden: true - het paneel is verborgen, false - het paneel is zichtbaar (standaardwaarde)
autostart - true - de speler start automatisch wanneer de pagina wordt geladen, false - wacht tot de afspeelknop wordt ingedrukt
loop - loop, true - het nummer wordt in een cirkel afgespeeld, en indien false - slechts één keer
Tweede manier.
Heel oud, maar ook praktisch) Voeg de melodie toe aan dezelfde map (directory) waar uw bestand zich bevindt, en schrijf in de body de volgende code:
Als gevolg hiervan zal na het laden van de pagina de melodie klinken die u in de bgsound-tag hebt opgegeven. Laten we nu eens beter naar de tagkenmerken kijken:
src - pad naar uw audiobestand
loop - hoe vaak de melodie moet worden herhaald (indien -1, dan eindeloos herhaald)
balans - stereobalanswaarde (van -10.000 tot 10.000)
volume - volume voor het afspelen van melodieën, waarbij 0 het maximum is en -10000 het minimum.
Er is echter geen enkele manier om de speler te besturen: elke keer dat de pagina wordt vernieuwd, wordt het nummer opnieuw afgespeeld.
Nadat ik de methode voor het invoegen van achtergrondmuziek heb beschreven, wil ik u hiervan afhouden, aangezien de meeste gebruikers in de regel al naar muziek luisteren wanneer ze verschillende sites bezoeken. Daarom kan begeleidende muziek hem alleen maar dwingen het tabblad met de site te sluiten.Audio en muziek invoegen in HTML5 - audiotag
audio - een gekoppelde tag die achtergrondgeluid, muziek of andere audiostream op de site definieert.
Kenmerken van audiotags
autoplay - het bestand wordt onmiddellijk afgespeeld wanneer de pagina wordt geladen (vergelijkbaar met bgsound-achtergrondmuziek)
bedieningselementen - geef het bedieningspaneel van de speler weer in de browser
loop - speelt het bestand opnieuw af nadat het is afgelopen
preload - het audiobestand wordt samen met het laden van de pagina geladen
src - pad naar het audiobestand (mp3 of ogg)
Voorbeeldcode met audiotag
Audiotag
Audio in HTML5
De audiotag wordt niet ondersteund door uw browser.
Muziek downloaden.
Voorheen hadden browsers geen ingebouwde mogelijkheden om audio- en video-inhoud te ondersteunen, maar met de ontwikkeling van internet is ondersteuning voor multimedia-elementen als kenmerk van moderne browsers een noodzaak geworden. HTML5 heeft nieuwe elementen geïntroduceerd en , die in alle moderne browsers worden ondersteund. Het belangrijkste doel van de tag is om audio-inhoud aan de pagina toe te voegen.
| MP3 Wav Ogg-browser | MP3 Wav Ogg-browser | MP3 Wav Ogg-browser |
| MP3 Wav Ogg-browser | MP3 Wav Ogg-browser | MP3 Wav Ogg-browser |
| MP3 Wav Ogg-browser | MP3 Wav Ogg-browser | MP3 Wav Ogg-browser |
| MP3 Wav Ogg-browser | MP3 Wav Ogg-browser | Opera |
| MP3 Wav Ogg-browser | Opera | Opera |
| MP3 Wav Ogg-browser | MP3 Wav Ogg-browser | Opera |
- Rand
- Het MP3-formaat is tegelijkertijd een codec en een container. Het wordt overal veel gebruikt om gedownloade muziek te hosten.
- Ogg-container + Vorbis-audiocodec. Hij wordt gewoonlijk "Ogg Vorbis" genoemd. Het is ontwikkeld door de Xiph-gemeenschap ter vervanging van eigen MP3, AAC en WMA.
MIME-typen voor audio:
| audio/mpeg |
| audio/ogg |
| audio/wav |
| 4.0 | 3.5 | 10.5 | 4.0 | 9.0 | 12.0 |
| automatisch afspelen | automatisch afspelen | Geeft aan dat de audio automatisch start zodra deze gereed is. |
| controles | controles | Toont ingebouwde bedieningselementen voor mediabestanden (afspeel-/pauzeknop, schuifregelaar waarmee u naar een specifiek fragment van de video kunt springen en volumeregeling). |
| lus | lus | Loopt het afspelen van het bestand (ons nummer is goed - begin opnieuw). |
| gedempt | gedempt | Geeft aan dat het geluid wordt gedempt (geen geluid). |
| voorladen | auto metagegevens geen | Specificeert hoe audio moet worden geladen wanneer de pagina wordt geladen. Het attribuut wordt genegeerd als het autoplay-attribuut aanwezig is. |
| src | URL | Specificeert de URL van het audiobestand. |
Het element gebruikt dezelfde kenmerken als het element, behalve de kenmerken breedte, hoogte en poster. Net als bij het gebruik van het element, kunt u met behulp van het element meerdere opties voor audioformaten opgeven, zoals weergegeven in het onderstaande voorbeeld:
Audio in HTML5 Audio in HTML5 Uw browser ondersteunt dit audioformaat niet.U kunt dit bestand downloaden via onderstaande link:
Downloaden
In dit voorbeeld:
