andew

2015-08-10T19:23:37+00:00

2016-02-28T17:11:05+00:00

11937

Artikeln beskriver strukturen för HTML5-behållaren för ljud och video, video, ljud, källa, spårtaggar och deras attribut med möjliga värden. HTML-mallar och exempel på implementering av uppspelning av multimediafiler baserat på de funktioner som är inbyggda i webbläsaren tillhandahålls. Anslutningen till videotextspåret med undertexter, titlar, innehållsförteckning med WEBVTT-formatfiler med exempel visas. HTML5-kodmallar med schema.org-mikromärkning för ljud och video presenteras. De huvudsakliga webbformaten för ljud- och videofiler med deras MIME-typer och verktyg för att konvertera video och ljud till dessa format anges.

HTML5 innehåller nya funktioner som gör att du kan spela upp ljud- och videofiler direkt i webbläsaren utan att använda tredjepartsprogram. Än så länge, trots att HTML5 inte längre är nytt, finns det fortfarande oenighet om hur webbläsare bearbetar video- och ljudtaggar och hur själva spelaren visas. Vissa människor gör det bättre varje gång ny version, andra ligger fortfarande efter. Globalt är trenden att webbläsare kommer att ge mer och mer funktionalitet för att spela upp multimediafiler.

Screencast: Exempel på användning av mallar

Ladda ner video

Screencast: exempel på användning av mallar från artikeln - hemsida

HTML5 video och ljud är en standard som utvecklas och är inte associerad med något ljud- eller videoformat, så det finns skillnader mellan webbläsare i vad de stöder. format ljud- och videofiler. Denna skillnad kompenseras nu av att de kodar originalfil flera olika codecs och koppla alla dessa filversioner till taggar eller genom kapslade taggar< source src=" URL">. Men ledare växer fram bland ljud- och videofilformaten som stöds av webbläsare. För video är detta naturligtvis mp4-formatet (H.264), och för ljud är detta mp3- och m4a-formatet. Nu är förmodligen alla webbläsare kapabla att spela upp filer av dessa format. Också, Firefox webbläsare, Chrome och Opera har kommit överens om att stödja WEBM-standarden som ett vanligt videoformat. Ur min synvinkel skulle det optimala alternativet för att använda HTML5-video och ljud nu vara ett schema baserat på användningen av en multimediafil i mp4-format ( H.264) för video och m4a för ljud och JS HTML5-spelare. Endast en fil i det angivna formatet är ansluten till ljud- eller videobehållaren. Nuförtiden kan de flesta webbläsare spela mp4-format. Det anslutna JS-biblioteket kommer att utforma spelaren som är inbyggd i webbläsaren. Om webbläsaren inte stöder mp4 / m4a-formatet, implementerar JS-spelaren, i det här fallet Flash-anslutning spelare för att spela en multimediafil. Med tanke på att mp4-formatet har blivit väldigt populärt kan man hoppas på en låg sannolikhet för problem med uppspelningen i webbläsare. Detta schema kräver endast en multimediafil i det angivna formatet, vilket sparar diskutrymme och resurser för att bearbeta filer. Ett sådant schema kommer också att vara strategiskt mer korrekt, eftersom trenden är att webbläsare blir allt bättre på att implementera HTML5-video och ljud.

För att indikera för HTML5-spelaren vilken fil som ska spelas måste du förutom filens URL även skicka filens MIME-typ så att webbläsaren förstår vilken codec den behöver använda. Tabellen nedan listar de vanligaste filformaten och deras MIME-typer.

Filformat och deras MIME-typer Mediefiler Mime Type Extensions

Ljud mp3	mp3	ljud/mpeg
Ljud mp4	m4a	ljud/mp4
Ljud webbm	webm	ljud/webm
Ljud ogg	ogg	ljud/ogg
Video mp4 (H.264)	mp4	video/mp4
Video webbm	webm	video/webm
Video ogg	ogv	video/ogg

Ljud- och videokodningsverktyg

För att koda video- och ljudfiler till ovanstående webbformat kan du använda öppet program, som stöder konvertering av ljud- och videofiler till de vanligaste formaten för webben ( MP4, WebM, Ogg Theora, MP3, etc.). Miro Video Converter är tillgänglig för olika operativsystem- Windows, Mac och Linux och är ett grafiskt skal för konsolverktyg och som är bekväma att använda på webbserver för att bearbeta nedladdad video och ljud automatiskt.

: HTML5-ljudexempelkod med schema.org-mikromarkering: Ljudhuvud

HTML5-ljud stöds inte av din webbläsare.

Ladda ner ljud

Så här kommer mikromarkeringsdata som extraheras från koden att se ut för ljudmallen som beskrivs ovan.

Audioobject itemType = http://schema.org/AudioObject name = Ljudtitelbeskrivning = Ljudbeskrivning... isfamilyfriendly = true encodingformat = mp3-varaktighet = PT04M59S uppladdningsdatum = 2015-12-31 bild = Fullständig URL till image.jpg alternativt namn = Alternativt title audio contenturl href = URL till file.mp3 text = Ladda ner ljud författare person itemType = http://schema.org/Person url href = URL text = Författarens namn = Författarens namn bild = Fullständig url till person.jpg

Minsta ljuduppmärkning enligt schema.org bör inkludera itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . De återstående egenskaperna är valfria.

Exempel på standardanvändning av HTML5-taggar:

I demon använde jag CSS-stilar på taggen via class-attributet, vilket gjorde bredden på videoområdet dynamiskt beroende på skärmstorleken. Spelaren justerar sig själv i höjdled. Prova att ändra storlek på webbläsarfönstret för att se hur det fungerar. Därför finns det inga bredd- och höjdattribut för taggen i kodkällan för denna demo, de ersätts av CSS-stilar. Men den här metoden visas inte i mallkodlistan, eftersom är redan en speciell sak.

HTML5-videoexempelkod med schema.org-mikromarkering: Videotitel

Titta på YouTube

HTML5-video stöds inte av din webbläsare.

Ladda ner video: Videotitel

Så här kommer mikromarkeringsdata som extraherats från koden att se ut för videomallen som beskrivs ovan.

Videoobject itemType = http://schema.org/VideoObject name = Videotitel thumbnail imageobject itemType = http://schema.org/ImageObject contenturl = URL till video-thumbnail.jpg|png bredd = 100 höjd = 100 varaktighet = PT14M59S är familjevänlig = sant uppladdningsdatum = 2015-12-31 beskrivning = Kort beskrivning för video... url href = URL till file.mp4 text = Videotitel författare person itemType = http://schema.org/Person url href = URL till författare webbsida text = författarens namn = författarens namn bild = Fullständig URL to author.jpg thumbnailurl = URL till file.jpg|png

Minimum nödvändig För sökmotorer bör videouppmärkning enligt schema.org inkludera alla itemprop-egenskaper som visas i exempelkoden, med undantag för itemprop ="author"-blocket, som är valfritt för sökmotorer och kan raderas om det inte finns några data att fylla den. För videominiatyrer kräver Yandex att du specificerar mikromarkering enligt schema.org som itemprop ="miniatyrbild" i form av ett ImageObject , och Google kräver att man specificerar itemprop ="thumbnailUrl" , så du måste infoga videominiatyrfilen två gånger, och därför fick den andra img-taggen displayen: ingen stil för att inte visas i webbläsaren. Istället för att använda en img-tagg med display:none kan du skicka denna egenskap till länktaggen via href-attributet. Även trots att mikromarkering kan överföras via meta- och länktaggar som inte visas för användaren, rekommenderas det fortfarande, om möjligt, att lägga till mikromarkering i första hand till taggar som kommer att visas för användaren. Validering av schema.orgs mikromarkering kan göras med hjälp av dessa länkar: , . Den största fördelen med att använda mikromarkering är bekvämligheten med sådant innehåll för sökrobotar och sociala nätverksrobotar. Dessa robotar extraherar märkta data och aggregerar dem. Därför förbättras användningen av mikromarkering SEO webbplats och underlättar automatisk distribution av data till i sociala nätverk. En detaljerad beskrivning av Schema.org-mikromarkeringen för videor markerade med VideoObjec t-schemat på webbplatsen. Det är också värt att notera att i fall när du inte infogar en video på din webbplats direkt, men använder videovärdwidgetar Yandex.Video eller YouTube, kan du lägga till ditt HTML-kodblock med en beskrivning av videon under widgetkodblocket och bädda in Schema.org-uppmärkningen för den här videon. Samtidigt, som en URL-parameter - en länk till en video, ange inte en direktlänk till en statisk fil, utan ange en länk som tagits emot från videovärden. Även om Schema.org-specifikationen säger att länken måste vara till en direkt fil, bearbetar sökmotorer också länkar till videor från videohosting ( se exempel på Yandex-webbplatsen i avsnittet Webmaster), trots att du inte kan ladda ner filen från en sådan länk och du kan inte se den direkt i din HTML5-mediaspelare på sidan, bara i videohostingwidgeten.

Om du står inför frågan om vilken värd du ska ladda ner multimedialjud- och videofiler från, titta på artikeln som beskriver alternativet att infoga mediefiler på en WEB-sida från Yandex Disk.

Attribut och taggar:

Attributen src , preload , autoplay , mediagroup , loop , muted , controls är vanliga attribut för alla medieelement, inklusive taggar och .

autoplay-attribut: antingen eller

• Autoplay-attributet specificeras av dess närvaro i eller taggen och det finns inget behov av att ange ett värde för detta attribut, bara dess närvaro är tillräckligt. För HTML-redigerare som redigerar elementkod kan du ställa in detta attribut som autoplay ="autoplay", vilket motsvarar att helt enkelt ha attributet närvarande. Närvaron av autoplay-attributet talar om för webbläsaren att börja spela filen direkt efter att webbsidan har laddats. Följaktligen åsidosätter autoplay-attributet värdena för preload-attributet, som styr hur videon laddas in i spelaren, eftersom videon måste börja spela omedelbart och därför måste laddas. Som standard finns det inget autoplay-attribut.

kontroller attribut: antingen eller

• Controls-attributet talar om för webbläsaren att visa spelarens kontrollpanel när sidan har laddats men inspelningen inte har börjat spelas. Detta attribut, precis som attributet autoplay, specificeras endast av dess närvaro i eller taggen, och kräver inget värde, bara dess närvaro är tillräcklig. Som standard saknas detta attribut, dvs. Spelaren visar inte kontrollpanelen innan uppspelningen startar. När filen börjar spelas visas kontrollpanelen när du för musen över spelarområdet.

loop-attribut: antingen eller

• Loop-attributet gör att spelaren spelar upp filen i en loop. Ett attribut specificeras endast av dess närvaro i taggen eller och har inga parametrar. Som standard finns det inget loop-attribut.

preload attribut:

• preload-attributet anger laddningen av en fil tillsammans med laddningen av en webbsida och tar ett av följande tre värden:
  • ingen - ladda inte ner filen samtidigt som webbsidan laddas. Det betyder att filen kommer att börja laddas i spelaren först efter att ha tryckt på uppspelningsknappen. Detta kan vara praktiskt för att påskynda sidladdningen. Värdet none är standardvärdet för preload-attributet, så det är möjligt att inte infoga preload-attributet i taggen alls eller för det här fallet.
  • metadata – laddar inte ned filen samtidigt som webbsidan laddas, men laddar ner multimediafilens metadata.
  • auto - utför en fullständig filnedladdning samtidigt som webbsidan laddas. I det här alternativet kommer webbläsare automatiskt att ladda mediefilen tillsammans med webbsida y, men detta kommer inte att störa inläsningen av själva sidan och dess rendering i webbläsaren. Om preload =""-attributet med ett tomt värde anges i taggen eller, kommer autovärdet för det att användas.
  • Preload-attributet kommer att åsidosättas om autoplay-attributet används.

src attribut:

• taggens src-attribut eller låter dig omedelbart ställa in sökvägen till multimediafilen i taggen. Sökvägen kan antingen vara komplett, som anger protokollet och domänen, eller i förhållande till roten på den aktuella platsen. Du kan också ange sökvägen till filen i taggar som är inbäddade i en ljud- eller videobehållare.< source src=" URL"> .

Affischattribut för videotaggen:

• posterattributet används endast i taggen och anger webbadressen till bilden (gif, png, jpeg, etc.) som kommer att visas medan videon inte är tillgänglig. Om posterattributet inte är inställt kommer webbläsarspelaren att försöka visa den första bildrutan i videon.

Bredd- och höjdattributen för videotaggen:

• width- och height-attributen gäller endast taggen och ställer in bredden respektive höjden på videospelarens uppspelningsområde. Värdet förväntas vara ett positivt heltal, specificerat i pixlar eller procent. Att ställa in dessa attribut påverkar videons visningsstorlek, men ändrar inte videons bildförhållande. Videon kommer att anpassas till de angivna måtten samtidigt som dess proportioner bibehålls. Om de angivna måtten inte stämmer överens med videoproportionerna kommer det att finnas mörka ränder längs videons övre och/eller sidokanter. Därför, när du ställer in dessa parametrar, är det tillrådligt att välja förhållandet på samma sätt som det för videon som spelas, eller bara ställa in bredden, så kommer spelaren att justera höjden själv.
• Om någon av eller båda dessa parametrar inte är specificerade, kommer de ospecificerade parametrarna att tas från motsvarande bildstorlek som anges i posterattributet.
• Om posterattributet saknas, kommer dessa parametrar att ställas in enligt följande: för bredd = 300 px och för höjd = 150 px. För att inte beräkna och koordinera dimensionerna för videoområdet enligt proportionerna för själva klippet, skulle jag rekommendera att endast ställa in en breddparameter, sedan väljs höjden (höjden) på uppspelningsområdet automatiskt baserat på videoproportionerna .
• Även storleken och designen på HTML5-spelaren kan påverkas genom CSS-egenskaper tillämpas på taggar eller .

muted attribut: antingen eller

• Attributet muted ställer in sin närvaro i taggar eller ljudet till ett tyst läge i HTML5-spelaren. Som standard saknas attributet.

crossorigin attribut:

• Attributet crossorigin säger åt webbläsaren att utföra en CORS-begäran för detta element. Som standard saknas attributet, vilket innebär att man inte använder CORS-förfrågningar alls. Om attributet är närvarande är de möjliga värdena anonyma och användningsuppgifter. CORS () är en teknik i moderna webbläsare som låter dig hantera behörigheter för att ladda resurser på den aktuella webbsidan från andra domäner än den aktuella sidans domän. Webbläsarstöd för CORS-standarden låter dig implementera säkert datautbyte över flera domäner genom att exekvera en speciell begäran (huvud) till domänen på den aktuella sidan för att avgöra om resurser från en annan specificerad domän tillåts laddas på denna sida. Som svar på en sådan begäran måste servern ange de domäner från vilka nedladdning av resurser är tillåten.

mediagroup attribut: div ( marginal: 1em auto; position: relativ; bredd: 400px; höjd: 300px; ) video (position; absolut; botten: 0; höger: 0; ) video:första barn (bredd: 100%; höjd : 100%; ) video:last-child ( bredd: 30%; )

• Mediagroup-attributet låter dig kombinera kontrollen av flera mediefiler till en MediaController genom att skapa en grupp med mediefiler på olika platser på sidan. Denna grupp kommer att hanteras samtidigt för alla filer som ingår i den. Detta är praktiskt till exempel om du behöver spela upp och styra samma video samtidigt på olika ställen på sidan med olika undertexter, eller olika videor.

Taggar och kräver en avslutande tagg.

För de fall då webbläsaren inte stöder HTML5 och taggar, vilket nu är mycket sällsynt, skrivs ett textmeddelande före containerns stängningstagg och en länk för att ladda ner filen läggs vanligtvis till. Om HTML5-spelaren som är inbyggd i webbläsaren dessutom styrs av ett JS-bibliotek (JS-spelare), så ansluter de flesta av dem en flash-spelare om det är omöjligt att spela HTML5-video och ljud i webbläsaren på grund av att webbläsaren inte stöder video och ljud taggar eller multimediafilformatet.

Märka:

Sökvägen till filen som spelas kan också specificeras med en tagg med src-attributet placerat inuti taggarna eller. Taggen har ingen avslutande tagg.

I de flesta fall ser taggen ut så här:

och den innehåller alltid attributet src och type, som i de flesta fall bara har en MIME-typ.

Taggattribut:

• attributet src= "URL" för taggen anger URL:en till multimediafilen. Sökvägen kan antingen vara komplett, som anger protokollet och domänen, eller i förhållande till webbplatsens rot.
• taggens type="MIME-type"-attribut, eller mer fullständigt type="MIME-type; codecs="codec"" anger filens MIME-typ och codec. För ljud räcker det att ange MIME-typen, till exempel för .mp3 - type="audio/mpeg". Även om enligt specifikationen för video måste codec också anges i typattributet, men nu anger de ofta bara MIME-typen utan codec, vilket överlåter till webbläsarna att bestämma.
• Mediaattributet ="all|blindskrift|handhållen|print|screen|speech|projection|tty|tv" för taggen anger vilken typ av enhet som filen ska spelas för. Standardvärdet är alla, så i de flesta fall anges inte detta attribut alls om du inte specifikt vill identifiera enheten för uppspelning.

Märka:

För HTML5-video är det också möjligt att visa ett extra spår i spelaren med information som undertexter, bildtexter, kapitel, beskrivningar (stöds inte ännu) och metadata (stöds inte ännu). Den här funktionen implementeras genom att lägga till taggar med lämpliga attribut inuti taggen.

- har ingen avslutande tagg.

Taggen låter dig ansluta ytterligare spårfiler till videon i det speciella WebVTT-formatet (Web Video Text Tracks Format), som indikerar utdata textmeddelanden med sin tidsreferens till videofilen. WebVTT-standarden stöder inte bara textmeddelandeutmatning, utan ger också alternativ för det CSS-styling och alternativ för placering i videovisningsområdet. För närvarande används WebVTT-filer främst för att bifoga text undertexter till videor, vilket stöds av nästan alla webbläsare. Andra funktioner i WebVTT-standarden är ännu inte helt implementerade av webbläsarna själva, därför är det bättre att använda JS-spelare för en mer komplett användning av WebVTT. WebVTT-filer kan också användas icke-standardiserat av JS-spelare för att överföra ytterligare data till JS-spelaren, såsom till exempel URL:er för bildförhandsvisningar för videoramar. På frågan om hur man visar förhandsvisningar av videorutor på spelarens bakåtspolningsskala (Scrub Bar Thumbnails) som man gör på videohotellsajter. Här måste sägas att sådan funktionalitet ännu inte är tillgänglig i spelare inbyggda i webbläsare och därför implementeras genom JS-spelare som ett tillägg. För att göra detta, anslut ett JS-bibliotek (js-spelare), som tar kontroll över HTML5-video- och ljudobjektet och utför dess styling. Sådana JS-spelare för att visa förhandsvisningar av videoramar använder icke-standardiserat WEBVTT-filer från taggen för att överföra URL:erna till förhandsgranskningsbilder genom den.

En WebVTT-fil är en vanlig textfil med filändelsen .vtt där, i form av en rad-för-rad-lista, tidsstämplar med start- och sluttider samt textmeddelanden för utmatning till dessa taggar skrivs. Du kan ansluta flera WebVTT-filer med text på olika språk till behållaren. För varje språk du behöver skapa separat fil och anslut var och en via en tagg. Taggar måste infogas i behållaren efter alla taggar, men före HTML5-videofelmeddelanden. Taggen med undertextfilen på standardspråket måste placeras först bland taggarna i den aktuella behållaren.

En WEBVTT-fil kan innehålla en eller flera tidsstämplar. Filen börjar med ordet WEBVTT. Tomma linjer separata tidsstämplar med tillhörande text och attribut. Texten kan innehålla HTML-element och CSS-uppmärkning. Ett ID för det kan placeras före en tidsstämpel för att referera till det med speciella uttryck. Alla dessa detaljer beskrivs i WEBVTT-standarden. anger spårtypen och kan ta följande värden:

• undertexter - undertexter i form av text som visas över videon. För filen som spelas kan du ställa in undertexter på olika språk för att ge deras val i spelaren, om den stöder det. I de flesta fall används denna typ eftersom den stöds av de flesta webbläsare.
• bildtexter - bildtexter i form av text och ljud som visas över videon. Liknar undertexter, men förutom text kan de innehålla ljudeffekter och annan ljudinformation.
• kapitel - kapitel som visas i text som en listmeny och är avsedda för snabb navigering genom mediafilen.
• beskrivningar - beskrivning, detta textfiler med en videobeskrivning för att spela upp dem i skärmläsare.
• metadata - metadata för att skicka js-skript.

Taggens src-attribut anger URL:en till spårfilen med ytterligare information. Filen som bifogas taggen har WebVTT-formatet och filtillägget .vtt.

Taggens srclang-attribut anger språket för spåret via språkkoden. För ryska kommer det att vara lika med "ru", för engelska "en".

Taggens etikettattribut anger spårnamnet som kommer att visas i spelaren. Om attributet inte är inställt visar webbläsaren dess tjänstnamn.

Standardattributet för taggen anger valet av det här spåret som standard om det finns andra spår i videobehållaren. Endast en av flera taggar kan ha ett standardattribut. Det är bättre att placera standardspåret först bland andra anslutna spår.

Exempel på taggar: Den här frågan dyker upp väldigt ofta, så jag bestämde mig för att ägna en separat artikel åt den i lektionerna. Eftersom HTML inte har en universell teknik för att spela ljud för alla webbläsare, för att lösa detta problem föreslår jag att du laddar ner ljudspelarfilen, som görs på de flesta webbplatser. Vi gör allt steg för steg:

1. På webbhotellet där din webbplats finns, i rotkatalogen (mappen där indexfilen finns), skapa ljudmappen. I framtiden kommer du att placera alla ljudfiler i den.

3. Välj nu nödvändiga filer, bättre i mp3-format. Skapa en ljudmapp i roten på webbplatsen och ladda upp dem.

4. Allt som återstår är att sätta in spelarens anslutningskod. Den är lämplig för alla webbplatser. På rätt ställe behöver du bara ange sökvägen till spelarfilen och ljudfilen, och ersätta orden your_domain och audio_file name:

Och allt är klart! Du kan också titta på arbetsexemplet.

Hur man installerar bakgrundsmusik i html Jag använder funktionerna i HTML och webbläsaren, du kan också infoga bakgrundsmusik på sidan. Du behöver en ljudfil önskat format: WAV, AU, MIDI eller MP3. Du kan använda vilken fil som helst med det angivna tillägget som exempel.

Det första sättet är embed-taggen. Embed-elementet används för att ladda och visa objekt (till exempel videofiler, flashfilmer, vissa ljudfiler etc.) som webbläsaren inte förstår från början.

Syntaxen är ganska enkel:

En avslutande tagg krävs inte.

Låt oss nu titta på ett exempel på en post med attribut, och nedan med deras avkodning:

Bädda in taggattribut för att spela upp ljud i html
bredd - panelbredd i pixlar (eller procent)
höjd - panelhöjd i pixlar (eller procent)
justera - panelens position i förhållande till texten, möjliga värden är vänster, höger, mitten
dold - låter dig dölja panelen, attributvärden: true - panelen är dold, falsk - panelen är synlig (standardvärde)
autostart - sant - spelaren startar automatiskt när sidan laddas, falskt - väntar på att spelknappen ska tryckas ned
loop - cycle, true - spåret spelas i en cirkel, och när värde falskt- bara en gång

Andra sättet. Mycket gammal, men också praktisk) Lägg till melodin i samma mapp (katalog) där din fil finns och skriv följande kod i brödtexten:

Som ett resultat kommer melodin du angav i bgsound-taggen att ljuda efter att sidan har laddats. Låt oss nu överväga bättre egenskaper märka:

src - sökväg till din ljudfil
loop - hur många gånger för att upprepa melodin (om -1, upprepas sedan oändligt)
balans - stereobalansvärde (från -10000 till 10000)
volym - melodiuppspelningsvolym, där 0 är max och -10 000 är minimum.

Det kommer dock inte att finnas något sätt att styra spelaren på något sätt - varje gång sidan uppdateras kommer spåret att spelas igen.

Efter att ha beskrivit metoden för att infoga bakgrundsmusik vill jag avråda dig från detta, eftersom de flesta användare som regel redan lyssnar på musik när de besöker olika webbplatser. Därför kan medföljande musik bara tvinga honom att stänga fliken med webbplatsen.

Infoga ljud och musik i HTML5 - ljudtagg
ljud - parad tagg som definierar bakgrundsljud, musik eller annan ljudström på webbplatsen.

Ljudtaggattribut

autoplay - filen spelas upp omedelbart när sidan laddas (liknande bgsound bakgrundsmusik)
kontroller - visa spelarens kontrollpanel i webbläsaren
loop - spelar upp filen igen efter att den är slut
preload - ljudfilen kommer att laddas tillsammans med sidans inläsning
src - sökväg till ljudfilen (mp3 eller ogg)

Exempelkod med ljudtagg

Ljudtagg

Ljud i HTML 5

Ljudtaggen stöds inte av din webbläsare.
Ladda ner musik.

Beskrivning

Lägger till, spelar upp och hanterar ljudinställningar på en webbsida. Sökvägen till filen anges via src-attributet eller en undertagg. Du kan skriva text inuti behållaren som kommer att visas i webbläsare som inte fungerar med den här taggen.

Listan över codecs som stöds av webbläsare är begränsad och ges i tabell. 1.

Tabell 1. Codecs och webbläsare

Codec	Internet Explorer	Krom	Opera	Safari	Firefox
ogg/vorbis
wav
mp3
A.A.C.

För universell uppspelning i specificerade webbläsare kodas ljud med olika codecs och filer läggs till samtidigt genom taggen.

Syntaxattribut Ljudet börjar spelas direkt efter att sidan har laddats. Lägger till en kontrollpanel till en ljudfil. Upprepar ljudet från början efter att det är slut. Används för att ladda ner en fil tillsammans med att ladda en webbsida. Anger sökvägen till filen som spelas upp. Avslutande tagg

Nödvändig.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Alexander Klimenkov - fjorton

Ljudtaggen stöds inte av din webbläsare. Ladda ner musik.

Exempel resultat i Opera webbläsare visas i fig. 1.

Ris. 1. Spela upp en ljudfil

Webbläsare

Ljuduppspelningskontroller varierar i utseende mellan webbläsare, men de grundläggande elementen är desamma. Dessa är uppspelnings-/pausknappen, spårlängd, förfluten och total speltid samt volymnivå.

Med tillkomsten av tillräckligt snabba internetanslutningar var Flash det enda verktyget för att spela upp ljud på webbplatser. Men HTML5 kommer i grunden att förändra hur ljud spelas på Internet. I den här artikeln vill jag berätta i detalj om hur du använder taggen på dina webbplatser.

Vi använder den för att infoga en ljudfil på sidan enklaste exemplet med taggen laddar den ner mp3-filen och spelar upp den. Notera autopaly-attributet, som används för att automatiskt spela upp ljud. Du bör dock inte automatiskt spela upp ljud på sajten, eftersom detta kommer att irritera användare. Spela ett ljud på en loop Vill du spela ett ljud i en loop? Loop-attributet hjälper dig att göra detta. Men återigen, du bör inte överanvända autoplay och loop-uppspelning om du inte vill att användaren ska lämna webbplatsen i förtid. Visa kontrollerI stället för att låta ljud spelas upp automatiskt, vilket definitivt är en dålig praxis, bör du tillåta att vissa kontroller visas i webbläsaren, såsom volym- och uppspelnings- (paus)knappar. Detta är lätt att göra genom att helt enkelt lägga till attributet kontroller. Olika filformat Taggen stöds av de flesta moderna webbläsare, men problemet är det olika webbläsare stöder olika filformat. Safari, till exempel, kan spela MP3-filer, men Firefox kan inte, och spelar OGG-filer istället. Lösningen på detta problem är att använda båda formaten så att varje besökare kan höra ljudet, oavsett vilken webbläsare de använder. Ange MIME-typ för filer När du använder olika filformat är det en god praxis att ange MIME-typen för varje fil för att hjälpa webbläsaren att lokalisera filen den stöder. Detta kan enkelt göras med hjälp av attributet type. För äldre webbläsare Vad händer om besökaren använder IE6 eller någon annan förhistorisk webbläsare som inte stöder taggen? Det är enkelt: nedan är koden som visar ett meddelande för webbläsare som inte stöder taggen. Din webbläsare stöder inte ljudtaggen! Filbuffring Vid uppspelning av stora filer kan filbuffring användas. Du kan använda preload-attributet för detta. Det kan ta 3 värden:

• ingen - om du inte vill använda filbufferten;
• auto - om du vill att webbläsaren ska buffra hela filen;
• metadata - för att endast ladda serviceinformation (ljudlängd, etc.).

Styra uppspelning via JavaScript Att styra HTML5-ljudspelaren via JavaScript är mycket enkelt. Följande exempel visar hur man använder JavaScript du kan bygga din egen grundläggande element Ljudspelarens kontroller: Spela Pausa Volym + Volym -

Det är allt för idag.
Jag hoppas att den här artikeln hjälpte dig att förstå grundläggande förmågor HTML5-tagg.

Tills nyligen var det inte så lätt att bädda in ljud på en webbsida. I allmänhet finns det några som erbjuder smartare och bättre implementeringar, men de flesta metoder begränsar dig till att ha en viss webbläsare och vissa plugins.

Med tillkomsten av Flash-teknik på marknaden har denna uppgift blivit mycket enklare, eftersom Flash-pluginen låter dig bädda in alla animationer eller ljud på en sida, och tekniken stöds av de flesta webbläsare. Men efterfrågan på Flash försvinner gradvis efter lanseringen av innovativa enheter från Apple: iPhone och iPad. Som ni vet, utrustar Apple inte i grunden sina enheter Flash-stöd, och antalet produktanvändare växer snabbt.

Kort sagt, det är lite förvirring här.

Lyckligtvis har HTML5 gjort livet mycket lättare för utvecklare, eftersom tekniken inkluderar ett ljudelement. Detta element låter dig bädda in ljudfiler på vilken webbsida som helst, samt implementera en kontrollpanel med hjälp av javascript. Ännu viktigare är att tekniken inte kräver ytterligare plugins och stöds i nästan alla webbläsare, med undantag för tidiga versioner (vi pratar om webbläsarstöd senare!).

I vår artikel idag kommer vi att berätta hur du kan bädda in ljud med hjälp av ljudelementet. Vi kommer också att lära oss hur man styr uppspelningsprocessen med hjälp av javascript, och kommer också att försöka berätta om teknikstöd bland webbläsare.

HTML5 ljudelement

Detta element är extremt lätt att använda. I vårt exempel idag kommer vi att bädda in Bing Crosbys "White Christmas":

Det finns ingen anledning att förklara mycket här. På samma sätt som när du infogar en bild med img-taggen, kan du infoga ljud med hjälp av ljudtaggen på samma sätt.

Stöd över webbläsare

Det är osannolikt att exemplet ovan fungerar i alla webbläsare. Det är här filformatet kommer in i bilden.

Vissa webbläsare kan spela .mp3-filer, men inte .ogg-filer, medan andra gör tvärtom. De flesta webbläsare kan spela .wav-filer, men på grund av dess stora storlek är det olämpligt att använda som ljud för en webbplats.

Här är en tabell över webbläsare som visar stöd för ljudformat:

Vilka format stöder din webbläsare? Bestäm detta genom .

Som du kan se i tabellen skulle det mest optimala implementeringsalternativet vara att ansluta båda filformaten.
För att göra detta kan du lägga till flera källelement till ljudelementet och i dem ange sökvägarna till de olika formaten. Webbläsaren kommer att spela upp den första filen den stöder. Här är ett exempel:

Naturligtvis innebär detta att du behöver skapa både en Mp3- och en OGG-version av din ljudfil(här kommer till din hjälp), men detta är det enda sättet att organisera stöd över webbläsare.

Tidiga versioner av Internet Explorer (version 7 och 8) stöder inte ljudelementet alls. Men senare i artikeln kommer vi att titta på hur man kan komma runt detta problem.

Automatisk ljuduppspelning

Även om koden ovan bäddar in ljud, spelar den inte upp det. Om vi ​​vill att ljudet ska spelas automatiskt när sidan laddas måste vi lägga till autoplay-attributet till elementet:

Lägger till kontrollknappar

Även om automatisk uppspelning kan vara användbart är det i många fall irriterande eller helt olämpligt. Därför kan vi installera ytterligare kontrollknappar för ljudelement så att användaren kan bestämma själv:

Detta lägger till en horisontell stapel med en paus/uppspelningsknapp, en tidslinje med ett skjutreglage och en volymkontroll. Allt är ungefär detsamma som du kan se på spelaren på Youtube.

Det är viktigt att komma ihåg att kontrollpanelen kommer att skilja sig beroende på webbläsare. Till exempel kommer webbläsaren på en iPhone inte att ha något volymreglage eftersom enheten har separata knappar för att styra ljudnivåer.

Slinguppspelning

Om du lägger till ett loop-attribut till ljudelementet kommer ljudet att spelas på obestämd tid.

Detta kan vara användbart för att slå på bakgrundsmusik eller ljudeffekter i spel.

Du kan också använda preload-attributet, som talar om för webbläsaren när och var en specifik ljudfil ska laddas.
Förladdning av ljudfilen innebär att ljudet kan spelas upp direkt när användaren trycker på play.

Det finns flera betydelser för detta attribut:

"ingen" – webbläsaren ska inte påtvinga den nedladdade filen. De där. Om du är säker på att de flesta användare inte kommer att spela upp filen, använd det här alternativet. Eller använd den när du behöver spara så mycket serverbandbredd som möjligt.

"metadata" - parametern liknar ingen, förutom att du meddelar webbläsaren om möjligheten att ladda metadata, såsom ljudspårets varaktighet, men inte själva ljudfilen.

"auto" – du låter webbläsaren ladda ner själva ljudfilen.

Till exempel:

Tänk på att förladdning bara är en bekvämlighetsfunktion, eftersom vissa webbläsare helt enkelt kan ignorera detta kommando och börja göra vad de vill.

Uppspelningskontroll via javascript

Vad är bekvämt i javascript-element– detta beror på att de är lätta att hantera med javascript. Ljudelementet erbjuder många bekväma parametrar och kontrollmetoder:

Play() – starta uppspelning från den aktuella positionen;

Pause() – stoppa uppspelningen vid den aktuella positionen;

canPlayType(type) – avgör om webbläsaren stöder uppspelning av denna typ media;

varaktighet – spårets längd i sekunder;

currentTime – aktuell position i sekunder. Du kan också installera denna parameter för att flytta uppspelningspositionen.

Med hjälp av alternativen och metoderna som föreslagits ovan kan vi skapa några grundläggande kontrollknappar:

Spela musik
Pausa musik
Stoppa musik
Se demo: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Stöd för tidigare versioner av Internet Explorer

I de flesta fall kommer användarens webbläsare att stödja HTML5-elementet. Men tyvärr stöder IE-webbläsarna version 7 och till och med 8 inte detta element (även om version 9 redan har stöd). Det är viktigt att överväga en återställningsversion för användare som fanns kvar 2008.

En mycket grov men effektiv metod är att använda speciella kommentarer för att markera webbläsardata och ge den en objektpekare till ljudfilen. Således kommer webbläsaren ofta att visa en inbyggd kontroller som tillåter användare att spela, pausa eller spola tillbaka musik på ett nästan HTML5-ljudliknande sätt. Här är ett exempel:

Spela musik
Pausa musik
Stoppa musik

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() );

Ovanstående exempel kommer att fungera i alla webbläsare som stöder HTML5 Audio, och kommer även att fungera i IE version 7 och 8. Med hjälp av kommentarer omdirigerar vi knappkontrollerna direkt till ljudfilen.

Ett annat sätt att återställa är att bädda in en Flash-spelare på sidan. Här, som talar om rollback i form av en Flash-spelare.

Slutsats

I vår artikel idag lärde vi oss hur man bäddar in ljudfiler med HTML5. Inte bara är ljudelementet lätt att använda, utan vi kan också anpassa det och styra uppspelningen via javascript.

Vill du lära dig mer om ljudelementet i HTML5? Kolla sedan in.

Även om stöd för närvarande lider i vissa webbläsare (som äldre versioner av IE), kan du enkelt återställa dem om det behövs, vilket blir mindre och mindre vanligt nuförtiden.