• attribut korsursprung säger åt webbläsaren att köra CORS fråga för detta element. Som standard saknas attributet, vilket betyder att det inte ska användas CORS förfrågningar i allmänhet. Om attributet finns är följande värden möjliga: anonym och användningsuppgifter. CORS () är en modern webbläsarteknik som låter dig kontrollera behörigheter att ladda ner resurser på den aktuella webbsidan från andra domäner än den aktuella sidans domän. Webbläsarstöd CORS låter dig implementera ett säkert datautbyte över flera domäner genom att utföra en speciell begäran (huvud) till domänen för den aktuella sidan om huruvida det är tillåtet att ladda resurser på denna sida från en annan specificerad domän. Som svar på en sådan begäran måste servern ange de domäner från vilka resursladdning är tillåten.

mediagroup attribut:

• attribut mediagrupp låter dig kombinera hanteringen av flera mediefiler till en MediaController genom att skapa en grupp mediefiler på olika platser på sidan. Den här gruppen kommer att hanteras samtidigt för alla filer som ingår i den. Detta är praktiskt till exempel om du behöver spela och styra samma klipp samtidigt på olika ställen på sidan med olika undertexter, eller olika klipp.

taggar och kräver en avslutande tagg.

För de fall där webbläsaren inte stöder HTML5 och taggar, vilket nu är mycket sällsynt, skriver ett textmeddelande före den avslutande taggen för behållaren och lägger vanligtvis till en länk för att ladda ner filen. Om HTML5-spelaren som är inbyggd i webbläsaren dessutom styrs av JS-biblioteket (JS-spelare), ansluter de flesta av dem flash-spelaren om det är omöjligt att spela upp video och ljud i HTML5-webbläsaren på grund av att webbläsaren inte stöder video och ljud taggar eller multimediafilformat.

Märka :

Sökvägen till filen som spelas kan också ställas in med taggen med attribut src placerade inuti taggar eller . Märka har ingen avslutande tagg.

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

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

Taggattribut :

• attribut src="url"-tagg anger URL:en till mediafilen. Sökvägen kan antingen vara full, vilket indikerar protokollet och domänen, eller relativt till webbplatsroten.
• attribut typ="MIME-typ"-tagg eller mer fullständigt typ="MIME-typ; 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". Fast enligt specifikationen för video i attributet typ du måste ange codec också, men nu är det vanligt att endast specificera MIME-typen utan codec, vilket överlåter till webbläsarna att bestämma.
• attribut media="all|punktskrift|handhållen|print|skärm|tal|projektion|tty|tv"-tagg 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 ange uppspelningsenheten.

Märka :

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

<Spår snäll | src | srclang | etikett | default> - har ingen avslutande tagg.

Märka låter dig ansluta ytterligare filer-spår av ett speciellt format till videon WebVTT(Web Video Text Tracks Format), som indikerar de visade textmeddelandena med deras tidsreferens till videofilen. Standard WebVTT stöder inte bara utmatning av textmeddelanden, utan ger också alternativ för det CSS-stilar och alternativ för placering i videovisningsområdet. Nu för tiden WebVTT filer används 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 för en mer komplett användning WebVTT, det är bättre att använda JS-spelare. WebVTT-filer kan också användas icke-standardiserat av JS-spelare för att skicka ytterligare data till JS-spelaren, såsom webbadresser för förhandsgranskning av bilder för videoramar. Till frågan om hur man visar en förhandsvisning av videorutor på spelarens rullningslist (Scrub Bar Thumbnails) som det görs på videohosting. Här måste sägas att sådan funktionalitet ännu inte är tillgänglig i de spelare som är inbyggda i webbläsare och därför implementeras via JS-spelare som ett tillägg. För detta ansluts 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 videoramsförhandsvisningar använder icke-standardiserat WEBVTT-filer från taggen för att passera genom den förhandsgranskningsbildernas URL.

Formatera fil WebVTTär en vanlig textfil med tillägget .vtt i vilken i form av en rad-för-rad-lista registreras tidsstämplar med start- och sluttider samt textmeddelanden för utmatning till dessa märken. Till behållare kan innehålla flera filer WebVTT med text på olika språk. För varje språk du behöver skapa separat fil och anslut var och en via en tagg . taggar måste placeras inuti behållaren. efter alla taggar , men före HTML5-videofelmeddelanden. Märka med en undertextfil på standardspråket ska placeras först bland taggarna i den aktuella behållaren .

WEBVTT En fil kan innehålla en eller flera tidsstämplar. Filen börjar med ordet WEBVTT. Tomma linjer separerar tidsstämplar med tillhörande text och attribut. Texten kan innehålla HTML- och CSS-markeringselement. Tidsstämpeln kan föregås av ett ID för den, så att den kan nås med hjälp av speciella uttryck. Alla dessa detaljer beskrivs i standarden. WEBVTT. 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 den här typen eftersom den stöds av de flesta webbläsare.
• bildtexter- titlar i form av text och ljud som visas över videon. Liknar undertexter, men kan, förutom text, innehålla ljudeffekter och annan ljudinformation.
• kapitel- kapitel som visas i text som en listmeny och är designade för snabb navigering genom mediafilen.
• beskrivningar- beskrivning, det här är textfiler med en beskrivning av videon för att spela upp dem i skärmläsaren.
• metadata- Metadata för att skicka js-skript.

Attribut src märka anger URL:en till spårfilen med ytterligare information. Kopplad till en tagg Filen är i WebVTT-formatet och har filtillägget .vtt.

Attribut srclang märka ställer in spårets språk via språkkoden. För det ryska språket kommer det att vara lika med "ru", för engelska "en".

Attribut märka märka ställer in spårnamnet så att det visas i spelaren. Om attributet inte är inställt visar webbläsaren dess tjänstnamn.

Attribut standard märka ställer in standardvalet för detta spår när det finns andra spår i videobehållaren. Bara en av flera taggar kan ha ett standardattribut. Det är bättre att placera standardspåret först bland andra anslutna spår.

Taggar exempel :

Tills nyligen var det ingen lätt uppgift att bädda in ljud på en webbsida. I allmänhet finns det , bland vilka vissa erbjuder smartare och bättre implementeringar, men de flesta sätten begränsar dig till det faktum att du behöver ha en viss webbläsare och vissa plugins.

Med tillkomsten av Flash-teknik på marknaden har denna uppgift förenklats avsevärt, 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 avtar gradvis efter lanseringen av innovativa enheter från Apple: iPhone och iPad. Som bekant, Apple företag i grunden inte utrustar sina enheter Flash-stöd och antalet produktanvändare växer snabbt.

Kort sagt, det finns en viss förvirring här.

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

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

HTML5 ljudelement

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

Det finns inte mycket behov av att förklara här. Precis som du infogar en bild med img-taggen kan du infoga ett ljud med taggen audio.

Stöd för flera webbläsare

Det är osannolikt att exemplet ovan fungerar i alla webbläsare. Problemet här är filformatet.

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 det som ljud för en webbplats.

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

Vilka format stöder din webbläsare? Definiera det med .

Som kan ses i tabellen skulle den mest optimala implementeringen vara att ansluta båda filformaten.
För att göra detta kan du lägga till flera källelement till elementet audio, och ange sökvägar till olika format i dem. Webbläsaren kommer att spela upp den första filen som den stöder. Här är ett exempel:

Naturligtvis betyder det att du behöver skapa både en Mp3- och en OGG-version av din ljudfil (det är här ) kommer väl till pass, men det är det enda sättet att få stöd för flera webbläsare.

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

Automatisk ljuduppspelning

Även om koden ovan bäddar in ljudet, 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ägga till kontrollknappar

Även om automatisk uppspelning kan vara användbart, är det i många fall irriterande eller olämpligt. Därför kan vi ställa in ytterligare kontrollknappar för element audio så att användaren kan bestämma:

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 i Youtube.

Det är viktigt att komma ihåg att kontrollpanelen kommer att skilja sig beroende på webbläsare. Till exempel kommer webbläsaren på iPhone inte att ha ett volymreglage, eftersom enheten har separata knappar för att kontrollera volymnivån.

Loopad uppspelning

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 viss ljudfil ska laddas.
Förladdning av ljudfilen innebär att ljudet kan spelas upp direkt när användaren trycker på uppspelningsknappen.

Det finns flera värden 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 den här filen, använd det här alternativet. Eller använd den när du behöver spara så mycket serverbandbredd som möjligt.

« metadata' liknar ingen, förutom att du meddelar webbläsaren att metadata kan laddas, som längden på ljudspåret, men inte själva ljudfilen.

« bil" - du tillåter webbläsaren att ladda ner själva ljudfilen.

Till exempel:

Tänk på att förhämtning bara är ett praktiskt tillägg, eftersom vissa webbläsare kanske bara ignorerar det här kommandot och gör vad de vill.

Uppspelningskontroll via javascript

Det som är bra med javascript-element är att de är lätta att manipulera med javascript. Ljudelementet erbjuder många bekväma alternativ och kontrollmetoder:

Spela()– starta uppspelningen från den aktuella positionen;

Paus()– stoppa uppspelningen vid den aktuella positionen;

canPlayType(typ)– avgöra om webbläsaren stöder uppspelning av denna mediatyp;

varaktighet– spårets längd i sekunder;

aktuell tid– aktuell position i sekunder. Du kan också ställa in 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 musiken
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 inte IE version 7 och till och med 8 detta element (även om IE 9 redan gör det). Det är viktigt att tänka på återställningsversionen för användare som stannade 2008.

En mycket grov men effektiv metod är att använda speciella kommentarer för att markera webbläsardata och ge den en objektpekare före ljudfilen. Som sådan visar webbläsaren ofta en inline-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: