andew

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

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

11937

Článok popisuje štruktúru audio a video HTML5 kontajnera, video, audio, source, track tags a ich atribúty s možnými hodnotami. Poskytnuté sú HTML šablóny a príklady implementácie prehrávania multimediálnych súborov na základe schopností zabudovaných do prehliadača. Je zobrazené pripojenie k videotextovej stope titulkov, titulkov, obsahu pomocou súborov vo formáte WEBVTT s príkladmi. Prezentované sú šablóny kódu HTML5 s mikroznačkami schema.org pre zvuk a video. Uvádzajú sa hlavné webové formáty audio a video súborov s ich typmi MIME a nástrojmi na konverziu videa a zvuku do týchto formátov.

HTML5 obsahuje nové funkcie, ktoré umožňujú prehrávať audio a video súbory priamo v prehliadači bez použitia programy tretích strán. Zatiaľ, napriek tomu, že HTML5 už nie je novinkou, stále existujú nezhody v tom, ako prehliadače spracovávajú video a audio tagy a ako sa zobrazuje samotný prehrávač. Niektorí ľudia to robia zakaždým lepšie Nová verzia, iní stále zaostávajú. Celosvetovo je trendom, že prehliadače budú poskytovať čoraz viac funkcií na prehrávanie multimediálnych súborov.

Screencast: Príklad použitia šablón

Stiahnite si video

Screencast: príklady použitia šablón z článku – webovej stránky

Video a zvuk HTML5 je vyvíjajúci sa štandard a nie je spojený so žiadnym formátom zvuku ani videa, takže medzi prehliadačmi existujú rozdiely v tom, čo podporujú. formátov audio a video súbory. Tento rozdiel je teraz kompenzovaný skutočnosťou, že kódujú pôvodný súbor niekoľko rôznych kodekov a pripojiť všetky tieto verzie súborov k značkám alebo prostredníctvom vnorených značiek< source src=" URL">. Medzi formátmi audio a video súborov podporovanými prehliadačmi sa však objavujú lídri. Pre video je to samozrejme formát mp4 (H.264) a pre audio formát mp3 a m4a. Teraz sú pravdepodobne všetky prehliadače schopné prehrávať súbory týchto formátov. tiež Prehliadače Firefox, Chrome a Opera sa dohodli na podpore štandardu WEBM ako bežného formátu videa. Z môjho pohľadu by teraz optimálnou možnosťou využitia HTML5 videa a zvuku bola schéma založená na použití jedného multimediálneho súboru vo formáte mp4 ( H.264) pre video a m4a pre audio a JS HTML5 prehrávač. Ku kontajneru zvuku alebo videa je pripojený iba jeden súbor v zadanom formáte. V súčasnosti je väčšina prehliadačov schopná prehrávať formát mp4. Pripojená knižnica JS upraví štýl prehrávača zabudovaného do prehliadača. Ak prehliadač nepodporuje formát mp4 / m4a, potom prehrávač JS v tomto prípade implementuje Flash pripojenie prehrávač na prehrávanie multimediálnych súborov. Vzhľadom na to, že formát mp4 sa stal veľmi populárnym, možno dúfať v nízku pravdepodobnosť problémov s jeho prehrávaním v prehliadačoch. Táto schéma vyžaduje iba jeden multimediálny súbor v špecifikovanom formáte, čo šetrí miesto na disku a zdroje na spracovanie súborov. Takáto schéma bude tiež strategicky správnejšia, pretože trendom je, že prehliadače sú čoraz lepšie v implementácii videa a zvuku HTML5.

Ak chcete prehrávaču HTML5 oznámiť súbor, ktorý sa má prehrať, musíte okrem adresy URL súboru zadať aj typ MIME súboru, aby prehliadač pochopil, ktorý kodek potrebuje použiť. V tabuľke nižšie sú uvedené najbežnejšie formáty súborov a ich typy MIME.

Formáty súborov a ich typy MIME Prípony mediálnych súborov Typ Mime

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 na kódovanie zvuku a videa

Na kódovanie video a audio súborov do vyššie uvedených webových formátov môžete použiť otvorený program, ktorý podporuje konverziu audio a video súborov do hlavných formátov bežných pre web ( MP4, WebM, Ogg Theora, MP3 atď.). Miro Video Converter je k dispozícii pre rôzne operačné systémy- Windows, Mac a Linux a je to grafický shell pre konzolové nástroje, ktoré sa dajú pohodlne používať webový server na automatické spracovanie stiahnutého videa a zvuku.

: Príklad kódu zvuku HTML5 s mikroznačkou schema.org: Hlavička zvuku

Váš prehliadač nepodporuje zvuk HTML5.

Stiahnite si zvuk

Takto budú vyzerať mikroznačkové údaje extrahované z kódu pre zvukovú šablónu opísanú vyššie.

Audioobject itemType = http://schema.org/Názov audioobjektu = Popis názvu zvuku = Popis zvuku... isfamilyfriendly = true encodingformat = trvanie mp3 = PT04M59S uploaddate = 2015-12-31 image = Úplná adresa URL k obrázku.jpg alternatívny názov = Alternatíva title audio contenturl href = URL k súboru.mp3 text = Stiahnuť audio autora osoba itemType = http://schema.org/Person url href = URL text = Meno autora meno = Meno autora image = Celá adresa URL na osobu.jpg

Minimálne zvukové označenie podľa schema.org by malo zahŕňať itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . Zvyšné vlastnosti sú voliteľné.

Príklad použitia štandardnej značky HTML5:

V ukážke som aplikoval štýly CSS na značku prostredníctvom atribútu class, vďaka čomu je šírka oblasti videa dynamická v závislosti od veľkosti obrazovky. Prehrávač si sám nastavuje výšku. Skúste zmeniť veľkosť okna prehliadača, aby ste videli, ako to funguje. Preto v zdrojovom kóde pre túto ukážku nie sú pre značku žiadne atribúty width a height, sú nahradené štýlmi CSS. Ale táto metóda nie je zobrazená v zozname kódu šablóny, pretože je už špecifická vec.

Príklad kódu videa HTML5 s mikroznačkou schema.org: Názov videa

Sledujte na YouTube

Váš prehliadač nepodporuje video HTML5.

Stiahnuť video: Názov videa

Takto budú vyzerať mikroznačkové údaje extrahované z kódu pre šablónu videa opísanú vyššie.

Videoobject itemType = http://schema.org/VideoObject name = miniatúra názvu videa imageobject itemType = http://schema.org/ImageObject contenturl = URL na video-thumbnail.jpg|png šírka = 100 výška = 100 trvanie = PT14M59S je vhodný pre rodinu = skutočný dátum odovzdania = popis 31. 12. 2015 = Stručný opis pre video... url href = URL k súboru.mp4 text = Názov videa autor osoba itemType = http://schema.org/Person url href = URL webovej stránky autora text = meno autora = meno autora obrázok = Úplná adresa URL to author.jpg thumbnailurl = URL pre súbor.jpg|png

Minimum nevyhnutné V prípade vyhľadávacích nástrojov by značenie videa podľa schema.org malo zahŕňať všetky vlastnosti itemprop zobrazené v príklade kódu, s výnimkou bloku itemprop ="author", ktorý je pre vyhľadávače voliteľný a možno ho odstrániť, ak neexistujú žiadne údaje. naplniť ho. Pre miniatúru videa vyžaduje Yandex, aby ste špecifikovali mikroznačku podľa schema.org ako itemprop ="thumbnail" vo forme ImageObject a Google vyžaduje zadanie itemprop ="thumbnailUrl" , takže súbor s miniatúrou videa musíte vložiť dvakrát, a preto druhý tag img dostal štýl zobrazenia: none, aby sa nezobrazoval v prehliadači. Namiesto použitia značky img s display:none môžete túto vlastnosť odovzdať značke odkazu prostredníctvom atribútu href. Aj napriek skutočnosti, že mikroznačky možno prenášať prostredníctvom metaznačiek a značiek odkazov, ktoré sa používateľovi nezobrazujú, stále sa odporúča, ak je to možné, pridávať mikroznačky predovšetkým do značiek, ktoré sa budú používateľovi zobrazovať. Validáciu mikroznačiek schema.org je možné vykonať pomocou týchto odkazov: , . Hlavnou výhodou používania mikroznačiek je pohodlie takéhoto obsahu pre vyhľadávacie roboty a roboty sociálnych sietí. Tieto roboty extrahujú označené údaje a agregujú ich. Preto sa zlepšuje používanie mikroznačiek SEO a uľahčuje automatickú distribúciu údajov v sociálnych sieťach. Podrobný popis mikroznačiek Schema.org pre videá označené schémou VideoObjec t na webovej stránke. Za zmienku tiež stojí, že v prípadoch, keď vložíte video na svoj web nie priamo, ale pomocou miniaplikácií na hosťovanie videa Yandex.Video alebo YouTube, môžete do bloku kódu widgetu pridať blok HTML kódu s popisom videa. a vložte označenie Schema.org pre toto video. Zároveň ako parameter URL - odkaz na video, neuvádzajte priamy odkaz na statický súbor, ale uveďte odkaz prijatý z hosťovania videa. Hoci špecifikácia Schema.org hovorí, že odkaz musí byť na priamy súbor, vyhľadávače spracovávajú aj odkazy na videá z videohostingu ( pozrite si príklady na webovej stránke Yandex v časti Správca webu), a to aj napriek tomu, že si súbor nemôžete stiahnuť z takéhoto odkazu a nemôžete si ho prezerať priamo vo svojom prehrávači médií HTML5 na stránke, iba vo widgete na hosťovanie videa.

Ak stojíte pred otázkou, z ktorého hostingu sťahovať multimediálne audio a video súbory, pozrite si článok, ktorý popisuje možnosť vloženia mediálnych súborov na webovú stránku z disku Yandex.

Atribúty a značky:

Atribúty src , preload , autoplay , mediagroup , loop , muted , controls sú spoločné atribúty pre všetky mediálne prvky vrátane značiek a .

atribút automatického prehrávania: buď alebo

• Atribút autoplay je špecifikovaný svojou prítomnosťou v tagu or a nie je potrebné nastavovať hodnotu tohto atribútu, stačí jeho prítomnosť. Pre editorov HTML, ktorí upravujú kód prvku, môžete tento atribút nastaviť ako autoplay ="autoplay ", čo je ekvivalent jednoducho s prítomnosťou atribútu. Prítomnosť atribútu autoplay hovorí prehliadaču, aby začal prehrávať súbor ihneď po načítaní webovej stránky. V súlade s tým atribút autoplay prepíše hodnoty atribútu preload, ktorý riadi spôsob načítania videa do prehrávača, pretože video sa musí začať prehrávať okamžite, a preto sa musí načítať. V predvolenom nastavení neexistuje atribút automatického prehrávania.

riadi atribút: buď alebo

• Atribút ovládacích prvkov hovorí prehliadaču, aby ukázal ovládací panel prehrávača, keď sa stránka načítala, ale záznam sa nezačal prehrávať. Tento atribút, podobne ako atribút autoplay, je špecifikovaný iba svojou prítomnosťou v značke alebo a nevyžaduje hodnotu, stačí iba jeho prítomnosť. Štandardne tento atribút absentuje, t.j. Pred spustením prehrávania sa na prehrávači nezobrazí ovládací panel. Keď sa súbor začne prehrávať, po umiestnení kurzora myši nad oblasť prehrávača sa zobrazí ovládací panel.

atribút cyklu: buď alebo

• Atribút loop spôsobí, že prehrávač prehrá súbor v slučke. Atribút je špecifikovaný iba svojou prítomnosťou v značke alebo a nemá žiadne parametre. V predvolenom nastavení neexistuje žiadny atribút slučky.

atribút predbežného načítania:

• atribút preload určuje načítanie súboru spolu s načítaním webovej stránky a nadobúda jednu z nasledujúcich troch hodnôt:
  • žiadny - nesťahujte súbor súčasne s načítaním webovej stránky. To znamená, že súbor sa začne načítavať do prehrávača až po stlačení tlačidla prehrávania. To môže byť užitočné na urýchlenie načítania stránky. Hodnota none je predvolená hodnota pre atribút preload, takže je možné nevložiť atribút preload do značky vôbec alebo pre tento prípad.
  • metadáta – nestiahne súbor spolu s načítaním webovej stránky, ale stiahne metadáta multimediálneho súboru.
  • auto – vykoná sťahovanie celého súboru spolu s načítaním webovej stránky. Pri tejto možnosti prehliadače automaticky načítajú mediálny súbor spolu s webstránka y, ale nebude to prekážať pri načítaní samotnej stránky a jej vykresľovaní v prehliadači. Ak je v značke or zadaný atribút preload ="" s prázdnou hodnotou, použije sa preň hodnota auto.
  • Atribút predbežného načítania bude prepísaný, ak sa použije atribút automatického prehrávania.

atribút src:

• atribút src tagu alebo umožňuje okamžite nastaviť cestu k multimediálnemu súboru v tagu. Cesta môže byť úplná, označujúca protokol a doménu, alebo relatívna ku koreňu aktuálnej lokality. Môžete tiež zadať cestu k súboru v značkách vložených do kontajnera zvuku alebo videa.< source src=" URL"> .

Atribút plagátu značky videa:

• atribút poster sa používa iba v značke a určuje adresu URL obrázka (gif, png, jpeg atď.), ktorý sa zobrazí, keď video nebude dostupné. Ak nie je nastavený atribút plagát, prehrávač prehliadača sa pokúsi zobraziť prvú snímku videa.

Atribúty šírky a výšky značky videa:

• atribúty width a height sa vzťahujú iba na značku a nastavujú šírku a výšku oblasti prehrávania prehrávača videa. Očakáva sa, že hodnota bude kladné celé číslo špecifikované v pixeloch alebo percentách. Nastavenie týchto atribútov ovplyvňuje veľkosť zobrazenia videa, ale nemení pomer strán videa. Video sa prispôsobí zadaným rozmerom pri zachovaní jeho proporcií. Ak sa zadané rozmery nezhodujú s proporciami videa, pozdĺž horných a/alebo bočných okrajov videa budú tmavé pruhy. Preto je vhodné pri nastavovaní týchto parametrov zvoliť ich pomer rovnaký ako pri prehrávanom videu, prípadne nastaviť len šírku a výšku si prehrávač upraví sám.
• Ak jeden alebo oba z týchto parametrov nie sú špecifikované, potom sa nešpecifikovaný parameter (parametre) prevezme zo zodpovedajúcej veľkosti obrázka špecifikovanej v atribúte plagátu.
• Ak chýba atribút plagát, potom sa tieto parametre nastavia nasledovne: pre šírku = 300 px a pre výšku = 150 px. Aby sa rozmery oblasti videa nepočítali a nekoordinovali podľa proporcií samotného klipu, odporučil by som nastaviť len jeden parameter šírky, potom sa výška (výška) oblasti prehrávania vyberie automaticky na základe pomerov videa .
• Veľkosť a dizajn prehrávača HTML5 možno tiež ovplyvniť CSS vlastnosti aplikované na značky alebo .

stlmený atribút: buď alebo

• Atribút stlmený nastavuje svoju prítomnosť v značkách alebo zvuku na stlmený stav v prehrávači HTML5. V predvolenom nastavení atribút chýba.

crossorigin atribút:

• Atribút crossorigin hovorí prehliadaču, aby vykonal požiadavku CORS pre tento prvok. V predvolenom nastavení atribút chýba, čo znamená, že požiadavky CORS sa vôbec nepoužívajú. Ak je atribút prítomný, možné hodnoty sú anonymné a používateľské poverenia . CORS () je technológia moderných prehliadačov, ktorá vám umožňuje spravovať povolenia na načítanie zdrojov na aktuálnu webovú stránku z iných domén, než je doména aktuálnej stránky. Podpora prehliadača pre štandard CORS vám umožňuje implementovať zabezpečenú výmenu údajov medzi doménami vykonaním špeciálnej požiadavky (hlavičky) na doménu aktuálnej stránky, aby ste určili, či je na tejto stránke povolené načítanie zdrojov z inej špecifikovanej domény. V odpovedi na takúto požiadavku musí server uviesť domény, z ktorých je povolené sťahovanie zdrojov.

atribút mediagroup: div ( okraj: 1 m auto; pozícia: relatívna; šírka: 400 pixelov; výška: 300 pixelov; ) video ( poloha; absolútna; dole: 0; vpravo: 0; ) video:prvé dieťa ( šírka: 100 %; výška : 100 % ) video: posledné dieťa ( šírka: 30 %; )

• Atribút mediagroup vám umožňuje spojiť ovládanie viacerých mediálnych súborov do jedného MediaController vytvorením skupiny mediálnych súborov na rôznych miestach na stránke. Táto skupina bude spravovaná súčasne pre všetky súbory, ktoré sú v nej zahrnuté. To sa hodí napríklad vtedy, ak potrebujete prehrávať a ovládať to isté video súčasne na rôznych miestach na stránke s rôznymi titulkami alebo rôznymi videami.

Značky a vyžadujú uzatváraciu značku.

V prípadoch, keď prehliadač nepodporuje HTML5 a značky, čo je v súčasnosti veľmi zriedkavé, sa pred uzatváraciu značku kontajnera napíše textová správa a zvyčajne sa pridá odkaz na stiahnutie súboru. Ak je prehrávač HTML5 zabudovaný v prehliadači dodatočne ovládaný knižnicou JS (prehrávač JS), väčšina z nich pripája prehrávač Flash, ak nie je možné v prehliadači prehrávať video a zvuk HTML5 z dôvodu, že prehliadač nepodporuje video a zvuk tagy alebo formát multimediálneho súboru.

Značka:

Cesta k prehrávanému súboru môže byť špecifikovaná aj pomocou tagu s atribútom src umiestneným vo vnútri tagov alebo. Značka nemá uzatváraciu značku.

Vo väčšine prípadov značka vyzerá takto:

a vždy obsahuje atribút src a typ, ktorý má vo väčšine prípadov iba typ MIME.

Atribúty značky:

• atribút src= "URL" značky určuje adresu URL multimediálneho súboru. Cesta môže byť úplná, označujúca protokol a doménu, alebo relatívna ku koreňu lokality.
• atribút type="MIME-type" značky alebo úplnejšie type="MIME-type; codecs="codec"" určuje typ MIME a kodek súboru. Pre zvuk stačí zadať typ MIME, napríklad pre .mp3 - type="audio/mpeg". Aj keď podľa špecifikácie pre video musí byť kodek uvedený aj v atribúte type, ale teraz často označujú iba typ MIME bez kodeku, čo ponecháva na rozhodnutie prehliadačov.
• Atribút média ="all|braille|handheld|print|screen|speech|projection|tty|tv" značky určuje typ zariadenia, na ktorom sa má súbor prehrať. Predvolená hodnota je all, takže vo väčšine prípadov tento atribút nie je zadaný vôbec, pokiaľ nechcete konkrétne identifikovať zariadenie na prehrávanie.

Značka:

Pre HTML5 video je možné v prehrávači zobraziť aj ďalšiu stopu s informáciami ako titulky, titulky, kapitoly, popisy (zatiaľ nepodporované) a metadáta (zatiaľ nepodporované). Táto funkcia sa implementuje pridaním značiek s príslušnými atribútmi do značky.

- nemá uzatváraciu značku.

Značka vám umožňuje pripojiť k videu ďalšie súbory stôp v špeciálnom formáte WebVTT (Web Video Text Tracks Format), ktoré označujú výstup textové správy s ich časovým odkazom na video súbor. Štandard WebVTT podporuje nielen výstup textových správ, ale poskytuje preň aj možnosti CSS štýl a možnosti umiestnenia v oblasti sledovania videa. V súčasnosti sa súbory WebVTT používajú najmä na pripojenie textových titulkov k videám, čo podporujú takmer všetky prehliadače. Ostatné funkcie štandardu WebVTT ešte nie sú plne implementované samotnými prehliadačmi, preto je pre úplnejšie využitie WebVTT lepšie používať prehrávače JS. Súbory WebVTT môžu prehrávače JS tiež neštandardne používať na prenos dodatočných údajov do prehrávača JS, ako sú napríklad adresy URL náhľadov obrázkov pre snímky videa. Na otázku, ako zobraziť ukážky snímok videa na stupnici prevíjania prehrávača (Miniatúry Scrub Bar), ako sa to robí na weboch na hosťovanie videa. Tu treba povedať, že takáto funkcionalita zatiaľ nie je dostupná v prehrávačoch zabudovaných v prehliadačoch a preto je implementovaná cez JS prehrávače ako doplnok. Ak to chcete urobiť, pripojte knižnicu JS (prehrávač js), ktorá prevezme kontrolu nad objektom videa a zvuku HTML5 a vykoná jeho úpravu. Takéto JS prehrávače na zobrazovanie náhľadov snímok videa neštandardne využívajú súbory WEBVTT z tagu na prenos adries URL náhľadových obrázkov cez neho.

Súbor WebVTT je bežný textový súbor s príponou .vtt, do ktorého sa vo forme riadkového zoznamu zapisujú časové pečiatky s časmi začiatku a konca a textové správy pre výstup na tieto značky. Ku kontajneru môžete pripojiť niekoľko súborov WebVTT s textom v rôznych jazykoch. Pre každý jazyk musíte vytvoriť samostatný súbor a každý z nich pripojte pomocou značky. Značky musia byť vložené do kontajnera za všetky značky, ale pred chybové hlásenia videa HTML5. Značka so súborom titulkov v predvolenom jazyku musí byť umiestnená na prvom mieste medzi značkami v aktuálnom kontajneri.

Súbor WEBVTT môže obsahovať jednu alebo viac časových pečiatok. Súbor začína slovom WEBVTT. Prázdne riadky samostatné časové pečiatky s priradeným textom a atribútmi. Text môže obsahovať HTML prvky a značenie CSS. Jeho ID možno umiestniť pred časovú pečiatku, aby sa naň odkazovalo pomocou špeciálnych výrazov. Všetky tieto podrobnosti sú popísané v štandarde WEBVTT. určuje typ stopy a môže nadobúdať nasledujúce hodnoty:

• titulky - titulky vo forme textu, ktorý sa zobrazuje nad videom. Pre prehrávaný súbor môžete nastaviť titulky v rôznych jazykoch, aby ste si mohli vybrať v prehrávači, ak to podporuje. Vo väčšine prípadov sa používa tento typ, pretože ho podporuje väčšina prehliadačov.
• titulky - titulky vo forme textu a zvuku, ktoré sa zobrazujú nad videom. Podobne ako titulky, ale okrem textu môžu obsahovať zvukové efekty a ďalšie zvukové informácie.
• kapitoly – kapitoly, ktoré sa zobrazujú v texte ako zoznamová ponuka a sú určené na rýchlu navigáciu v mediálnom súbore.
• popisy - popis, toto textové súbory s popisom videa na ich prehrávanie v čítačke obrazovky.
• metadáta - metadáta pre odovzdávanie js skriptov.

Atribút src značky určuje adresu URL súboru stopy s Ďalšie informácie. Súbor pripojený k značke má formát WebVTT a príponu .vtt.

Atribút srclang značky určuje jazyk skladby prostredníctvom kódu jazyka. Pre ruštinu sa bude rovnať „ru“, pre angličtinu „en“.

Atribút štítku tagu určuje názov skladby, ktorý sa zobrazí v prehrávači. Ak atribút nie je nastavený, prehliadač zobrazí názov svojej služby.

Predvolený atribút značky určuje predvolene výber tejto stopy, ak sú v kontajneri videa ďalšie stopy. Iba jedna z niekoľkých značiek môže mať predvolený atribút. Je lepšie umiestniť predvolenú stopu na prvé miesto medzi ostatnými pripojenými stopami.

Príklad tagov: Táto otázka sa objavuje veľmi často, preto som sa jej rozhodol venovať na hodinách samostatný článok. Keďže HTML nemá univerzálnu technológiu na prehrávanie zvuku pre všetky prehliadače, na vyriešenie tohto problému navrhujem stiahnuť súbor audio prehrávača, ako sa to robí na väčšine stránok. Všetko robíme krok za krokom:

1. Na hostingu, kde sa nachádza vaša stránka, v koreňovom adresári (priečinok, v ktorom je indexový súbor) vytvorte zvukový priečinok. V budúcnosti doň umiestnite všetky zvukové súbory.

3. Teraz vyberte potrebné súbory, lepšie vo formáte mp3. Vytvorte zvukový priečinok v koreňovom adresári lokality a odovzdajte ich.

4. Zostáva už len vložiť kód pripojenia prehrávača. Je vhodný pre akúkoľvek stránku Na správnom mieste stačí uviesť cestu k súboru prehrávača a zvukovému súboru, respektíve nahradiť slová vaša_doména a názov zvukového_súboru:

A všetko je pripravené! Môžete sa tiež pozrieť na pracovný príklad.

Ako nainštalovať hudba v pozadí v html využívam možnosti HTML a prehliadača, do stránky sa dá vložiť aj hudba na pozadí. Budete potrebovať zvukový súbor požadovaný formát: WAV, AU, MIDI alebo MP3. Ako príklad môžete použiť ľubovoľný súbor so zadanou príponou.

Prvým spôsobom je embed tag. Element embed slúži na načítanie a zobrazenie objektov (napríklad video súborov, flash filmov, niektorých zvukových súborov atď.), ktorým prehliadač spočiatku nerozumie.

Syntax je celkom jednoduchá:

Záverečná značka sa nevyžaduje.

Teraz sa pozrite na príklad záznamu s atribútmi a nižšie s ich dekódovaním:

Vložiť atribúty značiek na prehrávanie zvuku v html
šírka - šírka panela v pixeloch (alebo percentách)
výška - výška panela v pixeloch (alebo percentách)
zarovnať - poloha panela vzhľadom k textu, možné hodnoty sú vľavo, vpravo, na stred
skrytý - umožňuje skryť panel, hodnoty atribútov: true - panel je skrytý, false - panel je viditeľný (predvolená hodnota)
autostart - true - prehrávač sa spustí automaticky pri načítaní stránky, false - čaká na stlačenie tlačidla prehrávania
loop - cyklus, true - stopa sa prehráva v kruhu a kedy hodnota nepravda- len raz

Druhý spôsob. Veľmi staré, ale aj praktické) Pridajte melódiu do rovnakého priečinka (adresára), kde sa nachádza váš súbor, a do tela napíšte nasledujúci kód:

Výsledkom je, že po načítaní stránky zaznie melódia, ktorú ste zadali v značke bgsound. Teraz uvažujme lepšie atribúty značka:

src - cesta k vášmu zvukovému súboru
slučka - koľkokrát zopakovať melódiu (ak -1, potom sa opakuje donekonečna)
vyváženie - hodnota stereo vyváženia (od -10000 do 10000)
hlasitosť - hlasitosť prehrávania melódie, kde 0 je maximum a -10000 je minimum.

Prehrávač však nebude možné nijakým spôsobom ovládať – pri každom obnovení stránky sa skladba prehrá znova.

Po opísaní spôsobu vkladania hudby na pozadí vás chcem od toho odradiť, pretože väčšina používateľov už spravidla počúva hudbu pri návšteve rôznych stránok. Sprievodná hudba ho teda môže len prinútiť zavrieť kartu s webom.

Vkladanie zvuku a hudby do HTML5 - audio tag
audio - párové definovanie tagov zvuk na pozadí, hudbu alebo iný zvukový stream na stránke.

Atribúty zvukových značiek

automatické prehrávanie - súbor sa prehrá ihneď po načítaní stránky (podobne ako hudba na pozadí bgsound)
ovládacie prvky - zobrazenie ovládacieho panela prehrávača v prehliadači
slučka - prehrá súbor znova po jeho skončení
predbežné načítanie - zvukový súbor sa načíta spolu s načítaním stránky
src - cesta k zvukovému súboru (mp3 alebo ogg)

Príklad kódu so zvukovou značkou

Zvuková značka

Zvuk v HTML 5

Váš prehliadač audio tag nepodporuje.
Stiahnuť hudbu.

Popis

Pridáva, prehráva a spravuje nastavenia zvuku na webovej stránke. Cesta k súboru je určená prostredníctvom atribútu src alebo podznačky. Do kontajnera môžete napísať text, ktorý sa zobrazí v prehliadačoch, ktoré s touto značkou nefungujú.

Zoznam kodekov podporovaných prehliadačmi je obmedzený a je uvedený v tabuľke. 1.

Tabuľka 1. Kodeky a prehliadače

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

Pre univerzálne prehrávanie v špecifikovaných prehliadačoch je zvuk kódovaný pomocou rôznych kodekov a súbory sa pridávajú súčasne prostredníctvom značky.

Atribúty syntaxe Zvuk sa začne prehrávať ihneď po načítaní stránky. Pridá ovládací panel do zvukového súboru. Po skončení zopakuje zvuk od začiatku. Používa sa na stiahnutie súboru spolu s načítaním webovej stránky. Určuje cestu k prehrávanému súboru. Záverečná značka

Požadovaný.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Alexander Klimenkov - Štrnástka

Váš prehliadač audio tag nepodporuje. Stiahnuť hudbu.

Výsledkom je príklad Prehliadač Opera znázornené na obr. 1.

Ryža. 1. Prehrajte zvukový súbor

Prehliadače

Vzhľad ovládacích prvkov prehrávania zvuku sa v jednotlivých prehliadačoch líši, ale základné prvky sú rovnaké. Sú to tlačidlo prehrávania/pauzy, dĺžka skladby, uplynutý a celkový čas prehrávania a úroveň hlasitosti.

S príchodom dostatočne rýchleho internetového pripojenia bol Flash jediným nástrojom na prehrávanie zvukov na webových stránkach. HTML5 ale zásadne zmení spôsob prehrávania zvukov na internete. V tomto článku vám chcem podrobne povedať, ako používať značku na vašich stránkach.

Používame ho na vloženie zvukového súboru na stránku nižšie najjednoduchší príklad pomocou značky stiahne súbor mp3 a prehrá ho. Všimnite si atribút autopaly, ktorý sa používa na automatické prehrávanie zvuku. Na stránke by ste však nemali automaticky prehrávať zvuky, pretože to bude obťažovať používateľov. Prehrávanie zvuku v slučke Chcete vytvoriť slučku? Atribút loop vám v tom pomôže. Opäť by ste však nemali nadmerne používať automatické prehrávanie a prehrávanie v slučke, ak nechcete, aby používateľ opustil web predčasne. Zobrazenie ovládacích prvkovNamiesto toho, aby sa zvuky prehrávali automaticky, čo je určite zlý postup, by ste mali povoliť zobrazovanie niektorých ovládacích prvkov v prehliadači, ako sú tlačidlá hlasitosti a prehrávania (pozastavenia). To sa dá ľahko urobiť jednoduchým pridaním atribútu controls. Rôzne formáty súborov Značka je podporovaná väčšinou moderných prehliadačov, ale problém je v tom rôzne prehliadače podporuje rôzne formáty súborov. Napríklad Safari dokáže prehrávať MP3, ale Firefox nie a namiesto toho prehráva súbory OGG. Riešením tohto problému je použitie oboch formátov, aby zvuk počul každý návštevník bez ohľadu na to, aký prehliadač používa. Určenie typu MIME súborov Pri používaní rôznych formátov súborov je dobrou praxou špecifikovať typ MIME pre každý súbor, aby prehliadač mohol lokalizovať súbor, ktorý podporuje. To sa dá jednoducho urobiť pomocou atribútu type. Pre staršie prehliadače Čo ak návštevník používa IE6 alebo iný praveký prehliadač, ktorý značku nepodporuje? Je to jednoduché: nižšie je kód, ktorý zobrazí správu pre prehliadače, ktoré značku nepodporujú. Váš prehliadač nepodporuje audio tag! Ukladanie súborov do vyrovnávacej pamäte Pri prehrávaní veľkých súborov je možné použiť ukladanie súborov do vyrovnávacej pamäte. Môžete na to použiť atribút preload. Môže nadobudnúť 3 hodnoty:

• žiadny - ak nechcete použiť vyrovnávaciu pamäť súboru;
• auto - ak chcete, aby prehliadač ukladal do vyrovnávacej pamäte celý súbor;
• metadáta - na načítanie iba servisných informácií (dĺžka zvuku atď.).

Ovládanie prehrávania cez JavaScript Ovládanie HTML5 audio prehrávača cez JavaScript je veľmi jednoduché. Nasledujúci príklad ukazuje, ako na to pomocou JavaScriptu môžete si postaviť svoj vlastný základné prvky Ovládanie audio prehrávača: Prehrať Pozastaviť Hlasitosť + Hlasitosť -

To je na dnes všetko.
Dúfam, že vám tento článok pomohol pochopiť základné schopnosti HTML5 tag.

Až donedávna nebolo vkladanie zvuku do webovej stránky takou jednoduchou úlohou. Vo všeobecnosti existujú niektoré, ktoré ponúkajú inteligentnejšie a lepšie implementácie, ale väčšina metód vás obmedzuje na určitý prehliadač a určité doplnky.

S príchodom technológie Flash na trh sa táto úloha stala oveľa jednoduchšou, pretože doplnok Flash vám umožňuje vložiť akúkoľvek animáciu alebo zvuk na stránku a túto technológiu podporuje väčšina prehliadačov. Dopyt po Flash sa však postupne stráca po uvedení inovatívnych zariadení od spoločnosti Apple: iPhone a iPad. Ako viete, Apple svoje zariadenia zásadne nevybavuje Podpora Flash a počet používateľov produktu rýchlo rastie.

Skrátka, je tu trochu zmätok.

Našťastie HTML5 výrazne uľahčilo život vývojárom, pretože technológia obsahuje zvukový prvok. Tento prvok vám umožňuje vložiť zvukové súbory do ľubovoľnej webovej stránky, ako aj implementovať ovládací panel pomocou javascriptu. Ešte dôležitejšie je, že táto technológia nevyžaduje ďalšie pluginy a je podporovaná takmer vo všetkých prehliadačoch, s výnimkou skorých verzií (o podpore prehliadačov si povieme neskôr!).

V našom dnešnom článku vám povieme, ako môžete vložiť zvuky pomocou zvukového prvku. Dozvieme sa tiež, ako ovládať proces prehrávania pomocou javascriptu, a pokúsime sa vám povedať aj o technologickej podpore medzi prehliadačmi.

Zvukový prvok HTML5

Tento prvok sa veľmi ľahko používa. V našom dnešnom príklade vložíme „Biele Vianoce“ Binga Crosbyho:

Tu netreba veľa vysvetľovať. Podobne ako vložíte obrázok pomocou značky img, môžete rovnakým spôsobom vložiť zvuk pomocou značky audio.

Podpora viacerých prehliadačov

Vyššie uvedený príklad pravdepodobne nebude fungovať vo všetkých prehliadačoch. Tu vstupuje do hry formát súboru.

Niektoré prehliadače dokážu prehrávať súbory .mp3, ale nie súbory .ogg, zatiaľ čo iné to robia naopak. Väčšina prehliadačov dokáže prehrávať súbory .wav, ale kvôli ich veľkej veľkosti je nevhodné použiť ich ako zvuk pre webovú stránku.

Tu je tabuľka prehliadačov s podporou zvukových formátov:

Aké formáty podporuje váš prehliadač? Určite to pomocou .

Ako vidíte v tabuľke, najoptimálnejšou možnosťou implementácie by bolo prepojenie oboch formátov súborov.
Ak to chcete urobiť, môžete do zvukového prvku pridať viacero zdrojových prvkov a určiť v nich cesty k rôznym formátom. Prehliadač prehrá prvý súbor, ktorý podporuje. Tu je príklad:

To samozrejme znamená, že musíte vytvoriť verziu Mp3 aj OGG zvukový súbor(tu prichádza na vašu pomoc), ale toto je jediný spôsob, ako organizovať podporu medzi prehliadačmi.

Staršie verzie prehliadača Internet Explorer (verzie 7 a 8) vôbec nepodporujú prvok zvuku. Neskôr sa však v článku pozrieme na to, ako tento problém obísť.

Automatické prehrávanie zvuku

Hoci vyššie uvedený kód vkladá zvuk, neprehráva ho. Ak chceme, aby sa zvuk prehrával automaticky pri načítaní stránky, musíme do prvku pridať atribút autoplay:

Pridanie ovládacích tlačidiel

Automatické prehrávanie môže byť síce užitočné, no v mnohých prípadoch je otravné alebo úplne nevhodné. Preto môžeme nainštalovať ďalšie ovládacie tlačidlá pre audio prvky, aby sa používateľ mohol sám rozhodnúť:

Pridá sa vodorovný pruh s tlačidlom pozastavenia/prehratia, časová os s posuvníkom a ovládač hlasitosti. Všetko je približne rovnaké, ako môžete vidieť na prehrávači na Youtube.

Je dôležité si uvedomiť, že ovládací panel sa bude líšiť v závislosti od prehliadačov. Napríklad prehliadač na iPhone nebude mať posúvač hlasitosti, pretože zariadenie má samostatné tlačidlá na ovládanie úrovní zvuku.

Slučkové prehrávanie

Pridanie atribútu slučky do zvukového prvku spôsobí, že zvuk sa bude prehrávať neobmedzene.

To môže byť užitočné pri zapínaní hudby na pozadí alebo zvukových efektov v hrách.

Môžete tiež použiť atribút preload, ktorý prehliadaču povie, kedy a kde sa má načítať konkrétny zvukový súbor.
Predbežné načítanie zvukového súboru znamená, že zvuk možno prehrať okamžite, keď používateľ stlačí tlačidlo prehrávania.

Tento atribút má niekoľko významov:

„žiadne“ – prehliadač by nemal uložiť stiahnutý súbor. Tie. Ak ste si istí, že väčšina používateľov súbor neprehrá, použite túto možnosť. Alebo ho použite, keď potrebujete ušetriť čo najväčšiu šírku pásma servera.

„metadáta“ – parameter je podobný žiadnemu, ibaže prehliadač upozorníte na možnosť načítania metadát, ako je trvanie zvukovej stopy, ale nie na samotný zvukový súbor.

„auto“ – umožníte prehliadaču stiahnuť si samotný zvukový súbor.

Napríklad:

Majte na pamäti, že predbežné načítanie je len pohodlná funkcia, pretože niektoré prehliadače môžu tento príkaz jednoducho ignorovať a začať robiť, čo chcú.

Ovládanie prehrávania cez javascript

Čo je pohodlné v prvky javascriptu– je to preto, že sa dajú ľahko spravovať pomocou javascriptu. Audio prvok ponúka mnoho pohodlných parametrov a spôsobov ovládania:

Play() – spustí prehrávanie od aktuálnej pozície;

Pause() – zastaví prehrávanie na aktuálnej pozícii;

canPlayType(type) – určuje, či prehliadač podporuje prehrávanie tohto typu médiá;

trvanie – trvanie stopy v sekundách;

currentTime – aktuálna poloha v sekundách. Môžete tiež nainštalovať tento parameter pre posunutie pozície prehrávania.

Pomocou vyššie uvedených možností a metód môžeme vytvoriť niekoľko základných ovládacích tlačidiel:

Prehrávať hudbu
Pozastaviť hudbu
Zastaviť hudbu
Zobraziť ukážku: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Podpora starších verzií programu Internet Explorer

Vo väčšine prípadov bude prehliadač používateľa podporovať prvok HTML5. Bohužiaľ, prehliadače IE verzie 7 a dokonca 8 tento prvok nepodporujú (hoci verzia 9 už podporu má). Je dôležité zvážiť vrátenú verziu pre používateľov, ktorí zostali v roku 2008.

Veľmi hrubou, ale účinnou metódou je použiť špeciálne komentáre na zvýraznenie údajov prehliadača a dať im ukazovateľ objektu na zvukový súbor. Prehliadač teda často zobrazuje vstavaný ovládač, ktorý používateľom umožňuje prehrávať, pozastavovať alebo pretáčať hudbu takmer zvukom podobným HTML5. Tu je príklad:

Prehrávať hudbu
Pozastaviť hudbu
Zastaviť 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() );

Vyššie uvedený príklad bude fungovať vo všetkých prehliadačoch, ktoré podporujú HTML5 Audio, a bude fungovať aj v IE verzie 7 a 8. Pomocou komentárov presmerujeme ovládacie prvky tlačidiel priamo na zvukový súbor.

Ďalším spôsobom návratu je vloženie prehrávača Flash do stránky. Tu, ktorá hovorí o vrátení späť vo forme prehrávača Flash.

Záver

V našom dnešnom článku sme sa naučili, ako vložiť zvukové súbory pomocou HTML5. Zvukový prvok sa nielen ľahko používa, ale vieme si ho aj prispôsobiť a ovládať prehrávanie cez javascript.

Chcete sa dozvedieť viac o zvukovom prvku v HTML5? Potom sa odhláste.

Hoci podpora v súčasnosti v niektorých prehliadačoch trpí (napríklad staršie verzie IE), v prípade potreby ich môžete jednoducho vrátiť späť, čo je v dnešnej dobe čoraz menej bežné.