andew

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

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

11937

U članku je opisana struktura audio i video HTML5 spremnika, oznake video, audio, izvor, track i njihovi atributi s mogućim vrijednostima. Navedeni su HTML predlošci i primjeri implementacije reprodukcije multimedijskih datoteka na temelju mogućnosti ugrađenih u preglednik. Prikazana je veza s video zapisom teksta titlova, naslova, sadržaja pomoću WEBVTT format datoteka s primjerima. Predstavljeni su predlošci HTML5 koda s mikrooznakom schema.org za audio i video. Navedeni su glavni web formati audio i video datoteka s njihovim MIME vrstama i alatima za pretvaranje videa i zvuka u te formate.

HTML5 sadrži nove značajke koje vam omogućuju reprodukciju audio i video datoteka izravno u pregledniku bez korištenja programi trećih strana. Do sada, unatoč činjenici da HTML5 više nije novost, još uvijek postoje neslaganja u tome kako preglednici obrađuju video i audio oznake i kako se prikazuje sam player. Neki ljudi to bolje rade svaki put nova verzija, drugi još zaostaju. Globalno, trend je da će preglednici pružati sve više i više funkcionalnosti za reprodukciju multimedijskih datoteka.

Screencast: Primjer korištenja predložaka

Preuzmite video

Screencast: primjeri korištenja predložaka iz članka - web stranice

HTML5 video i audio standard je u razvoju i nije povezan ni s jednim audio ili video formatom, tako da postoje razlike među preglednicima u tome što podržavaju. formati audio i video datoteke. Ta je razlika sada kompenzirana činjenicom da kodiraju izvorna datoteka nekoliko različitih kodeka i povežite sve te verzije datoteka s oznakama ili putem ugniježđenih oznaka< source src=" URL">. Međutim, pojavljuju se vodeći među formatima audio i video datoteka koje preglednici podržavaju. Za video je to naravno mp4 format (H.264), a za audio mp3 i m4a format. Sada, vjerojatno, svi preglednici mogu reproducirati datoteke ovih formata. Također, Firefox preglednici, Chrome i Opera dogovorili su podršku WEBM standarda kao zajedničkog video formata. S moje točke gledišta, optimalna opcija za korištenje HTML5 videa i zvuka sada bi bila shema koja se temelji na korištenju jedne multimedijske datoteke u mp4 formatu ( H.264) za video i m4a za audio i JS HTML5 player. Samo jedna datoteka u navedenom formatu povezana je s audio ili video spremnikom. Danas većina preglednika može reproducirati mp4 format. Povezana JS biblioteka stilizirat će player ugrađen u preglednik. Ako preglednik ne podržava format mp4 / m4a, tada JS player u ovom slučaju implementira Flash veza player za reprodukciju multimedijske datoteke. S obzirom da je mp4 format postao vrlo popularan, možemo se nadati maloj vjerojatnosti problema s njegovom reprodukcijom u preglednicima. Ova shema zahtijeva samo jednu multimedijsku datoteku u navedenom formatu, što štedi prostor na disku i resurse za obradu datoteka. Također, takva će shema biti strateški ispravnija, jer je trend da su preglednici sve bolji u implementaciji HTML5 videa i zvuka.

Da biste HTML5 playeru naznačili datoteku koju treba reproducirati, osim URL-a datoteke, morate također proslijediti MIME vrstu datoteke kako bi preglednik razumio koji kodek treba koristiti. Donja tablica navodi najčešće formate datoteka i njihove MIME vrste.

Formati datoteka i njihovi MIME tipovi Medijske datoteke Mime Type Extensions

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	video/mp4
Video webm	webm	video/webm
Video ogg	ogv	video/ogg

Alati za kodiranje audio i video zapisa

Za kodiranje video i audio datoteka u gore navedene web formate, možete koristiti otvoreni program, koji podržava pretvaranje audio i video datoteka u glavne formate uobičajene za web ( MP4, WebM, Ogg Theora, MP3 itd.). Miro Video Converter dostupan je za različite operativni sustavi- Windows, Mac i Linux te je grafička ljuska za uslužne programe konzole i prikladna je za korištenje na web poslužitelj za automatsku obradu preuzetog videa i zvuka.

: HTML5 audio primjer koda sa schema.org mikro označavanjem: Audio zaglavlje

Vaš preglednik ne podržava HTML5 audio.

Preuzmite audio zapis

Ovako će izgledati mikrooznačni podaci izdvojeni iz koda za gore opisani audio predložak.

Audioobject itemType = http://schema.org/AudioObject name = Audio title description = Audio description... isfamilyfriendly = true encodingformat = trajanje mp3 = PT04M59S uploaddate = 2015-12-31 image = Puni URL do image.jpg alternatename = Alternativa title audio contenturl href = URL do datoteke.mp3 text = Preuzmite audio zapis autor person itemType = http://schema.org/Osoba url href = URL tekst = Ime autora name = Ime autora slika = Puni url do osobe.jpg

Minimalna audio oznaka prema schema.org trebala bi uključivati ​​itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . Preostala svojstva su izborna.

Primjer standardne upotrebe HTML5 oznake:

U demonstraciji sam primijenio CSS stilove na oznaku putem atributa class, čineći širinu područja videozapisa dinamičnom ovisno o veličini zaslona. Igrač se sam podešava po visini. Pokušajte promijeniti veličinu prozora preglednika da vidite kako funkcionira. Stoga u izvornom kodu za ovaj demo ne postoje atributi širine i visine za oznaku, oni su zamijenjeni CSS stilovima. Ali ova metoda nije prikazana u popisu kodova predloška jer već je posebna stvar.

HTML5 primjer koda videozapisa s mikrooznakom schema.org: naslov videozapisa

Pogledajte na YouTubeu

Vaš preglednik ne podržava HTML5 video.

Preuzmi video: Naslov videa

Ovako će izgledati mikrooznačni podaci izdvojeni iz koda za gore opisani video predložak.

Videoobject itemType = http://schema.org/VideoObject name = Sličica naslova videa imageobject itemType = http://schema.org/ImageObject contenturl = URL do video-thumbnail.jpg|png width = 100 visina = 100 trajanje = PT14M59S je pogodan za obitelj = pravi datum slanja = 2015-12-31 opis = Kratki opis za video... url href = URL do datoteke.mp4 text = Naslov videozapisa autor osoba itemType = http://schema.org/Osoba url href = URL do web stranice autora text = ime autora ime = ime autora slika = Puni URL do autora.jpg thumbnailurl = URL do datoteke.jpg|png

Minimum potrebno Za tražilice, oznaka videozapisa schema.org mora uključivati ​​sva svojstva itemprop prikazana u primjeru koda, s iznimkom bloka itemprop = "author", koji nije obavezan za tražilice i može se izbrisati ako nema podataka za popuni to. Za video sličicu, Yandex zahtijeva da navedete mikro oznake prema schema.org kao itemprop = "thumbnail" u obliku ImageObject, i Google zahtijeva specificiranje itemprop = "thumbnailUrl" , tako da morate dvaput umetnuti video sličicu i stoga je druga img oznaka dobila display: none stil kako se ne bi prikazala u pregledniku. Umjesto upotrebe img oznake s display:none, ovo svojstvo možete proslijediti oznaci veze putem atributa href. Također, unatoč činjenici da se mikrooznaka može prenijeti putem meta i link tagova koji se ne prikazuju korisniku, ipak se preporučuje, ako je moguće, dodati mikrooznaku prvenstveno oznakama koje će biti prikazane korisniku. Validacija schema.org mikro označavanja može se izvršiti pomoću ovih veza: , . Glavna prednost korištenja mikro označavanja je pogodnost takvog sadržaja za robote za pretraživanje i robote društvenih mreža. Ovi roboti izdvajaju označene podatke i agregiraju ih. Stoga se poboljšava uporaba mikrooznaka SEO mjesto i olakšava automatsku distribuciju podataka na u društvenim mrežama. Detaljan opis mikrooznaka Schema.org za videozapise označene shemom VideoObjec t na web stranici. Također, vrijedi napomenuti da za slučajeve kada umetnete video na svoju web stranicu ne izravno, već pomoću widgeta za video hosting Yandex.Video ili YouTube, tada možete dodati svoj blok HTML koda s opisom videozapisa ispod bloka koda widgeta i ugradite Schema.org oznake za ovaj video. Istodobno, kao parametar URL-a - poveznica na video, nemojte navoditi izravnu vezu na statičku datoteku, već navedite vezu primljenu od video hostinga. Iako specifikacija Schema.org kaže da poveznica mora biti na izravnu datoteku, tražilice obrađuju i poveznice na videozapise s video hostinga ( pogledajte primjere na web stranici Yandex u odjeljku Webmaster), unatoč činjenici da ne možete preuzeti datoteku s takve poveznice i ne možete je vidjeti izravno u svom HTML5 media playeru na stranici, samo u video hosting widgetu.

Ako se suočite s pitanjem s kojeg hostinga preuzeti multimedijske audio i video datoteke, pogledajte članak koji opisuje mogućnost umetanja medijskih datoteka na WEB stranicu s Yandex Diska.

Atributi i oznake:

Atributi src, preload, autoplay, mediagroup, loop, muted, controls zajednički su atributi za sve medijske elemente, uključujući oznake i .

atribut automatske reprodukcije: ili ili

• Atribut automatske reprodukcije određen je svojom prisutnošću u oznaci ili i nema potrebe postavljati vrijednost za ovaj atribut, dovoljna je samo njegova prisutnost. Za HTML urednike koji uređuju kod elementa, ovaj atribut možete postaviti kao autoplay = "autoplay", što je jednako jednostavnom postojanju atributa. Prisutnost atributa autoplay govori pregledniku da započne reprodukciju datoteke odmah nakon učitavanja web stranice. Sukladno tome, atribut automatske reprodukcije nadjačava vrijednosti atributa predučitavanja, koji kontrolira kako se video učitava u player, jer se video mora početi reproducirati odmah i stoga se mora učitati. Prema zadanim postavkama ne postoji atribut automatske reprodukcije.

atribut kontrole: ili ili

• Atribut kontrole govori pregledniku da prikaže upravljačku ploču playera kada se stranica učita, ali snimka nije počela reproducirati. Ovaj atribut, kao i atribut automatske reprodukcije, određen je samo svojom prisutnošću u oznaci ili i ne zahtijeva vrijednost, dovoljna je samo njegova prisutnost. Prema zadanim postavkama, ovaj atribut je odsutan, tj. Uređaj ne prikazuje upravljačku ploču prije početka reprodukcije. Kada se datoteka počne reproducirati, upravljačka ploča će se pojaviti kada mišem prijeđete preko područja playera.

atribut petlje: ili ili

• Atribut petlje uzrokuje reprodukciju datoteke u petlji. Atribut je određen samo svojom prisutnošću u oznaci ili i nema parametara. Prema zadanim postavkama nema atributa petlje.

atribut predučitavanja:

• atribut preload specificira učitavanje datoteke zajedno s učitavanjem web stranice i uzima jednu od sljedeće tri vrijednosti:
  • ništa - nemojte preuzimati datoteku zajedno s učitavanjem web stranice. To znači da će se datoteka početi učitavati u player tek nakon pritiska na gumb za reprodukciju. Ovo može biti zgodno za ubrzavanje učitavanja stranice. Vrijednost none zadana je vrijednost za atribut predučitavanja, tako da je moguće uopće ne umetnuti atribut predučitavanja u oznaku ili za ovaj slučaj.
  • metapodaci - ne preuzima datoteku zajedno s učitavanjem web stranice, već preuzima metapodatke multimedijske datoteke.
  • auto - izvedite potpuno preuzimanje datoteke uz učitavanje web stranice. U ovoj će opciji preglednici automatski učitati medijsku datoteku zajedno s web stranica y, ali to neće ometati učitavanje same stranice i njezino prikazivanje u pregledniku. Ako je atribut preload ="" s praznom vrijednošću naveden u oznaci ili, koristit će se automatska vrijednost za njega.
  • Atribut prethodnog učitavanja bit će nadjačan ako se koristi atribut automatske reprodukcije.

src atribut:

• src atribut oznake ili vam omogućuje da odmah postavite stazu do multimedijske datoteke u oznaci. Put može biti potpun, označavajući protokol i domenu, ili relativan u odnosu na korijen trenutne stranice. Također možete navesti put do datoteke u oznakama ugrađenim u audio ili video spremnik.< source src=" URL"> .

Atribut plakata video oznake:

• atribut poster koristi se samo u oznaci i navodi URL slike (gif, png, jpeg itd.) koja će biti prikazana dok video nije dostupan. Ako atribut postera nije postavljen, player preglednika će pokušati prikazati prvi okvir videa.

Atributi širine i visine video oznake:

• atributi širine i visine primjenjuju se samo na oznaku i postavljaju širinu i visinu područja reprodukcije videoplayera. Očekuje se da vrijednost bude pozitivan cijeli broj, naveden u pikselima ili postotku. Postavljanje ovih atributa utječe na veličinu prikaza videozapisa, ali ne mijenja omjer slike videozapisa. Video će se prilagoditi zadanim dimenzijama uz zadržavanje svojih proporcija. Ako navedene dimenzije ne odgovaraju proporcijama videozapisa, uz gornji i/ili bočne rubove videozapisa bit će tamne pruge. Stoga je kod postavljanja ovih parametara preporučljivo odabrati njihov omjer isti kao kod videa koji se reproducira ili postaviti samo širinu, a player će sam podesiti visinu.
• Ako jedan ili oba parametra nisu navedeni, tada će se neodređeni parametri uzeti iz odgovarajuće veličine slike navedene u atributu postera.
• Ako atribut postera nedostaje, tada će ovi parametri biti postavljeni na sljedeći način: za širinu = 300 px i za visinu = 150 px. Kako ne bi izračunavali i koordinirali dimenzije područja videozapisa prema proporcijama samog isječka, preporučujem postavljanje samo jednog parametra širine, tada će visina (visina) područja reprodukcije biti odabrana automatski na temelju proporcija videozapisa .
• Također, može se utjecati na veličinu i dizajn HTML5 playera CSS svojstva primijenjen na oznake ili .

prigušeni atribut: ili ili

• Muted atribut postavlja svoju prisutnost u oznakama ili zvuk u isključeno stanje u HTML5 playeru. Prema zadanim postavkama, atribut nedostaje.

atribut unakrsnog podrijetla:

• Atribut crossorigin govori pregledniku da izvrši CORS zahtjev za ovaj element. Prema zadanim postavkama, atribut je odsutan, što znači da se CORS zahtjevi uopće ne koriste. Ako je atribut prisutan, moguće vrijednosti su anonimno i use-credentials. CORS () je tehnologija u modernim preglednicima koja vam omogućuje upravljanje dopuštenjima za učitavanje resursa na trenutnoj web stranici s drugih domena osim domene trenutne stranice. Podrška preglednika za CORS standard omogućuje implementaciju sigurne razmjene podataka između domena izvršavanjem posebnog zahtjeva (zaglavlja) domeni trenutne stranice kako bi se utvrdilo jesu li resursi iz druge navedene domene dopušteni za učitavanje na ovu stranicu. Kao odgovor na takav zahtjev, poslužitelj mora naznačiti domene s kojih je dopušteno preuzimanje resursa.

atribut medijske grupe: div ( margina: 1em auto; pozicija: relativna; širina: 400 px; visina: 300 px; ) video ( pozicija; apsolutna; dno: 0; desno: 0; ) video: prvo dijete ( širina: 100%; visina : 100%; ) video:posljednje dijete ( širina: 30%; )

• Atribut mediagroup omogućuje vam kombiniranje kontrole više medijskih datoteka u jedan MediaController stvaranjem grupe medijskih datoteka na različitim mjestima na stranici. Ovom grupom upravljat će se istovremeno za sve datoteke koje su u njoj uključene. Ovo je zgodno, na primjer, ako trebate reproducirati i kontrolirati isti video u isto vrijeme na različitim mjestima na stranici s različitim titlovima ili različitim video zapisima.

Oznake i zahtijevaju završnu oznaku.

Za one slučajeve kada preglednik ne podržava HTML5 i oznake, što je sada vrlo rijetko, tekstualna poruka se piše prije završne oznake spremnika i obično se dodaje poveznica za preuzimanje datoteke. Ako je HTML5 player ugrađen u preglednik dodatno kontroliran JS knjižnicom (JS player), tada većina njih povezuje flash player ako je nemoguće reproducirati HTML5 video i audio u pregledniku jer preglednik ne podržava video i audio oznake ili format multimedijske datoteke.

Označiti:

Put do datoteke koja se reproducira također se može odrediti pomoću oznake s atributom src koji se nalazi unutar oznaka ili. Oznaka nema završnu oznaku.

U većini slučajeva oznaka izgleda ovako:

i uvijek sadrži atribut src i type, koji u većini slučajeva ima samo MIME tip.

Atributi oznake:

• src= "URL" atribut oznake navodi URL do multimedijske datoteke. Put može biti potpun, označavajući protokol i domenu, ili relativan u odnosu na korijen stranice.
• atribut oznake type="MIME-type", ili potpunije type="MIME-type; codecs="codec"" specificira MIME vrstu i kodek datoteke. Za audio je dovoljno navesti tip MIME, npr. za .mp3 - type="audio/mpeg". Iako prema specifikaciji za video kodek također mora biti naveden u atributu tipa, sada često označavaju samo MIME tip bez kodeka, ostavljajući to preglednicima na odluku.
• Medijski atribut = "all|braille|handheld|print|screen|speech|projection|tty|tv" oznake određuje vrstu uređaja za koji se datoteka treba reproducirati. Zadana vrijednost je sve, tako da u većini slučajeva ovaj atribut uopće nije naveden osim ako ne želite posebno identificirati uređaj za reprodukciju.

Označiti:

Za HTML5 video također je moguće prikazati dodatni zapis u playeru s informacijama kao što su titlovi, naslovi, poglavlja, opisi (još nisu podržani) i metapodaci (još nisu podržani). Ova značajka implementirana je dodavanjem oznaka s odgovarajućim atributima unutar oznake.

- nema završnu oznaku.

Oznaka vam omogućuje povezivanje dodatnih datoteka zapisa s videozapisom u posebnom formatu WebVTT (Web Video Text Tracks Format), koji označava izlaz tekstualne poruke s njihovom vremenskom referencom na video datoteku. Standard WebVTT ne samo da podržava izlaz tekstualnih poruka, već također nudi opcije za to CSS stiliziranje i mogućnosti postavljanja u području gledanja videa. Trenutno se WebVTT datoteke uglavnom koriste za prilaganje tekstualnih titlova video zapisima, što podržavaju gotovo svi preglednici. Ostale značajke standarda WebVTT još nisu u potpunosti implementirane od strane samih preglednika, stoga je za potpuniju upotrebu WebVTT-a bolje koristiti JS playere. Također, WebVTT datoteke mogu nestandardno koristiti JS playeri za prijenos dodatnih podataka u JS player, kao što su, na primjer, URL-ovi pregleda slika za video okvire. Na pitanje kako prikazati preglede video okvira na ljestvici za premotavanje unatrag (Sličice trake za trljanje) kao što se to radi na stranicama za video hosting. Ovdje se mora reći da takva funkcionalnost još nije dostupna u playerima ugrađenim u preglednike i stoga je implementirana kroz JS playere kao dodatak. Da biste to učinili, povežite JS biblioteku (js player), koja preuzima kontrolu nad HTML5 video i audio objektom i izvodi njegov stil. Takvi JS playeri za prikaz pregleda video okvira nestandardno koriste WEBVTT datoteke iz oznake za prijenos URL-ova slika za pregled kroz njih.

WebVTT datoteka je redovita tekstualna datoteka s ekstenzijom .vtt u kojoj su, u obliku popisa redak po redak, ispisane vremenske oznake s vremenom početka i završetka te tekstualne poruke za izlaz u te oznake. Možete povezati nekoliko WebVTT datoteka s tekstom na različitim jezicima u spremnik. Za svaki jezik koji trebate stvoriti zasebna datoteka i spojite svaki preko oznake. Oznake se moraju umetnuti unutar spremnika nakon svih oznaka, ali prije poruka o pogrešci HTML5 videozapisa. Oznaka s datotekom titlova na zadanom jeziku mora biti postavljena prva među oznakama u trenutnom spremniku.

WEBVTT datoteka može sadržavati jednu ili više vremenskih oznaka. Datoteka počinje riječju WEBVTT. Prazne linije odvojene vremenske oznake s pripadajućim tekstom i atributima. Tekst može sadržavati HTML elementi i CSS oznake. ID za njega može se staviti ispred vremenske oznake kako bi se na njega referiralo pomoću posebnih izraza. Svi ovi detalji opisani su u standardu WEBVTT. određuje vrstu zapisa i može poprimiti sljedeće vrijednosti:

• titlovi - titlovi u obliku teksta koji se prikazuju preko videa. Za datoteku koja se reproducira, možete postaviti titlove na različitim jezicima kako biste omogućili njihov izbor u playeru, ako to podržava. U većini slučajeva koristi se ova vrsta jer je podržava većina preglednika.
• titlovi - natpisi u obliku teksta i zvuka koji se prikazuju preko videa. Slično titlovima, ali osim teksta mogu sadržavati zvučne efekte i druge audio informacije.
• poglavlja - poglavlja koja se tekstualno prikazuju kao popisni izbornik i namijenjena su brzoj navigaciji kroz medijsku datoteku.
• opisi - opis, ovo tekstualne datoteke s opisom videozapisa za njihovu reprodukciju u čitaču zaslona.
• metapodaci - metapodaci za prosljeđivanje js skripti.

Atribut src oznake navodi URL do datoteke praćenja s dodatne informacije. Datoteka priložena oznaci ima WebVTT format i ekstenziju .vtt.

Atribut srclang oznake određuje jezik pjesme putem koda jezika. Za ruski će to biti jednako "ru", za engleski "en".

Atribut oznake oznake navodi naziv zapisa koji će biti prikazan u playeru. Ako atribut nije postavljen, preglednik će prikazati naziv svoje usluge.

Zadani atribut oznake određuje odabir ovog zapisa prema zadanim postavkama ako postoje drugi zapisi u video spremniku. Samo jedna od nekoliko oznaka može imati zadani atribut. Bolje je prvo postaviti zadanu stazu među ostalim povezanim stazama.

Primjer oznaka: Ovo se pitanje vrlo često pojavljuje, pa sam odlučio posvetiti mu poseban članak u lekcijama. Budući da HTML nema univerzalnu tehnologiju za reprodukciju zvuka za sve preglednike, za rješavanje ovog problema predlažem preuzimanje datoteke audio playera, kao što se radi na većini web stranica. Sve radimo korak po korak:

1. Na hostingu na kojem se nalazi vaša stranica, u korijenskom direktoriju (mapi u kojoj se nalazi indeksna datoteka), kreirajte audio mapu. Ubuduće ćete u njega smjestiti sve audio datoteke.

3. Sada odaberite potrebne datoteke, bolje u mp3 formatu. Napravite audio mapu u korijenu stranice i prenesite ih.

4. Ostaje samo umetnuti kod za povezivanje igrača. Pogodan je za bilo koje mjesto. Na pravom mjestu trebate samo naznačiti put do datoteke playera i audio datoteke, odnosno zamijeniti riječi vaša_domena i naziv audio_datoteke:

I sve je spremno! Također možete pogledati radni primjer.

Kako instalirati pozadinska glazba u html-u koristim mogućnosti HTML-a i preglednika, također možete umetnuti pozadinsku glazbu na stranicu. Trebat će vam audio datoteka potreban format: WAV, AU, MIDI ili MP3. Kao primjer možete koristiti bilo koju datoteku s navedenim nastavkom.

Prvi način je embed tag. Element embed koristi se za učitavanje i prikaz objekata (na primjer, video datoteka, flash filmova, nekih audio datoteka itd.) koje preglednik inicijalno ne razumije.

Sintaksa je prilično jednostavna:

Završna oznaka nije potrebna.

Sada pogledajmo primjer zapisa s atributima, au nastavku njihovo dekodiranje:

Ugradite atribute oznake za reprodukciju zvuka u html-u
širina - širina ploče u pikselima (ili postocima)
visina - visina panela u pikselima (ili postocima)
align - položaj ploče u odnosu na tekst, moguće vrijednosti su lijevo, desno, središte
skriveno - omogućuje vam skrivanje panela, vrijednosti atributa: true - panel je skriven, false - panel je vidljiv (zadana vrijednost)
autostart - true - player se automatski pokreće kada se stranica učita, false - čeka da se pritisne gumb za reprodukciju
loop - ciklus, istina - zapis se vrti u krug, i kada vrijednost lažna- samo jednom

Drugi način. Vrlo staro, ali i praktično) Dodajte melodiju u istu mapu (direktorij) u kojoj se nalazi vaša datoteka, au tijelu upišite sljedeći kod:

Kao rezultat toga, nakon učitavanja stranice oglasit će se melodija koju ste naveli u oznaci bgsound. Sada razmotrimo bolje osobine označiti:

src - put do vaše audio datoteke
petlja - koliko puta ponoviti melodiju (ako je -1, onda se ponavlja beskonačno)
balans - vrijednost stereo balansa (od -10000 do 10000)
glasnoća - glasnoća reprodukcije melodije, gdje je 0 maksimum, a -10000 minimum.

Međutim, neće biti načina da se na bilo koji način kontrolira player - svaki put kad se stranica osvježi, pjesma će se ponovno reproducirati.

Nakon što sam opisao način umetanja pozadinske glazbe, želim vas odgovoriti od toga, jer većina korisnika u pravilu već sluša glazbu kada posjećuju razne stranice. Stoga ga popratna glazba može samo natjerati da zatvori karticu sa stranicom.

Umetanje zvuka i glazbe u HTML5 - audio tag
audio - definiranje uparene oznake pozadinski zvuk, glazbe ili drugog audio toka na web mjestu.

Atributi audio oznaka

autoplay - datoteka se reproducira odmah nakon učitavanja stranice (slično bgsound pozadinskoj glazbi)
kontrole - prikaz upravljačke ploče igrača u pregledniku
petlja - ponovno reproducira datoteku nakon što završi
preload - audio datoteka će se učitati zajedno s učitavanjem stranice
src - put do audio datoteke (mp3 ili ogg)

Primjer koda s audio oznakom

Audio oznaka

Audio u HTML 5

Vaš preglednik ne podržava zvučnu oznaku.
Skidanje glazbe.

Opis

Dodaje, reproducira i upravlja audio postavkama na web stranici. Put do datoteke naveden je putem atributa src ili subtag-a. Unutar spremnika možete napisati tekst koji će biti prikazan u preglednicima koji ne rade s ovom oznakom.

Popis kodeka koje preglednici podržavaju ograničen je i naveden je u tablici. 1.

Stol 1. Kodeci i preglednici

kodek	Internet Explorer	Krom	Opera	Safari	Firefox
ogg/vorbis
wav
mp3
A.A.C.

Za univerzalnu reprodukciju u određenim preglednicima, zvuk se kodira pomoću različitih kodeka, a datoteke se dodaju istovremeno putem oznake.

Atributi sintakse Zvuk se počinje reproducirati odmah nakon učitavanja stranice. Dodaje upravljačku ploču audio datoteci. Ponavlja zvuk od početka nakon završetka. Koristi se za preuzimanje datoteke zajedno s učitavanjem web stranice. Određuje put do datoteke koja se reproducira. Završna oznaka

Potreban.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Aleksandar Klimenkov - Četrnaest

Vaš preglednik ne podržava zvučnu oznaku. Skidanje glazbe.

Primjer rezultata u Preglednik Opera prikazano na sl. 1.

Riža. 1. Reproducirajte audio datoteku

Preglednici

Kontrole reprodukcije zvuka razlikuju se po izgledu između preglednika, ali osnovni elementi su isti. To su tipka za reprodukciju/pauzu, duljina zapisa, proteklo i ukupno vrijeme reprodukcije te razina glasnoće.

S pojavom dovoljno brzih internetskih veza, Flash je bio jedini alat za reprodukciju zvukova na web stranicama. Ali HTML5 će iz temelja promijeniti način na koji se zvukovi reproduciraju na internetu. U ovom članku želim vam detaljno reći kako koristiti oznaku na svojim web stranicama.

Koristimo ga za umetanje zvučne datoteke na stranicu. Ispod je najjednostavniji primjer koristeći oznaku, preuzima mp3 datoteku i reproducira je. Imajte na umu atribut autopaly koji se koristi za automatsku reprodukciju zvuka. Međutim, ne biste trebali automatski reproducirati zvukove na stranici jer će to smetati korisnicima. Reprodukcija zvuka u petlji Želite reproducirati zvuk? Atribut petlje pomoći će vam u tome. Ali opet, ne biste trebali pretjerivati ​​s automatskom reprodukcijom i reprodukcijom u petlji ako ne želite da korisnik prerano napusti stranicu. Prikaz kontrola Umjesto da se zvukovi reproduciraju automatski, što je definitivno loša praksa, trebali biste dopustiti da se neke kontrole prikazuju u pregledniku, kao što su tipke za glasnoću i reprodukciju (pauza). To je lako učiniti jednostavnim dodavanjem atributa kontrole. Različiti formati datoteka Oznaku podržava većina modernih preglednika, no problem je u tome različitim preglednicima podržava različite formate datoteka. Safari, na primjer, može reproducirati MP3, ali Firefox ne može i umjesto toga reproducira OGG datoteke. Rješenje ovog problema je korištenje oba formata tako da svaki posjetitelj može čuti zvuk, bez obzira koji preglednik koristi. Određivanje MIME vrste datoteka Kada koristite različite formate datoteka, dobra je praksa navesti MIME vrstu za svaku datoteku kako biste pregledniku pomogli lokalizirati datoteku koju podržava. To se lako može učiniti pomoću atributa tipa. Za starije preglednike Što ako posjetitelj koristi IE6 ili neki drugi pretpovijesni preglednik koji ne podržava oznaku? Lako je: ispod je kod koji će prikazati poruku za preglednike koji ne podržavaju oznaku. Vaš preglednik ne podržava audio oznaku! Spremanje datoteka u međuspremnik Prilikom reprodukcije velikih datoteka, može se koristiti spremanje datoteka u međuspremnik. Za to možete koristiti atribut predload. Može imati 3 vrijednosti:

• ništa - ako ne želite koristiti međuspremnik datoteka;
• auto - ako želite da preglednik spremi u međuspremnik cijelu datoteku;
• metapodaci - za učitavanje samo servisnih informacija (trajanje zvuka itd.).

Upravljanje reprodukcijom putem JavaScripta Upravljanje HTML5 audio playerom putem JavaScripta vrlo je jednostavno. Sljedeći primjer pokazuje kako koristeći JavaScript možete izgraditi vlastitu osnovni elementi Kontrole audio playera: Reproduciraj Pauza Glasnoća + Glasnoća -

To je sve za danas.
Nadam se da vam je ovaj članak pomogao razumjeti osnovne sposobnosti HTML5 oznaka.

Sve donedavno ugrađivanje zvuka u web stranicu nije bio tako lak zadatak. Općenito, postoje neki koji nude pametnije i bolje implementacije, ali većina vas metoda ograničava na posjedovanje određenog preglednika i određenih dodataka.

Dolaskom Flash tehnologije na tržište ovaj je zadatak postao mnogo lakši budući da Flash dodatak omogućuje ugradnju bilo koje animacije ili zvuka na stranicu, a tehnologiju podržava većina preglednika. Ali potražnja za Flashom postupno nestaje nakon lansiranja inovativnih uređaja tvrtke Apple: iPhone i iPad. Kao što znate, Apple ne oprema temeljno svoje uređaje Flash podrška, a broj korisnika proizvoda ubrzano raste.

Ukratko, ovdje postoji mala zabuna.

Srećom, HTML5 je znatno olakšao život programerima, jer tehnologija uključuje audio element. Ovaj element omogućuje ugradnju audio datoteka u bilo koju web stranicu, kao i implementaciju upravljačke ploče pomoću javascripta. Što je još važnije, tehnologija ne zahtijeva dodatne dodatke i podržana je u gotovo svim preglednicima, s izuzetkom ranih verzija (o podršci za preglednike ćemo govoriti kasnije!).

U našem današnjem članku ćemo vam reći kako možete ugraditi zvukove pomoću audio elementa. Također ćemo naučiti kako kontrolirati proces reprodukcije pomoću javascripta, a također ćemo vam pokušati reći o tehnološkoj podršci među preglednicima.

HTML5 audio element

Ovaj element je izuzetno jednostavan za korištenje. U našem današnjem primjeru ugradit ćemo "White Christmas" Binga Crosbyja:

Ovdje ne treba puno objašnjavati. Slično kao što umetnete sliku pomoću oznake img, na isti način možete umetnuti zvuk koristeći audio oznaku.

Podrška za više preglednika

Gornji primjer vjerojatno neće raditi u svim preglednicima. Ovdje dolazi do izražaja format datoteke.

Neki preglednici mogu reproducirati .mp3 datoteke, ali ne i .ogg datoteke, dok drugi rade suprotno. Većina preglednika može reproducirati .wav datoteke, ali zbog njihove velike veličine nije prikladno koristiti ih kao zvuk za web-mjesto.

Evo tablice preglednika koji pokazuju podršku za zvučne formate:

Koje formate podržava vaš preglednik? Odredite ovo prema .

Kao što možete vidjeti u tablici, najoptimalnija opcija implementacije bila bi povezivanje oba formata datoteka.
Da biste to učinili, audio elementu možete dodati više izvornih elemenata i u njima odrediti staze do različitih formata. Preglednik će reproducirati prvu datoteku koju podržava. Evo primjera:

Naravno, to znači da trebate izraditi i svoju MP3 i OGG verziju zvučna datoteka(ovdje vam dolazi u pomoć), ali to je jedini način da organizirate podršku za više preglednika.

Rane verzije Internet Explorera (verzije 7 i 8) uopće ne podržavaju audio element. Međutim, kasnije u članku ćemo pogledati kako zaobići ovaj problem.

Automatska reprodukcija zvuka

Iako gornji kod ugrađuje zvuk, on ga ne reproducira. Ako želimo da se zvuk automatski reproducira kada se stranica učita, elementu moramo dodati atribut autoplay:

Dodavanje kontrolnih gumba

Iako automatska reprodukcija može biti korisna, u mnogim je slučajevima neugodna ili potpuno neprikladna. Stoga možemo instalirati dodatne upravljačke gumbe za audio elemente tako da korisnik može sam odlučiti:

Ovo dodaje vodoravnu traku s gumbom za pauzu/reprodukciju, vremensku traku s klizačem i kontrolu glasnoće. Sve je otprilike isto kao što možete vidjeti na playeru na Youtube-u.

Važno je zapamtiti da će se upravljačka ploča razlikovati ovisno o preglednicima. Na primjer, preglednik na iPhoneu neće imati klizač za glasnoću jer uređaj ima zasebne tipke za kontrolu razina zvuka.

Reprodukcija u petlji

Dodavanje atributa petlje audio elementu uzrokovat će beskonačnu reprodukciju zvuka.

Ovo može biti korisno za uključivanje pozadinske glazbe ili zvučnih efekata u igrama.

Također možete koristiti atribut prethodnog učitavanja, koji će reći pregledniku kada i gdje treba učitati određenu audio datoteku.
Prethodno učitavanje audio datoteke znači da se zvuk može reproducirati odmah kada korisnik pritisne play.

Postoji nekoliko značenja za ovaj atribut:

“none” – preglednik ne bi trebao nametnuti preuzetu datoteku. Oni. Ako ste uvjereni da većina korisnika neće reproducirati datoteku, koristite ovu opciju. Ili ga koristite kada trebate uštedjeti što je moguće više propusnosti poslužitelja.

"metapodaci" - parametar je sličan none, osim što obavještavate preglednik o mogućnosti učitavanja metapodataka, kao što je trajanje audio zapisa, ali ne i same audio datoteke.

“auto” – dopuštate pregledniku da sam preuzme audio datoteku.

Na primjer:

Imajte na umu da je predučitavanje samo praktična značajka jer neki preglednici mogu jednostavno zanemariti ovu naredbu i početi raditi što god žele.

Kontrola reprodukcije putem javascripta

Što je zgodno u javascript elementi– to je zato što je njima lako upravljati pomoću javascripta. Audio element nudi mnoge prikladne parametre i metode upravljanja:

Play() – početak reprodukcije od trenutne pozicije;

Pause() – zaustavi reprodukciju na trenutnoj poziciji;

canPlayType(type) – odredite podržava li preglednik reprodukciju ove vrste mediji;

trajanje – trajanje zapisa u sekundama;

currentTime – trenutna pozicija u sekundama. Također možete instalirati ovaj parametar za pomicanje položaja reprodukcije.

Koristeći opcije i metode predložene gore, možemo stvoriti neke osnovne upravljačke gumbe:

Pusti muziku
Pauziraj glazbu
Zaustavi glazbu
Pogledajte demo: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Podrška za starije verzije Internet Explorera

U većini slučajeva, korisnički preglednik podržava HTML5 element. Ali, nažalost, IE preglednici verzije 7 pa čak ni 8 ne podržavaju ovaj element (iako verzija 9 već ima podršku). Važno je razmotriti povratnu verziju za korisnike koji su ostali u 2008.

Vrlo gruba, ali učinkovita metoda je korištenje posebnih komentara za označavanje podataka preglednika i davanje pokazivača objekta na zvučnu datoteku. Stoga će preglednik često prikazivati ​​ugrađeni kontroler koji korisnicima omogućuje reprodukciju, pauziranje ili premotavanje glazbe unatrag na gotovo HTML5 audio način. Evo primjera:

Pusti muziku
Pauziraj glazbu
Zaustavi glazbu

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

Gornji primjer radit će u svim preglednicima koji podržavaju HTML5 Audio, a također će raditi u IE verzijama 7 i 8. Pomoću komentara preusmjeravamo kontrole gumba izravno na audio datoteku.

Drugi način vraćanja je ugrađivanje Flash playera na stranicu. Evo, koji govori o povratku u obliku Flash playera.

Zaključak

U našem današnjem članku naučili smo kako ugraditi audio datoteke pomoću HTML5. Ne samo da je audio element jednostavan za korištenje, već ga možemo prilagoditi i kontrolirati reprodukciju putem javascripta.

Želite li saznati više o audio elementu u HTML5? Zatim se odjavite.

Iako trenutno nedostaje podrška u nekim preglednicima (kao što su starije verzije IE-a), možete ih jednostavno vratiti ako je potrebno, što je ovih dana sve rjeđe.