andew

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

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

11937

Artikkelen beskriver strukturen til HTML5-beholderen for lyd og video, video-, lyd-, kilde-, sportagger og deres attributter med mulige verdier. HTML-maler og eksempler på implementering av avspilling av multimediefiler basert på funksjonene innebygd i nettleseren er gitt. Tilkoblingen til videotekstsporet med undertekster, titler, innholdsfortegnelse ved bruk av WEBVTT-formatfiler med eksempler vises. HTML5-kodemaler med schema.org-mikromerking for lyd og video presenteres. De viktigste webformatene for lyd- og videofiler med deres MIME-typer og verktøy for konvertering av video og lyd til disse formatene er angitt.

HTML5 inneholder nye funksjoner som lar deg spille av lyd- og videofiler direkte i nettleseren uten å bruke tredjeparts programmer. Så langt, til tross for at HTML5 ikke lenger er nytt, er det fortsatt uenigheter i hvordan nettlesere behandler video- og lydmerker og hvordan selve spilleren vises. Noen mennesker gjør det bedre hver gang ny verson, andre henger fortsatt etter. Globalt er trenden at nettlesere vil gi mer og mer funksjonalitet for å spille av multimediefiler.

Screencast: Eksempel på bruk av maler

Last ned video

Screencast: eksempler på bruk av maler fra artikkelen – nettside

HTML5 video og lyd er en standard i utvikling og er ikke assosiert med noe lyd- eller videoformat, så det er forskjeller mellom nettlesere i hva de støtter. formater lyd- og videofiler. Denne forskjellen kompenseres nå av at de koder original fil flere forskjellige kodeker og koble alle disse filversjonene til tagger eller gjennom nestede tagger< source src=" URL">. Imidlertid dukker ledere opp blant lyd- og videofilformatene som støttes av nettlesere. For video er dette selvfølgelig mp4-formatet (H.264), og for lyd er dette mp3- og m4a-formatet. Nå er sannsynligvis alle nettlesere i stand til å spille av filer med disse formatene. Også, Firefox-nettlesere, Chrome og Opera har blitt enige om å støtte WEBM-standarden som et vanlig videoformat. Fra mitt synspunkt vil det optimale alternativet for å bruke HTML5-video og lyd nå være et opplegg basert på bruk av én multimediafil i mp4-format ( H.264) for video og m4a for lyd og JS HTML5-spiller. Bare én fil i det angitte formatet er koblet til lyd- eller videobeholderen. I dag er de fleste nettlesere i stand til å spille mp4-format. Det tilkoblede JS-biblioteket vil style spilleren som er innebygd i nettleseren. Hvis nettleseren ikke støtter mp4 / m4a-formatet, implementerer JS-spilleren, i dette tilfellet Flash-tilkobling spiller for å spille av en multimediefil. Tatt i betraktning at mp4-formatet har blitt veldig populært, kan man håpe på lav sannsynlighet for problemer med avspillingen i nettlesere. Denne ordningen krever bare én multimediefil i det angitte formatet, noe som sparer diskplass og ressurser for å behandle filer. Dessuten vil en slik ordning være strategisk mer korrekt, siden trenden er at nettlesere blir stadig flinkere til å implementere HTML5 video og lyd.

For å indikere til HTML5-spilleren filen som skal spilles av, må du i tillegg til fil-URLen også sende MIME-typen til filen slik at nettleseren forstår hvilken kodek den må bruke. Tabellen nedenfor viser de vanligste filformatene og deres MIME-typer.

Filformater og deres MIME-typer Mediefiler Mime Type Extensions

Lyd mp3	mp3	lyd/mpeg
Lyd mp4	m4a	lyd/mp4
Lyd webm	webm	lyd/webm
Lyd ogg	ogg	lyd/ogg
Video mp4 (H.264)	mp4	video/mp4
Video webm	webm	video/webm
Video ogg	ogv	video/ogg

Lyd- og videokodingsverktøy

For å kode video- og lydfiler til webformatene ovenfor, kan du bruke åpent program, som støtter konvertering av lyd- og videofiler til hovedformatene som er vanlige for nettet ( MP4, WebM, Ogg Theora, MP3, etc.). Miro Video Converter er tilgjengelig for forskjellige operativsystemer- Windows, Mac og Linux og er et grafisk skall for konsollverktøy og som er praktiske å bruke på Internett server for å behandle nedlastet video og lyd automatisk.

: HTML5-lydeksempelkode med schema.org-mikromarkering: Lydhode

HTML5-lyd støttes ikke av nettleseren din.

Last ned lyd

Dette er hvordan mikromarkeringsdataene som er hentet fra koden vil se ut for lydmalen beskrevet ovenfor.

Audioobject itemType = http://schema.org/AudioObject name = Lydtittelbeskrivelse = Lydbeskrivelse... isfamilyfriendly = true encodingformat = mp3-varighet = PT04M59S opplastingsdato = 2015-12-31 bilde = Full URL til image.jpg alternativnavn = Alternativt title audio contenturl href = URL til file.mp3 text = Last ned lyd forfatter person itemType = http://schema.org/Person url href = URL text = Forfatterens navn = Forfatterens navn bilde = Full url til person.jpg

Minimum lydoppmerking i henhold til schema.org bør inkludere itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . De resterende egenskapene er valgfrie.

Eksempel på standard HTML5-tagbruk:

I demoen brukte jeg CSS-stiler på taggen via klasseattributtet, noe som gjorde bredden på videoområdet dynamisk avhengig av skjermstørrelsen. Spilleren justerer seg selv i høyden. Prøv å endre størrelsen på nettleservinduet for å se hvordan det fungerer. Derfor, i kodekilden for denne demoen, er det ingen bredde- og høydeattributter for taggen, de erstattes av CSS-stiler. Men denne metoden vises ikke i malkodelisten, fordi er allerede en spesiell ting.

HTML5-videoeksempelkode med schema.org-mikromerking: Videotittel

Se på YouTube

HTML5-video støttes ikke av nettleseren din.

Last ned video: Videotittel

Dette er hvordan mikromarkeringsdataene hentet fra koden vil se ut for videomalen beskrevet ovenfor.

Videoobject itemType = http://schema.org/VideoObject name = Videotittel thumbnail imageobject itemType = http://schema.org/ImageObject contenturl = URL til video-thumbnail.jpg|png bredde = 100 høyde = 100 varighet = PT14M59S er familievennlig = sann opplastingsdato = 2015-12-31 beskrivelse = Kort beskrivelse for video... url href = URL til file.mp4 text = Videotittel forfatter person itemType = http://schema.org/Person url href = URL til forfatter nettside tekst = forfatternavn = forfatternavn bilde = Full URL to author.jpg thumbnailurl = URL til file.jpg|png

Minimum nødvendig For søkemotorer bør videomarkering i henhold til schema.org inkludere alle itemprop-egenskapene vist i eksempelkoden, med unntak av itemprop ="author"-blokken, som er valgfri for søkemotorer og kan slettes hvis det ikke er data å fylle den. For videominiatyrbilder krever Yandex at du spesifiserer mikromarkering i henhold til schema.org som itemprop ="thumbnail" i form av et ImageObject , og Google krever spesifikasjon av itemprop ="thumbnailUrl" , så du må sette inn video-thumbnail-filen to ganger, og derfor mottok den andre img-taggen visningen: ingen stil for ikke å bli vist i nettleseren. I stedet for å bruke en img-tag med display:none, kan du sende denne egenskapen til link-taggen via href-attributtet. Til tross for at mikromarkering kan overføres gjennom meta- og lenketagger som ikke vises til brukeren, anbefales det fortsatt, hvis mulig, å legge til mikromarkering først og fremst til tagger som skal vises til brukeren. Validering av schema.org mikro-oppmerking kan gjøres ved å bruke disse koblingene: , . Den største fordelen med å bruke mikromarkering er bekvemmeligheten av slikt innhold for søkeroboter og sosiale nettverksroboter. Disse robotene trekker ut merkede data og samler dem. Derfor forbedres bruken av mikromarkup SEO nettsted og forenkler automatisk distribusjon av data til i sosiale nettverk. En detaljert beskrivelse av Schema.org-mikromerking for videoer merket med VideoObjec t-skjemaet på nettstedet. Det er også verdt å merke seg at i tilfeller der du setter inn en video på nettstedet ditt ikke direkte, men bruker videovertswidgeter Yandex.Video eller YouTube, kan du legge til HTML-kodeblokken din med en beskrivelse av videoen under widgetkodeblokken og bygge inn Schema.org-markeringen for denne videoen. På samme tid, som en URL-parameter - en lenke til en video, spesifiser ikke en direkte kobling til en statisk fil, men spesifiser en kobling mottatt fra videoverten. Selv om Schema.org-spesifikasjonen sier at koblingen må være til en direkte fil, behandler søkemotorer også lenker til videoer fra videohosting ( se eksempler på Yandex-nettstedet i Webmaster-delen), til tross for at du ikke kan laste ned filen fra en slik lenke, og du kan ikke se den direkte i HTML5-mediespilleren på siden, bare i videovertswidgeten.

Hvis du står overfor spørsmålet om hvilken hosting du skal laste ned multimedia-lyd- og videofiler fra, så se på artikkelen, som beskriver muligheten for å sette inn mediefiler på en WEB-side fra Yandex Disk.

Attributter og tagger:

Attributtene src , preload , autoplay , mediagroup , loop , muted , controls er vanlige attributter for alle medieelementer, inkludert tagger og .

autoplay-attributt: enten eller

• Autoplay-attributtet spesifiseres av dets tilstedeværelse i eller-taggen, og det er ikke nødvendig å angi en verdi for dette attributtet, bare tilstedeværelsen er nok. For HTML-redaktører som redigerer elementkode, kan du sette dette attributtet som autoplay ="autoplay ", som tilsvarer bare å ha attributtet til stede. Tilstedeværelsen av autoplay-attributtet forteller nettleseren å begynne å spille av filen umiddelbart etter at nettsiden er lastet inn. Følgelig overstyrer autoplay-attributtet verdiene til preload-attributtet, som kontrollerer hvordan videoen lastes inn i spilleren, fordi videoen må begynne å spille umiddelbart og derfor må lastes. Som standard er det ingen autoplay-attributt.

kontroller attributt: enten eller

• Controls-attributtet forteller nettleseren å vise spillerens kontrollpanel når siden har lastet inn, men opptaket ikke har startet avspilling. Dette attributtet, i likhet med autoplay-attributtet, spesifiseres kun av dets tilstedeværelse i eller-taggen, og krever ingen verdi, bare tilstedeværelsen er tilstrekkelig. Som standard er dette attributtet fraværende, dvs. Spilleren viser ikke kontrollpanelet før avspillingen starter. Når filen begynner å spille, vil kontrollpanelet vises når du holder musen over spillerområdet.

loop-attributt: enten eller

• Lokkeattributtet får spilleren til å spille av filen i en loop. Et attributt spesifiseres kun av dets tilstedeværelse i eller-taggen og har ingen parametere. Som standard er det ingen loop-attributt.

preload attributt:

• preload-attributtet spesifiserer lasting av en fil sammen med lasting av en nettside og tar en av følgende tre verdier:
  • ingen - ikke last ned filen mens du laster nettsiden. Dette betyr at filen vil begynne å laste i spilleren først etter å ha trykket på avspillingsknappen. Dette kan være nyttig for å øke hastigheten på sidelasting. Verdien none er standardverdien for preload-attributtet, så det er mulig å ikke sette inn preload-attributtet i taggen i det hele tatt eller for dette tilfellet.
  • metadata – laster ikke ned filen sammen med lasting av nettsiden, men laster ned metadataene til multimediefilen.
  • auto - utfør en full filnedlasting sammen med lasting av nettsiden. I dette alternativet vil nettlesere automatisk laste mediefilen sammen med nettside y, men dette vil ikke forstyrre lasting av selve siden og dens gjengivelse i nettleseren. Hvis preload =""-attributtet med en tom verdi er spesifisert i eller-taggen, vil den automatiske verdien for den bli brukt.
  • Preload-attributtet vil bli overstyrt hvis autoplay-attributtet brukes.

src attributt:

• src-attributtet til taggen eller lar deg angi banen til multimediefilen i taggen umiddelbart. Banen kan enten være fullstendig, som indikerer protokollen og domenet, eller i forhold til roten til gjeldende nettsted. Du kan også angi banen til filen i tagger som er innebygd i en lyd- eller videobeholder.< source src=" URL"> .

Plakatattributt for videotaggen:

• plakatattributtet brukes bare i taggen og spesifiserer nettadressen til bildet (gif, png, jpeg osv.) som skal vises mens videoen ikke er tilgjengelig. Hvis plakatattributtet ikke er angitt, vil nettleserspilleren prøve å vise det første bildet av videoen.

Bredde- og høydeattributtene til videotaggen:

• bredde- og høydeattributtene gjelder kun for taggen og angir henholdsvis bredden og høyden på videospillerens avspillingsområde. Verdien forventes å være et positivt heltall, spesifisert i piksler eller prosent. Innstilling av disse attributtene påvirker visningsstørrelsen på videoen, men endrer ikke sideforholdet til videoen. Videoen vil justere seg til de spesifiserte dimensjonene mens proporsjonene opprettholdes. Hvis de angitte dimensjonene ikke samsvarer med videoproporsjonene, vil det være mørke striper langs toppen og/eller sidekantene av videoen. Derfor, når du stiller inn disse parametrene, er det tilrådelig å velge forholdet til det samme som for videoen som spilles av, eller angi bare bredden, og spilleren vil justere høyden selv.
• Hvis en eller begge av disse parameterne ikke er spesifisert, vil de uspesifiserte parameterne bli hentet fra den tilsvarende bildestørrelsen som er spesifisert i plakatattributtet.
• Hvis plakatattributtet mangler, vil disse parameterne settes som følger: for bredde = 300 px og for høyde = 150 px. For ikke å beregne og koordinere dimensjonene til videoområdet i henhold til proporsjonene til selve klippet, vil jeg anbefale å angi bare én breddeparameter, deretter vil høyden (høyden) på avspillingsområdet velges automatisk basert på videoproporsjonene .
• Også størrelsen og designen til HTML5-spilleren kan påvirkes gjennom CSS-egenskaper brukt på tagger eller .

muted attributt: enten eller

• Attributtet dempet setter sin tilstedeværelse i tagger eller lyden til en dempet tilstand i HTML5-spilleren. Som standard mangler attributtet.

crossorigin attributt:

• Crossorigin-attributtet forteller nettleseren å utføre en CORS-forespørsel for dette elementet. Som standard er attributtet fraværende, noe som betyr at du ikke bruker CORS-forespørsler i det hele tatt. Hvis attributtet er tilstede, er de mulige verdiene anonyme og brukslegitimasjon . CORS () er en teknologi i moderne nettlesere som lar deg administrere tillatelser for å laste ressurser på gjeldende nettside fra andre domener enn domenet til den gjeldende siden. Nettleserstøtte for CORS-standarden lar deg implementere sikker datautveksling på tvers av domener ved å utføre en spesiell forespørsel (header) til domenet til gjeldende side for å avgjøre om ressurser fra et annet spesifisert domene tillates lastet på denne siden. Som svar på en slik forespørsel må serveren angi domenene som nedlasting av ressurser er tillatt fra.

mediegruppeattributt: div ( margin: 1em auto; posisjon: relativ; bredde: 400px; høyde: 300px; ) video (posisjon; absolutt; bunn: 0; høyre: 0; ) video:førstebarn (bredde: 100 %; høyde : 100 %; ) video:siste-barn ( bredde: 30 %; )

• Mediagroup-attributtet lar deg kombinere kontrollen av flere mediefiler til én MediaController ved å lage en gruppe mediefiler på forskjellige steder på siden. Denne gruppen vil bli administrert samtidig for alle filene som er inkludert i den. Dette er praktisk, for eksempel hvis du trenger å spille av og kontrollere den samme videoen samtidig på forskjellige steder på siden med forskjellige undertekster, eller forskjellige videoer.

Tagger og krever en avsluttende tag.

For de tilfellene hvor nettleseren ikke støtter HTML5 og tagger, som nå er svært sjelden, skrives en tekstmelding før den avsluttende taggen til beholderen og en lenke for å laste ned filen legges vanligvis til. Hvis HTML5-spilleren som er innebygd i nettleseren i tillegg styres av et JS-bibliotek (JS-spiller), kobler de fleste av dem til en flash-spiller hvis det er umulig å spille HTML5-video og -lyd i nettleseren på grunn av at nettleseren ikke støtter video og lyd koder eller multimediefilformatet.

Stikkord:

Banen til filen som spilles kan også spesifiseres ved å bruke en tag med src-attributtet plassert inne i eller-taggene. Taggen har ikke en avsluttende kode.

I de fleste tilfeller ser taggen slik ut:

og den inneholder alltid src og type-attributtet, som i de fleste tilfeller bare har en MIME-type.

Tag-attributter:

• src= "URL"-attributtet til taggen spesifiserer URL-en til multimediefilen. Banen kan enten være fullstendig, som indikerer protokollen og domenet, eller i forhold til roten til nettstedet.
• taggens type="MIME-type"-attributt, eller mer fullstendig type="MIME-type; codecs="codec"" spesifiserer filens MIME-type og kodek. For lyd er det nok å spesifisere MIME-typen, for eksempel for .mp3 - type="audio/mpeg". Selv om i henhold til spesifikasjonen for video, må kodeken også spesifiseres i type-attributtet, men nå indikerer de ofte bare MIME-typen uten kodek, og overlater dette til nettleserne å bestemme.
• Medieattributtet ="all|blindskrift|håndholdt|print|skjerm|tale|projeksjon|tty|tv" til taggen spesifiserer typen enhet som filen skal spilles av. Standardverdien er alle, så i de fleste tilfeller er ikke dette attributtet spesifisert i det hele tatt med mindre du spesifikt vil identifisere enheten for avspilling.

Stikkord:

For HTML5-video er det også mulig å vise et ekstra spor i spilleren med informasjon som undertekster, bildetekster, kapitler, beskrivelser (støttes ikke ennå) og metadata (støttes ikke ennå). Denne funksjonen implementeres ved å legge til tagger med passende attributter inne i taggen.

- har ikke en avsluttende kode.

Taggen lar deg koble flere sporfiler til videoen i det spesielle WebVTT-formatet (Web Video Text Tracks Format), som indikerer utdata tekstmeldinger med sin tidsreferanse til videofilen. WebVTT-standarden støtter ikke bare tekstmeldingsutgang, men gir også alternativer for det CSS-styling og alternativer for plassering i videovisningsområdet. For øyeblikket brukes WebVTT-filer hovedsakelig til å legge ved teksting til videoer, som støttes av nesten alle nettlesere. Andre funksjoner i WebVTT-standarden er ennå ikke fullt implementert av nettleserne selv, derfor, for en mer fullstendig bruk av WebVTT, er det bedre å bruke JS-spillere. WebVTT-filer kan også brukes ikke-standardisert av JS-spillere for å overføre tilleggsdata til JS-spilleren, slik som for eksempel URL-er til bildeforhåndsvisninger for videorammer. På spørsmålet om hvordan man viser forhåndsvisninger av videorammer på spillerens tilbakespolingsskala (Scrub Bar Thumbnails) slik det gjøres på videovertssider. Her skal det sies at slik funksjonalitet ennå ikke er tilgjengelig i spillere innebygd i nettlesere og derfor implementert gjennom JS-spillere som et tillegg. For å gjøre dette, koble til et JS-bibliotek (js-spiller), som tar kontroll over HTML5-video- og lydobjektet og utfører stylingen. Slike JS-spillere for å vise forhåndsvisninger av videorammer bruker ikke-standardiserte WEBVTT-filer fra taggen for å overføre URL-ene til forhåndsvisningsbilder gjennom den.

En WebVTT-fil er en vanlig tekstfil med en .vtt-utvidelse der det, i form av en linje-for-linje liste, skrives tidsstempler med start- og sluttider og tekstmeldinger for utdata til disse taggene. Du kan koble flere WebVTT-filer med tekst på forskjellige språk til beholderen. For hvert språk du må lage egen fil og koble hver enkelt via en tag. Tagger må settes inn i beholderen etter alle tagger, men før HTML5-videofeilmeldinger. Taggen med undertekstfilen på standardspråket må plasseres først blant taggene i gjeldende beholder.

En WEBVTT-fil kan inneholde ett eller flere tidsstempler. Filen begynner med ordet WEBVTT. Blanke linjer separate tidsstempler med tilhørende tekst og attributter. Teksten kan inneholde HTML-elementer og CSS-oppmerking. En ID for det kan plasseres foran et tidsstempel for å referere til det ved hjelp av spesielle uttrykk. Alle disse detaljene er beskrevet i WEBVTT-standarden. spesifiserer sportypen og kan ha følgende verdier:

• undertekster - undertekster i form av tekst som vises over videoen. For filen som spilles av, kan du stille inn undertekster på forskjellige språk for å gi deres valg i spilleren, hvis den støtter det. I de fleste tilfeller brukes denne typen ettersom den støttes av de fleste nettlesere.
• bildetekster – bildetekster i form av tekst og lyd som vises over videoen. Ligner på undertekster, men i tillegg til tekst kan de inkludere lydeffekter og annen lydinformasjon.
• kapitler - kapitler som vises i tekst som en listemeny og er beregnet for rask navigering gjennom mediefilen.
• beskrivelser - beskrivelse, dette tekstfiler med en videobeskrivelse for å spille dem av i skjermleser.
• metadata - metadata for å sende js-skript.

src-attributtet til taggen spesifiserer URL-en til sporfilen med tilleggsinformasjon. Filen vedlagt taggen har WebVTT-formatet og .vtt-utvidelsen.

srclang-attributtet til taggen spesifiserer språket til sporet via språkkoden. For russisk vil det være lik "ru", for engelsk "en".

Taggens etikettattributt spesifiserer spornavnet som skal vises i spilleren. Hvis attributtet ikke er angitt, vil nettleseren vise tjenestenavnet.

Standardattributtet til taggen spesifiserer valget av dette sporet som standard hvis det er andre spor i videobeholderen. Bare én av flere tagger kan ha et standardattributt. Det er bedre å plassere standardsporet først blant andre tilkoblede spor.

Eksempel på tagger: Dette spørsmålet dukker opp veldig ofte, så jeg bestemte meg for å vie en egen artikkel til det i leksjonene. Siden HTML ikke har en universell teknologi for å spille av lyd for alle nettlesere, foreslår jeg at du laster ned lydspillerfilen for å løse dette problemet, slik det gjøres på de fleste nettsteder. Vi gjør alt steg for steg:

1. På hostingen der nettstedet ditt er, i rotkatalogen (mappen der indeksfilen er), oppretter du lydmappen. I fremtiden vil du plassere alle lydfiler i den.

3. Velg nå nødvendige filer, bedre i mp3-format. Opprett en lydmappe i roten av nettstedet og last dem opp.

4. Alt som gjenstår er å sette inn spillerens tilkoblingskode. Den passer for alle nettsteder. På rett sted trenger du bare å angi banen til spillerfilen og lydfilen, og erstatte ordene ditt_domene og lydfilnavn:

Og alt er klart! Du kan også se på arbeidseksemplet.

Hvordan installere bakgrunnsmusikk i html bruker jeg funksjonene til HTML og nettleseren, du kan også sette inn bakgrunnsmusikk på siden. Du trenger en lydfil nødvendig format: WAV, AU, MIDI eller MP3. Du kan bruke hvilken som helst fil med den angitte filtypen som eksempel.

Den første måten er embed-taggen. Embed-elementet brukes til å laste og vise objekter (for eksempel videofiler, flash-filmer, noen lydfiler osv.) som nettleseren i utgangspunktet ikke forstår.

Syntaksen er ganske enkel:

En lukkebrikke er ikke nødvendig.

La oss nå se på et eksempel på en post med attributter, og nedenfor med deres dekoding:

Bygg inn tag-attributter for å spille av lyd i html
bredde – panelbredde i piksler (eller prosent)
høyde – panelhøyde i piksler (eller prosent)
juster - plassering av panelet i forhold til teksten, mulige verdier er venstre, høyre, senter
skjult - lar deg skjule panelet, attributtverdier: true - panelet er skjult, usant - panelet er synlig (standardverdi)
autostart - sant - spilleren starter automatisk når siden laster, usant - venter på at avspillingsknappen skal trykkes
loop - cycle, true - sporet spilles i en sirkel, og når verdi falsk- bare en gang

Andre vei. Veldig gammel, men også praktisk) Legg til melodien i samme mappe (katalog) der filen din ligger, og skriv følgende kode i brødteksten:

Som et resultat, etter å ha lastet inn siden, vil melodien du spesifiserte i bgsound-taggen høres. La oss nå vurdere bedre egenskaper stikkord:

src - bane til lydfilen din
loop - hvor mange ganger for å gjenta melodien (hvis -1, så gjentas uendelig)
balanse - stereobalanseverdi (fra -10 000 til 10 000)
volum - melodiavspillingsvolum, der 0 er maksimum, og -10000 er minimum.

Det vil imidlertid ikke være mulig å kontrollere spilleren på noen måte - hver gang siden oppdateres, vil sporet spilles av igjen.

Etter å ha beskrevet metoden for å sette inn bakgrunnsmusikk, vil jeg fraråde deg fra dette, siden de fleste brukere som regel allerede lytter til musikk når de besøker forskjellige nettsteder. Derfor kan medfølgende musikk bare tvinge ham til å lukke fanen med nettstedet.

Sette inn lyd og musikk i HTML5 - lydkode
lyd - paret tag som definerer bakgrunnslyd, musikk eller annen lydstrøm på nettstedet.

Audio tag-attributter

autoplay - filen spilles av umiddelbart når siden er lastet (ligner på bakgrunnsmusikk)
kontroller – vis spillerens kontrollpanel i nettleseren
loop - spiller av filen igjen etter at den er ferdig
forhåndslast – lydfilen vil bli lastet sammen med siden som lastes inn
src - bane til lydfilen (mp3 eller ogg)

Eksempelkode med lydmerke

Lydmerke

Lyd i HTML 5

Lydkoden støttes ikke av nettleseren din.
Last ned musikk.

Beskrivelse

Legger til, spiller av og administrerer lydinnstillinger på en nettside. Banen til filen angis via src-attributtet eller en undertag. Du kan skrive tekst inne i beholderen som skal vises i nettlesere som ikke fungerer med denne taggen.

Listen over kodeker som støttes av nettlesere er begrenset og er gitt i tabell. 1.

Bord 1. Kodeker og nettlesere

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

For universell avspilling i spesifiserte nettlesere, kodes lyd ved hjelp av forskjellige kodeker og filer legges til samtidig gjennom taggen.

Syntaksattributter Lyden begynner å spille umiddelbart etter at siden er lastet inn. Legger til et kontrollpanel til en lydfil. Gjentar lyden fra begynnelsen etter at den er slutt. Brukes til å laste ned en fil sammen med å laste en nettside. Angir banen til filen som spilles av. Avsluttende tag

Obligatorisk.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

lyd

Alexander Klimenkov - fjorten

Lydkoden støttes ikke av nettleseren din. Last ned musikk.

Eksempelresultat i Opera nettleser vist i fig. 1.

Ris. 1. Spill av en lydfil

Nettlesere

Kontroller for lydavspilling varierer i utseende mellom nettlesere, men de grunnleggende elementene er de samme. Dette er avspillings-/pauseknappen, sporlengde, forløpt og total spilletid og volumnivå.

Med bruken av raske nok Internett-tilkoblinger var Flash det eneste verktøyet for å spille av lyder på nettsteder. Men HTML5 vil fundamentalt endre måten lyder spilles på på Internett. I denne artikkelen vil jeg fortelle deg i detalj om hvordan du bruker taggen på nettstedene dine.

Vi bruker den til å sette inn en lydfil på siden enkleste eksempelet ved å bruke taggen laster den ned mp3-filen og spiller den av. Legg merke til autopaly-attributtet, som brukes til å spille av lyd automatisk. Du bør imidlertid ikke spille av lyder automatisk på siden, da dette vil irritere brukere. Spille av en lyd på en loop Vil du spille en lyd i loop? Løkkeattributtet vil hjelpe deg med dette. Men igjen, du bør ikke overbruke autoplay og loop-avspilling hvis du ikke vil at brukeren skal forlate nettstedet for tidlig. Vise kontroller I stedet for at lyder spilles av automatisk, noe som definitivt er en dårlig praksis, bør du tillate at noen kontroller vises i nettleseren, for eksempel volum- og spill (pause)-knapper. Dette er enkelt å gjøre ved å legge til attributtet kontroller. Ulike filformater Taggen støttes av de fleste moderne nettlesere, men problemet er det forskjellige nettlesere støtter forskjellige filformater. Safari, for eksempel, kan spille MP3-filer, men Firefox kan ikke, og spiller OGG-filer i stedet. Løsningen på dette problemet er å bruke begge formatene slik at alle besøkende kan høre lyden, uansett hvilken nettleser de bruker. Spesifisere MIME-typen for filer Når du bruker forskjellige filformater, er det en god praksis å spesifisere MIME-typen for hver fil for å hjelpe nettleseren med å lokalisere filen den støtter. Dette kan enkelt gjøres ved å bruke type-attributtet. For eldre nettlesere Hva om den besøkende bruker IE6 eller en annen forhistorisk nettleser som ikke støtter taggen? Det er enkelt: nedenfor er koden som viser en melding for nettlesere som ikke støtter taggen. Nettleseren din støtter ikke lydkoden! Filbuffring Når du spiller av store filer, kan filbuffring brukes. Du kan bruke preload-attributtet for dette. Det kan ta 3 verdier:

• ingen - hvis du ikke vil bruke filbufferen;
• auto - hvis du vil at nettleseren skal bufre hele filen;
• metadata - for kun å laste inn tjenesteinformasjon (lydvarighet osv.).

Kontrollere avspilling via JavaScript Det er veldig enkelt å kontrollere HTML5-lydspilleren via JavaScript. Følgende eksempel viser hvordan bruker JavaScript du kan bygge din egen grunnleggende elementer Lydspillerkontroller: Spill Pause Volum + Volum -

Det var alt for i dag.
Jeg håper denne artikkelen hjalp deg med å forstå grunnleggende evner HTML5-tag.

Inntil nylig var det ikke så lett å bygge inn lyd på en nettside. Generelt er det noen som tilbyr smartere og bedre implementeringer, men de fleste metoder begrenser deg til å ha en bestemt nettleser og visse plugins.

Med fremveksten av Flash-teknologi på markedet har denne oppgaven blitt mye enklere, siden Flash-pluginen lar deg legge inn hvilken som helst animasjon eller lyd på en side, og teknologien støttes av de fleste nettlesere. Men etterspørselen etter Flash forsvinner gradvis etter lanseringen av innovative enheter fra Apple: iPhone og iPad. Som du vet, utstyrer ikke Apple grunnleggende enhetene sine Flash-støtte, og antallet produktbrukere vokser raskt.

Kort sagt, det er litt forvirring her.

Heldigvis har HTML5 gjort livet mye enklere for utviklere, ettersom teknologien inkluderer et lydelement. Dette elementet lar deg legge inn lydfiler på en hvilken som helst nettside, samt implementere et kontrollpanel ved hjelp av javascript. Enda viktigere er at teknologien ikke krever ekstra plugins, og støttes i nesten alle nettlesere, med unntak av tidlige versjoner (vi snakker om nettleserstøtte senere!).

I vår artikkel i dag vil vi fortelle deg hvordan du kan legge inn lyder ved hjelp av lydelementet. Vi vil også lære hvordan du kontrollerer avspillingsprosessen ved hjelp av javascript, og vil også prøve å fortelle deg om teknologistøtte blant nettlesere.

HTML5 lydelement

Dette elementet er ekstremt enkelt å bruke. I vårt eksempel i dag skal vi bygge inn Bing Crosbys "White Christmas":

Det er ikke mye forklaring som trengs her. På samme måte som du setter inn et bilde ved hjelp av img-taggen, kan du sette inn lyd ved å bruke lyd-taggen på samme måte.

Støtte for flere nettlesere

Eksempelet ovenfor vil neppe fungere i alle nettlesere. Det er her filformatet kommer inn i bildet.

Noen nettlesere kan spille av .mp3-filer, men ikke .ogg-filer, mens andre gjør det motsatte. De fleste nettlesere kan spille av .wav-filer, men på grunn av den store størrelsen er den upassende å bruke som lyd for et nettsted.

Her er en tabell over nettlesere som viser støtte for lydformater:

Hvilke formater støtter nettleseren din? Bestem dette ved.

Som du kan se i tabellen, vil det mest optimale implementeringsalternativet være å koble til begge filformatene.
For å gjøre dette kan du legge til flere kildeelementer til lydelementet, og i dem spesifisere banene til de forskjellige formatene. Nettleseren vil spille av den første filen den støtter. Her er et eksempel:

Selvfølgelig betyr dette at du må lage både en Mp3- og en OGG-versjon av din lydfil(her kommer deg til hjelp), men dette er den eneste måten å organisere støtte på tvers av nettlesere.

Tidlige versjoner av Internet Explorer (versjon 7 og 8) støtter ikke lydelementet i det hele tatt. Men senere i artikkelen vil vi se på hvordan du kan omgå dette problemet.

Automatisk lydavspilling

Selv om koden ovenfor legger inn lyd, spiller den ikke av den. Hvis vi vil at lyden skal spilles automatisk når siden lastes, må vi legge til autoplay-attributtet til elementet:

Legger til kontrollknapper

Selv om automatisk avspilling kan være nyttig, er det i mange tilfeller irriterende eller helt upassende. Derfor kan vi installere ekstra kontrollknapper for lydelementer slik at brukeren kan bestemme selv:

Dette legger til en horisontal linje med en pause/spill-knapp, en tidslinje med en glidebryter og en volumkontroll. Alt er omtrent det samme som du kan se på spilleren på Youtube.

Det er viktig å huske at kontrollpanelet vil variere avhengig av nettlesere. For eksempel vil ikke nettleseren på en iPhone ha en volumglidebryter fordi enheten har separate knapper for å kontrollere lydnivåer.

Løkkeavspilling

Å legge til et loop-attributt til lydelementet vil føre til at lyden spilles av på ubestemt tid.

Dette kan være nyttig for å slå på bakgrunnsmusikk eller lydeffekter i spill.

Du kan også bruke preload-attributtet, som vil fortelle nettleseren når og hvor en spesifikk lydfil skal lastes.
Forhåndsinnlasting av lydfilen betyr at lyden kan spilles av umiddelbart når brukeren trykker på play.

Det er flere betydninger for denne egenskapen:

"ingen" - nettleseren skal ikke pålegge den nedlastede filen. De. Hvis du er sikker på at de fleste brukere ikke vil spille av filen, bruk dette alternativet. Eller bruk den når du trenger å spare så mye serverbåndbredde som mulig.

"metadata" - parameteren ligner ingen, bortsett fra at du varsler nettleseren om muligheten for å laste inn metadata, for eksempel varigheten av lydsporet, men ikke selve lydfilen.

"auto" - du lar nettleseren laste ned selve lydfilen.

For eksempel:

Husk at forhåndsinnlasting bare er en bekvemmelighetsfunksjon, siden noen nettlesere ganske enkelt ignorerer denne kommandoen og begynner å gjøre hva de vil.

Avspillingskontroll via javascript

Hva er praktisk i javascript-elementer– Dette er fordi de er enkle å administrere ved hjelp av javascript. Lydelementet tilbyr mange praktiske parametere og kontrollmetoder:

Play() – start avspilling fra gjeldende posisjon;

Pause() – stopp avspilling ved gjeldende posisjon;

canPlayType(type) – avgjør om nettleseren støtter avspilling av denne typen media;

varighet – varigheten av sporet i sekunder;

currentTime – gjeldende posisjon i sekunder. Du kan også installere denne parameteren for å flytte avspillingsposisjonen.

Ved å bruke alternativene og metodene som er foreslått ovenfor, kan vi lage noen grunnleggende kontrollknapper:

Spille musikk
Sett musikk på pause
Stopp musikk
Se demo: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Støtte for tidligere versjoner av Internet Explorer

I de fleste tilfeller vil brukerens nettleser støtte HTML5-elementet. Men dessverre støtter ikke IE-nettlesere versjon 7 og til og med 8 dette elementet (selv om versjon 9 allerede har støtte). Det er viktig å vurdere en tilbakestillingsversjon for brukere som ble værende i 2008.

En veldig grov, men effektiv metode er å bruke spesielle kommentarer for å fremheve nettleserdataene, og gi den en objektpeker til lydfilen. Dermed vil nettleseren ofte vise en innebygd kontroller som lar brukere spille av, pause eller spole tilbake musikk på en nesten HTML5-lydlignende måte. Her er et eksempel:

Spille musikk
Sett musikk på pause
Stopp musikk

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

Eksemplet ovenfor vil fungere i alle nettlesere som støtter HTML5 Audio, og vil også fungere i IE versjon 7 og 8. Ved hjelp av kommentarer omdirigerer vi knappekontrollene direkte til lydfilen.

En annen måte å rulle tilbake på er å bygge inn en Flash-spiller på siden. Her, som snakker om tilbakerulling i form av en Flash-spiller.

Konklusjon

I vår artikkel i dag lærte vi hvordan du bygger inn lydfiler ved hjelp av HTML5. Ikke bare er lydelementet enkelt å bruke, men vi kan også tilpasse det og kontrollere avspilling via javascript.

Vil du lære mer om lydelementet i HTML5? Så sjekk ut.

Selv om støtten for tiden lider i enkelte nettlesere (som eldre versjoner av IE), kan du enkelt tilbakestille dem om nødvendig, noe som blir mindre og mindre vanlig i disse dager.