Ez a kérdés nagyon gyakori, ezért úgy döntöttem, hogy külön cikket szentelek neki a leckékben. Mivel a HTML-nek nincs univerzális technológiája az összes böngésző számára történő hanglejátszáshoz, a probléma megoldása érdekében azt javaslom, hogy töltse le az audiolejátszó fájlját, ahogy azt a legtöbb webhelyen teszik. Mindent lépésről lépésre csinálunk:

1. Azon a tárhelyen, ahol a webhelye található, a gyökérkönyvtárban (az indexfájlt tartalmazó mappában) hozza létre az audio mappát. A jövőben az összes hangfájlt elhelyezi benne.

3. Most válassza ki a kívánt fájlokat, lehetőleg mp3 formátumban. Hozzon létre egy hangmappát a webhely gyökerében, és töltse fel azokat.

4. Már csak a lejátszó csatlakozási kódját kell beírni. Bármilyen webhelyre alkalmas. A megfelelő helyen csak a lejátszófájl és az audiofájl elérési útját kell megadnia, a saját_domain és az audio_fájl_neve szavak helyett:

És minden készen áll! A működő példát is láthatja.

Háttérzene beállítása html-ben A HTML és a böngésző erejét kihasználva háttérzenét is beszúrhatunk az oldalra. Szüksége lesz egy hangfájlra a kívánt formátumban: WAV, AU, MIDI vagy MP3. Példaként használhat bármilyen fájlt a megadott kiterjesztéssel.

Az első módszer a beágyazási címke. A beágyazási elem olyan objektumok (például videofájlok, flash-filmek, egyes hangfájlok stb.) betöltésére és megjelenítésére szolgál, amelyeket a böngésző natívan nem ért.

A szintaxis nagyon egyszerű:

A záró címke nem szükséges.

Most nézzünk egy példát egy rekordra attribútumokkal, alább pedig azok dekódolásával:

Címkeattribútumok beágyazása a hang html formátumban történő lejátszásához
szélesség - a panel szélessége pixelben (vagy százalékban)
magasság – a panel magassága képpontokban (vagy százalékban)
igazítás - a panel helyzete a szöveghez képest, a lehetséges értékek balra, jobbra, középre
rejtett - lehetővé teszi a panel elrejtését, attribútumértékek: igaz - a panel rejtett, false - a panel látható (alapértelmezett érték)
autostart - igaz - a lejátszó automatikusan elindul az oldal betöltésekor, false - várja a lejátszás gomb megnyomását
loop - hurok, igaz - a számot körben játsszák, és mikor hamis- csak egyszer

A második út. Nagyon régi, de praktikus is) Adja hozzá a dallamot ugyanabba a mappába (könyvtárba), ahol a fájlja található, és írja be a következő kódot a törzsbe:

Ennek eredményeként az oldal betöltése után a bgsound címkében megadott dallam szólal meg. Most pedig nézzük meg jobban a címke attribútumait:

src - az audiofájl elérési útja
hurok - hányszor ismételje meg a dallamot (ha -1, akkor a végtelenségig ismétlődik)
egyensúly - sztereó egyensúly értéke (-10000 és 10000 között)
hangerő - a dallam hangereje, ahol 0 a maximum és -10000 a minimum.

A lejátszót azonban semmilyen módon nem lehet majd irányítani – minden alkalommal, amikor az oldalt frissítik, a szám újra lejátszható.

Miután leírtam a háttérzene beillesztésének módját, szeretném lebeszélni erről, mivel a legtöbb felhasználó általában már hallgat zenét a különféle webhelyek meglátogatásakor. Ezért a kísérő zenei kíséret csak arra kényszerítheti, hogy bezárja a lapot az oldallal.

Hang és zene beágyazása HTML5-be – hangcímke
audio - egy pár címke, amely meghatározza a háttérhangot, zenét vagy más hangfolyamot a webhelyen.

Hangcímke attribútumok

automatikus lejátszás - a fájl azonnal lejátszásra kerül az oldal betöltésekor (hasonlóan a bgsound háttérzenéhez)
vezérlők – a lejátszó vezérlőpultjának megjelenítése a böngészőben
loop – a fájl ismételt lejátszása a befejezés után
előtöltés - az audiofájl az oldal betöltésével együtt betöltődik
src - audiofájl elérési útja (mp3 vagy ogg)

Minta kód hangcímkével

hangcímke

Hang HTML 5-ben

Az audio címkét a böngésző nem támogatja.
Zene letöltés.

Az ésszerűen gyors internetkapcsolatok megjelenésével a Flash volt az egyetlen módja a hangok lejátszásának a webhelyeken. A HTML5 azonban alapvetően megváltoztatja a hangok internetes lejátszási módját. Ebben a cikkben részletesen szeretném elmondani, hogyan kell használni a címkét webhelyein.

Használja hangfájl beágyazásához az oldalon Az alábbiakban a címke használatának legegyszerűbb példája látható, betölt egy mp3 fájlt és lejátssza azt. Vegye figyelembe az autopaly attribútumot, amely a hang automatikus lejátszására szolgál. Azonban nem szabad automatikusan lejátszania a hangokat az oldalon, mivel ez bosszantani fogja a felhasználókat. Hang lejátszása hurokban Szeretne hurkolni egy hangot? A loop attribútum segít ebben. De ismételten, ne használja túl az automatikus lejátszást és a loopolást, ha nem szeretné, hogy a felhasználó idő előtt elhagyja a webhelyet. Vezérlők megjelenítése A hangok automatikus lejátszása helyett, ami határozottan rossz gyakorlat, hagyja, hogy a böngésző megjelenítsen néhány vezérlőt, például a hangerőt és a lejátszás/szünet gombokat. Ez egyszerűen megtehető a controls attribútum hozzáadásával. Különféle fájlformátumokA címkét a legtöbb támogatja modern böngészők, de a probléma az különböző böngészők támogatja a különböző fájlformátumokat. A Safari például le tudja játszani az MP3-at, de a Firefox nem, hanem OGG fájlokat játszik le. A probléma megoldása mindkét formátum használata, így minden látogató hallhatja a hangot, függetlenül attól, hogy milyen böngészőt használ. Fájlok MIME-típusának megadása Különböző fájlformátumok használatakor célszerű minden fájlhoz megadni a MIME-típust, hogy a böngésző lokalizálja az általa támogatott fájlt. Ez könnyen megtehető a type attribútum használatával. Régebbi böngészők esetén Mi a teendő, ha a látogató IE6-ot vagy más őskori böngészőt használ, amely nem támogatja a címkét? Ez egyszerű: az alábbiakban látható a kód, amely üzenetet jelenít meg azon böngészők számára, amelyek nem támogatják a címkét. A böngésző nem jeleníti meg a hangcímkét! Fájlpufferelés Nagy fájlok lejátszásakor fájlpufferelés használható. Ehhez használhatja a preload attribútumot. 3 értéket vehet fel:

• none - ha nem akarja használni a fájlpuffert;
• auto - ha azt szeretné, hogy a böngésző a teljes fájlt pufferelje;
• metaadatok - csak a szolgáltatási információk betöltéséhez (hang időtartama stb.).

Lejátszás vezérlése JavaScript segítségével A HTML5 audiolejátszó vezérlése JavaScript segítségével nagyon egyszerű. A következő példa bemutatja, hogyan kell JavaScript használatával elkészítheti az alapvető audiolejátszó vezérlőit: Play Pause Volume + Volume -

Ez minden mára.
Remélem, ez a cikk segített megérteni a HTML5 címke alapjait.

Korábban a böngészők nem rendelkeztek beépített audio- és videotartalmak támogatására alkalmas képességekkel, de az internet fejlődésével a multimédiás elemek támogatása, mint a modern böngészők jellemzője, elengedhetetlenné vált. A HTML5 új elemeket vezetett be, amelyeket minden modern böngésző támogat. A címke fő feladata audiotartalom hozzáadása az oldalhoz.

Az audiofájl formátuma határozza meg a tárolóeszközön (tárolóeszközön) tárolt hangadatok megjelenítésének szerkezetét és jellemzőit. Az audio adatok redundanciájának kiküszöbölése érdekében általában speciális audio kodekeket használnak, amelyeknek köszönhetően az audioadatokat tömörítik. A modern böngészők a következő 3 hangformátumot támogatják:

MP3 Wav Ogg böngészőOpera AZAZ él

IGEN	IGEN	IGEN
IGEN	IGEN	IGEN
IGEN	IGEN	IGEN
IGEN	IGEN	NEM
IGEN	NEM	NEM
IGEN	IGEN	NEM

• Az MP3 formátum egy kodek és egy konténer is egyben. Széles körben használják mindenhol letölthető zene tárolására.
• A WAV formátum kodek és konténer is egyben.
• Ogg konténer + Vorbis audio kodek. Általában "Ogg Vorbis"-ként emlegetik. A Xiph közösség fejlesztette ki a szabadalmaztatott MP3, AAC és WMA leváltására.

MIME típusok hanghoz:

Formázza a MIME típusokatMP3 Ogg wav

audio/mpeg

audio/ogg

audio/wav

Böngésző támogatás Címke
Opera
IExplorer
él

	4.0	3.5	10.5	4.0	9.0	12.0

Attribútumok Attribútum Érték Leírás

automatikus lejátszás	automatikus lejátszás	Meghatározza, hogy a hangot automatikusan lejátssza, amint készen áll.
vezérlők	vezérlők	Megjeleníti a beépített médiafájlok vezérlőit (lejátszás/szünet gomb, csúszka egy adott klipre ugráshoz és hangerő csúszka).
hurok	hurok	Hurkolja a fájl lejátszását (a dalunk jó - kezdje elölről).
tompított	tompított	Megadja, hogy a hang némítva legyen (nincs hang).
előtöltés	auto metaadatokat egyik sem	Meghatározza, hogyan kell betölteni a hangot az oldal betöltésekor. Az attribútumot figyelmen kívül hagyja, ha az automatikus lejátszás attribútum jelen van.
src	URL	Megadja az audiofájl URL-jét.

Használati példa

Az elem ugyanazokat az attribútumokat használja, mint az elem, a szélesség (szélesség), magasság (magasság) és poszter (a videó lejátszása előtt megjelenő kép) attribútumok kivételével. Az elem használatához hasonlóan több hangformátum-beállítást is megadhat az elem használatával, amint az az alábbi példában látható:

Hang HTML5-ben Hang HTML5-ben Az Ön böngészője nem támogatja ezt a hangformátumot. Ezt a fájlt az alábbi linkről töltheti le:

Letöltés

Ebben a példában mi:

Hangtartalmat adtunk az oldalhoz ( tag ), a controls attribútum használatával hozzáadtuk a beépített vezérlők megjelenítését egy multimédiás fájlhoz (lejátszás/szünet gomb, csúszka, amely lehetővé teszi, hogy a videó egy adott részletére lépjen, valamint hangerőszabályzó).

Leírás

Hozzáadja, lejátssza és kezeli a hangrögzítési beállításokat egy weboldalon. A fájl elérési útját az src attribútum vagy egy beágyazott címke adja meg. A tároló belsejébe olyan szöveget írhat, amely megjelenik azokban a böngészőkben, amelyek nem működnek ezzel a címkével.

A böngészők által támogatott kodekek listája korlátozott, és a táblázatban található. 1.

Tab. 1. Kodekek és böngészők

kodek	internet böngésző	Króm	Opera	szafari	Firefox
ogg/vorbis
wav
mp3
AAC

A megadott böngészőkben való univerzális lejátszáshoz a hang különböző kodekekkel van kódolva, és a fájlok egyidejűleg kerülnek hozzáadásra a címkén keresztül.

Szintaxis attribútumok A hang lejátszása az oldal betöltésekor azonnal elindul. Vezérlőpult hozzáadása hangfájlhoz. Megismétli a hangot az elejétől a befejezés után. Fájl letöltésére és weboldal betöltésére szolgál. Megadja a lejátszott fájl elérési útját. Záró címke

Kívánt.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

hang-

Alekszandr Klimenkov – Tizennégy

Az audio címkét a böngésző nem támogatja. Zene letöltés.

Példaeredmény Opera böngészőábrán látható. 1.

Rizs. 1. Hangfájlok lejátszása

Böngészők

A hanglejátszási vezérlők megjelenésükben különböznek az egyes böngészőkben, de az alapelemek ugyanazok. Ezek a lejátszás/szünet gomb, a szám hossza, az eltelt és a teljes lejátszási idő, valamint a hangerő szintje.

andew

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

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

11937

A cikk leírja a HTML5 audio- és videotárolók felépítését, a videó-, hang-, forrás-, sávcímkéket és attribútumaikat a lehetséges értékekkel. HTML sablonokat és példákat adunk a multimédiás fájlok lejátszásának megvalósítására a böngészőbe épített lehetőségek alapján. Megjelenik a feliratokkal, címekkel, tartalomjegyzékkel ellátott szöveges sáv videóhoz való csatlakozása WEBVTT formátumú fájlokkal, példákkal. HTML5 kódsablonokat mutatott be schema.org jelöléssel hanghoz és videóhoz. Megjelenik a fő webes audio- és videofájlformátumok MIME-típusaikkal, valamint a video- és hangformátumokká konvertáló eszközökkel.

A HTML5 olyan új funkciókkal rendelkezik, amelyek lehetővé teszik az audio- és videofájlok lejátszását közvetlenül a böngészőből, anélkül, hogy ezt használnák harmadik féltől származó programok. Eddig, bár a HTML5 már nem újdonság, továbbra is nézeteltérések vannak azzal kapcsolatban, hogy a böngészők hogyan kezelik a video- és audiocímkéket, és hogyan jelenítik meg magát a lejátszót. Vannak, akik mindegyiknél jobban csinálják új verzió mások még mindig le vannak maradva. Globálisan az a tendencia, hogy a böngészők egyre több funkciót biztosítanak majd a multimédiás fájlok lejátszására.

Screencast: Példa a sablonok használatára

Videó letöltése

Screencast: példák sablonok használatára a cikkből - webhely

A HTML5 videó és hang egy fejlődő szabvány, és nem kapcsolódik semmilyen hang- vagy videóformátumhoz, ezért vannak különbségek a böngészők között, hogy mit támogatnak. formátumok audio és video fájlokat. Ezt a különbséget most kompenzálja az eredeti fájl több különböző kodekkel való kódolása és a fájlok ezen verzióinak címkékkel vagy beágyazott címkékkel való összekapcsolása< source src=" URL">. A böngészők által támogatott audio- és videofájlok formátumai között azonban vezetők vannak kialakulóban. Videónál természetesen mp4 (H.264), hangnál pedig mp3 és m4a formátum. Most valószínűleg minden böngésző képes lejátszani az ilyen formátumú fájlokat. Is, Firefox böngészők, a Chrome és az Opera megállapodott abban, hogy támogatja a WEBM szabványt, mint közös videóformátumot. Az én szempontom szerint a HTML5 videó és hang optimális felhasználása jelenleg egy olyan séma lenne, amely egyetlen mp4 formátumú multimédiás fájl használatán alapul ( H.264) videóhoz és m4a hanghoz és JS HTML5 lejátszóhoz. Csak egy fájl van csatlakoztatva a megadott formátumban az audio- vagy videotárolóhoz. Most a legtöbb böngésző képes mp4 formátum lejátszására. A csatlakoztatott JS-könyvtár stílust ad a böngészőbe épített lejátszónak. Ha a böngésző nem támogatja az mp4 /m4a formátumot, akkor ebben az esetben a JS lejátszó valósítja meg a kapcsolatot Flash player a médiafájl lejátszásához. Tekintettel arra, hogy az mp4 formátum nagy népszerűségnek örvend, remélhetjük, hogy kicsi a valószínűsége annak, hogy problémák merülnek fel a böngészőkben történő lejátszásával. Ez a séma csak egy médiafájlt igényel a megadott formátumban, amely lemezterületet és fájlfeldolgozási erőforrásokat takarít meg. Ezenkívül egy ilyen séma stratégiailag helyesebb lesz, mivel a tendencia az, hogy a böngészők többet és jobban implementálják a HTML5 videót és hangot.

A fájl lejátszására szolgáló HTML5-lejátszó megadásához a fájl URL-címén kívül át kell adnia a fájl MIME-típusát is, hogy a böngésző megértse, melyik kodeket kell használnia. Az alábbi táblázat felsorolja a leggyakoribb fájlformátumokat és azok MIME-típusait.

Fájlformátumok és MIME-típusaik Médiafájl-kiterjesztések MIME típus

audio mp3	mp3	audio/mpeg
Audio mp4	m4a	audio/mp4
audio webm	webm	audio/webm
audio ogg	ogg	audio/ogg
Video mp4 (H.264)	mp4	videó/mp4
Videók webm	webm	videó/webm
Videók ogg	ogv	videó/ogg

Eszközök hang- és videofájlok kódolásához

Videó- ​​és hangfájlok kódolásához a fenti webes formátumokba használhatja nyílt program, amely támogatja az audio- és videofájlok konvertálását a weben elterjedt fő formátumokba ( MP4, WebM, Ogg Theora, MP3 stb.). Miro Videó konvertáló különbözőre kapható operációs rendszer- Windows, Mac és Linux, és van grafikus héj konzol segédprogramokhoz, és amelyek kényelmesen használhatók webszerveren a letöltött videó és hang automatikus módban történő feldolgozásához.

: HTML5 audio példakód schema.org mikrojelöléssel: Hangcím

A HTML5 hangot a böngésző nem támogatja.

Hang letöltése

Így fognak kinézni a fent leírt hangsablon kódjából kinyert jelölőadatok.

Audioobject itemType = http://schema.org/AudioObject name = Hangcím leírása = Hang leírása... isfamilyfriendly = true encodingformat = mp3 időtartam = PT04M59S feltöltési dátum = 2015-12-31 image = A kép teljes URL-je.jpg alternatename = Alternatív audio cím contenturl href = URL a fájlhoz.mp3 text = Hang letöltése szerző személy itemType = http://schema.org/Person url href = URL text = Szerző neve = Szerző neve image = Teljes URL személyhez.jpg

A schema.org minimális hangjelölésének tartalmaznia kell az itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" elemeket. A többi tulajdonság nem kötelező.

Példa a HTML5 címke szabványos használatára:

A demóban keresztül jelentkeztem a címkére osztály attribútuma CSS-stílusok, amelyek dinamikussá teszik a videoterület szélességét a képernyő mérete alapján. A lejátszó magassága magától beállítható. Próbálja átméretezni a böngészőablakot, hogy megtudja, hogyan működik. Ezért ennek a demónak a kódforrásában nincsenek szélesség és magasság attribútumok a címkéhez, ezeket CSS stílusok váltják fel. De a sablonkód listában ez az elfogadás nem jelenik meg, mert már privát.

HTML5 videó példakód schema.org jelöléssel: Videó címe

Nézd meg a YouTube-on

A HTML5 videót a böngésző nem támogatja.

Videó letöltése: Videó címe

Így fognak kinézni a fent leírt videósablon kódjából kinyert mikroadat adatok.

Videoobject itemType = http://schema.org/VideoObject name = Videó címe thumbnail imageobject itemType = http://schema.org/ImageObject contenturl = URL a video-thumbnail.jpg|png szélesség = 100 magasság = 100 időtartam = PT14M59S családbarát = valódi feltöltés dátuma = 2015-12-31 Rövid leírás videókhoz... url href = URL a fájlhoz.mp4 text = Videó címe szerző személy itemType = http://schema.org/Person url href = URL a szerző weboldalához text = szerző neve = szerző neve image = Teljes URL to author.jpg thumbnailurl = URL a fájlhoz.jpg|png

Minimális szükséges keresőmotorok esetén a schema.org videojelölésnek tartalmaznia kell a példakódban megadott összes itemprop tulajdonságot, kivéve az itemprop ="author" blokkot, amely nem kötelező a keresőmotorok számára, és eltávolítható, ha nincs kitöltendő adat. A videó indexképéhez a Yandex megköveteli, hogy a schema.org jelölést itemprop ="thumbnail" néven kell megadni ImageObjectként, és Google megköveteli az itemprop ="thumbnailUrl" -t, így kétszer kell beszúrni a videó-bélyegkép fájlt, és ezért a második img tag a stílusmegjelenítést kapta: none, hogy ne jelenjen meg a böngészőben. Ahelyett, hogy az img címkét a display:none mellett használná, ezt a tulajdonságot linkcímkeként adhatja át a href attribútummal. Annak ellenére is, hogy a mikroadatok átvitele nem jelenik meg a felhasználó számára metacímkékés link , továbbra is ajánlatos lehetőség szerint mikro-jelölést hozzáadni főleg a felhasználó számára megjelenített címkékhez. A Schema.org mikroadatok érvényesítése a következő linkeken végezhető el: , . A mikrojelölés használatának fő előnye az ilyen tartalom kényelme keresőrobotokés a közösségi hálózatok robotjai. Ezek a robotok kivonják a címkézett adatokat és összesítik azokat. Ezért javul a mikroadatok használata SEO oldalon, és megkönnyíti az adatok automatikus terjesztését a közösségi hálózatokon. A webhelyen a VideoObjec t sémával jelölt videók Schema.org mikroadatainak részletes leírása. Azt is érdemes megjegyezni, hogy azokban az esetekben, amikor nem közvetlenül ágyaz be egy videót a webhelyére, hanem Yandex.Video vagy YouTube videotárhely widgeteket használ, akkor a widget kódja alatt hozzáadhatja a HTML-kód blokkját a videó leírásával. blokkot, és beágyazhat Schema.org mikroadatokat ehhez a videóhoz. Ugyanakkor a videóra mutató URL-paraméterként ne egy statikus fájlra mutató közvetlen hivatkozást adjon meg, hanem állítsa be a videotárhelytől kapott hivatkozást. Bár a Schema.org specifikációja szerint a hivatkozásnak közvetlen fájlra kell mutatnia, a keresőmotorok a videotárhelyről származó videókra mutató hivatkozásokat is feldolgozzák ( lásd a példákat a Yandex webhely Webmester részében), annak ellenére, hogy ilyen linkről nem tudod letölteni a fájlt, és nem tudod közvetlenül megnézni az oldalon lévő HTML5 médialejátszódban, csak a videótárhely widgetben.

Ha azzal a kérdéssel szembesül, hogy melyik tárhelyről tölthet fel multimédiás audio- és videofájlokat, akkor nézze meg a cikket, amely leírja a médiafájlok beszúrásának lehetőségét a Yandex Disk weblapjára.

Attribútumok és címkék:

Az src , preload , autoplay , mediagroup , loop , muted , controls attribútumok közös attribútumok az összes médiaelemhez, beleértve a címkéket és a .

autoplay attribútum: vagy vagy

• az autoplay attribútumot a vagy címkében való jelenléte határozza meg, és ennek az attribútumnak nem kell értéket adni, csak a jelenléte elegendő. Mert HTML szerkesztők, amelyek szerkesztik az elemek kódját, beállíthatja ezt az attribútumot autoplay ="autoplay "-ként, ami az attribútum jelenlétének felel meg. Az autoplay attribútum jelenléte arra utasítja a böngészőt, hogy azonnal kezdje meg a fájl lejátszását, amint a weboldal betöltődik. Ennek megfelelően az autoplay attribútum felülírja a preload attribútum értékeit, amely szabályozza a videó betöltését a lejátszóba, mivel a videónak azonnal el kell indulnia, és ezért be kell töltenie. Alapértelmezés szerint az automatikus lejátszás attribútum hiányzik.

controls attribútum: vagy vagy

• a controls attribútum arra utasítja a böngészőt, hogy mutassa meg a lejátszó vezérlőpultját, amikor az oldal betöltődött, de a felvétel lejátszása nem indult el. Ezt az attribútumot, csakúgy, mint az autoplay attribútumot, csak a vagy címkében való jelenlét állítja be, és nem igényel értéket, csak a jelenléte elegendő. Alapértelmezés szerint ez az attribútum hiányzik, pl. a lejátszó nem jeleníti meg a vezérlőpanelt, amíg a lejátszás el nem indul. A fájllejátszás elindításakor a vezérlőpult megjelenik, ha az egérmutatót a lejátszó területére viszi.

ciklus attribútum: vagy vagy

• a loop attribútum hatására a lejátszó körben játssza le a fájlt. Az attribútumot csak a vagy címkében való jelenléte határozza meg, és nincsenek paraméterei. Alapértelmezés szerint a ciklus attribútum hiányzik.

preload attribútum:

• A preload attribútum a fájlbetöltést a weboldal betöltésével együtt határozza meg, és a következő három érték valamelyikét veszi fel:
  • nincs – ne töltse be a fájlt a weboldal betöltésével együtt. Ez azt jelenti, hogy a fájl csak a lejátszás gomb megnyomása után indul be a lejátszóba. Ez hasznos lehet az oldalbetöltés felgyorsítására. A none érték az előtöltési attribútum alapértelmezett értéke, ezért nem árt, ha egyáltalán nem illeszt be preload attribútumot a címkébe, vagy ebben az esetben.
  • metaadatok - ne a weboldal betöltésével együtt töltse be a fájlt, hanem a médiafájl metaadatait töltse be.
  • auto - teljes fájlletöltés végrehajtása a weboldal betöltésével együtt. Ebben az opcióban a böngészők automatikusan betöltik a médiafájlt honlap d, de ez nem zavarja magának az oldalnak a betöltését és a böngészőben való megjelenítését. Ha a preload ="" attribútum be van állítva a vagy címkében üres érték, akkor a hozzá tartozó automatikus érték kerül felhasználásra.
  • Az automatikus lejátszás attribútum használata esetén a preload attribútum értéke felül lesz írva.

src attribútum:

• a címke src attribútuma, vagy lehetővé teszi a multimédiás fájl elérési útjának azonnali beállítását a címkében. Az elérési út lehet teljes, jelezve a protokollt és a tartományt, vagy az aktuális hely gyökeréhez viszonyítva. A fájl elérési útját az audio- vagy videotárolóba ágyazott címkékben is beállíthatja< source src=" URL"> .

A videocímke poszter attribútuma:

• a poszter attribútum csak a címkében használatos, és megadja a kép URL-jét (gif, png, jpeg stb.), amely akkor jelenik meg, amikor a videó nem érhető el. Ha a poszter attribútum nincs beállítva, akkor a böngészőlejátszó megpróbálja megjeleníteni a videó első képkockáját.

A videocímke szélesség és magasság attribútumai:

• a szélesség és magasság attribútumok csak a címkére vonatkoznak, és beállítják a videolejátszó lejátszási területének szélességét és magasságát. Az érték várhatóan pozitív egész szám, pixelben vagy százalékban megadva. Ezen attribútumok beállítása befolyásolja a videó megjelenítési méretét, de nem változtatja meg a videó képarányát. A videó a megadott méretekhez igazodik az arányok megtartása mellett. Ha a megadott méretek nem egyeznek meg a videó képarányával, akkor sötét sávok jelennek meg a videó tetején és/vagy oldalán. Ezért ezeknek a paramétereknek a beállításakor ajánlatos a lejátszott videóéval megegyező arányt kiválasztani, vagy csak a szélességet állítsa be, és a lejátszó maga állítja be a magasságot.
• Ha ezen paraméterek egyike vagy mindkettő nincs megadva, akkor a nem megadott paraméter(ek) a poszter attribútumban megadott megfelelő képméretből kerülnek ki.
• Ha a poszter attribútum hiányzik, akkor ezek a paraméterek a következők szerint lesznek beállítva: szélesség = 300 px és magasság = 150 képpont. Annak érdekében, hogy ne számítsuk ki és ne hangoljuk össze a videoterület méreteit magának a klipnek az arányaihoz, azt javaslom, hogy csak egyet állítson be. szélesség paraméter, akkor a lejátszási terület magassága ( magasság ) automatikusan kiválasztásra kerül a videó képaránya alapján.
• Emellett a HTML5 lejátszó méretei és kialakítása is befolyásolható css tulajdonságait címkékre vagy .

elnémított attribútum: vagy vagy

• a némított attribútum a címkékben vagy a hangban való jelenlétét némított állapotba állítja a HTML5-lejátszóban. Az attribútum alapértelmezés szerint hiányzik.

crossorigin attribútum:

• a crossorigin attribútum utasítja a böngészőt, hogy küldjön CORS-kérést ehhez az elemhez. Alapértelmezés szerint az attribútum hiányzik, ami azt jelenti, hogy egyáltalán nem használ CORS kéréseket. A következő értékek lehetségesek, ha az attribútum jelen van: anonymous és use-credentials . A CORS () egy modern böngészőtechnológia, amely lehetővé teszi az aktuális weboldalon lévő erőforrások letöltési engedélyeinek szabályozását az aktuális oldal tartományától eltérő tartományokból. A CORS szabvány böngészőjének támogatása lehetővé teszi a biztonságos tartományok közötti adatcsere megvalósítását úgy, hogy speciális kérést (fejlécet) küld az aktuális oldal tartományához arról, hogy engedélyezett-e erőforrások betöltése erre az oldalra egy másik megadott tartományból. Egy ilyen kérésre válaszul a szervernek meg kell jelölnie azokat a tartományokat, amelyekről az erőforrások betöltése engedélyezett.

mediagroup attribútum: div ( margó: 1 em auto; pozíció: relatív; szélesség: 400 képpont; magasság: 300 képpont; ) videó ( pozíció; abszolút; alsó: 0; jobb: 0; ) video: first-child ( szélesség: 100%; magasság : 100%; ) videó:utolsó gyermek (szélesség: 30%; )

• a mediagroup attribútum lehetővé teszi több médiafájl kezelésének egy MediaControllerben való kombinálását úgy, hogy médiafájlokat hoz létre az oldal különböző helyein. Ezt a csoportot egyidejűleg kezeli az összes benne lévő fájl. Ez például kényelmes, ha ugyanazt a klipet egyszerre kell lejátszania és vezérelnie az oldal különböző helyein, különböző feliratokkal vagy különböző klipekkel.

A és címkék záró címkét igényelnek.

Azokban az esetekben, amikor a böngésző nem támogatja a HTML5-öt és a címkéket, ami ma már nagyon ritka, egy szöveges üzenet kerül a tároló záró címkéje elé, és általában hozzáadódik a fájl letöltésére szolgáló hivatkozás. Ha a böngészőbe épített HTML5-lejátszót a JS-könyvtár (JS-lejátszó) is vezérli, akkor a legtöbbjük csatlakoztatja a flash lejátszót, ha a HTML5 böngészőben nem lehet videót és hangot lejátszani, mivel a böngésző nem támogatja a videót és a hangot. címkéket vagy multimédiás fájlformátumot.

Címke:

A lejátszott fájl elérési útja beállítható az src attribútummal a vagy címkéken belüli címkével is. A címkének nincs záró címkéje.

A legtöbb esetben a címke így néz ki:

és mindig benne van az src és type attribútum, aminek a legtöbb esetben csak MIME típusa van.

Címke attribútumok:

• a címke src= "URL" attribútuma határozza meg a médiafájl URL-címét. Az elérési út lehet teljes, jelezve a protokollt és a tartományt, vagy a webhely gyökeréhez viszonyítva.
• a címke type="MIME type" attribútuma, vagy pontosabban type="MIME type; codecs="codec"" adja meg a fájl MIME típusát és kodekjét. Hanghoz elegendő a MIME típusát megadni, például .mp3 - type="audio/mpeg" esetén. Bár a videóra vonatkozó specifikáció szerint a type attribútumnak a kodeket is meg kell adnia, ma már elterjedt, hogy csak a MIME típust adják meg kodek nélkül, a böngészőkre bízva a döntést.
• a címke media ="all|braille|handheld|print|screen|speech|projection|tty|tv" attribútuma határozza meg azt az eszköztípust, amelyen a fájlt le kell játszani. Az alapértelmezett érték az összes, így a legtöbb esetben ez az attribútum egyáltalán nincs megadva, hacsak nem szeretné konkrétan megadni a lejátszóeszközt.

Címke:

HTML5 videó esetén lehetőség van egy további szám megjelenítésére is a lejátszóban olyan információkkal, mint a feliratok (feliratok), címek (feliratok), fejezetek (fejezetek), leírások (leírások – még nem támogatott) és metaadatok (metaadatok – még nem támogatott) ). Ez a funkció a megfelelő attribútumokkal rendelkező címkék hozzáadásával valósul meg.

- nincs zárócímkéje.

A címke lehetővé teszi további műsorszámfájlok csatolását a videóhoz speciális WebVTT (Web Video Text Tracks Format) formátumban, amelyek jelzik a megjelenített szöveges üzeneteket a videofájl időbeli hivatkozásával. A WebVTT szabvány nem csak a szöveges üzenetek kimenetét támogatja, hanem lehetőségeket is biztosít rá. CSS stílusok zását és a videómegtekintési területen való elhelyezési lehetőségeket. Jelenleg a WebVTT fájlokat elsősorban a szöveges feliratok videókhoz csatlakoztatására használják, amit szinte minden böngésző támogat. A WebVTT szabvány egyéb funkcióit maguk a böngészők még nem implementálták teljesen, ezért a WebVTT teljesebb használatához jobb a JS lejátszók használata. Ezenkívül a WebVTT-fájlokat a JS-lejátszók nem szabványos módon használhatják további adatok átadására a JS-lejátszónak, például a videókockák kép-előnézeti URL-jeit. Arra a kérdésre, hogy hogyan jeleníthető meg a videókockák előnézete a lejátszó görgetősávján (Scrub Bar Thumbnails), ahogyan ez a videotárhelyen történik. Itt el kell mondanunk, hogy a böngészőkbe épített lejátszókban ilyen funkció még nem érhető el, ezért a JS lejátszókon keresztül valósul meg kiegészítőként. Ehhez egy JS-könyvtár (js-lejátszó) van csatlakoztatva, amely átveszi az irányítást a HTML5 video- és audioobjektum felett, és végrehajtja annak stílusát. Az ilyen JS-lejátszók a videokockák előnézeteinek megjelenítéséhez nem szabványos módon WEBVTT-fájlokat használnak a címkéből, hogy átadják rajta az előnézeti képek URL-címeit.

A WebVTT formátumú fájl egy egyszerű szöveges fájl .vtt kiterjesztéssel, amely soronkénti lista formájában időbélyegeket tartalmaz kezdési és befejezési időpontokkal, valamint szöveges üzenetekkel, amelyek ezekre a jelzésekre kerülnek. Egy tárolóhoz több, különböző nyelvű szöveget tartalmazó WebVTT-fájlt is csatolhat. Minden egyes nyelvhez létre kell hozni külön fájlés csatlakoztassa mindegyiket a címkén keresztül. A címkéket az összes címke után, de a HTML5-videó hibaüzenete előtt kell beilleszteni a tárolóba. Az alapértelmezett nyelvű feliratfájlt tartalmazó címkét az aktuális tároló címkéi között első helyen kell elhelyezni.

Egy WEBVTT-fájl egy vagy több időbélyeget tartalmazhat. A fájl a WEBVTT szóval kezdődik. Üres sorok választják el az időbélyegeket a hozzájuk tartozó szöveggel és attribútumokkal. A szöveg tartalmazhat HTML és CSS jelölőelemeket. Az időbélyeg előtt egy azonosító szerepelhet, így speciális kifejezésekkel érhető el. Mindezeket a részleteket a WEBVTT szabvány írja le. meghatározza a sáv típusát, és a következő értékeket veheti fel:

• feliratok – a videó felett megjelenő szöveges feliratok. A lejátszott fájlhoz beállíthat különböző nyelvű feliratokat, hogy a lejátszóban megadhassa a választást, ha az támogatja azt. A legtöbb esetben ezt a típust használják, mert a legtöbb böngésző támogatja.
• feliratok – szöveges és hangos feliratok, amelyek a videó felett jelennek meg. Hasonló a feliratokhoz, de a szövegen kívül tartalmazhat hang hatásokés egyéb hanginformációk.
• fejezetek - olyan fejezetek, amelyek szövegként jelennek meg a listamenüben, és amelyekre valók gyors navigáció médiafájl alapján.
• leírások - leírás, ez szöveges fájlok a videók leírásával, hogy lejátszhassa őket a képernyőolvasóban.
• metaadatok – a js szkripteknek átadandó metaadatok.

A címke src attribútuma adja meg a track fájl URL-jét további információ. A címkéhez csatolt fájl WebVTT formátumú és .vtt kiterjesztésű.

A címke srclang attribútuma a nyelvkódon keresztül határozza meg a sáv nyelvét. Az orosz nyelv esetében ez egyenlő lesz a „ru”, az angol „en”-vel.

A címke label attribútuma határozza meg a lejátszóban megjelenő szám címét. Ha az attribútum nincs beállítva, a böngésző megjeleníti a szolgáltatás nevét.

A címke alapértelmezett attribútuma határozza meg ennek a sávnak az alapértelmezett kiválasztását, ha vannak más műsorszámok is a videótárolóban. A több címke közül csak egynek lehet alapértelmezett attribútuma. Jobb, ha az alapértelmezett sávot helyezi el először a többi csatlakoztatott műsorszám között.

Példa a címkékre: