andew

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

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

11937

Rakstā ir aprakstīta audio un video HTML5 konteinera struktūra, video, audio, avota, celiņa tagi un to atribūti ar iespējamām vērtībām. Tiek nodrošinātas HTML veidnes un multivides failu atskaņošanas ieviešanas piemēri, pamatojoties uz pārlūkprogrammā iebūvētajām iespējām. Tiek parādīts savienojums ar subtitru, virsrakstu, satura rādītāja video teksta celiņu, izmantojot WEBVTT formāta failus ar piemēriem. Tiek piedāvātas HTML5 koda veidnes ar schema.org mikromarķējumu audio un video. Ir norādīti galvenie audio un video failu tīmekļa formāti ar to MIME veidiem un rīki video un audio konvertēšanai šajos formātos.

HTML5 satur jaunas funkcijas, kas ļauj atskaņot audio un video failus tieši pārlūkprogrammā, neizmantojot trešo pušu programmas. Pagaidām, neskatoties uz to, ka HTML5 vairs nav jaunums, joprojām pastāv domstarpības par to, kā pārlūkprogrammas apstrādā video un audio tagus un kā tiek attēlots pats atskaņotājs. Daži cilvēki to dara labāk katru reizi jauna versija, citi joprojām atpaliek. Pasaules mērogā tendence ir tāda, ka pārlūkprogrammas nodrošinās arvien vairāk funkcionalitātes multivides failu atskaņošanai.

Ekrāna apraide: veidņu izmantošanas piemērs

Lejupielādēt video

Ekrāna apraide: veidņu izmantošanas piemēri no raksta - vietnes

HTML5 video un audio ir standarts, kas attīstās, un tas nav saistīts ne ar vienu audio vai video formātu, tāpēc starp pārlūkprogrammām ir atšķirības to atbalsta ziņā. formātos audio un video faili. Šo atšķirību tagad kompensē fakts, ka tie kodē oriģinālais fails vairākus dažādus kodekus un savienojiet visas šīs failu versijas ar tagiem vai caur ligzdotiem tagiem< source src=" URL">. Tomēr pārlūkprogrammu atbalstīto audio un video failu formātu vidū parādās līderi. Videoklipiem tas, protams, ir mp4 formāts (H.264), un audio formātam tas ir mp3 un m4a formāts. Tagad, iespējams, visas pārlūkprogrammas spēj atskaņot šo formātu failus. Tāpat Firefox pārlūkprogrammas, Chrome un Opera ir vienojušās atbalstīt WEBM standartu kā kopīgu video formātu. Manuprāt, optimālais variants HTML5 video un audio izmantošanai tagad būtu shēma, kuras pamatā ir viena multivides faila izmantošana mp4 formātā ( H.264) video un m4a audio un JS HTML5 atskaņotājam. Audio vai video konteineram ir pievienots tikai viens fails norādītajā formātā. Mūsdienās lielākā daļa pārlūkprogrammu spēj atskaņot mp4 formātu. Pievienotā JS bibliotēka veidos pārlūkprogrammā iebūvēto atskaņotāja stilu. Ja pārlūkprogramma neatbalsta mp4 / m4a formātu, tad JS atskaņotājs šajā gadījumā ievieš Flash savienojums atskaņotājs multivides faila atskaņošanai. Ņemot vērā, ka mp4 formāts ir kļuvis ļoti populārs, var cerēt uz mazu problēmu iespējamību ar tā atskaņošanu pārlūkprogrammās. Šai shēmai ir nepieciešams tikai viens multivides fails norādītajā formātā, kas ietaupa vietu diskā un resursus failu apstrādei. Arī šāda shēma būs stratēģiski pareizāka, jo tendence ir tāda, ka pārlūkprogrammas arvien labāk ievieš HTML5 video un audio.

Lai norādītu HTML5 atskaņotājam atskaņojamo failu, papildus faila URL ir jānodod arī faila MIME tips, lai pārlūkprogramma saprastu, kurš kodeks tai ir jāizmanto. Tālāk esošajā tabulā ir uzskaitīti visizplatītākie failu formāti un to MIME veidi.

Failu formāti un to MIME veidi Multivides faili Mime tipa paplašinājumi

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

Audio un video kodēšanas rīki

Lai kodētu video un audio failus iepriekš minētajos tīmekļa formātos, varat izmantot atvērta programma, kas atbalsta audio un video failu konvertēšanu galvenajos formātos, kas izplatīti tīmeklī ( MP4, WebM, Ogg Theora, MP3 utt.). Miro Video Converter ir pieejams dažādiem operētājsistēmas- Windows, Mac un Linux, un tas ir grafisks apvalks konsoles utilītprogrammām un ir ērti lietojams tīmekļa serveris lai automātiski apstrādātu lejupielādēto video un audio.

: HTML5 audio piemēra kods ar schema.org mikro marķējumu: audio galvene

Jūsu pārlūkprogramma neatbalsta HTML5 audio.

Lejupielādēt audio

Šādi izskatīsies no koda iegūtie mikro marķējuma dati iepriekš aprakstītajai audio veidnei.

Audioobject itemType = http://schema.org/AudioObject name = Audio nosaukuma apraksts = Audio apraksts... isfamilyfriendly = true encodingformat = mp3 ilgums = PT04M59S augšupielādes datums = 2015-12-31 image = Pilns URL uz image.jpg alternatename = Alternatīva virsraksts audio contenturl href = URL uz failu.mp3 text = Lejupielādēt audio autora persona itemType = http://schema.org/Person url href = URL teksts = Autora vārds = Autora vārda attēls = Pilns vietrādis URL personai.jpg

Minimālajā audio marķējumā saskaņā ar schema.org ir jāietver itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . Pārējie rekvizīti nav obligāti.

Standarta HTML5 taga lietojuma piemērs:

Demonstrācijā es tagam izmantoju CSS stilus, izmantojot klases atribūtu, padarot video apgabala platumu dinamisku atkarībā no ekrāna izmēra. Spēlētājs pats regulē augstumu. Mēģiniet mainīt pārlūkprogrammas loga izmēru, lai redzētu, kā tas darbojas. Tāpēc šīs demonstrācijas koda avotā tagam nav platuma un augstuma atribūtu, tie tiek aizstāti ar CSS stiliem. Bet šī metode nav parādīta veidnes kodu sarakstā, jo jau ir īpaša lieta.

HTML5 video piemēra kods ar schema.org mikromarķējumu: videoklipa nosaukums

Skatieties pakalpojumā YouTube

Jūsu pārlūkprogramma neatbalsta HTML5 video.

Lejupielādēt video: Video nosaukums

Šādi izskatīsies no koda iegūtie mikro marķējuma dati iepriekš aprakstītajai video veidnei.

Videoobject itemType = http://schema.org/VideoObject name = Videoklipa nosaukuma sīktēla imageobject itemType = http://schema.org/ImageObject contenturl = URL uz video-thumbnail.jpg|png platums = 100 augstums = 100 ilgums = PT14M59S ģimenei draudzīgs = patiesais augšupielādes datums = 2015-12-31 apraksts = Īss apraksts video... url href = URL uz failu.mp4 text = Video nosaukums autora persona itemType = http://schema.org/Person url href = URL autora tīmekļa lapas teksts = autora vārds = autora vārds image = Pilns URL uz autoru.jpg thumbnailurl = URL uz failu.jpg|png

Minimums nepieciešams Meklētājprogrammām video iezīmēšanā saskaņā ar schema.org ir jāiekļauj visi parauga kodā redzamie itemprop rekvizīti, izņemot bloku itemprop ="author", kas meklētājprogrammām nav obligāts un kuru var izdzēst, ja nav datu. lai to aizpildītu. Video sīktēlam Yandex pieprasa norādīt mikro marķējumu saskaņā ar schema.org kā itemprop ="thumbnail" ImageObject formā un Google ir jānorāda itemprop ="thumbnailUrl" , tāpēc video sīktēla fails ir jāievieto divreiz, un tāpēc otrais img tags saņēma displeju: none style, lai tas netiktu parādīts pārlūkprogrammā. Tā vietā, lai izmantotu img tagu ar display:none, varat nodot šo rekvizītu saites tagam, izmantojot atribūtu href. Turklāt, neskatoties uz to, ka mikro marķējumu var pārsūtīt, izmantojot meta un saišu tagus, kas netiek rādīti lietotājam, tomēr ieteicams, ja iespējams, pievienot mikro marķējumu galvenokārt tagiem, kas tiks parādīti lietotājam. Schema.org mikro marķējuma validāciju var veikt, izmantojot šīs saites: , . Mikro marķējuma izmantošanas galvenā priekšrocība ir šāda satura ērtība meklēšanas robotiem un sociālo tīklu robotiem. Šie roboti iegūst marķētos datus un apkopo tos. Līdz ar to uzlabojas mikrouzcenojumu izmantošana SEO vietni un atvieglo datu automātisku izplatīšanu uz sociālajos tīklos. Detalizēts Schema.org mikromarķējuma apraksts videoklipiem, kas vietnē ir atzīmēti ar VideoObjec t shēmu. Tāpat ir vērts atzīmēt, ka gadījumos, kad ievietojat videoklipu savā vietnē nevis tieši, bet izmantojot video mitināšanas logrīkus Yandex.Video vai YouTube, varat pievienot savu HTML koda bloku ar videoklipa aprakstu zem logrīka koda bloka. un iegult Schema.org marķējumu šim videoklipam. Tajā pašā laikā kā URL parametrs - saite uz video nenorādiet tiešu saiti uz statisku failu, bet norādiet saiti, kas saņemta no video mitināšanas. Lai gan Schema.org specifikācijā teikts, ka saitei ir jābūt uz tiešu failu, meklētājprogrammas apstrādā arī saites uz videoklipiem no video mitināšanas ( skatiet piemērus Yandex tīmekļa vietnes sadaļā Tīmekļa pārzinis), neskatoties uz to, ka jūs nevarat lejupielādēt failu no šādas saites un nevarat to skatīt tieši savā lapas HTML5 multivides atskaņotājā, tikai video mitināšanas logrīkā.

Ja jūs saskaraties ar jautājumu, no kura mitināšanas lejupielādēt multivides audio un video failus, skatiet rakstu, kurā aprakstīta iespēja ievietot multivides failus tīmekļa lapā no Yandex Disk.

Atribūti un tagi:

Atribūti src , preload , autoplay , mediagroup , loop , muted , vadīklas ir kopīgi atribūti visiem multivides elementiem, tostarp tagiem un .

automātiskās atskaņošanas atribūts: vai nu

• Autoplay atribūts tiek norādīts pēc tā klātbūtnes tagā vai, un šim atribūtam nav jāiestata vērtība, pietiek ar tā klātbūtni. HTML redaktoriem, kuri rediģē elementa kodu, varat iestatīt šo atribūtu kā automātisku atskaņošanu ="autoplay", kas ir līdzvērtīga atribūta vienkāršai klātbūtnei. Autoplay atribūta klātbūtne liek pārlūkprogrammai sākt faila atskaņošanu tūlīt pēc tīmekļa lapas ielādes. Attiecīgi automātiskās atskaņošanas atribūts ignorē iepriekšējas ielādes atribūta vērtības, kas nosaka, kā videoklips tiek ielādēts atskaņotājā, jo videoklipam ir nekavējoties jāsāk atskaņot un tāpēc tas ir jāielādē. Pēc noklusējuma nav automātiskās atskaņošanas atribūta.

kontroles atribūts: vai nu vai

• Vadības atribūts liek pārlūkprogrammai parādīt atskaņotāja vadības paneli, kad lapa ir ielādēta, bet ieraksta atskaņošana nav sākta. Šis atribūts, tāpat kā automātiskās atskaņošanas atribūts, tiek norādīts tikai pēc tā klātbūtnes tagā vai, un tam nav nepieciešama vērtība, pietiek tikai ar tā klātbūtni. Pēc noklusējuma šī atribūta nav, t.i. Pirms atskaņošanas sākuma atskaņotājs nerāda vadības paneli. Kad fails tiek atskaņots, novietojot peles kursoru virs atskaņotāja apgabala, parādīsies vadības panelis.

cilpas atribūts: vai nu

• Cikla atribūts liek atskaņotājam atskaņot failu ciklā. Atribūtu nosaka tikai tā klātbūtne tagā vai, un tam nav parametru. Pēc noklusējuma nav cilpas atribūta.

priekšielādes atribūts:

• atribūts preload norāda faila ielādi kopā ar tīmekļa lapas ielādi un iegūst vienu no šīm trim vērtībām:
  • nav — nelejupielādējiet failu vienlaikus ar tīmekļa lapas ielādi. Tas nozīmē, ka fails sāks ielādēt atskaņotājā tikai pēc atskaņošanas pogas nospiešanas. Tas var būt noderīgi, lai paātrinātu lapas ielādi. Vērtība none ir iepriekšējas ielādes atribūta noklusējuma vērtība, tāpēc ir iespējams tagā vispār vai šajā gadījumā neievietot priekšielādes atribūtu.
  • metadati — neielādē failu kopā ar tīmekļa lapas ielādi, bet gan lejupielādē multivides faila metadatus.
  • auto - veiciet pilnu faila lejupielādi kopā ar tīmekļa lapas ielādi. Izmantojot šo opciju, pārlūkprogrammas automātiski ielādēs multivides failu kopā ar tīmekļa lapa y, taču tas netraucēs pašas lapas ielādei un tās renderēšanai pārlūkprogrammā. Ja tagā vai ir norādīts priekšielādēšanas ="" atribūts ar tukšu vērtību, tiks izmantota tā automātiskā vērtība.
  • Pirmsielādes atribūts tiks ignorēts, ja tiks izmantots automātiskās atskaņošanas atribūts.

src atribūts:

• taga atribūts src vai ļauj nekavējoties iestatīt ceļu uz multivides failu tagā. Ceļš var būt pilnīgs, norādot protokolu un domēnu, vai attiecībā pret pašreizējās vietnes sakni. Varat arī norādīt ceļu uz failu tagos, kas iegulti audio vai video konteinerā.< source src=" URL"> .

Video atzīmes plakāta atribūts:

• atribūts plakāts tiek izmantots tikai tagā un norāda attēla URL (gif, png, jpeg utt.), kas tiks rādīts, kamēr videoklips nav pieejams. Ja plakāta atribūts nav iestatīts, pārlūkprogrammas atskaņotājs mēģinās parādīt pirmo videoklipa kadru.

Video atzīmes platuma un augstuma atribūti:

• platuma un augstuma atribūti attiecas tikai uz tagu un iestata attiecīgi video atskaņotāja atskaņošanas apgabala platumu un augstumu. Vērtībai ir jābūt pozitīvs vesels skaitlis, kas norādīts pikseļos vai procentos. Šo atribūtu iestatīšana ietekmē video displeja izmēru, bet nemaina video malu attiecību. Videoklips pielāgosies norādītajiem izmēriem, saglabājot tā proporcijas. Ja norādītie izmēri neatbilst video proporcijām, video augšpusē un/vai sānu malās būs tumšas svītras. Tāpēc, iestatot šos parametrus, ieteicams izvēlēties tādu pašu attiecību kā atskaņojamajam video vai iestatīt tikai platumu, un atskaņotājs pats pielāgos augstumu.
• Ja kāds no šiem parametriem vai abi nav norādīti, nenorādītais(-ie) parametrs(-i) tiks ņemti no atbilstošā attēla izmēra, kas norādīts plakāta atribūtā.
• Ja trūkst plakāta atribūta, šie parametri tiks iestatīti šādi: platumam = 300 pikseļi un augstumam = 150 pikseļi. Lai nerēķinātu un nesaskaņotu video laukuma izmērus pēc paša klipa proporcijām, ieteiktu iestatīt tikai vienu platuma parametru, tad atskaņošanas apgabala augstums (augstums) tiks izvēlēts automātiski, vadoties pēc video proporcijām. .
• Turklāt var ietekmēt HTML5 atskaņotāja izmēru un dizainu CSS īpašības attiecas uz atzīmēm vai .

izslēgts atribūts: vai nu vai

• Izslēgtais atribūts HTML5 atskaņotājā iestata tā klātbūtni tagos vai skaņu uz izslēgtu stāvokli. Pēc noklusējuma atribūta trūkst.

crossorigin atribūts:

• Atribūts crossorigin liek pārlūkprogrammai veikt CORS pieprasījumu šim elementam. Pēc noklusējuma atribūta nav, kas nozīmē, ka CORS pieprasījumus neizmanto vispār. Ja atribūts ir, iespējamās vērtības ir anonīmas un lietošanas akreditācijas dati . CORS () ir tehnoloģija mūsdienu pārlūkprogrammās, kas ļauj pārvaldīt atļaujas resursu ielādei pašreizējā tīmekļa lapā no citiem domēniem, kas nav pašreizējās lapas domēns. Pārlūka atbalsts CORS standartam ļauj ieviest drošu starpdomēnu datu apmaiņu, izpildot īpašu pieprasījumu (galveni) pašreizējās lapas domēnam, lai noteiktu, vai šajā lapā ir atļauts ielādēt resursus no cita noteikta domēna. Atbildot uz šādu pieprasījumu, serverim jānorāda domēni, no kuriem ir atļauta resursu lejupielāde.

multivides grupas atribūts: div ( margin: 1em auto; pozīcija: relatīvā; platums: 400 pikseļi; augstums: 300 pikseļi; ) video ( pozīcija; absolūtais; apakšā: 0; pa labi: 0; ) video:first-child ( platums: 100%; augstums : 100% ) video: pēdējais bērns ( platums: 30%; )

• Mediagroup atribūts ļauj apvienot vairāku multivides failu vadību vienā MediaController, izveidojot multivides failu grupu dažādās lapas vietās. Šī grupa tiks pārvaldīta vienlaikus visiem tajā iekļautajiem failiem. Tas ir ērti, piemēram, ja nepieciešams atskaņot un vadīt vienu un to pašu videoklipu vienlaikus dažādās lapas vietās ar dažādiem subtitriem vai dažādiem videoklipiem.

Atzīmes un nepieciešama beigu atzīme.

Gadījumos, kad pārlūkprogramma neatbalsta HTML5 un tagus, kas tagad ir ļoti reti, pirms konteinera beigu taga tiek rakstīta īsziņa un parasti tiek pievienota saite faila lejupielādei. Ja pārlūkprogrammā iebūvēto HTML5 atskaņotāju papildus kontrolē JS bibliotēka (JS player), tad lielākā daļa no tiem pievieno flash atskaņotāju, ja pārlūkprogrammā nav iespējams atskaņot HTML5 video un audio, jo pārlūkprogramma neatbalsta video un audio. tagus vai multivides faila formātu.

Tags:

Atskaņotā faila ceļu var norādīt arī, izmantojot tagu ar src atribūtu, kas ievietots tagos vai. Tagam nav noslēguma taga.

Vairumā gadījumu tags izskatās šādi:

un tajā vienmēr ir atribūts src un type, kam vairumā gadījumu ir tikai MIME tips.

Tagu atribūti:

• taga atribūts src= "URL" norāda multivides faila URL. Ceļš var būt pilnīgs, norādot protokolu un domēnu, vai attiecībā pret vietnes sakni.
• taga atribūts type="MIME-type" vai pilnīgāk type="MIME-type; codecs="codec"" norāda faila MIME veidu un kodeku. Audio gadījumā pietiek norādīt MIME veidu, piemēram, .mp3 - type="audio/mpeg". Lai gan saskaņā ar video specifikāciju, atribūtā type ir jānorāda arī kodeks, taču tagad tie bieži norāda tikai MIME veidu bez kodeka, atstājot to pārlūkprogrammu ziņā.
• Taga multivides atribūts ="all|braille|handheld|print|screen|speech|projection|tty|tv" norāda ierīces veidu, kurā fails jāatskaņo. Noklusējuma vērtība ir viss, tāpēc vairumā gadījumu šis atribūts vispār nav norādīts, ja vien nevēlaties īpaši identificēt atskaņošanas ierīci.

Tags:

HTML5 video atskaņotājā ir iespējams arī parādīt papildu ierakstu ar tādu informāciju kā subtitri, paraksti, nodaļas, apraksti (vēl netiek atbalstīti) un metadati (vēl netiek atbalstīti). Šī funkcija tiek ieviesta, pievienojot tagus ar atbilstošiem atribūtiem.

- nav noslēguma atzīmes.

Tags ļauj pievienot videoklipam papildu ierakstu failus īpašā WebVTT (Web Video Text Tracks Format) formātā, kas norāda izvadi isziņas ar laika norādi uz video failu. WebVTT standarts ne tikai atbalsta īsziņu izvadi, bet arī nodrošina tās iespējas CSS stils un izvietošanas iespējas video skatīšanās apgabalā. Pašlaik WebVTT faili galvenokārt tiek izmantoti, lai videoklipiem pievienotu teksta subtitrus, ko atbalsta gandrīz visas pārlūkprogrammas. Pārējās WebVTT standarta iespējas pašas pārlūkprogrammas vēl nav pilnībā ieviestas, tāpēc pilnīgākai WebVTT lietošanai labāk izmantot JS atskaņotājus. Tāpat WebVTT failus JS atskaņotāji var izmantot nestandarta veidā, lai pārsūtītu uz JS atskaņotāju papildu datus, piemēram, video kadru attēlu priekšskatījumu URL. Jautājumā par to, kā parādīt video kadru priekšskatījumus atskaņotāja attīšanas skalā (Scrub Bar Thumbnails), kā tas tiek darīts video mitināšanas vietnēs. Te gan jāsaka, ka šāda funkcionalitāte vēl nav pieejama pārlūkprogrammās iebūvētajos atskaņotājos un tāpēc tiek ieviesta caur JS atskaņotājiem kā papildinājums. Lai to izdarītu, pievienojiet JS bibliotēku (js atskaņotāju), kas pārņem HTML5 video un audio objekta kontroli un veic tā stilu. Šādi JS atskaņotāji video kadru priekšskatījumu parādīšanai nestandarta izmanto WEBVTT failus no taga, lai caur to pārraidītu priekšskatījuma attēlu vietrāžus URL.

WebVTT fails ir parasts teksta fails ar paplašinājumu .vtt, kurā rindas pa rindiņai saraksta veidā tiek ierakstīti laika zīmogi ar sākuma un beigu laiku un īsziņas, kas paredzētas izvadīšanai uz šiem tagiem. Konteineram varat pievienot vairākus WebVTT failus ar tekstu dažādās valodās. Katrai valodai, kas jāizveido atsevišķu failu un savienojiet katru, izmantojot tagu. Tagi konteinerā ir jāievieto aiz visiem tagiem, bet pirms HTML5 video kļūdu ziņojumiem. Tags ar subtitru failu noklusējuma valodā ir jāievieto pirmajā vietā starp tagiem pašreizējā konteinerā.

WEBVTT failā var būt viens vai vairāki laikspiedoli. Fails sākas ar vārdu WEBVTT. Tukšas rindas atsevišķi laikspiedoli ar tiem saistīto tekstu un atribūtiem. Teksts var saturēt HTML elementi un CSS marķējums. Tā ID var ievietot pirms laikspiedola, lai uz to atsauktos, izmantojot īpašas izteiksmes. Visas šīs detaļas ir aprakstītas WEBVTT standartā. norāda celiņa veidu un var izmantot šādas vērtības:

• subtitri — subtitri teksta veidā, kas tiek rādīts virs videoklipa. Atskaņojamajam failam varat iestatīt subtitrus dažādās valodās, lai nodrošinātu to izvēli atskaņotājā, ja tas to atbalsta. Vairumā gadījumu šis veids tiek izmantots, jo to atbalsta lielākā daļa pārlūkprogrammu.
• subtitri — paraksti teksta un skaņas veidā, kas tiek rādīti virs videoklipa. Līdzīgi subtitriem, taču papildus tekstam tie var ietvert skaņas efektus un citu audio informāciju.
• nodaļas - nodaļas, kas tiek parādītas tekstā kā saraksta izvēlne un ir paredzētas ātrai navigācijai multivides failā.
• apraksti - apraksts, šis teksta faili ar video aprakstu to atskaņošanai ekrāna lasītājā.
• metadati — metadati js skriptu nodošanai.

Taga atribūts src norāda URL maršruta failam ar Papildus informācija. Tagam pievienotajam failam ir WebVTT formāts un paplašinājums .vtt.

Taga atribūts srclang norāda celiņa valodu, izmantojot valodas kodu. Krievu valodā tas būs vienāds ar "ru", angļu valodā - "en".

Tagas etiķetes atribūts norāda celiņa nosaukumu, kas tiks parādīts atskaņotājā. Ja atribūts nav iestatīts, pārlūkprogramma parādīs tā pakalpojuma nosaukumu.

Taga noklusējuma atribūts nosaka šī ieraksta atlasi pēc noklusējuma, ja video konteinerā ir citi celiņi. Tikai vienam no vairākiem tagiem var būt noklusējuma atribūts. Labāk ir novietot noklusējuma celiņu vispirms starp citiem pievienotajiem celiņiem.

Atzīmju piemērs: Šis jautājums tiek uzdots ļoti bieži, tāpēc es nolēmu nodarbībās tam veltīt atsevišķu rakstu. Tā kā HTML nav universālas tehnoloģijas audio atskaņošanai visām pārlūkprogrammām, lai atrisinātu šo problēmu, es iesaku lejupielādēt audio atskaņotāja failu, kā tas tiek darīts lielākajā daļā vietņu. Mēs visu darām soli pa solim:

1. Hostinga vietā, kurā atrodas jūsu vietne, saknes direktorijā (mapē, kurā atrodas indeksa fails) izveidojiet audio mapi. Nākotnē jūs tajā ievietosit visus audio failus.

3. Tagad atlasiet nepieciešamie faili, labāk mp3 formātā. Vietnes saknē izveidojiet audio mapi un augšupielādējiet to.

4. Atliek tikai ievietot atskaņotāja savienojuma kodu. Tas ir piemērots jebkurai vietnei Pareizajā vietā jums vienkārši jānorāda ceļš uz atskaņotāja failu un audio failu, attiecīgi aizstājot vārdus your_domain un audio_file name:

Un viss ir gatavs! Varat arī apskatīt darba piemēru.

Kā instalēt fona mūzika html izmantoju HTML un pārlūkprogrammas iespējas, var arī ielikt lapā fona mūziku. Jums būs nepieciešams audio fails nepieciešamais formāts: WAV, AU, MIDI vai MP3. Kā piemēru varat izmantot jebkuru failu ar norādīto paplašinājumu.

Pirmais veids ir iegulšanas tags. Iegulšanas elements tiek izmantots, lai ielādētu un parādītu objektus (piemēram, video failus, flash filmas, dažus audio failus utt.), kurus pārlūkprogramma sākotnēji nesaprot.

Sintakse ir pavisam vienkārša:

Noslēguma atzīme nav nepieciešama.

Tagad apskatiet ieraksta piemēru ar atribūtiem un tālāk ar to dekodēšanu:

Iegult tagu atribūtus audio atskaņošanai HTML formātā
platums — paneļa platums pikseļos (vai procentos)
augstums — paneļa augstums pikseļos (vai procentos)
līdzināt - paneļa novietojums attiecībā pret tekstu, iespējamās vērtības ir pa kreisi, pa labi, centrā
paslēpts - ļauj paslēpt paneli, atribūtu vērtības: true - panelis ir paslēpts, false - panelis ir redzams (noklusējuma vērtība)
autostart - patiess - atskaņotājs sākas automātiski, kad lapa tiek ielādēta, false - gaida atskaņošanas pogas nospiešanu
cilpa - cikls, taisnība - celiņš tiek atskaņots pa apli, un kad vērtība nepatiesa- tikai vienu reizi

Otrais veids. Ļoti vecs, bet arī praktisks) Pievienojiet melodiju tai pašai mapei (direktorijā), kurā atrodas jūsu fails, un pamattekstā ierakstiet šādu kodu:

Rezultātā pēc lapas ielādes atskanēs bgsound tagā norādītā melodija. Tagad apsvērsim labāki atribūti tags:

src - ceļš uz jūsu audio failu
cilpa - cik reizes atkārtot melodiju (ja -1, tad atkārtojas bezgalīgi)
balanss - stereo balansa vērtība (no -10000 līdz 10000)
skaļums — melodijas atskaņošanas skaļums, kur 0 ir maksimālais un -10000 ir minimālais.

Tomēr atskaņotāju nekādā veidā nevarēs kontrolēt - katru reizi, kad lapa tiek atsvaidzināta, celiņš tiks atskaņots vēlreiz.

Pēc fona mūzikas ievietošanas metodes aprakstīšanas es vēlos jūs no tā atrunāt, jo vairums lietotāju, apmeklējot dažādas vietnes, parasti jau klausās mūziku. Tāpēc pavadošā mūzika var tikai piespiest viņu aizvērt cilni ar vietni.

Audio un mūzikas ievietošana HTML5 — audio tags
audio — pāra tagu noteikšana fona skaņa, mūziku vai citu audio straumi vietnē.

Audio tagu atribūti

automātiskā atskaņošana — fails tiek atskaņots uzreiz pēc lapas ielādes (līdzīgi kā bgsound fona mūzika)
vadīklas — pārlūkprogrammā parādiet atskaņotāja vadības paneli
cilpa — pēc faila beigām tiek atskaņots vēlreiz
pirmsielādēt — audio fails tiks ielādēts kopā ar lapas ielādi
src - ceļš uz audio failu (mp3 vai ogg)

Koda piemērs ar audio tagu

Audio tag

Audio HTML 5

Jūsu pārlūkprogramma neatbalsta audio tagu.
Lejupielādēt mūziku.

Apraksts

Pievieno, atskaņo un pārvalda audio iestatījumus tīmekļa lapā. Ceļš uz failu tiek norādīts, izmantojot atribūtu src vai apakštagu. Konteinerā varat rakstīt tekstu, kas tiks parādīts pārlūkprogrammās, kas nedarbojas ar šo tagu.

Pārlūkprogrammu atbalstīto kodeku saraksts ir ierobežots, un tas ir norādīts tabulā. 1.

Tabula 1. Kodeki un pārlūkprogrammas

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

Universālai atskaņošanai noteiktās pārlūkprogrammās audio tiek kodēts, izmantojot dažādus kodekus, un faili tiek pievienoti vienlaikus, izmantojot tagu.

Sintakses atribūti Skaņa tiek atskaņota uzreiz pēc lapas ielādes. Audio failam pievieno vadības paneli. Atkārto skaņu no sākuma pēc tās beigām. Izmanto, lai lejupielādētu failu kopā ar tīmekļa lapas ielādi. Norāda ceļu uz atskaņojamo failu. Noslēdzošais tags

Obligāti.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Aleksandrs Kļimenkovs - četrpadsmit

Jūsu pārlūkprogramma neatbalsta audio tagu. Lejupielādēt mūziku.

Rezultāta piemērs Opera pārlūks attēlā parādīts. 1.

Rīsi. 1. Atskaņojiet audio failu

Pārlūkprogrammas

Audio atskaņošanas vadīklu izskats dažādās pārlūkprogrammās atšķiras, taču pamata elementi ir vienādi. Tie ir atskaņošanas/pauzes poga, celiņa garums, pagājušais un kopējais atskaņošanas laiks un skaļuma līmenis.

Līdz ar pietiekami ātru interneta savienojumu parādīšanos Flash bija vienīgais rīks skaņu atskaņošanai vietnēs. Taču HTML5 būtiski mainīs veidu, kā skaņas tiek atskaņotas internetā. Šajā rakstā es vēlos jums detalizēti pastāstīt par to, kā savās vietnēs izmantot tagu.

Mēs to izmantojam, lai ievietotu skaņas failu zemāk esošajā lapā vienkāršākais piemērs izmantojot tagu, tas lejupielādē mp3 failu un atskaņo to. Ņemiet vērā atribūtu autopaly, kas tiek izmantots, lai automātiski atskaņotu audio. Tomēr nevajadzētu automātiski atskaņot skaņas vietnē, jo tas lietotājus kaitinās. Skaņas atskaņošana cilpā Vai vēlaties atskaņot skaņu? Cilpas atribūts palīdzēs to izdarīt. Bet atkal nevajadzētu pārmērīgi izmantot automātisko atskaņošanu un atkārtotu atskaņošanu, ja nevēlaties, lai lietotājs priekšlaicīgi pamestu vietni. Vadības elementu parādīšana Tā vietā, lai automātiski atskaņotu skaņas, kas noteikti ir slikta prakse, jums vajadzētu atļaut pārlūkprogrammā parādīt dažas vadīklas, piemēram, skaļuma un atskaņošanas (pauzes) pogas. To ir viegli izdarīt, vienkārši pievienojot vadīklu atribūtu. Dažādi failu formāti Tagu atbalsta lielākā daļa mūsdienu pārlūkprogrammu, taču problēma ir tā dažādas pārlūkprogrammas atbalsta dažādus failu formātus. Piemēram, Safari var atskaņot MP3, bet Firefox nevar, un tā vietā atskaņo OGG failus. Šīs problēmas risinājums ir izmantot abus formātus, lai ikviens apmeklētājs varētu dzirdēt audio neatkarīgi no tā, kuru pārlūkprogrammu viņi izmanto. Failu MIME veida norādīšana Izmantojot dažādus failu formātus, ieteicams katram failam norādīt MIME tipu, lai palīdzētu pārlūkprogrammai lokalizēt atbalstīto failu. To var viegli izdarīt, izmantojot tipa atribūtu. Vecākām pārlūkprogrammām Ko darīt, ja apmeklētājs izmanto IE6 vai kādu citu aizvēsturisku pārlūkprogrammu, kas neatbalsta tagu? Tas ir vienkārši: tālāk ir kods, kas parādīs ziņojumu pārlūkprogrammām, kas neatbalsta tagu. Jūsu pārlūkprogramma neatbalsta audio tagu! Failu buferizācija Atskaņojot lielus failus, var izmantot failu buferizāciju. Šim nolūkam varat izmantot priekšielādes atribūtu. Tam var būt 3 vērtības:

• none - ja nevēlaties izmantot failu buferi;
• auto - ja vēlaties, lai pārlūkprogramma buferētu visu failu;
• metadati - tikai pakalpojuma informācijas ielādei (skaņas ilgums utt.).

Atskaņošanas kontrole, izmantojot JavaScript HTML5 audio atskaņotāja vadīšana, izmantojot JavaScript, ir ļoti vienkārša. Nākamajā piemērā parādīts, kā izmantojot JavaScript jūs varat izveidot savu pamatelementi Audio atskaņotāja vadīklas: atskaņošanas pauze skaļums + skaļums -

Tas šodienai viss.
Es ceru, ka šis raksts palīdzēja jums saprast pamata iespējas HTML5 tags.

Vēl nesen audio iegulšana tīmekļa lapā nebija tik viegls uzdevums. Kopumā ir daži, kas piedāvā viedāku un labāku ieviešanu, taču lielākā daļa metožu ierobežo noteiktu pārlūkprogrammu un noteiktus spraudņus.

Līdz ar Flash tehnoloģijas parādīšanos tirgū šis uzdevums ir kļuvis daudz vienkāršāks, jo Flash spraudnis ļauj iegult lapā jebkuru animāciju vai skaņu, un šo tehnoloģiju atbalsta lielākā daļa pārlūkprogrammu. Taču pieprasījums pēc Flash pakāpeniski izzūd pēc novatorisku Apple ierīču ieviešanas: iPhone un iPad. Kā zināms, Apple savas ierīces fundamentāli neaprīko Flash atbalsts, un produktu lietotāju skaits strauji pieaug.

Īsāk sakot, šeit ir neliela neskaidrība.

Par laimi, HTML5 ir ievērojami atvieglojis izstrādātāju dzīvi, jo tehnoloģija ietver audio elementu. Šis elements ļauj iegult audio failus jebkurā tīmekļa lapā, kā arī ieviest vadības paneli, izmantojot javascript. Vēl svarīgāk ir tas, ka tehnoloģijai nav nepieciešami papildu spraudņi, un tā tiek atbalstīta gandrīz visās pārlūkprogrammās, izņemot agrīnās versijas (par pārlūkprogrammas atbalstu mēs runāsim vēlāk!).

Mūsu šodienas rakstā mēs jums pateiksim, kā jūs varat iegult skaņas, izmantojot audio elementu. Mēs arī uzzināsim, kā kontrolēt atskaņošanas procesu, izmantojot javascript, kā arī mēģināsim pastāstīt par tehnoloģiju atbalstu pārlūkprogrammās.

HTML5 audio elements

Šis elements ir ļoti viegli lietojams. Mūsu šodienas piemērā mēs iegulsim Binga Krosbija dziesmu “White Christmas”:

Šeit nav nepieciešams pārāk daudz skaidrot. Līdzīgi kā jūs ievietojat attēlu, izmantojot img tagu, varat ievietot skaņu, izmantojot audio tagu tādā pašā veidā.

Vairāku pārlūkprogrammu atbalsts

Iepriekš minētais piemērs, visticamāk, nedarbosies visās pārlūkprogrammās. Šeit tiek izmantots faila formāts.

Dažas pārlūkprogrammas var atskaņot .mp3 failus, bet ne .ogg failus, savukārt citas darbojas pretēji. Lielākā daļa pārlūkprogrammu var atskaņot .wav failus, taču tā lielā izmēra dēļ tos nav piemēroti izmantot kā vietnes audio.

Šeit ir pārlūkprogrammu tabula, kas parāda skaņas formātu atbalstu:

Kādus formātus atbalsta jūsu pārlūkprogramma? Nosakiet to pēc .

Kā redzams tabulā, optimālākā ieviešanas iespēja būtu savienot abus failu formātus.
Lai to izdarītu, audio elementam varat pievienot vairākus avota elementus un tajos norādīt ceļus uz dažādiem formātiem. Pārlūkprogramma atskaņos pirmo atbalstīto failu. Šeit ir piemērs:

Protams, tas nozīmē, ka jums ir jāizveido gan Mp3, gan OGG versija skaņas fails(šeit nāk jums palīgā), taču tas ir vienīgais veids, kā organizēt starppārlūkprogrammu atbalstu.

Internet Explorer sākotnējās versijas (7. un 8. versija) vispār neatbalsta audio elementu. Tomēr vēlāk rakstā apskatīsim, kā apiet šo problēmu.

Automātiska skaņas atskaņošana

Lai gan iepriekš minētais kods iegulst audio, tas to neatskaņo. Ja vēlamies, lai skaņa tiktu atskaņota automātiski, kad lapa tiek ielādēta, elementam jāpievieno automātiskās atskaņošanas atribūts:

Vadības pogu pievienošana

Lai gan automātiskā atskaņošana var būt noderīga, daudzos gadījumos tā ir kaitinoša vai pilnīgi nepiemērota. Tāpēc mēs varam uzstādīt papildu vadības pogas audio elementiem, lai lietotājs pats varētu izlemt:

Tas pievieno horizontālu joslu ar pauzes/atskaņošanas pogu, laika skalu ar slīdni un skaļuma regulatoru. Viss ir aptuveni tāds pats, kā jūs varat redzēt atskaņotājā vietnē Youtube.

Ir svarīgi atcerēties, ka vadības panelis atšķirsies atkarībā no pārlūkprogrammām. Piemēram, iPhone pārlūkprogrammā nebūs skaļuma slīdņa, jo ierīcei ir atsevišķas pogas, lai kontrolētu audio līmeņus.

Cilpas atskaņošana

Pievienojot cilpas atribūtu audio elementam, audio tiks atskaņots bezgalīgi.

Tas var būt noderīgi, lai spēlēs ieslēgtu fona mūziku vai skaņas efektus.

Varat arī izmantot priekšielādes atribūtu, kas pārlūkprogrammai pateiks, kad un kur jāielādē konkrēts audio fails.
Audio faila iepriekšēja ielāde nozīmē, ka audio var tikt atskaņots uzreiz, kad lietotājs nospiež atskaņošanas pogu.

Šim atribūtam ir vairākas nozīmes:

“nav” — pārlūkprogrammai nevajadzētu uzspiest lejupielādēto failu. Tie. Ja esat pārliecināts, ka lielākā daļa lietotāju neatskaņos failu, izmantojiet šo opciju. Vai arī izmantojiet to, kad nepieciešams ietaupīt pēc iespējas vairāk servera joslas platuma.

“metadata” — parametrs ir līdzīgs nekāds, izņemot to, ka jūs paziņojat pārlūkprogrammai par iespēju ielādēt metadatus, piemēram, audio celiņa ilgumu, bet ne pašu audio failu.

“auto” – ļauj pārlūkprogrammai lejupielādēt pašu audio failu.

Piemēram:

Ņemiet vērā, ka iepriekšēja ielāde ir tikai ērtības līdzeklis, jo dažas pārlūkprogrammas var vienkārši ignorēt šo komandu un sākt darīt visu, ko vēlas.

Atskaņošanas vadība, izmantojot javascript

Kas ir ērti javascript elementi- tas ir tāpēc, ka tos ir viegli pārvaldīt, izmantojot JavaScript. Audio elements piedāvā daudz ērtu parametru un vadības metožu:

Play() – sākt atskaņošanu no pašreizējās pozīcijas;

Pause() – apturēt atskaņošanu pašreizējā pozīcijā;

canPlayType(type) — nosaka, vai pārlūkprogramma atbalsta atskaņošanu šāda veida plašsaziņas līdzekļi;

ilgums – trases ilgums sekundēs;

currentTime – pašreizējā pozīcija sekundēs. Varat arī instalēt šis parametrs lai pārvietotu atskaņošanas pozīciju.

Izmantojot iepriekš ieteiktās opcijas un metodes, mēs varam izveidot dažas pamata vadības pogas:

Atskaņot mūziku
Pauzēt mūziku
Pārtraukt mūziku
Skatīt demonstrāciju: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Atbalsts vecākajām Internet Explorer versijām

Vairumā gadījumu lietotāja pārlūkprogramma atbalstīs HTML5 elementu. Bet diemžēl IE pārlūkprogrammu versijas 7 un pat 8 neatbalsta šo elementu (lai gan versija 9 jau atbalsta). Ir svarīgi apsvērt atcelšanas versiju lietotājiem, kuri palika 2008. gadā.

Ļoti rupja, bet efektīva metode ir izmantot īpašus komentārus, lai izceltu pārlūkprogrammas datus un piešķirtu tiem objekta rādītāju uz skaņas failu. Tādējādi pārlūkprogramma bieži parādīs iebūvētu kontrolleri, kas lietotājiem ļauj atskaņot, apturēt vai attīt mūziku gandrīz HTML5 audio formātā. Šeit ir piemērs:

Atskaņot mūziku
Pauzēt mūziku
Pārtraukt mūziku

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

Iepriekš minētais piemērs darbosies visās pārlūkprogrammās, kas atbalsta HTML5 audio, kā arī darbosies IE versijās 7 un 8. Izmantojot komentārus, mēs novirzām pogu vadīklas tieši uz audio failu.

Vēl viens atcelšanas veids ir iegult lapā Flash atskaņotāju. Šeit ir runa par atcelšanu Flash atskaņotāja formā.

Secinājums

Mūsu šodienas rakstā mēs uzzinājām, kā iegult audio failus, izmantojot HTML5. Audio elements ir ne tikai ērti lietojams, bet arī varam to pielāgot un kontrolēt atskaņošanu, izmantojot javascript.

Vai vēlaties uzzināt vairāk par audio elementu HTML5? Pēc tam pārbaudiet.

Lai gan pašlaik dažās pārlūkprogrammās (piemēram, vecākām IE versijām) atbalsts tiek traucēts, nepieciešamības gadījumā tās var viegli atsaukt, kas mūsdienās kļūst arvien retāk un retāk.