andew

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

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

11937

Článek popisuje strukturu audio a video HTML5 kontejneru, video, audio, source, track tagy a jejich atributy s možnými hodnotami. Jsou poskytovány HTML šablony a příklady implementace přehrávání multimediálních souborů na základě schopností zabudovaných do prohlížeče. Je zobrazeno připojení k videotextové stopě titulků, titulků, obsahu pomocí souborů formátu WEBVTT s příklady. Prezentovány jsou šablony kódu HTML5 s mikroznačkami schema.org pro zvuk a video. Jsou uvedeny hlavní webové formáty zvukových a video souborů s jejich typy MIME a nástroje pro převod videa a zvuku do těchto formátů.

HTML5 obsahuje nové funkce, které umožňují přehrávat audio a video soubory přímo v prohlížeči bez použití programy třetích stran. Zatím, přestože HTML5 již není novinkou, stále panují neshody v tom, jak prohlížeče zpracovávají video a audio tagy a jak se zobrazuje samotný přehrávač. Někteří lidé to dělají pokaždé lépe nová verze, ostatní stále zaostávají. Celosvětově je trendem, že prohlížeče budou poskytovat stále více funkcí pro přehrávání multimediálních souborů.

Screencast: Příklad použití šablon

Stáhnout video

Screencast: příklady použití šablon z článku - webu

Video a zvuk HTML5 je vyvíjející se standard a není spojen s žádným formátem zvuku nebo videa, takže mezi prohlížeči existují rozdíly v tom, co podporují. formátů audio a video soubory. Tento rozdíl je nyní kompenzován tím, že kódují původní soubor několik různých kodeků a připojit všechny tyto verze souborů ke značkám nebo prostřednictvím vnořených značek< source src=" URL">. Mezi formáty audio a video souborů podporovanými prohlížeči se však objevují lídři. Pro video je to samozřejmě formát mp4 (H.264) a pro audio formát mp3 a m4a. Nyní jsou pravděpodobně všechny prohlížeče schopny přehrávat soubory těchto formátů. Taky, Prohlížeče Firefox, Chrome a Opera se dohodly na podpoře standardu WEBM jako běžného formátu videa. Z mého pohledu by nyní optimální možností pro použití HTML5 videa a zvuku bylo schéma založené na použití jednoho multimediálního souboru ve formátu mp4 ( H.264) pro video a m4a pro audio a JS HTML5 přehrávač. Ke kontejneru zvuku nebo videa je připojen pouze jeden soubor v zadaném formátu. V současné době je většina prohlížečů schopna přehrávat formát mp4. Připojená knihovna JS nastaví styl přehrávače zabudovaného v prohlížeči. Pokud prohlížeč nepodporuje formát mp4 / m4a, pak přehrávač JS v tomto případě implementuje Flash připojení přehrávač pro přehrávání multimediálních souborů. Vzhledem k tomu, že formát mp4 se stal velmi populárním, lze doufat v nízkou pravděpodobnost problémů s jeho přehráváním v prohlížečích. Toto schéma vyžaduje pouze jeden multimediální soubor v určeném formátu, což šetří místo na disku a prostředky pro zpracování souborů. Takové schéma bude také strategicky správnější, protože trendem je, že prohlížeče jsou stále lepší v implementaci videa a zvuku HTML5.

Chcete-li přehrávači HTML5 označit soubor, který se má přehrát, musíte kromě adresy URL souboru předat také typ MIME souboru, aby prohlížeč pochopil, který kodek potřebuje použít. Níže uvedená tabulka uvádí nejběžnější formáty souborů a jejich typy MIME.

Formáty souborů a jejich typy MIME Mediální soubory Mime Type Extensions

Zvuk mp3	mp3	audio/mpeg
Zvuk mp4	m4a	audio/mp4
Audio webm	webm	audio/webm
Audio ogg	ogg	audio/ogg
Video mp4 (H.264)	mp4	video/mp4
Video webm	webm	video/webm
Video ogg	ogv	video/ogg

Nástroje pro kódování zvuku a videa

Chcete-li kódovat video a audio soubory do výše uvedených webových formátů, můžete použít otevřený program, který podporuje převod audio a video souborů do hlavních formátů běžných pro web ( MP4, WebM, Ogg Theora, MP3 atd.). Miro Video Converter je k dispozici pro různé operační systémy- Windows, Mac a Linux a je to grafický shell pro konzolové nástroje, které lze pohodlně používat webový server pro automatické zpracování staženého videa a zvuku.

: Příklad kódu zvuku HTML5 s mikroznačkou schema.org: Záhlaví zvuku

Váš prohlížeč nepodporuje zvuk HTML5.

Stáhnout zvuk

Takto budou vypadat mikroznačková data extrahovaná z kódu pro výše popsanou audio šablonu.

Audioobject itemType = http://schema.org/AudioObject name = Audio title description = Audio description... isfamilyfriendly = true encodingformat = mp3 délka = PT04M59S uploaddate = 2015-12-31 image = Úplná adresa URL k image.jpg alternativní název = Alternativní title audio contenturl href = URL k souboru.mp3 text = Stáhnout zvuk autora osoba itemType = http://schema.org/Person url href = URL text = Jméno autora jméno = Jméno autora image = Celá adresa URL osoby.jpg

Minimální označení zvuku podle schema.org by mělo zahrnovat itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . Zbývající vlastnosti jsou volitelné.

Příklad použití standardní značky HTML5:

V ukázce jsem aplikoval styly CSS na značku prostřednictvím atributu class, díky čemuž byla šířka oblasti videa dynamická v závislosti na velikosti obrazovky. Přehrávač si sám nastavuje výšku. Zkuste změnit velikost okna prohlížeče, abyste viděli, jak to funguje. Proto ve zdroji kódu pro tuto ukázku nejsou pro značku žádné atributy width a height, jsou nahrazeny styly CSS. Tato metoda však není uvedena ve výpisu kódu šablony, protože je již specifická věc.

Příklad kódu videa HTML5 s mikroznačkou schema.org: Název videa

Sledujte na YouTube

Váš prohlížeč nepodporuje video HTML5.

Stáhnout video: Název videa

Takto budou vypadat mikroznačková data extrahovaná z kódu pro výše popsanou šablonu videa.

Videoobject itemType = http://schema.org/VideoObject name = Miniatura názvu videa imageobject itemType = http://schema.org/ImageObject contenturl = URL pro video-thumbnail.jpg|png width = 100 height = 100 trvání = PT14M59S je vhodný pro rodinu = true uploaddate = 2015-12-31 description = Stručný popis pro video... url href = URL k souboru.mp4 text = Název videa autor osoba itemType = http://schema.org/Person url href = URL webové stránky autora text = jméno autora = jméno autora obrázek = Úplná URL to author.jpg thumbnailurl = URL pro soubor.jpg|png

Minimální nutné U vyhledávačů by označení videa podle schema.org mělo zahrnovat všechny vlastnosti itemprop zobrazené v ukázkovém kódu, s výjimkou bloku itemprop ="author", který je pro vyhledávače volitelný a může být smazán, pokud nejsou k dispozici žádná data. naplnit to. Pro miniaturu videa vyžaduje Yandex, abyste podle schema.org specifikovali mikroznačku jako itemprop ="thumbnail" ve formě ImageObject a Google vyžaduje zadání itemprop ="thumbnailUrl" , takže soubor s náhledem videa musíte vložit dvakrát, a proto druhý tag img obdržel styl display: none, aby se nezobrazoval v prohlížeči. Namísto použití značky img s display:none můžete tuto vlastnost předat značce odkazu pomocí atributu href. Navzdory skutečnosti, že mikroznačky lze přenášet prostřednictvím značek metadat a odkazů, které se uživateli nezobrazují, stále se doporučuje, pokud je to možné, přidávat mikroznačky primárně ke značkám, které se budou uživateli zobrazovat. Ověření mikroznaček schema.org lze provést pomocí těchto odkazů: , . Hlavní výhodou používání mikroznaček je pohodlí takového obsahu pro vyhledávací roboty a roboty sociálních sítí. Tito roboti extrahují označená data a agregují je. Proto se zlepšuje používání mikroznaček SEO a usnadňuje automatickou distribuci dat v sociálních sítích. Podrobný popis mikroznaček Schema.org pro videa označená schématem VideoObjec na webu. Také stojí za zmínku, že v případech, kdy vložíte video na svůj web nikoli přímo, ale pomocí widgetů pro hostování videa Yandex.Video nebo YouTube, můžete do bloku kódu widgetu přidat blok HTML kódu s popisem videa. a vložte označení Schema.org pro toto video. Zároveň jako parametr URL - odkaz na video neuvádějte přímý odkaz na statický soubor, ale uveďte odkaz přijatý z hostování videa. Ačkoli specifikace Schema.org říká, že odkaz musí být na přímý soubor, vyhledávače zpracovávají také odkazy na videa z videohostingu ( viz příklady na webu Yandex v sekci Webmaster), a to přesto, že z takového odkazu nelze soubor stáhnout a nelze jej zobrazit přímo ve vašem HTML5 přehrávači médií na stránce, pouze ve widgetu pro hostování videa.

Pokud stojíte před otázkou, z jakého hostingu stahovat multimediální audio a video soubory, pak se podívejte na článek, který popisuje možnost vkládání mediálních souborů na WEB stránku z disku Yandex.

Atributy a značky:

Atributy src , preload , autoplay , mediagroup , loop , muted , controls jsou společné atributy pro všechny prvky médií, včetně značek a .

atribut autoplay: buď nebo

• Atribut autoplay je specifikován svou přítomností v tagu or a není potřeba pro tento atribut nastavovat hodnotu, stačí jeho přítomnost. Pro editory HTML, kteří upravují kód prvku, můžete tento atribut nastavit jako autoplay ="autoplay ", což je ekvivalentní pouhému použití atributu. Přítomnost atributu autoplay říká prohlížeči, aby začal soubor přehrávat ihned po načtení webové stránky. V souladu s tím atribut autoplay přepíše hodnoty atributu preload, který řídí způsob načítání videa do přehrávače, protože video se musí začít přehrávat okamžitě, a proto se musí načíst. Ve výchozím nastavení neexistuje žádný atribut automatického přehrávání.

řídí atribut: buď nebo

• Atribut controls říká prohlížeči, aby zobrazil ovládací panel přehrávače, když se stránka načte, ale záznam se nezačne přehrávat. Tento atribut, stejně jako atribut autoplay, je určen pouze svou přítomností ve značce nebo a nevyžaduje hodnotu, stačí pouze jeho přítomnost. Standardně tento atribut chybí, tzn. Před zahájením přehrávání se na přehrávači nezobrazí ovládací panel. Když se soubor začne přehrávat, po najetí myší na oblast přehrávače se zobrazí ovládací panel.

atribut smyčky: buď nebo

• Atribut loop způsobí, že přehrávač přehraje soubor ve smyčce. Atribut je určen pouze svou přítomností v tagu nebo a nemá žádné parametry. Ve výchozím nastavení neexistuje žádný atribut smyčky.

preload atribut:

• atribut preload určuje načítání souboru spolu s načítáním webové stránky a má jednu z následujících tří hodnot:
  • none - nestahovat soubor současně s načítáním webové stránky. To znamená, že soubor se začne načítat do přehrávače až po stisknutí tlačítka přehrávání. To může být užitečné pro urychlení načítání stránky. Hodnota none je výchozí hodnotou atributu preload, takže je možné atribut preload do tagu nevkládat vůbec nebo pro tento případ.
  • metadata - nestahuje soubor současně s načítáním webové stránky, ale stahuje metadata multimediálního souboru.
  • auto - provede úplné stažení souboru spolu s načtením webové stránky. V této možnosti prohlížeče automaticky načtou mediální soubor spolu s webová stránka y, ale nebude to narušovat načítání samotné stránky a její vykreslování v prohlížeči. Pokud je ve značce or uveden atribut preload ="" s prázdnou hodnotou, použije se pro něj hodnota auto.
  • Atribut preload bude přepsán, pokud je použit atribut autoplay.

atribut src:

• atribut src tagu nebo umožňuje okamžitě nastavit cestu k multimediálnímu souboru v tagu. Cesta může být buď úplná s uvedením protokolu a domény, nebo relativní ke kořenovému adresáři aktuálního webu. Můžete také zadat cestu k souboru ve značkách vložených do audio nebo video kontejneru.< source src=" URL"> .

Atribut plakátu značky videa:

• atribut poster se používá pouze ve značce a určuje adresu URL obrázku (gif, png, jpeg atd.), který se zobrazí, když video nebude dostupné. Pokud není nastaven atribut plakátu, prohlížeč se pokusí zobrazit první snímek videa.

Atributy width a height značky videa:

• atributy width a height se vztahují pouze na značku a nastavují šířku a výšku oblasti přehrávání přehrávače videa. Očekává se, že hodnota bude kladné celé číslo, zadané v pixelech nebo procentech. Nastavení těchto atributů ovlivňuje velikost zobrazení videa, ale nemění poměr stran videa. Video se přizpůsobí zadaným rozměrům při zachování proporcí. Pokud zadané rozměry neodpovídají proporcím videa, budou podél horního a/nebo bočních okrajů videa tmavé pruhy. Proto je vhodné při nastavování těchto parametrů zvolit jejich poměr stejný jako u přehrávaného videa, nebo nastavit pouze šířku a výšku si přehrávač upraví sám.
• Pokud jeden nebo oba tyto parametry nejsou specifikovány, pak nespecifikované parametry budou převzaty z odpovídající velikosti obrázku zadané v atributu poster.
• Pokud atribut poster chybí, pak budou tyto parametry nastaveny následovně: pro šířku = 300 px a pro výšku = 150 px. Aby se nepočítaly a nekoordinovaly rozměry oblasti videa podle proporcí samotného klipu, doporučil bych nastavit pouze jeden parametr šířky, výška (výška) oblasti přehrávání se pak vybere automaticky na základě proporcí videa .
• Velikost a design přehrávače HTML5 lze také ovlivnit Vlastnosti CSS aplikované na značky nebo .

ztlumený atribut: buď nebo

• Atribut muted nastaví svou přítomnost ve značkách nebo zvuku na ztlumený stav v přehrávači HTML5. Ve výchozím nastavení atribut chybí.

crossorigin atribut:

• Atribut crossorigin říká prohlížeči, aby pro tento prvek provedl požadavek CORS. Ve výchozím nastavení atribut chybí, což znamená, že se požadavky CORS vůbec nepoužívají. Pokud je atribut přítomen, možné hodnoty jsou anonymní a uživatelské pověření . CORS () je technologie v moderních prohlížečích, která umožňuje spravovat oprávnění pro načítání zdrojů na aktuální webové stránce z jiných domén, než je doména aktuální stránky. Podpora prohlížeče pro standard CORS umožňuje implementovat zabezpečenou výměnu dat mezi doménami provedením speciálního požadavku (záhlaví) na doménu aktuální stránky, aby se zjistilo, zda je na tuto stránku povoleno načítání zdrojů z jiné určené domény. V reakci na takový požadavek musí server uvést domény, ze kterých je povoleno stahování zdrojů.

atribut mediagroup: div ( okraj: 1 m auto; pozice: relativní; šířka: 400 pixelů; výška: 300 pixelů; ) video ( position; absolute; bottom: 0; right: 0; ) video:first-child ( šířka: 100 %; výška : 100 %; ) video: poslední dítě ( šířka: 30 %; )

• Atribut mediagroup umožňuje spojit ovládání více mediálních souborů do jednoho MediaController vytvořením skupiny mediálních souborů na různých místech na stránce. Tato skupina bude spravována současně pro všechny soubory v ní obsažené. To se hodí například v případě, že potřebujete přehrávat a ovládat stejné video současně na různých místech stránky s různými titulky nebo různými videi.

Značky a vyžadují uzavírací značku.

Pro ty případy, kdy prohlížeč nepodporuje HTML5 a tagy, což je nyní velmi vzácné, se před uzavírací tag kontejneru napíše textová zpráva a obvykle se přidá odkaz na stažení souboru. Pokud je HTML5 přehrávač zabudovaný v prohlížeči navíc řízen knihovnou JS (JS přehrávač), pak většina z nich připojuje flash přehrávač, pokud nelze v prohlížeči přehrávat video a zvuk HTML5 kvůli prohlížeči, který nepodporuje video a zvuk tagy nebo formát multimediálního souboru.

Štítek:

Cestu k přehrávanému souboru lze také zadat pomocí tagu s atributem src umístěným uvnitř tagů nebo. Značka nemá uzavírací značku.

Ve většině případů značka vypadá takto:

a vždy obsahuje atribut src a typ, který má ve většině případů pouze typ MIME.

Atributy značky:

• atribut src= "URL" značky určuje adresu URL multimediálního souboru. Cesta může být buď úplná s uvedením protokolu a domény, nebo relativní ke kořenovému adresáři webu.
• atribut type="MIME-type" značky nebo úplněji type="MIME-type; codecs="codec"" určuje typ MIME a kodek souboru. U audia stačí zadat typ MIME, např. u .mp3 - type="audio/mpeg". I když podle specifikace pro video musí být kodek také uveden v atributu type, ale nyní často označují pouze typ MIME bez kodeku, což nechávají na rozhodnutí prohlížečů.
• Atribut média ="all|braille|handheld|print|screen|speech|projection|tty|tv" tagu určuje typ zařízení, na kterém se má soubor přehrát. Výchozí hodnota je all, takže ve většině případů není tento atribut vůbec zadán, pokud nechcete konkrétně identifikovat zařízení pro přehrávání.

Štítek:

U HTML5 videa je také možné v přehrávači zobrazit další stopu s informacemi, jako jsou titulky, titulky, kapitoly, popisy (zatím nejsou podporovány) a metadata (zatím nejsou podporovány). Tato funkce je implementována přidáním značek s příslušnými atributy uvnitř značky.

- nemá uzavírací značku.

Tag umožňuje připojit k videu další soubory stop ve speciálním formátu WebVTT (Web Video Text Tracks Format), které označují výstup textové zprávy s jejich časovým odkazem na video soubor. Standard WebVTT podporuje nejen výstup textových zpráv, ale také pro něj poskytuje možnosti CSS styling a možnosti umístění v oblasti sledování videa. V současnosti se soubory WebVTT používají především k připojení textových titulků k videím, což podporují téměř všechny prohlížeče. Ostatní funkce standardu WebVTT ještě nejsou plně implementovány samotnými prohlížeči, proto je pro úplnější využití WebVTT lepší používat přehrávače JS. Soubory WebVTT mohou také přehrávače JS nestandardně používat k přenosu dalších dat do přehrávače JS, jako jsou například adresy URL náhledů obrázků pro snímky videa. K otázce, jak zobrazit náhledy snímků videa na stupnici přetáčení přehrávače (Miniatury Scrub Bar), jak se to dělá na webech pro hostování videa. Zde je třeba říci, že taková funkcionalita zatím není dostupná v přehrávačích zabudovaných v prohlížečích a proto je implementována prostřednictvím JS přehrávačů jako doplněk. Chcete-li to provést, připojte knihovnu JS (js přehrávač), která převezme kontrolu nad objektem videa a zvuku HTML5 a provede jeho styling. Takové JS přehrávače pro zobrazování náhledů video snímků nestandardně využívají soubory WEBVTT z tagu k přenosu URL náhledových obrázků přes něj.

Soubor WebVTT je běžný textový soubor s příponou .vtt, do kterého se ve formě řádkového seznamu zapisují časová razítka s časem začátku a konce a textové zprávy pro výstup na tyto značky. Ke kontejneru můžete připojit několik souborů WebVTT s textem v různých jazycích. Pro každý jazyk musíte vytvořit samostatný soubor a každý z nich připojte pomocí značky. Značky musí být vloženy do kontejneru za všechny značky, ale před chybové zprávy videa HTML5. Značka se souborem titulků ve výchozím jazyce musí být umístěna na prvním místě mezi značkami v aktuálním kontejneru.

Soubor WEBVTT může obsahovat jedno nebo více časových razítek. Soubor začíná slovem WEBVTT. Prázdné řádky samostatná časová razítka s jejich přidruženým textem a atributy. Text může obsahovat HTML prvky a CSS značení. ID lze umístit před časovou značku, aby se na ni odkazovalo pomocí speciálních výrazů. Všechny tyto detaily jsou popsány ve standardu WEBVTT. určuje typ stopy a může nabývat následujících hodnot:

• titulky - titulky ve formě textu, který se zobrazuje nad videem. Pro přehrávaný soubor můžete nastavit titulky v různých jazycích, abyste si mohli vybrat v přehrávači, pokud to podporuje. Ve většině případů se používá tento typ, protože jej podporuje většina prohlížečů.
• titulky - titulky ve formě textu a zvuku, které se zobrazují nad videem. Podobně jako titulky, ale kromě textu mohou obsahovat zvukové efekty a další zvukové informace.
• kapitoly – kapitoly, které se zobrazují v textu jako seznamová nabídka a jsou určeny pro rychlou navigaci v mediálním souboru.
• popisy - popis, toto textové soubory s popisem videa pro jejich přehrávání v programu pro čtení z obrazovky.
• metadata - metadata pro předávání js skriptů.

Atribut src značky určuje adresu URL souboru stopy s dodatečné informace. Soubor připojený ke značce má formát WebVTT a příponu .vtt.

Atribut srclang tagu určuje jazyk stopy prostřednictvím kódu jazyka. Pro ruštinu se bude rovnat „ru“, pro angličtinu „en“.

Atribut štítku tagu určuje název skladby, který se zobrazí v přehrávači. Pokud atribut není nastaven, prohlížeč zobrazí název své služby.

Výchozí atribut značky určuje výběr této stopy ve výchozím nastavení, pokud jsou v kontejneru videa další stopy. Pouze jeden z několika tagů může mít výchozí atribut. Je lepší umístit výchozí stopu jako první mezi ostatní připojené stopy.

Příklad tagů: Tato otázka se objevuje velmi často, proto jsem se rozhodl jí věnovat samostatný článek v lekcích. Protože HTML nemá univerzální technologii pro přehrávání zvuku pro všechny prohlížeče, k vyřešení tohoto problému doporučuji stáhnout soubor audio přehrávače, jak se to dělá na většině webů. Vše děláme krok za krokem:

1. Na hostingu, kde se nachází vaše stránka, v kořenovém adresáři (složka, kde je soubor indexu) vytvořte složku se zvukem. V budoucnu do něj umístíte všechny zvukové soubory.

3. Nyní vyberte potřebné soubory, lépe ve formátu mp3. Vytvořte zvukovou složku v kořenovém adresáři webu a nahrajte je.

4. Zbývá pouze vložit kód připojení přehrávače. Je vhodný pro všechny stránky. Na správném místě stačí uvést cestu k souboru přehrávače a zvukovému souboru, respektive nahradit slova vaše_doména a název zvukového_souboru:

A vše je připraveno! Můžete se také podívat na pracovní příklad.

Jak nainstalovat hudba v pozadí v html využívám možnosti HTML a prohlížeče, do stránky lze vložit i hudbu na pozadí. Budete potřebovat zvukový soubor požadovaný formát: WAV, AU, MIDI nebo MP3. Jako příklad můžete použít libovolný soubor se zadanou příponou.

První způsob je embed tag. Element embed slouží k načtení a zobrazení objektů (například videosouborů, flashových filmů, některých zvukových souborů atd.), kterým prohlížeč zpočátku nerozumí.

Syntaxe je celkem jednoduchá:

Závěrečná značka není vyžadována.

Nyní se podívejme na příklad záznamu s atributy a níže s jejich dekódováním:

Vložit atributy tagu pro přehrávání zvuku v html
šířka - šířka panelu v pixelech (nebo procentech)
výška - výška panelu v pixelech (nebo procentech)
zarovnat - poloha panelu vzhledem k textu, možné hodnoty jsou vlevo, vpravo, na střed
skrytý - umožňuje skrýt panel, hodnoty atributů: true - panel je skrytý, false - panel je viditelný (výchozí hodnota)
autostart - true - přehrávač se spustí automaticky při načtení stránky, false - čeká na stisk tlačítka přehrávání
loop - cyklus, true - stopa se přehrává v kruhu a kdy hodnota nepravda- jen jednou

Druhý způsob. Velmi staré, ale také praktické) Přidejte melodii do stejné složky (adresáře), kde se nachází váš soubor, a do těla napište následující kód:

Výsledkem je, že po načtení stránky zazní melodie, kterou jste zadali v tagu bgsound. Nyní uvažujme lepší atributyštítek:

src - cesta k vašemu zvukovému souboru
smyčka - kolikrát opakovat melodii (pokud -1, opakuje se donekonečna)
balance - hodnota stereo balance (od -10000 do 10000)
hlasitost - hlasitost přehrávání melodie, kde 0 je maximum a -10000 je minimum.

Přehrávač však nebude možné jakkoli ovládat – při každém obnovení stránky se skladba přehraje znovu.

Po popisu způsobu vkládání hudby na pozadí vás chci od toho odradit, protože většina uživatelů již zpravidla poslouchá hudbu při návštěvě různých stránek. Doprovodná hudba ho tedy může pouze donutit kartu s webem zavřít.

Vkládání zvuku a hudby v HTML5 - audio tag
audio - párové definování tagu zvuk na pozadí, hudbu nebo jiný zvukový stream na webu.

Atributy zvukové značky

automatické přehrávání - soubor se přehraje okamžitě po načtení stránky (podobně jako hudba na pozadí bgsound)
ovládací prvky - zobrazení ovládacího panelu přehrávače v prohlížeči
smyčka - přehraje soubor znovu po jeho skončení
preload - zvukový soubor se načte spolu s načítáním stránky
src - cesta k audio souboru (mp3 nebo ogg)

Příklad kódu s audio tagem

Zvuková značka

Zvuk v HTML 5

Váš prohlížeč nepodporuje audio tag.
Stáhnout hudbu.

Popis

Přidává, přehrává a spravuje nastavení zvuku na webové stránce. Cesta k souboru je určena pomocí atributu src nebo subtagu. Do kontejneru můžete napsat text, který se zobrazí v prohlížečích, které s touto značkou nepracují.

Seznam kodeků podporovaných prohlížeči je omezený a je uveden v tabulce. 1.

Stůl 1. Kodeky a prohlížeče

kodek	internet Explorer	Chrome	Opera	Safari	Firefox
ogg/vorbis
wav
mp3
A.A.C.

Pro univerzální přehrávání v určitých prohlížečích je zvuk kódován pomocí různých kodeků a soubory jsou přidávány současně prostřednictvím značky.

Atributy syntaxe Zvuk se začne přehrávat ihned po načtení stránky. Přidá ovládací panel do zvukového souboru. Opakuje zvuk od začátku po jeho skončení. Používá se ke stažení souboru spolu s načítáním webové stránky. Určuje cestu k přehrávanému souboru. Uzavírací štítek

Požadované.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Zvuk

Alexander Klimenkov - Čtrnáctka

Váš prohlížeč nepodporuje audio tag. Stáhnout hudbu.

Výsledkem je příklad Prohlížeč Opera znázorněno na Obr. 1.

Rýže. 1. Přehrajte zvukový soubor

Prohlížeče

Ovládací prvky přehrávání zvuku se v různých prohlížečích liší, ale základní prvky jsou stejné. Jedná se o tlačítko přehrávání/pozastavení, délku stopy, uplynulou a celkovou dobu přehrávání a úroveň hlasitosti.

S příchodem dostatečně rychlého internetového připojení byl Flash jediným nástrojem pro přehrávání zvuků na webových stránkách. HTML5 ale zásadně změní způsob přehrávání zvuků na internetu. V tomto článku vám chci podrobně říci, jak značku používat na vašich stránkách.

Používáme jej k vložení zvukového souboru na stránku nejjednodušší příklad pomocí tagu stáhne soubor mp3 a přehraje jej. Všimněte si atributu autopaly, který se používá k automatickému přehrávání zvuku. Na webu byste však neměli automaticky přehrávat zvuky, protože to uživatele obtěžuje. Přehrávání zvuku ve smyčce Chcete vytvořit smyčku zvuku? Atribut loop vám s tím pomůže. Ale opět byste neměli nadměrně používat automatické přehrávání a přehrávání ve smyčce, pokud nechcete, aby uživatel opustil web předčasně. Zobrazení ovládacích prvků Spíše než automatické přehrávání zvuků, což je rozhodně špatný postup, byste měli povolit zobrazování některých ovládacích prvků v prohlížeči, jako jsou tlačítka hlasitosti a přehrávání (pozastavení). To lze snadno provést jednoduchým přidáním atributu controls. Různé formáty souborů Tag je podporován většinou moderních prohlížečů, ale problém je v tom různé prohlížeče podporují různé formáty souborů. Safari například umí přehrávat MP3, ale Firefox ne a místo toho přehrává soubory OGG. Řešením tohoto problému je použití obou formátů, aby zvuk slyšel každý návštěvník bez ohledu na to, jaký prohlížeč používá. Určení typu MIME souborů Při použití různých formátů souborů je dobrým zvykem určit typ MIME pro každý soubor, aby prohlížeč pomohl lokalizovat soubor, který podporuje. To lze snadno provést pomocí atributu type. Pro starší prohlížeče Co když návštěvník používá IE6 nebo jiný prehistorický prohlížeč, který značku nepodporuje? Je to snadné: níže je kód, který zobrazí zprávu pro prohlížeče, které značku nepodporují. Váš prohlížeč nepodporuje audio tag! Ukládání souborů do vyrovnávací paměti Při přehrávání velkých souborů lze použít ukládání souborů do vyrovnávací paměti. K tomu můžete použít atribut preload. Může nabývat 3 hodnot:

• none - pokud nechcete používat vyrovnávací paměť souboru;
• auto - pokud chcete, aby prohlížeč ukládal do vyrovnávací paměti celý soubor;
• metadata - pro načtení pouze servisních informací (délka zvuku atd.).

Ovládání přehrávání pomocí JavaScriptu Ovládání HTML5 audio přehrávače pomocí JavaScriptu je velmi snadné. Následující příklad ukazuje, jak na to pomocí JavaScriptu můžete si postavit vlastní základní prvky Ovládání audio přehrávače: Přehrát Pozastavit Hlasitost + Hlasitost -

To je pro dnešek vše.
Doufám, že vám tento článek pomohl pochopit základní schopnosti HTML5 tag.

Donedávna nebylo vkládání zvuku do webové stránky tak snadným úkolem. Obecně platí, že existují některé, které nabízejí chytřejší a lepší implementace, ale většina metod vás omezuje na určitý prohlížeč a určité pluginy.

S příchodem technologie Flash na trh se tento úkol stal mnohem jednodušším, protože zásuvný modul Flash umožňuje vložit na stránku jakoukoli animaci nebo zvuk a tuto technologii podporuje většina prohlížečů. Poptávka po Flashi ale postupně mizí po uvedení inovativních zařízení od společnosti Apple: iPhone a iPad. Jak víte, Apple svá zařízení nijak zásadně nevybavuje Podpora Flash a počet uživatelů produktu rychle roste.

Zkrátka je tu trochu zmatek.

Naštěstí HTML5 výrazně usnadnilo život vývojářům, protože technologie obsahuje zvukový prvek. Tento prvek umožňuje vkládat zvukové soubory do libovolné webové stránky a také implementovat ovládací panel pomocí javascriptu. Ještě důležitější je, že tato technologie nevyžaduje další pluginy a je podporována téměř ve všech prohlížečích, s výjimkou raných verzí (o podpoře prohlížečů si povíme později!).

V našem dnešním článku vám řekneme, jak můžete vložit zvuky pomocí audio prvku. Naučíme se také ovládat proces přehrávání pomocí javascriptu a pokusíme se vám také říci o podpoře technologií mezi prohlížeči.

Zvukový prvek HTML5

Tento prvek se velmi snadno používá. V našem dnešním příkladu vložíme „Bílé Vánoce“ Binga Crosbyho:

Tady není potřeba moc vysvětlovat. Podobně jako vkládáte obrázek pomocí značky img, můžete stejným způsobem vložit zvuk pomocí značky audio.

Podpora napříč prohlížeči

Výše uvedený příklad pravděpodobně nebude fungovat ve všech prohlížečích. Zde vstupuje do hry formát souboru.

Některé prohlížeče umí přehrávat soubory .mp3, ale ne soubory .ogg, zatímco jiné to dělají naopak. Většina prohlížečů umí přehrávat soubory .wav, ale kvůli jeho velké velikosti je nevhodné používat jako zvuk pro web.

Zde je tabulka prohlížečů s podporou zvukových formátů:

Jaké formáty váš prohlížeč podporuje? Určete to pomocí .

Jak vidíte v tabulce, nejoptimálnější možností implementace by bylo propojení obou formátů souborů.
Chcete-li to provést, můžete do zvukového prvku přidat více zdrojových prvků a určit v nich cesty k různým formátům. Prohlížeč přehraje první soubor, který podporuje. Zde je příklad:

To samozřejmě znamená, že musíte vytvořit svou verzi Mp3 i OGG zvukový soubor(zde vám přichází na pomoc), ale je to jediný způsob, jak organizovat podporu napříč prohlížeči.

Starší verze Internet Exploreru (verze 7 a 8) vůbec nepodporují prvek zvuku. Později v článku se však podíváme na to, jak tento problém obejít.

Automatické přehrávání zvuku

Ačkoli výše uvedený kód vkládá zvuk, nepřehrává jej. Pokud chceme, aby se zvuk přehrával automaticky při načítání stránky, musíme do prvku přidat atribut autoplay:

Přidání ovládacích tlačítek

Automatické přehrávání sice může být užitečné, ale v mnoha případech je otravné nebo zcela nevhodné. Proto můžeme nainstalovat další ovládací tlačítka pro audio prvky, aby se uživatel mohl sám rozhodnout:

Přidá se vodorovný pruh s tlačítkem pozastavení/přehrávání, časovou osou s posuvníkem a ovládáním hlasitosti. Vše je přibližně stejné, jak můžete vidět na přehrávači na Youtube.

Je důležité si uvědomit, že ovládací panel se bude lišit v závislosti na prohlížečích. Například prohlížeč na iPhonu nebude mít posuvník hlasitosti, protože zařízení má samostatná tlačítka pro ovládání úrovní zvuku.

Přehrávání ve smyčce

Přidání atributu smyčky do zvukového prvku způsobí, že se zvuk bude přehrávat neomezeně dlouho.

To může být užitečné pro zapnutí hudby na pozadí nebo zvukových efektů ve hrách.

Můžete také použít atribut preload, který prohlížeči sdělí, kdy a kde se má načíst konkrétní zvukový soubor.
Předběžné načtení zvukového souboru znamená, že zvuk lze přehrát okamžitě, když uživatel stiskne přehrát.

Tento atribut má několik významů:

„žádný“ – prohlížeč by neměl stažený soubor uložit. Tito. Pokud jste si jisti, že většina uživatelů soubor nepřehraje, použijte tuto možnost. Nebo jej použijte, když potřebujete ušetřit co největší šířku pásma serveru.

„metadata“ – parametr je podobný žádnému, až na to, že prohlížeč upozorníte na možnost načtení metadat, jako je délka zvukové stopy, nikoli však samotného zvukového souboru.

„auto“ – umožníte prohlížeči stáhnout si zvukový soubor sám.

Například:

Mějte na paměti, že předběžné načítání je pouze pohodlnou funkcí, protože některé prohlížeče mohou tento příkaz jednoduše ignorovat a začít dělat, co chtějí.

Ovládání přehrávání přes javascript

Co je pohodlné v prvky javascriptu– je to proto, že se snadno spravují pomocí javascriptu. Audio prvek nabízí mnoho pohodlných parametrů a způsobů ovládání:

Play() – spustí přehrávání od aktuální pozice;

Pause() – zastaví přehrávání na aktuální pozici;

canPlayType(type) – určuje, zda prohlížeč podporuje přehrávání tohoto typu média;

trvání – trvání stopy v sekundách;

currentTime – aktuální pozice v sekundách. Můžete také nainstalovat tento parametr pro posunutí pozice přehrávání.

Pomocí výše uvedených možností a metod můžeme vytvořit některá základní ovládací tlačítka:

Přehrávat hudbu
Pozastavit hudbu
Zastavit hudbu
Zobrazit ukázku: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Podpora starších verzí aplikace Internet Explorer

Ve většině případů bude prohlížeč uživatele podporovat prvek HTML5. Ale bohužel prohlížeče IE verze 7 a dokonce 8 tento prvek nepodporují (ačkoli verze 9 již podporu má). Je důležité zvážit verzi rollback pro uživatele, kteří zůstali v roce 2008.

Velmi hrubou, ale účinnou metodou je použít speciální komentáře ke zvýraznění dat prohlížeče a dát jim objektový ukazatel na zvukový soubor. Prohlížeč tedy často zobrazuje vestavěný ovladač, který uživatelům umožňuje přehrávat, pozastavovat nebo přetáčet hudbu téměř ve stylu HTML5. Zde je příklad:

Přehrávat hudbu
Pozastavit hudbu
Zastavit hudbu

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

Výše uvedený příklad bude fungovat ve všech prohlížečích, které podporují HTML5 Audio, a bude fungovat také v IE verze 7 a 8. Pomocí komentářů přesměrujeme ovládací prvky tlačítek přímo na zvukový soubor.

Dalším způsobem vrácení zpět je vložení přehrávače Flash do stránky. Zde se hovoří o rollbacku ve formě přehrávače Flash.

Závěr

V našem dnešním článku jsme se naučili, jak vkládat zvukové soubory pomocí HTML5. Zvukový prvek je nejen snadno použitelný, ale také si jej můžeme přizpůsobit a ovládat přehrávání pomocí javascriptu.

Chcete se dozvědět více o audio prvku v HTML5? Pak se podívejte.

Ačkoli podpora v současné době v některých prohlížečích trpí (například starší verze IE), v případě potřeby je můžete snadno vrátit zpět, což je v dnešní době stále méně obvyklé.