andew

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

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

11937

Članak opisuje strukturu audio i video HTML5 kontejnera, video, audio, izvor, oznake zapisa i njihove atribute s mogućim vrijednostima. Dati su HTML šabloni i primjeri implementacije reprodukcije multimedijalnih datoteka na osnovu mogućnosti ugrađenih u pretraživač. Prikazana je veza sa video tekstualnom trakom titlova, naslova, sadržaja pomoću datoteka WEBVTT formata sa primjerima. Predstavljeni su HTML5 predlošci koda sa mikro-oznakama schema.org za audio i video. Naznačeni su glavni web formati audio i video datoteka sa njihovim MIME tipovima i alatima za pretvaranje video i audio zapisa u ove formate.

HTML5 sadrži nove funkcije koje vam omogućavaju reprodukciju audio i video datoteka direktno u pretraživaču bez upotrebe programi trećih strana. Do sada, uprkos činjenici da HTML5 više nije nov, i dalje postoje neslaganja oko toga kako pretraživači obrađuju video i audio oznake i kako se sam plejer prikazuje. Neki ljudi to rade svaki put bolje nova verzija, drugi i dalje zaostaju. Globalno gledano, trend je da će pretraživači pružati sve više i više funkcionalnosti za reprodukciju multimedijalnih datoteka.

Screencast: Primjer korištenja šablona

Download video

Screencast: primjeri korištenja šablona iz članka - web stranice

HTML5 video i audio su standard koji se razvija i nije povezan ni sa jednim audio ili video formatom, tako da postoje razlike između pretraživača u tome šta podržavaju. formati audio i video fajlovi. Ova razlika je sada nadoknađena činjenicom da kodiraju originalni fajl nekoliko različitih kodeka i povežite sve ove verzije datoteka na oznake ili preko ugniježđenih oznaka< source src=" URL">. Međutim, među formatima audio i video datoteka koje podržavaju pretraživači pojavljuju se lideri. Za video ovo je, naravno, mp4 format (H.264), a za audio to su mp3 i m4a format. Sada, vjerovatno, svi pretraživači mogu reproducirati datoteke ovih formata. također, Firefox pretraživači, Chrome i Opera su se složili da podržavaju WEBM standard kao zajednički video format. Sa moje tačke gledišta, optimalna opcija za korišćenje HTML5 videa i zvuka sada bi bila šema zasnovana na upotrebi jedne multimedijalne datoteke u mp4 formatu ( H.264) za video i m4a za audio i JS HTML5 player. Samo jedna datoteka u navedenom formatu je povezana na audio ili video kontejner. Danas većina pretraživača može reproducirati mp4 format. Povezana JS biblioteka će stilizirati plejer ugrađen u pretraživač. Ako preglednik ne podržava format mp4 / m4a, tada JS player, u ovom slučaju, implementira Flash veza plejer za reprodukciju multimedijalne datoteke. S obzirom da je format mp4 postao veoma popularan, može se nadati maloj verovatnoći problema sa njegovom reprodukcijom u pretraživačima. Ova šema zahtijeva samo jednu multimedijalnu datoteku u navedenom formatu, što štedi prostor na disku i resurse za obradu datoteka. Takođe, ovakva šema će biti strateški ispravnija, jer je trend da su pretraživači sve bolji u implementaciji HTML5 video i audio zapisa.

Da biste HTML5 plejeru naznačili datoteku koja će se reproducirati, pored URL-a datoteke, morate proći i MIME tip datoteke kako bi pretraživač razumio koji kodek treba da koristi. Tabela ispod navodi najčešće formate datoteka i njihove MIME tipove.

Formati datoteka i njihovi MIME tipovi Medijske datoteke Ekstenzije tipa mime

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 je dostupan za različite operativni sistemi- Windows, Mac i Linux i predstavlja grafičku ljusku za uslužne programe konzole i koja je pogodna za korištenje na web server za automatsku obradu preuzetih video i audio zapisa.

: HTML5 audio primjer koda sa schema.org mikro oznakama: Audio zaglavlje

Vaš pretraživač ne podržava HTML5 audio.

Preuzmite audio

Ovako će izgledati podaci mikro markiranja izvučeni iz koda za gore opisani audio predložak.

Audioobject itemType = http://schema.org/AudioObject name = Audio title description = Audio opis... isfamilyfriendly = true encodingformat = mp3 trajanje = PT04M59S uploaddate = 2015-12-31 image = Pun URL do image.jpg alternativno ime = Alternativno title audio contenturl href = URL do datoteke.mp3 text = Preuzmite audio autor person itemType = http://schema.org/Person url href = URL text = Ime autora Ime = Ime autora image = Cijeli url do person.jpg

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

Primjer upotrebe standardne HTML5 oznake:

U demonstraciji sam primenio CSS stilove na oznaku preko atributa class, čineći širinu video oblasti dinamičkom u zavisnosti od veličine ekrana. Igrač se sam prilagođava po visini. Pokušajte promijeniti veličinu prozora preglednika da vidite kako funkcionira. Stoga, u izvornom kodu za ovu demonstraciju ne postoje atributi širine i visine za oznaku, oni su zamijenjeni CSS stilovima. Ali ova metoda nije prikazana u listi kodova šablona, ​​jer već je posebna stvar.

HTML5 video primjer koda sa mikro-oznakama schema.org: Naslov videa

Gledajte na YouTube-u

Vaš pretraživač ne podržava HTML5 video.

Preuzmite video: Naslov videa

Ovako će izgledati podaci mikro markiranja izvučeni 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 na video-thumbnail.jpg|png širina = 100 visina = 100 trajanje = PT14M59S je prijateljski za porodicu = istina uploaddate = 2015-12-31 opis = Kratki opis za video... url href = URL do datoteke.mp4 text = Naslov videa autor person itemType = http://schema.org/Person url href = URL web stranice autora text = ime autora ime = ime autora image = Puni URL to author.jpg thumbnailurl = URL do file.jpg|png

Minimum neophodno Za tražilice, video označavanje prema schema.org treba uključivati ​​sva svojstva itemprop prikazana u primjeru koda, s izuzetkom bloka itemprop ="author", koji je opcionalan za tražilice i može se izbrisati ako nema podataka da ga popuni. Za video sličicu, Yandex zahtijeva da navedete mikro označavanje 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 style da se ne bi prikazala u pretraživaču. Umjesto da koristite oznaku img sa display:none, ovo svojstvo možete prenijeti na link tag preko href atributa. Također, uprkos činjenici da se mikro označavanje može prenijeti putem meta i link tagova koji se ne prikazuju korisniku, ipak se preporučuje, ako je moguće, dodavanje mikro oznaka prvenstveno oznakama koje će biti prikazane korisniku. Validacija mikro markiranja schema.org može se obaviti 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 korištenje mikro markiranja SEO stranice i olakšava automatsku distribuciju podataka do na društvenim mrežama. Detaljan opis Schema.org mikro označavanja za video zapise označene šemom VideoObjec t na web stranici. Također, vrijedi napomenuti da za slučajeve kada umetnete video na svoju web stranicu ne direktno, već koristeći widgete za video hosting Yandex.Video ili YouTube, tada možete dodati svoj blok HTML koda s opisom videa ispod bloka koda widgeta i ugradite oznake Schema.org za ovaj video. Istovremeno, kao parametar URL-a - link na video, ne navedite direktnu vezu do statičkog fajla, već navedite link primljen od video hostinga. Iako specifikacija Schema.org kaže da veza mora biti na direktnu datoteku, pretraživači također obrađuju veze do video zapisa sa video hostinga ( pogledajte primjere na web stranici Yandex u odjeljku Webmaster), uprkos činjenici da ne možete preuzeti datoteku sa takvog linka i ne možete je pogledati direktno u svom HTML5 media playeru na stranici, samo u widgetu za video hosting.

Ako ste suočeni s pitanjem s kojeg hostinga preuzeti multimedijalne 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 su zajednički atributi za sve medijske elemente, uključujući oznake i .

atribut autoplay: ili ili

• Atribut autoplay je specificiran njegovim prisustvom u or tag-u i nema potrebe za postavljanjem vrijednosti za ovaj atribut, dovoljno je samo njegovo prisustvo. Za HTML uređivače koji uređuju kod elementa, možete postaviti ovaj atribut kao autoplay ="autoplay ", što je ekvivalentno jednostavnom prisustvu atributa. Prisustvo atributa autoplay govori pretraživaču da započne reprodukciju datoteke odmah nakon učitavanja web stranice. U skladu s tim, atribut autoplay nadjačava vrijednosti atributa preload, koji kontrolira kako se video učitava u plejer, jer video mora odmah početi da se reproducira i stoga mora biti učitan. Podrazumevano, nema atributa autoplay.

atribut kontrole: ili ili

• Atribut controls govori pretraživaču da prikaže kontrolnu tablu plejera kada se stranica učita, ali snimak nije počeo da se reprodukuje. Ovaj atribut, kao i atribut autoplay, određen je samo njegovim prisustvom u ili oznaci i ne zahtijeva vrijednost, dovoljno je samo njegovo prisustvo. Podrazumevano, ovaj atribut je odsutan, tj. Plejer ne prikazuje kontrolnu tablu pre početka reprodukcije. Kada datoteka počne da se reprodukuje, kontrolna tabla će se pojaviti kada pređete mišem preko područja plejera.

atribut petlje: ili ili

• Atribut loop uzrokuje da plejer reproducira datoteku u petlji. Atribut je specificiran samo njegovim prisustvom u ili oznaci i nema parametara. Po defaultu nema atributa petlje.

preload atribut:

• atribut preload specificira učitavanje datoteke zajedno s učitavanjem web stranice i uzima jednu od sljedeće tri vrijednosti:
  • ništa - ne preuzimajte datoteku zajedno sa učitavanjem web stranice. To znači da će datoteka početi da se učitava u plejer tek nakon pritiska na dugme za reprodukciju. Ovo može biti zgodno za ubrzanje učitavanja stranice. Vrijednost none je zadana vrijednost za preload atribut, tako da je moguće ne umetnuti atribut preload u oznaku uopće ili za ovaj slučaj.
  • metapodaci - ne preuzima datoteku zajedno sa učitavanjem web stranice, već preuzima metapodatke multimedijalne datoteke.
  • auto - izvrši kompletno preuzimanje datoteke zajedno sa učitavanjem web stranice. U ovoj opciji, pretraživači će automatski učitati medijsku datoteku zajedno sa web stranicu y, ali to neće ometati učitavanje same stranice i njeno prikazivanje u pretraživaču. Ako je atribut preload ="" s praznom vrijednošću naveden u ili oznaci, koristit će se automatska vrijednost za njega.
  • Atribut preloada će biti poništen ako se koristi atribut autoplay.

src atribut:

• src atribut oznake ili vam omogućava da odmah postavite putanju do multimedijalne datoteke u oznaci. Put može biti ili potpun, koji ukazuje na protokol i domen, ili relativan u odnosu na korijen trenutne stranice. Također možete odrediti putanju do datoteke u oznakama ugrađenim u audio ili video kontejner.< source src=" URL"> .

Atribut postera video oznake:

• atribut poster se koristi samo u oznaci i specificira URL slike (gif, png, jpeg, itd.) koja će biti prikazana dok video nije dostupan. Ako atribut postera nije postavljen, plejer pretraživača će pokušati da prikaže prvi kadar videa.

Atributi širine i visine video oznake:

• atributi širine i visine primjenjuju se samo na oznaku i postavljaju širinu i visinu područja za reprodukciju video plejera. Očekuje se da će vrijednost biti pozitivan cijeli broj, naveden u pikselima ili procentima. Postavljanje ovih atributa utječe na veličinu prikaza videozapisa, ali ne mijenja omjer slike. Videozapis će se prilagoditi navedenim dimenzijama uz zadržavanje svojih proporcija. Ako navedene dimenzije ne odgovaraju proporcijama videa, tada će biti tamnih pruga duž gornje i/ili bočne ivice videa. Stoga, prilikom postavljanja ovih parametara, preporučljivo je odabrati njihov omjer isti kao i video koji se reproducira, ili postaviti samo širinu, a plejer će sam podesiti visinu.
• Ako jedan ili oba ova parametra nisu specificirani, tada će nespecificirani parametar(i) biti uzeti iz odgovarajuće veličine slike specificirane u atributu postera.
• Ako nedostaje atribut postera, tada će se ovi parametri postaviti na sljedeći način: za širinu = 300 px i za visinu = 150 px. Kako ne bi izračunali i uskladili dimenzije video područja prema proporcijama samog klipa, preporučio bih da postavite samo jedan parametar širine, tada će visina (visina) područja za reprodukciju biti odabrana automatski na osnovu video proporcija .
• Takođe se može uticati na veličinu i dizajn HTML5 plejera CSS svojstva primijenjen na oznake ili .

prigušeni atribut: ili ili

• Atribut muted postavlja svoje prisustvo u oznakama ili zvuk u utišano stanje u HTML5 playeru. Podrazumevano, atribut nedostaje.

crossorigin atribut:

• Atribut crossorigin govori pretraživaču da izvrši CORS zahtjev za ovaj element. Po defaultu, atribut je odsutan, što znači da se CORS zahtjevi uopće ne koriste. Ako je atribut prisutan, moguće vrijednosti su anonimne i use-credentials. CORS () je tehnologija u modernim pretraživačima koja vam omogućava da upravljate dozvolama za učitavanje resursa na trenutnoj web stranici sa drugih domena osim domena trenutne stranice. Podrška pretraživača za standard CORS vam omogućava da implementirate sigurnu razmjenu podataka između domena izvršavanjem posebnog zahtjeva (zaglavlja) na domenu trenutne stranice kako biste utvrdili da li je resursima iz drugog specificiranog domena dozvoljeno učitavanje na ovoj stranici. Kao odgovor na takav zahtjev, server mora naznačiti domene sa kojih je dozvoljeno preuzimanje resursa.

atribut mediagroup: div ( margina: 1em auto; pozicija: relativna; širina: 400px; visina: 300px; ) video (pozicija; apsolutna; dno: 0; desno: 0; ) video:first-child (širina: 100%; visina : 100%; ) video: zadnje dijete ( širina: 30%; )

• Atribut mediagroup vam omogućava da kombinujete kontrolu više medijskih datoteka u jedan MediaController kreiranjem grupe medijskih datoteka na različitim mestima na stranici. Ovom grupom će se istovremeno upravljati za sve datoteke uključene u nju. Ovo je zgodno, na primjer, ako trebate puštati i kontrolirati isti video u isto vrijeme na različitim mjestima na stranici s različitim titlovima ili različitim videozapisima.

Oznake i zahtijevaju završnu oznaku.

Za one slučajeve kada pretraživač ne podržava HTML5 i tagove, što je sada veoma retko, tekstualna poruka se napiše ispred završne oznake kontejnera i obično se dodaje link za preuzimanje fajla. Ako HTML5 player ugrađen u preglednik dodatno kontrolira JS biblioteka (JS player), onda većina njih povezuje flash player ako je nemoguće reproducirati HTML5 video i audio u pregledniku zbog toga što preglednik ne podržava video i audio oznake ili format multimedijalne datoteke.

Oznaka:

Putanja do datoteke koja se reproducira također može biti specificirana korištenjem oznake sa src atributom smještenim 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 specificira URL multimedijalne datoteke. Put može biti ili potpun, koji označava protokol i domen, ili relativan u odnosu na korijen stranice.
• atribut type="MIME-type" oznake, ili potpunije type="MIME-type; codecs="codec"" specificira MIME tip i kodek datoteke. Za audio, dovoljno je navesti MIME tip, na primjer, za .mp3 - type="audio/mpeg". Iako prema specifikaciji za video, kodek također mora biti specificiran u atributu tipa, ali sada oni često ukazuju samo na MIME tip bez kodeka, ostavljajući to pretraživačima da odluče.
• Media atribut ="all|braille|handheld|print|screen|speech|projection|tty|tv" oznake specificira tip uređaja za koji se datoteka treba reproducirati. Zadana vrijednost je sve, tako da u većini slučajeva ovaj atribut uopće nije specificiran osim ako ne želite posebno identificirati uređaj za reprodukciju.

Oznaka:

Za HTML5 video, takođe je moguće prikazati dodatnu numeru u plejeru sa informacijama kao što su titlovi, natpisi, poglavlja, opisi (još nisu podržani) i metapodaci (još nisu podržani). Ova funkcija se implementira dodavanjem oznaka s odgovarajućim atributima unutar oznake.

- nema završnu oznaku.

Oznaka vam omogućava da povežete dodatne datoteke zapisa na video u posebnom formatu WebVTT (Web Video Text Tracks Format), koji označavaju izlaz tekstualne poruke sa njihovom vremenskom referencom na video fajl. WebVTT standard ne samo da podržava izlaz tekstualnih poruka, već pruža i opcije za to CSS stil i opcije za postavljanje u zoni za gledanje videa. Trenutno se WebVTT datoteke uglavnom koriste za priključivanje tekstualnih titlova na video zapise, što podržavaju gotovo svi pretraživači. Ostale karakteristike WebVTT standarda još nisu u potpunosti implementirane od strane samih pretraživača, 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 skali za premotavanje plejera (Scrub Bar Thumbnails) kao što se radi na video hosting sajtovima. Ovdje se mora reći da takva funkcionalnost još uvijek nije dostupna u playerima ugrađenim u pretraživače 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 vrši njegovo oblikovanje. Takvi JS plejeri za prikazivanje pregleda video okvira nestandardno koriste WEBVTT datoteke iz oznake za prenošenje URL-ova slika za pregled preko nje.

WebVTT datoteka je obična tekstualna datoteka sa ekstenzijom .vtt u kojoj su, u obliku liste red po red, ispisane vremenske oznake s vremenom početka i završetka i tekstualne poruke za izlaz na ove oznake. Možete povezati nekoliko WebVTT datoteka s tekstom na različitim jezicima na kontejner. Za svaki jezik morate kreirati zaseban fajl i povežite svaki preko oznake. Oznake se moraju umetnuti unutar kontejnera nakon svih oznaka, ali prije HTML5 video poruka o grešci. Oznaka sa fajlom titla na podrazumevanom jeziku mora biti postavljena na prvo mesto među oznakama u trenutnom kontejneru.

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

• titlovi - titlovi u obliku teksta koji se prikazuje preko video zapisa. Za datoteku koja se reproducira, možete postaviti titlove na različitim jezicima kako biste omogućili njihov izbor u plejeru, ako ga podržava. U većini slučajeva, ovaj tip se koristi jer ga podržava većina pretraživača.
• titlovi - titlovi u obliku teksta i zvuka koji se prikazuju preko videa. Slično titlovima, ali osim teksta, mogu uključivati ​​zvučne efekte i druge audio informacije.
• poglavlja - poglavlja koja se prikazuju u tekstu kao meni liste i namenjena su za brzu navigaciju kroz medijski fajl.
• opisi - opis, ovo tekstualne datoteke sa video opisom za njihovo puštanje u čitaču ekrana.
• metapodaci - metapodaci za prosleđivanje js skripti.

Atribut src oznake specificira URL do datoteke praćenja sa Dodatne informacije. Datoteka priložena oznaci ima WebVTT format i ekstenziju .vtt.

Atribut srclang oznake specificira jezik staze preko koda jezika. Za ruski će biti jednako "ru", za engleski "en".

Atribut oznake oznake određuje naziv numere koji će biti prikazan u plejeru. Ako atribut nije postavljen, pretraživač će prikazati naziv svoje usluge.

Zadani atribut oznake specificira odabir ove numere prema zadanim postavkama ako postoje druge pjesme u video kontejneru. Samo jedna od nekoliko oznaka može imati zadani atribut. Bolje je postaviti zadanu stazu na prvo mjesto među ostalim povezanim stazama.

Primjer oznaka: Ovo pitanje se postavlja vrlo često, pa sam odlučio da mu posvetim poseban članak u lekcijama. Budući da HTML nema univerzalnu tehnologiju za reprodukciju zvuka za sve pretraživače, da biste riješili ovaj problem, predlažem preuzimanje datoteke audio playera, kao što se radi na većini stranica. Sve radimo korak po korak:

1. Na hostingu na kojem se nalazi vaša stranica, u korijenskom direktoriju (fasciklu u kojoj se nalazi indeksna datoteka), kreirajte audio folder. U budućnosti ćete staviti sve audio datoteke u njega.

3. Sada odaberite potrebne datoteke, bolje u mp3 formatu. Kreirajte audio folder u korijenu stranice i otpremite ga.

4. Ostaje samo da unesete kod za povezivanje plejera. Pogodan je za bilo koju stranicu. Na pravom mjestu samo treba naznačiti putanju do fajla plejera i audio fajla, odnosno zameniti reči your_domain i audio_file name:

I sve je spremno! Možete pogledati i radni primjer.

Kako instalirati pozadinska muzika u html-u koristim mogućnosti HTML-a i pretraživača, takođe možete ubaciti pozadinsku muziku na stranicu. Trebat će vam audio datoteka potreban format: WAV, AU, MIDI ili MP3. Možete koristiti bilo koju datoteku sa navedenom ekstenzijom kao primjer.

Prvi način je embed tag. Element embed se koristi za učitavanje i prikaz objekata (na primjer, video fajlova, flash filmova, nekih audio datoteka, itd.) koje pretraživač u početku ne razumije.

Sintaksa je prilično jednostavna:

Završna oznaka nije potrebna.

Pogledajmo sada primjer zapisa s atributima, a u nastavku s njihovim dekodiranjem:

Ugradite atribute oznake za reprodukciju zvuka u html-u
širina - širina panela u pikselima (ili postocima)
visina - visina panela u pikselima (ili procentima)
align - položaj panela u odnosu na tekst, moguće vrijednosti su lijevo, desno, centar
hidden - omogućava vam da sakrijete panel, vrijednosti atributa: true - panel je skriven, false - panel je vidljiv (podrazumevana vrijednost)
autostart - true - plejer se automatski pokreće kada se stranica učita, false - čeka da se pritisne dugme za reprodukciju
loop - ciklus, true - numera se reprodukuje u krug, i kada vrijednost false- samo jednom

Drugi način. Vrlo staro, ali i praktično) Dodajte melodiju u isti folder (direktorij) u kojem se nalazi vaš fajl, a u tijelo upišite sljedeći kod:

Kao rezultat toga, nakon učitavanja stranice, zvučat će melodija koju ste naveli u bgsound tag-u. Sada razmotrimo bolji atributi oznaka:

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)
jačina zvuka - jačina reprodukcije melodije, gdje je 0 maksimalna, a -10000 minimalna.

Međutim, neće biti načina da se na bilo koji način kontrolira plejer - svaki put kada se stranica osvježi, numera će se ponovo reprodukovati.

Nakon što sam opisao način umetanja pozadinske muzike, želim da vas odvratim od ovoga, jer većina korisnika po pravilu već sluša muziku kada posećuje razne sajtove. Stoga ga prateća muzika može samo natjerati da zatvori karticu sa sajtom.

Umetanje zvuka i muzike u HTML5 - audio tag
audio - definiranje uparene oznake pozadinski zvuk, muzički ili drugi audio stream na web lokaciji.

Atributi audio oznaka

autoplay - fajl se reprodukuje odmah kada se stranica učita (slično bgsound pozadinskoj muzici)
kontrole - prikaz kontrolne table plejera u pretraživaču
petlja - ponovo reprodukuje fajl nakon što se završi
preload - audio datoteka će se učitati zajedno sa učitavanjem stranice
src - put do audio datoteke (mp3 ili ogg)

Primjer koda sa audio oznakom

Audio oznaka

Audio u HTML 5

Vaš pretraživač ne podržava audio oznaku.
Preuzimanje muzike.

Opis

Dodaje, reprodukuje i upravlja audio postavkama na web stranici. Put do datoteke je specificiran preko atributa src ili podoznake. Možete napisati tekst unutar kontejnera koji će biti prikazan u pretraživačima koji ne rade sa ovom oznakom.

Lista kodeka koje pretraživači podržavaju je ograničena i data je u tabeli. 1.

Table 1. Kodeci i pretraživači

Codec	Internet Explorer	Chrome	Opera	Safari	Firefox
ogg/vorbis
wav
mp3
A.A.C.

Za univerzalnu reprodukciju u određenim pretraživačima, zvuk se kodira pomoću različitih kodeka i datoteke se istovremeno dodaju preko oznake.

Atributi sintakse Zvuk počinje reproducirati odmah nakon učitavanja stranice. Dodaje kontrolnu tablu audio fajlu. Ponavlja zvuk od početka nakon što se završi. Koristi se za preuzimanje datoteke zajedno s učitavanjem web stranice. Određuje putanju do datoteke koja se reprodukuje. Oznaka za zatvaranje

Obavezno.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Aleksandar Klimenkov - Četrnaest

Vaš pretraživač ne podržava audio oznaku. Preuzimanje muzike.

Primjer rezultata u Opera pretraživač prikazano na sl. 1.

Rice. 1. Pustite audio fajl

Pregledači

Kontrole reprodukcije zvuka se razlikuju po izgledu između pretraživača, ali su osnovni elementi isti. To su dugme za reprodukciju/pauzu, dužina numere, proteklo i ukupno vreme reprodukcije i nivo jačine zvuka.

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

Koristimo ga da ubacimo zvučni fajl na stranicu. Ispod je najjednostavniji primjer koristeći oznaku, preuzima mp3 datoteku i reproducira je. Obratite pažnju na atribut autopaly, koji se koristi za automatsku reprodukciju zvuka. Međutim, ne biste trebali automatski puštati zvukove na stranici, jer će to smetati korisnicima. Reprodukcija zvuka na petlji Želite li pustiti zvuk u petlji? Atribut petlje će vam pomoći u tome. Ali opet, ne biste trebali pretjerano koristiti autoplay i ponavljanje reprodukcije ako ne želite da korisnik prerano napusti stranicu. Prikazivanje kontrola Umesto da se zvuk automatski reprodukuje, što je definitivno loša praksa, trebalo bi da dozvolite da se neke kontrole prikažu u pretraživaču, kao što su tasteri za jačinu zvuka i reprodukciju (pauza). To je lako učiniti jednostavnim dodavanjem atributa controls. Razni formati datoteka Oznaku podržava većina modernih pretraživača, ali problem je u tome različitim pretraživačima podržavaju različite formate datoteka. Safari, na primjer, može reproducirati MP3 datoteke, 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 audio, bez obzira koji pretraživač koristi. Određivanje MIME tipa datoteka Kada koristite različite formate datoteka, dobra je praksa specificirati MIME tip za svaku datoteku kako biste pomogli pretraživaču da lokalizira datoteku koju podržava. Ovo se lako može učiniti pomoću atributa type. Za starije pretraživače Šta ako posjetitelj koristi IE6 ili neki drugi praistorijski pretraživač koji ne podržava oznaku? Lako je: ispod je kod koji će prikazati poruku za pretraživače koji ne podržavaju oznaku. Vaš pretraživač ne podržava audio oznaku! Baferovanje datoteka Prilikom reprodukcije velikih datoteka, može se koristiti baferovanje datoteka. Za ovo možete koristiti atribut preload. Može imati 3 vrijednosti:

• ništa - ako ne želite da koristite bafer datoteke;
• auto - ako želite da pretraživač da baferuje celu datoteku;
• metapodaci - za učitavanje samo servisnih informacija (trajanje zvuka, itd.).

Kontrolisanje reprodukcije putem JavaScript-a Kontrolisanje HTML5 audio plejera putem JavaScript-a je veoma jednostavno. Sljedeći primjer pokazuje kako koristeći JavaScript možete sami izgraditi osnovni elementi Kontrole audio plejera: Reprodukcija Pauza Volume + Volume -

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

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

Sa pojavom Flash tehnologije na tržištu, ovaj zadatak je postao mnogo lakši, budući da Flash dodatak omogućava da ugradite bilo koju animaciju ili zvuk na stranicu, a tehnologija je podržana od strane većine pretraživača. Ali potražnja za Flashom postupno nestaje nakon lansiranja inovativnih Apple uređaja: iPhone i iPad. Kao što znate, Apple ne oprema svoje uređaje u osnovi Flash podrška, a broj korisnika proizvoda ubrzano raste.

Ukratko, ovdje je malo zabune.

Srećom, HTML5 je mnogo olakšao život programerima, jer tehnologija uključuje audio element. Ovaj element vam omogućava da ugradite audio fajlove u bilo koju web stranicu, kao i da implementirate kontrolni panel koristeći javascript. Što je još važnije, tehnologija ne zahtijeva dodatne dodatke i podržana je u gotovo svim pretraživačima, s izuzetkom ranih verzija (o podršci pretraživača ćemo kasnije!).

U našem današnjem članku ćemo vam reći kako možete ugraditi zvukove pomoću audio elementa. Takođe ćemo naučiti kako da kontrolišemo proces reprodukcije koristeći javascript, a takođe ćemo pokušati da vam kažemo o tehnološkoj podršci među pretraživačima.

HTML5 audio element

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

Ovdje nije potrebno mnogo objašnjavati. Slično kao što umetnete sliku pomoću oznake img, možete umetnuti zvuk pomoću audio oznake na isti način.

Podrška za više pretraživača

Gornji primjer vjerovatno neće raditi u svim pretraživačima. Ovdje dolazi do izražaja format datoteke.

Neki pretraživači mogu reproducirati .mp3 datoteke, ali ne i .ogg datoteke, dok drugi rade suprotno. Većina pretraživača može reproducirati .wav datoteke, ali zbog velike veličine, neprikladno je koristiti kao audio za web stranicu.

Evo tabele pretraživača koji pokazuju podršku za zvučne formate:

Koje formate podržava vaš pretraživač? Odredite ovo po .

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

Naravno, to znači da morate kreirati i svoju Mp3 i OGG verziju zvučni fajl(ovdje vam dolazi u pomoć), ali ovo je jedini način da se organizira podrška za više pretraživača.

Ranije 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 reprodukuje. Ako želimo da se zvuk automatski reproducira kada se stranica učita, potrebno je elementu dodati atribut autoplay:

Dodavanje kontrolnih dugmadi

Iako automatska reprodukcija može biti korisna, u mnogim slučajevima je neugodna ili potpuno neprikladna. Stoga možemo ugraditi dodatne kontrolne tipke za audio elemente kako bi korisnik mogao sam odlučiti:

Ovo dodaje horizontalnu traku sa dugmetom za pauzu/reprodukciju, vremensku liniju sa klizačem i kontrolu jačine zvuka. Sve je otprilike isto kao što možete vidjeti na plejeru na Youtube-u.

Važno je zapamtiti da će se kontrolni panel razlikovati ovisno o pretraživačima. Na primjer, pretraživač na iPhoneu neće imati klizač za jačinu zvuka jer uređaj ima odvojene tipke za kontrolu nivoa zvuka.

Loop playback

Dodavanje atributa petlje audio elementu će uzrokovati reprodukciju zvuka neograničeno.

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

Možete koristiti i atribut preload, koji će pretraživaču reći 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” – pretraživač ne bi trebao nametati preuzetu datoteku. One. Ako ste sigurni da većina korisnika neće reproducirati datoteku, koristite ovu opciju. Ili ga koristite kada trebate uštedjeti što je moguće više propusnog opsega servera.

“metapodaci” - parametar je sličan nijednom, osim što obavještavate pretraživač o mogućnosti učitavanja metapodataka, kao što je trajanje audio zapisa, ali ne i sam audio fajl.

“auto” – dozvoljavate pretraživaču da sam preuzme audio datoteku.

Na primjer:

Imajte na umu da je prethodno učitavanje samo funkcija pogodnosti, jer neki pretraživači mogu jednostavno zanemariti ovu naredbu i početi raditi što god žele.

Kontrola reprodukcije putem javascripta

Šta je zgodno u javascript elementi– to je zato što je njima lako upravljati koristeći javascript. Audio element nudi mnogo praktičnih parametara i metoda kontrole:

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

Pause() – zaustavlja reprodukciju na trenutnoj poziciji;

canPlayType(type) – odredite da li pretraživač podržava reprodukciju ovog tipa mediji;

trajanje – trajanje staze u sekundama;

currentTime – trenutna pozicija u sekundama. Također možete instalirati ovaj parametar da pomerite poziciju reprodukcije.

Koristeći opcije i metode predložene gore, možemo kreirati neke osnovne kontrolne tipke:

Pusti muziku
Pauzirajte muziku
Zaustavi muziku
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, pretraživač korisnika podržava HTML5 element. Ali, nažalost, IE pretraživači verzije 7 pa čak i 8 ne podržavaju ovaj element (iako verzija 9 već ima podršku). Važno je razmotriti rollback verziju za korisnike koji su ostali u 2008.

Vrlo gruba, ali efikasna metoda je korištenje posebnih komentara za isticanje podataka pretraživača i davanje pokazivača objekta na zvučnu datoteku. Stoga će pretraživač često prikazati ugrađeni kontroler koji omogućava korisnicima da puštaju, pauziraju ili premotaju muziku na način koji je gotovo HTML5 audio. Evo primjera:

Pusti muziku
Pauzirajte muziku
Zaustavi muziku

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 će raditi u svim pretraživačima koji podržavaju HTML5 Audio, a radit će i u IE verzijama 7 i 8. Koristeći komentare, preusmjeravamo kontrole gumba direktno na audio datoteku.

Drugi način za vraćanje je da ugradite Flash player u stranicu. Evo, što 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 također možemo prilagoditi i kontrolirati reprodukciju putem javascripta.

Želite li saznati više o audio elementu u HTML5? Onda se odjavi.

Iako podrška trenutno pati u nekim pretraživačima (kao što su starije verzije IE), možete ih lako vratiti ako je potrebno, što je danas sve manje uobičajeno.