andew

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

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

11937

Članek opisuje strukturo avdio in video vsebnika HTML5, oznake video, audio, source, track ter njihove atribute z možnimi vrednostmi. Podane so predloge HTML in primeri izvedbe predvajanja multimedijskih datotek na podlagi zmožnosti, vgrajenih v brskalnik. Prikazana je povezava z video besedilno sledjo podnapisov, naslovov, kazal z uporabo datotek formata WEBVTT s primeri. Predstavljene so predloge kode HTML5 z mikrooznakami schema.org za zvok in video. Navedeni so glavni spletni formati avdio in video datotek z njihovimi vrstami MIME in orodji za pretvorbo videa in zvoka v te formate.

HTML5 vsebuje nove funkcije, ki vam omogočajo predvajanje avdio in video datotek neposredno v brskalniku brez uporabe programi tretjih oseb. Zaenkrat, kljub dejstvu, da HTML5 ni več novost, še vedno obstajajo nesoglasja o tem, kako brskalniki obdelujejo video in zvočne oznake in kako je predvajalnik sam prikazan. Nekaterim to uspe vsakič bolje nova različica, drugi še zaostajajo. Globalno gledano je trend, da bodo brskalniki zagotavljali vedno več funkcionalnosti za predvajanje multimedijskih datotek.

Screencast: Primer uporabe predlog

Prenesi video

Screencast: primeri uporabe predlog iz članka - spletna stran

Video in zvok HTML5 sta razvijajoč se standard in nista povezana z nobenim avdio ali video formatom, zato obstajajo razlike med brskalniki v tem, kaj podpirajo. formatov avdio in video datoteke. Ta razlika je zdaj kompenzirana z dejstvom, da kodirajo originalna datoteka več različnih kodekov in povežite vse te različice datotek z oznakami ali prek ugnezdenih oznak< source src=" URL">. Vendar pa se pojavljajo vodilni med formati avdio in video datotek, ki jih podpirajo brskalniki. Za video je to seveda format mp4 (H.264), za zvok pa format mp3 in m4a. Zdaj verjetno vsi brskalniki lahko predvajajo datoteke teh formatov. tudi brskalniki Firefox, Chrome in Opera so se dogovorili, da bodo podpirali standard WEBM kot skupni video format. Z mojega vidika bi bila optimalna možnost za uporabo videa in zvoka HTML5 zdaj shema, ki temelji na uporabi ene večpredstavnostne datoteke v formatu mp4 ( H.264) za video in m4a za zvok ter predvajalnik JS HTML5. Samo ena datoteka v določenem formatu je povezana z vsebnikom za zvok ali video. Dandanes lahko večina brskalnikov predvaja format mp4. Povezana knjižnica JS bo oblikovala predvajalnik, vgrajen v brskalnik. Če brskalnik ne podpira formata mp4 / m4a, potem predvajalnik JS v tem primeru izvaja Flash povezava predvajalnik za predvajanje multimedijske datoteke. Glede na to, da je format mp4 postal zelo priljubljen, se lahko nadejamo majhne verjetnosti težav z njegovim predvajanjem v brskalnikih. Ta shema zahteva samo eno večpredstavnostno datoteko v določenem formatu, kar prihrani prostor na disku in sredstva za obdelavo datotek. Tudi taka shema bo strateško pravilnejša, saj je trend, da so brskalniki čedalje boljši pri implementaciji videa in zvoka HTML5.

Če želite predvajalniku HTML5 pokazati datoteko za predvajanje, morate poleg URL-ja datoteke posredovati tudi vrsto datoteke MIME, da bo brskalnik razumel, kateri kodek mora uporabiti. V spodnji tabeli so navedeni najpogostejši formati datotek in njihove vrste MIME.

Formati datotek in njihovi tipi MIME Medijske datoteke Razširitve tipa Mime

Avdio mp3	mp3	zvok/mpeg
Avdio mp4	m4a	avdio/mp4
Avdio webm	webm	avdio/webm
Avdio ogg	ogg	zvok/ogg
Video mp4 (H.264)	mp4	video/mp4
Video webm	webm	video/webm
Video ogg	ogv	video/ogg

Orodja za kodiranje zvoka in videa

Za kodiranje video in zvočnih datotek v zgornje spletne formate lahko uporabite odprt program, ki podpira pretvorbo avdio in video datotek v glavne formate, običajne za splet ( MP4, WebM, Ogg Theora, MP3 itd.). Miro Video Converter je na voljo za različne operacijski sistemi- Windows, Mac in Linux in je grafična lupina za pripomočke konzole, ki jih je priročno uporabljati na spletni strežnik za samodejno obdelavo prenesenega videa in zvoka.

: Primer zvočne kode HTML5 z mikro oznako schema.org: Zvočna glava

Vaš brskalnik ne podpira zvoka HTML5.

Prenos zvoka

Takole bodo videti mikrooznačevalni podatki, ekstrahirani iz kode, za zgoraj opisano zvočno predlogo.

Audioobject itemType = http://schema.org/AudioObject name = Opis zvočnega naslova = Zvočni opis ... isfamilyfriendly = true encodingformat = mp3 duration = PT04M59S uploaddate = 2015-12-31 image = Celoten URL do slike.jpg alternatename = Alternativa title audio contenturl href = URL do datoteke.mp3 text = Prenos zvoka avtor person itemType = http://schema.org/Person url href = URL text = Ime avtorja name = Ime avtorja image = Celoten URL do osebe.jpg

Najmanjša zvočna oznaka glede na schema.org mora vključevati itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . Preostale lastnosti so neobvezne.

Primer standardne uporabe oznake HTML5:

V predstavitvi sem uporabil sloge CSS za oznako prek atributa class, zaradi česar je širina območja videoposnetka dinamična glede na velikost zaslona. Predvajalnik se sam nastavlja po višini. Poskusite spremeniti velikost okna brskalnika, da vidite, kako deluje. Zato v izvorni kodi za to predstavitev ni atributov širine in višine za oznako, nadomestijo ju slogi CSS. Toda ta metoda ni prikazana na seznamu kode predloge, ker je že posebna stvar.

Primer kode videoposnetka HTML5 z mikrooznačevanjem schema.org: naslov videoposnetka

Oglejte si na YouTubu

Vaš brskalnik ne podpira videa HTML5.

Prenos videa: Naslov videa

Takole bodo videti mikrooznačevalni podatki, pridobljeni iz kode, za zgoraj opisano video predlogo.

Videoobject itemType = http://schema.org/VideoObject name = Sličica naslova videoposnetka imageobject itemType = http://schema.org/ImageObject contenturl = URL do video-thumbnail.jpg|png width = 100 višina = 100 trajanje = PT14M59S je družinam prijazen = pravi datum nalaganja = 2015-12-31 opis = Kratek opis za video ... url href = URL do datoteke.mp4 text = Naslov videoposnetka avtor oseba itemType = http://schema.org/Oseba url href = URL do spletne strani avtorja text = ime avtorja name = ime avtorja image = Celoten URL do avtorja.jpg thumbnailurl = URL do datoteke.jpg|png

Najmanjša potrebno Za iskalnike mora video oznaka schema.org vključevati vse lastnosti itemprop, prikazane v vzorčni kodi, z izjemo bloka itemprop = "author", ki je izbiren za iskalnike in ga je mogoče izbrisati, če ni podatkov za napolni. Za video-sličico Yandex zahteva, da podate mikrooznako v skladu s schema.org kot itemprop ="thumbnail" v obliki ImageObject in Google zahteva navedbo itemprop = "thumbnailUrl" , zato morate datoteko video-sličice vstaviti dvakrat, zato je druga oznaka img prejela slog display: none, da ne bi bila prikazana v brskalniku. Namesto da uporabite oznako img z display:none, lahko to lastnost posredujete oznaki povezave prek atributa href. Tudi kljub dejstvu, da se mikrooznake lahko prenašajo prek meta oznak in oznak povezav, ki niso prikazane uporabniku, je še vedno priporočljivo, če je mogoče, dodati mikrooznake predvsem oznakam, ki bodo prikazane uporabniku. Preverjanje mikrooznak schema.org lahko izvedete s temi povezavami: , . Glavna prednost uporabe mikro oznak je priročnost takšne vsebine za iskalne robote in robote socialnih omrežij. Ti roboti ekstrahirajo označene podatke in jih združijo. Zato se izboljša uporaba mikro oznak SEO in omogoča samodejno distribucijo podatkov v v socialnih omrežjih. Podroben opis mikrooznak Schema.org za videoposnetke, označene s shemo VideoObjec t na spletnem mestu. Prav tako je treba omeniti, da v primerih, ko vstavite videoposnetek na svoje spletno mesto ne neposredno, ampak z uporabo pripomočkov za gostovanje videov Yandex.Video ali YouTube, lahko dodate svoj blok kode HTML z opisom videoposnetka pod blokom kode pripomočka in vdelajte oznako Schema.org za ta video. Hkrati kot parameter URL - povezava do videoposnetka ne navedite neposredne povezave do statične datoteke, temveč navedite povezavo, prejeto od video gostovanja. Čeprav specifikacija Schema.org pravi, da mora biti povezava do neposredne datoteke, iskalniki obdelujejo tudi povezave do videoposnetkov iz video gostovanja ( glejte primere na spletnem mestu Yandex v razdelku Webmaster), kljub dejstvu, da datoteke ne morete prenesti s take povezave in si je ne morete ogledati neposredno v predvajalniku HTML5 na strani, ampak samo v pripomočku za gostovanje videa.

Če se soočate z vprašanjem, s katerega gostovanja prenesti večpredstavnostne avdio in video datoteke, si oglejte članek, ki opisuje možnost vstavljanja medijskih datotek na spletno stran z Yandex Disk.

Atributi in oznake:

Atributi src , preload , autoplay , mediagroup , loop , muted , controls so skupni atributi za vse medijske elemente, vključno z oznakami in .

atribut samodejnega predvajanja: bodisi ali

• Atribut samodejnega predvajanja je določen s svojo prisotnostjo v oznaki ali in za ta atribut ni treba nastaviti vrednosti, zadostuje le njegova prisotnost. Za urejevalnike HTML, ki urejajo kodo elementa, lahko ta atribut nastavite kot autoplay = "autoplay", kar je enako, kot da bi bil atribut preprosto prisoten. Prisotnost atributa samodejnega predvajanja pove brskalniku, naj začne predvajati datoteko takoj po nalaganju spletne strani. V skladu s tem atribut samodejnega predvajanja preglasi vrednosti atributa preload, ki nadzoruje, kako se videoposnetek naloži v predvajalnik, ker se mora video začeti predvajati takoj in ga je zato treba naložiti. Privzeto ni atributa samodejnega predvajanja.

krmili atribut: bodisi ali

• Atribut controls pove brskalniku, naj prikaže nadzorno ploščo predvajalnika, ko se stran naloži, vendar se posnetek še ni začel predvajati. Ta atribut, tako kot atribut samodejnega predvajanja, je določen samo s prisotnostjo v oznaki ali in ne zahteva vrednosti, zadostuje le njegova prisotnost. Ta atribut je privzeto odsoten, tj. Pred predvajanjem predvajalnik ne prikaže nadzorne plošče. Ko se datoteka začne predvajati, se prikaže nadzorna plošča, ko z miško premaknete nad območje predvajalnika.

atribut zanke: bodisi ali

• Atribut zanke povzroči, da predvajalnik predvaja datoteko v zanki. Atribut je določen samo s prisotnostjo v oznaki ali in nima parametrov. Privzeto ni atributa zanke.

atribut prednalaganja:

• atribut preload določa nalaganje datoteke skupaj z nalaganjem spletne strani in ima eno od naslednjih treh vrednosti:
  • brez - ne prenesite datoteke skupaj z nalaganjem spletne strani. To pomeni, da se bo datoteka začela nalagati v predvajalnik šele po pritisku na gumb za predvajanje. To je lahko priročno za pospešitev nalaganja strani. Vrednost none je privzeta vrednost za atribut prednalaganja, zato je možno, da atributa prednalaganja sploh ne vstavite v oznako ali za ta primer.
  • metapodatki - ne prenese datoteke skupaj z nalaganjem spletne strani, temveč prenese metapodatke večpredstavnostne datoteke.
  • samodejno - izvede celoten prenos datoteke skupaj z nalaganjem spletne strani. Pri tej možnosti bodo brskalniki samodejno naložili predstavnostno datoteko skupaj z Spletna stran y, vendar to ne bo motilo nalaganja same strani in njenega upodabljanja v brskalniku. Če je atribut prednalaganja ="" s prazno vrednostjo podan v oznaki ali, bo zanj uporabljena samodejna vrednost.
  • Atribut prednalaganja bo preglasen, če se uporabi atribut samodejnega predvajanja.

atribut src:

• atribut src oznake ali omogoča takojšnjo nastavitev poti do večpredstavnostne datoteke v oznaki. Pot je lahko popolna, ki označuje protokol in domeno, ali relativna glede na koren trenutnega mesta. Določite lahko tudi pot do datoteke v oznakah, vdelanih v avdio ali video vsebnik.< source src=" URL"> .

Atribut plakata video oznake:

• atribut poster se uporablja samo v oznaki in določa URL slike (gif, png, jpeg itd.), ki bo prikazana, ko videoposnetek ni na voljo. Če atribut plakata ni nastavljen, bo predvajalnik brskalnika poskušal prikazati prvi okvir videa.

Atributa širine in višine video oznake:

• atributa širina in višina veljata samo za oznako in nastavita širino in višino območja predvajanja video predvajalnika. Pričakuje se, da bo vrednost pozitivno celo število, podano v slikovnih pikah ali odstotkih. Nastavitev teh atributov vpliva na velikost prikaza videa, vendar ne spremeni razmerja stranic videa. Video se bo prilagodil podanim dimenzijam, pri tem pa ohranil svoje proporce. Če se podane mere ne ujemajo s proporci videoposnetka, bodo vzdolž zgornjih in/ali stranskih robov videa temne črte. Zato je pri nastavitvi teh parametrov priporočljivo izbrati njihovo razmerje enako kot pri videu, ki se predvaja, ali pa nastaviti samo širino, predvajalnik pa si bo nastavil višino sam.
• Če eden ali oba parametra nista določena, bodo nedoločeni parametri vzeti iz ustrezne velikosti slike, navedene v atributu plakata.
• Če atribut plakata manjka, bodo ti parametri nastavljeni na naslednji način: za širino = 300 px in za višino = 150 px. Da ne bi računali in usklajevali dimenzij območja videa glede na razmerja samega posnetka, priporočam, da nastavite samo en parameter širine, potem bo višina (višina) območja predvajanja izbrana samodejno glede na razmerja videa. .
• Prav tako je mogoče vplivati ​​na velikost in obliko predvajalnika HTML5 Lastnosti CSS uporabljeno za oznake ali .

utišan atribut: bodisi ali

• Utišan atribut nastavi svojo prisotnost v oznakah ali zvoku v izklopljenem stanju v predvajalniku HTML5. Privzeto atribut manjka.

atribut navzkrižnega izvora:

• Atribut crossorigin pove brskalniku, naj izvede zahtevo CORS za ta element. Privzeto je atribut odsoten, kar pomeni, da se zahteve CORS sploh ne uporabljajo. Če je atribut prisoten, sta možni vrednosti anonymous in use-credentials. CORS () je tehnologija v sodobnih brskalnikih, ki vam omogoča upravljanje dovoljenj za nalaganje virov na trenutno spletno stran iz drugih domen, ki niso domena trenutne strani. Podpora brskalnika za standard CORS vam omogoča implementacijo varne izmenjave podatkov med domenami tako, da izvedete posebno zahtevo (glavo) domeni trenutne strani, da ugotovite, ali je na tej strani dovoljeno naložiti sredstva iz druge določene domene. V odgovor na tako zahtevo mora strežnik navesti domene, s katerih je dovoljen prenos virov.

atribut mediagroup: div ( margina: 1em auto; položaj: relativna; širina: 400 slikovnih pik; višina: 300 slikovnih pik; ) video ( pozicija; absolutno; dno: 0; desno: 0; ) video: prvi otrok ( širina: 100 %; višina : 100 %; ) video: zadnji otrok ( širina: 30 %; )

• Atribut mediagroup vam omogoča združevanje nadzora več medijskih datotek v en MediaController tako, da ustvarite skupino medijskih datotek na različnih mestih na strani. Ta skupina bo upravljana istočasno za vse datoteke, ki so v njej vključene. To je priročno, na primer, če morate predvajati in upravljati isti video hkrati na različnih mestih na strani z različnimi podnapisi ali različnimi videoposnetki.

Oznake in zahtevajo zaključno oznako.

V primerih, ko brskalnik ne podpira HTML5 in oznak, kar je zdaj zelo redko, se pred zaključno oznako vsebnika napiše besedilno sporočilo in običajno doda povezava za prenos datoteke. Če je predvajalnik HTML5, ki je vgrajen v brskalnik, dodatno nadzorovan s knjižnico JS (predvajalnik JS), večina od njih poveže predvajalnik flash, če v brskalniku ni mogoče predvajati videa in zvoka HTML5, ker brskalnik ne podpira videa in zvoka oznake ali format večpredstavnostne datoteke.

Oznaka:

Pot do datoteke, ki se predvaja, je mogoče določiti tudi z uporabo oznake z atributom src, nameščenim znotraj oznak ali. Oznaka nima zaključne oznake.

V večini primerov je oznaka videti takole:

in vedno vsebuje atribut src in type, ki ima v večini primerov le tip MIME.

Atributi oznake:

• atribut src= "URL" oznake določa URL večpredstavnostne datoteke. Pot je lahko popolna z navedbo protokola in domene ali relativna glede na koren mesta.
• atribut oznake type="MIME-type" ali natančneje type="MIME-type; codecs="codec"" določa vrsto in kodek MIME datoteke. Za zvok je dovolj, da določite vrsto MIME, na primer za .mp3 - type="audio/mpeg". Čeprav mora biti po specifikaciji za video v atributu type naveden tudi kodek, zdaj pogosto navedejo le tip MIME brez kodeka, to pa prepuščajo brskalnikom.
• Medijski atribut = "all|braille|handheld|print|screen|speech|projection|tty|tv" oznake določa vrsto naprave, za katero naj se datoteka predvaja. Privzeta vrednost je vse, zato ta atribut v večini primerov sploh ni določen, razen če želite posebej identificirati napravo za predvajanje.

Oznaka:

Pri videu HTML5 je mogoče v predvajalniku prikazati tudi dodatno skladbo z informacijami, kot so podnapisi, napisi, poglavja, opisi (še niso podprti) in metapodatki (še niso podprti). Ta funkcija je implementirana z dodajanjem oznak z ustreznimi atributi znotraj oznake.

- nima zaključne oznake.

Oznaka vam omogoča, da na videoposnetek povežete dodatne datoteke skladb v posebnem formatu WebVTT (Web Video Text Tracks Format), ki označujejo izhod tekstovna sporočila s časovno referenco videodatoteke. Standard WebVTT ne podpira samo izpisa besedilnih sporočil, ampak ponuja tudi možnosti zanj Oblikovanje CSS in možnosti za postavitev v območju za ogled videa. Trenutno se datoteke WebVTT večinoma uporabljajo za dodajanje besedilnih podnapisov videoposnetkom, kar podpirajo skoraj vsi brskalniki. Druge funkcije standarda WebVTT sami brskalniki še ne izvajajo v celoti, zato je za popolnejšo uporabo WebVTT bolje uporabiti predvajalnike JS. Prav tako lahko predvajalniki JS nestandardno uporabljajo datoteke WebVTT za prenos dodatnih podatkov v predvajalnik JS, kot so na primer URL-ji predogledov slik za video okvirje. Na vprašanje, kako prikazati predoglede video okvirjev na igralčevi lestvici za previjanje nazaj (Sličice drsne vrstice), kot je to storjeno na spletnih mestih za gostovanje videa. Pri tem je treba povedati, da takšna funkcionalnost še ni na voljo v predvajalnikih, vgrajenih v brskalnike, in je zato implementirana prek JS predvajalnikov kot dodatek. Če želite to narediti, povežite knjižnico JS (predvajalnik js), ki prevzame nadzor nad video in avdio objektom HTML5 ter izvaja njegovo oblikovanje. Takšni predvajalniki JS za prikaz predogledov video okvirjev nestandardno uporabljajo datoteke WEBVTT iz oznake za prenos URL-jev predoglednih slik prek nje.

Datoteka WebVTT je navadna besedilna datoteka s pripono .vtt, v kateri so v obliki vrstičnega seznama zapisani časovni žigi z začetnim in končnim časom ter besedilna sporočila za izhod v te oznake. V vsebnik lahko povežete več datotek WebVTT z besedilom v različnih jezikih. Za vsak jezik, ki ga morate ustvariti ločena datoteka in vsakega povežite z oznako. Oznake morajo biti vstavljene v vsebnik za vsemi oznakami, vendar pred sporočili o napaki videoposnetka HTML5. Oznaka z datoteko s podnapisi v privzetem jeziku mora biti postavljena prva med oznakami v trenutnem vsebniku.

Datoteka WEBVTT lahko vsebuje enega ali več časovnih žigov. Datoteka se začne z besedo WEBVTT. Prazne vrstice ločite časovne žige s pripadajočim besedilom in atributi. Besedilo lahko vsebuje elementi HTML in oznako CSS. ID zanj lahko postavite pred časovni žig, da se nanj sklicujete s posebnimi izrazi. Vse te podrobnosti so opisane v standardu WEBVTT. določa vrsto sledi in lahko sprejme naslednje vrednosti:

• podnapisi - podnapisi v obliki besedila, ki se prikažejo čez video. Za datoteko, ki se predvaja, lahko nastavite podnapise v različnih jezikih, da zagotovite njihovo izbiro v predvajalniku, če to podpira. V večini primerov se uporablja ta vrsta, saj jo podpira večina brskalnikov.
• napisi - napisi v obliki besedila in zvoka, ki se prikažejo čez video. Podobno kot podnapisi, le da lahko poleg besedila vsebujejo zvočne učinke in druge zvočne informacije.
• poglavja - poglavja, ki so besedilno prikazana kot seznamski meni in so namenjena hitri navigaciji po medijski datoteki.
• opisi - opis, ta besedilne datoteke z opisom videa za predvajanje v bralniku zaslona.
• metapodatki - metapodatki za posredovanje skriptov js.

Atribut src oznake določa URL do datoteke sledi Dodatne informacije. Datoteka, priložena oznaki, ima format WebVTT in pripono .vtt.

Atribut srclang oznake določa jezik skladbe prek jezikovne kode. Za ruščino bo enako "ru", za angleščino "en".

Atribut label oznake določa ime skladbe, ki bo prikazano v predvajalniku. Če atribut ni nastavljen, bo brskalnik prikazal ime njegove storitve.

Privzeti atribut oznake privzeto določa izbiro te skladbe, če so v video vsebniku druge sledi. Samo ena od več oznak ima lahko privzeti atribut. Bolje je, da privzeto skladbo najprej postavite med druge povezane skladbe.

Primer oznak: To vprašanje se pojavlja zelo pogosto, zato sem se odločil, da mu v lekcijah posvetim ločen članek. Ker HTML nima univerzalne tehnologije za predvajanje zvoka za vse brskalnike, za rešitev te težave predlagam prenos datoteke predvajalnika zvoka, kot je storjeno na večini spletnih mest. Vse delamo korak za korakom:

1. Na gostovanju, kjer se nahaja vaše spletno mesto, v korenskem imeniku (mapa, v kateri je indeksna datoteka), ustvarite zvočno mapo. V prihodnosti boste vanj postavili vse zvočne datoteke.

3. Zdaj izberite potrebne datoteke, bolje v formatu mp3. Ustvarite zvočno mapo v korenu mesta in jih naložite.

4. Vse kar ostane je, da vstavite kodo za povezavo predvajalnika. Primeren je za katero koli spletno mesto. Na pravem mestu morate le navesti pot do datoteke predvajalnika in zvočne datoteke, oziroma zamenjati besedi vaša_domena in ime zvočne_datoteke:

In vse je pripravljeno! Lahko si ogledate tudi delovni primer.

Kako namestiti glasba v ozadju v html uporabljam zmožnosti HTML in brskalnika, na stran lahko vstavite tudi glasbo v ozadju. Potrebovali boste zvočno datoteko zahtevana oblika: WAV, AU, MIDI ali MP3. Kot primer lahko uporabite katero koli datoteko z navedeno končnico.

Prvi način je vdelana oznaka. Element embed se uporablja za nalaganje in prikaz objektov (na primer video datotek, filmov flash, nekaterih zvočnih datotek itd.), ki jih brskalnik sprva ne razume.

Sintaksa je precej preprosta:

Zaključna oznaka ni potrebna.

Zdaj pa si oglejmo primer zapisa z atributi in spodaj njihovo dekodiranje:

Vdelajte atribute oznak za predvajanje zvoka v html
širina - širina plošče v slikovnih pikah (ali odstotkih)
višina - višina plošče v slikovnih pikah (ali odstotkih)
align - položaj plošče glede na besedilo, možne vrednosti so levo, desno, sredina
skrito - omogoča, da skrijete ploščo, vrednosti atributa: true - plošča je skrita, false - plošča je vidna (privzeta vrednost)
autostart - true - predvajalnik se samodejno zažene, ko se stran naloži, false - čaka na pritisk na gumb za predvajanje
loop - cikel, true - skladba se predvaja v krogu in kdaj vrednost false- samo enkrat

Drugi način. Zelo staro, a tudi praktično) Dodajte melodijo v isto mapo (imenik), kjer se nahaja vaša datoteka, in v telo vpišite naslednjo kodo:

Posledično se bo po nalaganju strani oglasila melodija, ki ste jo določili v oznaki bgsound. Zdaj pa razmislimo boljše lastnosti oznaka:

src - pot do vaše zvočne datoteke
zanka - kolikokrat ponoviti melodijo (če je -1, se ponavlja v nedogled)
ravnovesje - vrednost stereo ravnotežja (od -10000 do 10000)
glasnost - glasnost predvajanja melodije, kjer je 0 največja, -10000 pa najmanjša.

Vendar predvajalnika ne bo mogoče na kakršen koli način nadzorovati - ob vsaki osvežitvi strani se bo skladba znova predvajala.

Po opisu načina vstavljanja glasbe v ozadju vas želim odvrniti od tega, saj večina uporabnikov praviloma že posluša glasbo, ko obišče različne strani. Zato ga lahko spremljajoča glasba samo prisili, da zapre zavihek s stranjo.

Vstavljanje zvoka in glasbe v HTML5 - zvočna oznaka
zvok - definiranje seznanjene oznake zvok v ozadju, glasbo ali drug zvočni tok na spletnem mestu.

Atributi zvočnih oznak

samodejno predvajanje - datoteka se predvaja takoj, ko se stran naloži (podobno kot glasba v ozadju bgsound)
kontrole - prikaz nadzorne plošče predvajalnika v brskalniku
zanka - znova predvaja datoteko, ko se konča
prednalaganje - zvočna datoteka se bo naložila skupaj z nalaganjem strani
src - pot do zvočne datoteke (mp3 ali ogg)

Primer kode z zvočno oznako

Zvočna oznaka

Zvok v HTML 5

Vaš brskalnik ne podpira zvočne oznake.
Prenos glasbe.

Opis

Dodaja, predvaja in upravlja zvočne nastavitve na spletni strani. Pot do datoteke je podana prek atributa src ali podoznake. V vsebnik lahko napišete besedilo, ki bo prikazano v brskalnikih, ki ne delujejo s to oznako.

Seznam kodekov, ki jih podpirajo brskalniki, je omejen in je podan v tabeli. 1.

Tabela 1. Kodeki in brskalniki

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

Za univerzalno predvajanje v določenih brskalnikih je zvok kodiran z različnimi kodeki, datoteke pa so dodane hkrati prek oznake.

Atributi sintakse Zvok se začne predvajati takoj po nalaganju strani. Zvočni datoteki doda nadzorno ploščo. Ko se konča, ponovi zvok od začetka. Uporablja se za prenos datoteke skupaj z nalaganjem spletne strani. Določa pot do datoteke, ki se predvaja. Zaključna oznaka

Obvezno.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

avdio

Aleksander Klimenkov - Štirinajst

Vaš brskalnik ne podpira zvočne oznake. Prenos glasbe.

Rezultat primera v Brskalnik Opera prikazano na sl. 1.

riž. 1. Predvajajte zvočno datoteko

Brskalniki

Kontrolniki za predvajanje zvoka se med brskalniki razlikujejo po videzu, vendar so osnovni elementi enaki. To so gumb za predvajanje/pavzo, dolžina skladbe, pretečeni in skupni čas predvajanja ter raven glasnosti.

S prihodom dovolj hitrih internetnih povezav je bil Flash edino orodje za predvajanje zvokov na spletnih mestih. Toda HTML5 bo temeljito spremenil način predvajanja zvokov na internetu. V tem članku vam želim podrobno povedati, kako uporabljati oznako na svojih spletnih mestih.

Uporabljamo ga za vstavljanje zvočne datoteke na stran. Spodaj je najpreprostejši primer z uporabo oznake prenese datoteko mp3 in jo predvaja. Upoštevajte atribut autopaly, ki se uporablja za samodejno predvajanje zvoka. Vendar ne smete samodejno predvajati zvokov na spletnem mestu, saj bo to motilo uporabnike. Predvajanje zvoka v zanki Želite predvajati zvok v zanki? Pri tem vam bo pomagal atribut zanke. Vendar še enkrat, ne smete pretiravati s samodejnim predvajanjem in predvajanjem v zanki, če ne želite, da uporabnik prezgodaj zapusti spletno mesto. Prikaz kontrolnikov Namesto samodejnega predvajanja zvokov, kar je vsekakor slaba praksa, bi morali dovoliti, da so nekateri kontrolniki prikazani v brskalniku, kot so gumbi za glasnost in predvajanje (pavza). To je preprosto narediti tako, da preprosto dodate atribut controls. Različni formati datotek Oznako podpira večina sodobnih brskalnikov, vendar je težava v tem različne brskalnike podpira različne formate datotek. Safari lahko na primer predvaja datoteke MP3, Firefox pa ne more in namesto tega predvaja datoteke OGG. Rešitev te težave je uporaba obeh formatov, tako da lahko vsak obiskovalec sliši zvok, ne glede na to, kateri brskalnik uporablja. Določanje vrste datotek MIME Pri uporabi različnih formatov datotek je dobro, da določite vrsto MIME za vsako datoteko, da brskalniku pomaga lokalizirati datoteko, ki jo podpira. To lahko preprosto storite z uporabo atributa type. Za starejše brskalnike Kaj pa, če obiskovalec uporablja IE6 ali kakšen drug prazgodovinski brskalnik, ki ne podpira oznake? Preprosto je: spodaj je koda, ki bo prikazala sporočilo za brskalnike, ki ne podpirajo oznake. Vaš brskalnik ne podpira zvočne oznake! Medpomnjenje datotek Pri predvajanju velikih datotek lahko uporabite medpomnjenje datotek. Za to lahko uporabite atribut preload. Lahko ima 3 vrednosti:

• brez - če ne želite uporabljati medpomnilnika datotek;
• samodejno - če želite, da brskalnik medpomni celotno datoteko;
• metapodatki - za nalaganje samo servisnih informacij (trajanje zvoka itd.).

Upravljanje predvajanja prek JavaScripta Upravljanje zvočnega predvajalnika HTML5 prek JavaScripta je zelo enostavno. Naslednji primer prikazuje, kako z uporabo JavaScripta lahko zgradite svoje osnovni elementi Kontrole avdio predvajalnika: predvajanje, premor, glasnost + glasnost -

To je vse za danes.
Upam, da vam je ta članek pomagal razumeti osnovne zmogljivosti Oznaka HTML5.

Do nedavnega vdelava zvoka v spletno stran ni bila tako lahka naloga. Na splošno obstajajo nekateri, ki ponujajo pametnejše in boljše izvedbe, vendar vas večina metod omejuje na določen brskalnik in določene vtičnike.

S prihodom tehnologije Flash na trg je to opravilo postalo veliko lažje, saj vtičnik Flash omogoča vdelavo poljubne animacije ali zvoka na stran, tehnologijo pa podpira večina brskalnikov. Toda povpraševanje po Flashu postopoma izginja po lansiranju inovativnih naprav podjetja Apple: iPhone in iPad. Kot veste, Apple v bistvu ne opremlja svojih naprav Flash podpora, število uporabnikov izdelka pa hitro narašča.

Skratka, tukaj je malo zmede.

Na srečo je HTML5 zelo olajšal življenje razvijalcem, saj tehnologija vključuje zvočni element. Ta element vam omogoča vdelavo zvočnih datotek v katero koli spletno stran, kot tudi implementacijo nadzorne plošče z uporabo javascripta. Še pomembneje je, da tehnologija ne zahteva dodatnih vtičnikov in je podprta v skoraj vseh brskalnikih, z izjemo zgodnjih različic (o podpori za brskalnik bomo govorili kasneje!).

V našem današnjem članku vam bomo povedali, kako lahko z zvočnim elementom vdelate zvoke. Naučili se bomo tudi, kako nadzorovati proces predvajanja s pomočjo javascripta, poskušali pa vam bomo povedati tudi o tehnološki podpori med brskalniki.

Zvočni element HTML5

Ta element je izjemno enostaven za uporabo. V našem današnjem primeru bomo vdelali "White Christmas" Binga Crosbyja:

Tu ni treba veliko razlagati. Podobno kot vstavite sliko z oznako img, lahko na enak način vstavite zvok z uporabo zvočne oznake.

Podpora za več brskalnikov

Zgornji primer verjetno ne bo deloval v vseh brskalnikih. Tu nastopi format datoteke.

Nekateri brskalniki lahko predvajajo datoteke .mp3, ne pa datotek .ogg, drugi pa ravno nasprotno. Večina brskalnikov lahko predvaja datoteke .wav, vendar je zaradi velike velikosti neprimerna za uporabo kot zvok za spletno mesto.

Tukaj je tabela brskalnikov, ki prikazujejo podporo za zvočne formate:

Katere formate podpira vaš brskalnik? To določite z.

Kot lahko vidite v tabeli, bi bila najbolj optimalna možnost izvedbe povezava obeh formatov datotek.
Če želite to narediti, lahko zvočnemu elementu dodate več izvornih elementov in v njih določite poti do različnih formatov. Brskalnik bo predvajal prvo datoteko, ki jo podpira. Tukaj je primer:

Seveda to pomeni, da morate ustvariti svojo različico Mp3 in OGG zvočna datoteka(tu vam priskoči na pomoč), vendar je to edini način za organizacijo podpore med brskalniki.

Zgodnje različice Internet Explorerja (različici 7 in 8) sploh ne podpirajo zvočnega elementa. Vendar si bomo kasneje v članku ogledali, kako se rešiti te težave.

Samodejno predvajanje zvoka

Čeprav zgornja koda vdela zvok, ga ne predvaja. Če želimo, da se zvok predvaja samodejno, ko se stran naloži, moramo elementu dodati atribut autoplay:

Dodajanje kontrolnih gumbov

Čeprav je samodejno predvajanje lahko koristno, je v mnogih primerih moteče ali popolnoma neprimerno. Zato lahko namestimo dodatne gumbe za upravljanje zvočnih elementov, tako da se lahko uporabnik sam odloči:

To doda vodoravno vrstico z gumbom za premor/predvajanje, časovno premico z drsnikom in nadzor glasnosti. Vse je približno tako, kot lahko vidite na predvajalniku na Youtube.

Pomembno si je zapomniti, da se nadzorna plošča razlikuje glede na brskalnike. Na primer, brskalnik v iPhonu ne bo imel drsnika za glasnost, ker ima naprava ločene gumbe za nadzor ravni zvoka.

Zančno predvajanje

Če zvočnemu elementu dodate atribut zanke, se bo zvok predvajal za nedoločen čas.

To je lahko uporabno za vklop glasbe v ozadju ali zvočnih učinkov v igrah.

Uporabite lahko tudi atribut preload, ki bo brskalniku povedal, kdaj in kje naj se določena zvočna datoteka naloži.
Prednalaganje zvočne datoteke pomeni, da se zvok lahko predvaja takoj, ko uporabnik pritisne gumb za predvajanje.

Ta atribut ima več pomenov:

“none” – brskalnik ne sme vsiliti prenesene datoteke. Tisti. Če ste prepričani, da večina uporabnikov ne bo predvajala datoteke, uporabite to možnost. Ali pa ga uporabite, ko morate prihraniti čim več pasovne širine strežnika.

"metapodatki" - parameter je podoben nobenemu, le da brskalnik obvestite o možnosti nalaganja metapodatkov, kot je trajanje zvočnega posnetka, ne pa tudi same zvočne datoteke.

“samodejno” – brskalniku dovolite, da sam prenese zvočno datoteko.

Na primer:

Upoštevajte, da je prednalaganje le priročna funkcija, saj lahko nekateri brskalniki preprosto prezrejo ta ukaz in začnejo delati, kar hočejo.

Nadzor predvajanja prek javascripta

Kaj je priročno v elementi javascript– to je zato, ker jih je enostavno upravljati z uporabo javascripta. Zvočni element ponuja številne priročne parametre in načine nadzora:

Play() – začeti predvajanje s trenutnega položaja;

Pause() – ustavitev predvajanja na trenutnem mestu;

canPlayType(type) – določi, ali brskalnik podpira predvajanje te vrste mediji;

trajanje – trajanje skladbe v sekundah;

currentTime – trenutni položaj v sekundah. Lahko tudi namestite ta parameter za premik položaja predvajanja.

Z uporabo zgoraj predlaganih možnosti in metod lahko ustvarimo nekaj osnovnih nadzornih gumbov:

Predvajaj glasbo
Zaustavi glasbo
Ustavi glasbo
Oglejte si predstavitev: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Podpora za prejšnje različice Internet Explorerja

V večini primerov bo uporabnikov brskalnik podpiral element HTML5. Toda na žalost brskalniki IE različice 7 in celo 8 ne podpirajo tega elementa (čeprav različica 9 že podpira). Za uporabnike, ki so ostali v letu 2008, je pomembno razmisliti o različici za povrnitev.

Zelo groba, a učinkovita metoda je uporaba posebnih komentarjev za označevanje podatkov brskalnika in jim dati kazalec predmeta na zvočno datoteko. Tako bo brskalnik pogosto prikazal vgrajen krmilnik, ki uporabnikom omogoča predvajanje, začasno ustavitev ali previjanje glasbe na skoraj HTML5 zvok podoben način. Tukaj je primer:

Predvajaj glasbo
Zaustavi glasbo
Ustavi glasbo

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

Zgornji primer bo deloval v vseh brskalnikih, ki podpirajo HTML5 Audio, in bo deloval tudi v IE različicah 7 in 8. Z uporabo komentarjev preusmerimo kontrolnike gumbov neposredno na zvočno datoteko.

Drug način za povrnitev je vdelava predvajalnika Flash na stran. Tukaj, ki govori o vrnitvi nazaj v obliki predvajalnika Flash.

Zaključek

V našem današnjem članku smo se naučili, kako vdelati zvočne datoteke z uporabo HTML5. Zvočni element ni le enostaven za uporabo, ampak ga lahko tudi prilagodimo in nadzorujemo predvajanje prek javascripta.

Želite izvedeti več o zvočnem elementu v HTML5? Potem se odjavite.

Čeprav je podpora trenutno v nekaterih brskalnikih (kot so starejše različice IE) pomanjkljiva, jih lahko po potrebi preprosto vrnete nazaj, kar je dandanes vse manj pogosto.