vay

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

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

11937

Maqolada HTML5 audio va video konteynerining tuzilishi, video, audio, manba, trek teglari va ularning atributlari mumkin bo'lgan qiymatlar bilan tavsiflanadi. HTML shablonlari va brauzerga o'rnatilgan imkoniyatlar asosida multimedia fayllarini ijro etishni amalga oshirish misollari keltirilgan. Misollar bilan WEBVTT formatidagi fayllardan foydalangan holda subtitrlar, sarlavhalar, tarkiblar jadvalining video matn trekka ulanishi ko'rsatilgan. Audio va video uchun schema.org mikro-belgilangan HTML5 kod shablonlari taqdim etilgan. Audio va video fayllarning asosiy veb formatlari, ularning MIME turlari va video va audioni ushbu formatlarga aylantirish vositalari ko'rsatilgan.

HTML5 audio va video fayllarni foydalanmasdan to'g'ridan-to'g'ri brauzerda o'ynash imkonini beruvchi yangi xususiyatlarni o'z ichiga oladi uchinchi tomon dasturlari. Hozircha, HTML5 endi yangi emasligiga qaramay, brauzerlar video va audio teglarni qanday qayta ishlashlari va pleerning o'zi qanday ko'rsatilishi borasida kelishmovchiliklar mavjud. Ba'zi odamlar buni har safar yaxshiroq qilishadi yangi versiya, boshqalari hamon orqada qolmoqda. Global miqyosda tendentsiya shundan iboratki, brauzerlar multimedia fayllarini o'ynash uchun ko'proq va ko'proq funktsiyalarni ta'minlaydi.

Screencast: shablonlardan foydalanishga misol

Video yuklab olish

Screencast: maqoladagi shablonlardan foydalanish misollari - veb-sayt

HTML5 video va audio - rivojlanayotgan standart va hech qanday audio yoki video formati bilan bog'liq emas, shuning uchun brauzerlar o'rtasida ular qo'llab-quvvatlaydigan farqlar mavjud. formatlar audio va video fayllar. Bu farq endi ular kodlashi bilan qoplanadi original fayl bir nechta turli kodeklarni ishlating va ushbu fayl versiyalarining barchasini teglarga yoki ichki teglar orqali ulang< source src=" URL">. Biroq, brauzerlar tomonidan qo'llab-quvvatlanadigan audio va video fayl formatlari orasida etakchilar paydo bo'lmoqda. Video uchun bu, albatta, mp4 formati (H.264), audio uchun esa bu mp3 va m4a formati. Endi, ehtimol, barcha brauzerlar ushbu formatdagi fayllarni o'ynashga qodir. Shuningdek, Firefox brauzerlari, Chrome va Opera WEBM standartini umumiy video formati sifatida qo‘llab-quvvatlashga kelishib oldilar. Mening fikrimcha, HTML5 video va audiodan foydalanishning optimal varianti mp4 formatidagi bitta multimedia faylidan foydalanishga asoslangan sxema bo'ladi ( H.264) audio va JS HTML5 pleer uchun video va m4a uchun. Ko'rsatilgan formatdagi faqat bitta fayl audio yoki video konteynerga ulangan. Hozirgi vaqtda ko'pgina brauzerlar mp4 formatini o'ynashga qodir. Bog'langan JS kutubxonasi brauzerga o'rnatilgan pleerni uslublaydi. Agar brauzer mp4 / m4a formatini qo'llab-quvvatlamasa, JS pleer bu holda amalga oshiradi. Flash ulanishi multimedia faylini o'ynash uchun pleer. Mp4 formati juda mashhur bo'lib ketganini hisobga olsak, uni brauzerlarda ijro etish bilan bog'liq muammolarning past ehtimoli borligiga umid qilish mumkin. Ushbu sxema ko'rsatilgan formatda faqat bitta multimedia faylini talab qiladi, bu fayllarni qayta ishlash uchun disk maydoni va resurslarni tejaydi. Bundan tashqari, bunday sxema strategik jihatdan to'g'riroq bo'ladi, chunki tendentsiya shundan iboratki, brauzerlar HTML5 video va audioni joriy qilishda tobora yaxshilanmoqda.

HTML5 pleyeriga o'ynaladigan faylni ko'rsatish uchun faylning URL manzilidan tashqari, brauzer qaysi kodekdan foydalanish kerakligini tushunishi uchun faylning MIME turini ham o'tkazishingiz kerak. Quyidagi jadvalda eng keng tarqalgan fayl formatlari va ularning MIME turlari keltirilgan.

Fayl formatlari va ularning MIME turlari Media fayllari Mime turi kengaytmalari

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 va videolarni kodlash vositalari

Video va audio fayllarni yuqoridagi veb-formatlarga kodlash uchun siz foydalanishingiz mumkin ochiq dastur, bu audio va video fayllarni veb uchun umumiy asosiy formatlarga aylantirishni qo'llab-quvvatlaydi ( MP4, WebM, Ogg Theora, MP3 va boshqalar.). Miro Video Converter har xil uchun mavjud operatsion tizimlar- Windows, Mac va Linux va konsol yordam dasturlari uchun grafik qobiq bo'lib, ulardan foydalanish qulay veb-server yuklab olingan video va audioni avtomatik ravishda qayta ishlash uchun.

: schema.org mikro belgilash bilan HTML5 audio misol kodi: Audio sarlavhasi

HTML5 audio brauzeringiz tomonidan qo'llab-quvvatlanmaydi.

Audio yuklab olish

Koddan olingan mikro belgilash ma'lumotlari yuqorida tavsiflangan audio shablon uchun shunday ko'rinadi.

Audioobyekt elementType = http://schema.org/AudioObject nomi = Audio sarlavha tavsifi = Audio tavsif... isfamilyfriendly = haqiqiy kodlash formati = mp3 davomiyligi = PT04M59S yuklash sanasi = 2015-12-31 rasm = image.jpg muqobil nomi = Muqobil sarlavha audio kontenti href = faylga URL.mp3 matni = Yuklab olish audio muallif shaxsi elementType = http://schema.org/Person url href = URL matni = Muallifning ismi = Muallifning ismi tasviri = To‘liq url shaxsga.jpg

schema.org ga ko'ra minimal audio belgilash itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" ni o'z ichiga olishi kerak. Qolgan xususiyatlar ixtiyoriy.

Standart HTML5 tegidan foydalanishga misol:

Namoyishda men CSS uslublarini sinf atributi orqali tegga qo'lladim, bu esa video maydonining kengligini ekran o'lchamiga qarab dinamik qildi. O'yinchi balandlikda o'zini o'zi sozlaydi. Qanday ishlashini ko'rish uchun brauzer oynasining o'lchamini o'zgartirib ko'ring. Shuning uchun, ushbu demo uchun kod manbasida teg uchun kenglik va balandlik atributlari mavjud emas, ular CSS uslublari bilan almashtiriladi. Lekin bu usul shablon kodi ro'yxatida ko'rsatilmagan, chunki allaqachon alohida narsa.

schema.org mikro-belgisi bilan HTML5 video misol kodi: Video sarlavhasi

YouTubeda tomosha qiling

HTML5 video brauzeringiz tomonidan qo'llab-quvvatlanmaydi.

Videoni yuklab oling: Video nomi

Koddan olingan mikro belgilash ma'lumotlari yuqorida tavsiflangan video shablonida shunday ko'rinadi.

Videoobject itemType = http://schema.org/VideoObject nomi = Video nomi eskizi imageobject itemType = http://schema.org/ImageObject contenturl = video-thumbnail.jpg URL manzili|png kengligi = 100 balandlik = 100 davomiyligi = PT14M59ly = haqiqiy yuklash sanasi = 2015-12-31 tavsifi = Qisqa Tasvir video uchun... url href = fayl uchun URL.mp4 matni = Video sarlavhasi muallifi shaxsi elementType = http://schema.org/Person url href = muallif veb-sahifasi uchun URL matn = muallif nomi = muallif nomi tasviri = to‘liq URL to author.jpg thumbnailurl = faylga URL.jpg|png

Eng kam zarur Qidiruv tizimlari uchun schema.org ga muvofiq video belgilash namuna kodida ko'rsatilgan barcha itemprop xususiyatlarini o'z ichiga olishi kerak, itemprop = "muallif" bloki bundan mustasno, bu qidiruv tizimlari uchun ixtiyoriy va ma'lumotlar bo'lmasa o'chirilishi mumkin. uni to'ldirish uchun. Video eskizi uchun Yandex sizdan schema.org ga muvofiq mikro belgilashni ImageObject ko'rinishidagi itemprop = "thumbnail" sifatida belgilashingizni talab qiladi va Google itemprop ="thumbnailUrl" ni ko'rsatishni talab qiladi, shuning uchun siz video eskizi faylini ikki marta kiritishingiz kerak va shuning uchun brauzerda ko'rsatilmasligi uchun ikkinchi img tegi displeyni oldi: none style. Display:none bilan img tegidan foydalanish o‘rniga, bu xususiyatni href atributi orqali havola tegiga o‘tkazishingiz mumkin. Bundan tashqari, mikro belgilash foydalanuvchiga ko'rsatilmagan meta va havola teglari orqali uzatilishi mumkinligiga qaramay, iloji bo'lsa, birinchi navbatda foydalanuvchiga ko'rsatiladigan teglarga mikro belgilashni qo'shish tavsiya etiladi. schema.org mikro belgilarini tekshirish quyidagi havolalar yordamida amalga oshirilishi mumkin: , . Mikro belgilashdan foydalanishning asosiy afzalligi - qidiruv robotlari va ijtimoiy tarmoq robotlari uchun bunday kontentning qulayligi. Ushbu robotlar etiketli ma'lumotlarni ajratib oladi va ularni birlashtiradi. Shunday qilib, mikro markalashdan foydalanish yaxshilanadi SEO sayt va ma'lumotlarning avtomatik taqsimlanishini osonlashtiradi ijtimoiy tarmoqlarda. Veb-saytda VideoObjec t sxemasi bilan belgilangan videolar uchun Schema.org mikro-belgilashning batafsil tavsifi. Shuni ham ta'kidlash kerakki, siz o'z veb-saytingizga videoni to'g'ridan-to'g'ri emas, balki Yandex.Video yoki YouTube videoxosting vidjetlaridan foydalangan holda joylashtirganda, vidjet kod bloki ostida video tavsifi bilan HTML kod blokini qo'shishingiz mumkin. va ushbu video uchun Schema.org belgisini joylashtiring. Shu bilan birga, URL parametri sifatida - videoga havola, statik faylga to'g'ridan-to'g'ri havolani ko'rsatmang, lekin video hostingdan olingan havolani belgilang. Schema.org spetsifikatsiyasida havola to'g'ridan-to'g'ri faylga bo'lishi kerakligi aytilgan bo'lsa-da, qidiruv tizimlari video hostingdagi videolarga havolalarni ham qayta ishlaydi ( Yandex veb-saytidagi misollarni Webmaster bo'limida ko'ring), siz bunday havoladan faylni yuklab ololmaysiz va uni to'g'ridan-to'g'ri sahifadagi HTML5 media pleeringizda ko'ra olmaysiz, faqat video hosting vidjetida.

Agar siz multimedia audio va video fayllarini qaysi xostingdan yuklab olish kerakligi haqidagi savolga duch kelsangiz, Yandex Disk-dan WEB-sahifaga media fayllarni kiritish variantini tavsiflovchi maqolaga qarang.

Atributlar va teglar:

src , preload , autoplay , mediagroup , loop , o'chirilgan , boshqarish atributlari barcha media elementlari, jumladan teglar va teglar uchun umumiy atributlardir.

avtomatik ijro atributi: yoki yoki

• Avtomatik ijro atributi uning yoki tegda mavjudligi bilan belgilanadi va bu atribut uchun qiymat belgilashning hojati yo'q, faqat uning mavjudligi etarli. Element kodini tahrirlovchi HTML muharrirlari uchun siz ushbu atributni autoplay ="autoplay" sifatida o'rnatishingiz mumkin, bu atributning mavjudligiga teng. Avtomatik ijro atributining mavjudligi brauzerga veb-sahifani yuklagandan so'ng darhol faylni o'ynashni boshlashini bildiradi. Shunga ko'ra, autoplay atributi videoning pleerga qanday yuklanishini boshqaradigan oldindan yuklash atributining qiymatlarini bekor qiladi, chunki video darhol o'ynay boshlashi va shuning uchun yuklanishi kerak. Odatiy bo'lib, avtomatik ijro atributi mavjud emas.

atributni boshqarish: yo yoki

• Controls atributi brauzerga sahifa yuklangan, lekin yozuv oʻynatilmaganda pleer boshqaruv panelini koʻrsatishini aytadi. Bu atribut, xuddi autoplay atributi kabi, faqat yoki tegidagi mavjudligi bilan belgilanadi va qiymat talab qilmaydi, faqat uning mavjudligi etarli. Odatiy bo'lib, bu atribut yo'q, ya'ni. O‘ynatish boshlanishidan oldin pleer boshqaruv panelini ko‘rsatmaydi. Fayl o'ynay boshlaganda, sichqonchani pleer maydoniga olib borganingizda boshqaruv paneli paydo bo'ladi.

loop atributi: yo yoki

• Loop atributi pleerni faylni tsiklda o'ynashiga olib keladi. Atribut faqat yoki tegida mavjudligi bilan belgilanadi va hech qanday parametrga ega emas. Odatiy bo'lib, loop atributi mavjud emas.

oldindan yuklash atributi:

• preload atributi veb-sahifani yuklash bilan birga faylni yuklashni belgilaydi va quyidagi uchta qiymatdan birini oladi:
  • hech biri - veb-sahifani yuklash bilan birga faylni yuklab olmang. Bu shuni anglatadiki, fayl faqat o'ynash tugmasini bosgandan so'ng pleerda yuklana boshlaydi. Bu sahifani yuklashni tezlashtirish uchun qulay bo'lishi mumkin. None qiymati oldindan yuklash atributi uchun standart qiymatdir, shuning uchun oldindan yuklash atributini tegga umuman yoki bu holatda kiritmaslik mumkin.
  • metama'lumotlar - veb-sahifani yuklash bilan birga faylni yuklamaydi, lekin multimedia faylining metama'lumotlarini yuklab oladi.
  • avtomatik - veb-sahifani yuklash bilan birga to'liq faylni yuklab olishni amalga oshiring. Ushbu parametrda brauzerlar avtomatik ravishda media faylni yuklaydi veb sahifa y, lekin bu sahifaning o'zini yuklashga va uni brauzerda ko'rsatishga xalaqit bermaydi. Agar yoki tegida bo'sh qiymatga ega preload = "" atributi ko'rsatilgan bo'lsa, uning avtomatik qiymati ishlatiladi.
  • Agar avtomatik ijro atributi ishlatilsa, oldindan yuklash atributi bekor qilinadi.

src atributi:

• tegning src atributi yoki tegdagi multimedia fayliga yo'lni darhol belgilash imkonini beradi. Yo'l protokol va domenni ko'rsatuvchi yoki joriy saytning ildiziga nisbatan to'liq bo'lishi mumkin. Bundan tashqari, audio yoki video konteynerga o'rnatilgan teglarda faylga yo'lni belgilashingiz mumkin.< source src=" URL"> .

Video tegining afisha atributi:

• poster atributi faqat tegda ishlatiladi va video mavjud bo'lmaganda ko'rsatiladigan rasmning URL manzilini (gif, png, jpeg va boshqalar) belgilaydi. Agar poster atributi o'rnatilmagan bo'lsa, brauzer pleer videoning birinchi kadrini ko'rsatishga harakat qiladi.

Video tegining kengligi va balandligi atributlari:

• kenglik va balandlik atributlari faqat teg uchun amal qiladi va mos ravishda video pleerning ijro maydonining kengligi va balandligini o'rnatadi. Qiymat piksel yoki foizda ko'rsatilgan ijobiy butun son bo'lishi kutilmoqda. Ushbu atributlarni o'rnatish videoning ekran o'lchamiga ta'sir qiladi, lekin videoning tomonlar nisbatini o'zgartirmaydi. Video o'z nisbatlarini saqlab, belgilangan o'lchamlarga moslashtiriladi. Belgilangan o'lchamlar video nisbatlariga mos kelmasa, videoning yuqori va/yoki yon qirralari bo'ylab quyuq chiziqlar bo'ladi. Shuning uchun, ushbu parametrlarni o'rnatayotganda, ularning nisbatini o'ynalayotgan video bilan bir xil tanlash yoki faqat kenglikni o'rnatish tavsiya etiladi va pleer balandlikni o'zi sozlaydi.
• Agar ushbu parametrlardan biri yoki ikkalasi ham ko'rsatilmagan bo'lsa, aniqlanmagan parametr(lar) poster atributida ko'rsatilgan mos tasvir hajmidan olinadi.
• Agar poster atributi yo'q bo'lsa, u holda bu parametrlar quyidagicha o'rnatiladi: kenglik uchun = 300 piksel va balandlik uchun = 150 piksel. Video maydonining o'lchamlarini klipning nisbatlariga ko'ra hisoblamaslik va muvofiqlashtirmaslik uchun men faqat bitta kenglik parametrini o'rnatishni maslahat beraman, keyin ijro etish maydonining balandligi (balandligi) video nisbati asosida avtomatik ravishda tanlanadi. .
• Bundan tashqari, HTML5 pleerining o'lchami va dizayni orqali ta'sir qilish mumkin CSS xususiyatlari teglarga qo'llaniladi yoki .

ovozsiz atribut: yoki yoki

• Ovozsiz atribut teglarda mavjudligini yoki ovozni HTML5 pleyerida o'chirilgan holatga o'rnatadi. Odatiy bo'lib, atribut yo'q.

crossorigin atributi:

• Crossorigin atributi brauzerga ushbu element uchun CORS so'rovini bajarishni aytadi. Odatiy bo'lib, atribut mavjud emas, bu CORS so'rovlaridan umuman foydalanmaslikni anglatadi. Agar atribut mavjud bo'lsa, mumkin bo'lgan qiymatlar anonim va foydalanish hisob ma'lumotlari . CORS () zamonaviy brauzerlarda joriy sahifaning domenidan tashqari boshqa domenlardan joriy veb-sahifaga resurslarni yuklash uchun ruxsatlarni boshqarish imkonini beruvchi texnologiyadir. CORS standarti uchun brauzerni qo'llab-quvvatlash ushbu sahifaga boshqa ko'rsatilgan domendan resurslarni yuklashga ruxsat etilganligini aniqlash uchun joriy sahifaning domeniga maxsus so'rovni (sarlavha) bajarish orqali xavfsiz o'zaro faoliyat ma'lumotlar almashinuvini amalga oshirish imkonini beradi. Bunday so'rovga javoban server resurslarni yuklab olishga ruxsat berilgan domenlarni ko'rsatishi kerak.

mediagroup atributi: div (chekka: 1em avtomatik; joylashuv: nisbiy; kenglik: 400px; balandlik: 300px; ) video (pozitsiya; mutlaq; pastki: 0; oʻng: 0; ) video: birinchi bola (kenglik: 100%; balandlik : 100%; ) video: oxirgi bola (kengligi: 30%; )

• Mediagroup atributi sahifaning turli joylarida media fayllar guruhini yaratish orqali bir nechta media fayllarni boshqarishni bitta MediaControllerga birlashtirish imkonini beradi. Ushbu guruh bir vaqtning o'zida unga kiritilgan barcha fayllar uchun boshqariladi. Bu, masalan, sahifaning turli joylarida bir vaqtning o'zida bir xil videoni turli subtitrlar yoki turli xil videolar bilan o'ynashingiz va boshqarishingiz kerak bo'lsa, qulaydir.

teglar va yopish tegini talab qiladi.

Brauzer HTML5 va teglarni qo'llab-quvvatlamaydigan holatlar uchun, bu juda kam uchraydi, konteynerning yopilishidan oldin matnli xabar yoziladi va odatda faylni yuklab olish uchun havola qo'shiladi. Agar brauzerga o'rnatilgan HTML5 pleer qo'shimcha ravishda JS kutubxonasi (JS pleer) tomonidan boshqarilsa, brauzer video va audioni qo'llab-quvvatlamasligi sababli brauzerda HTML5 video va audioni o'ynatishning iloji bo'lmasa, ularning aksariyati flesh-pleerni ulaydi. teglar yoki multimedia fayl formati.

Teg:

O'ynaladigan faylga yo'l yoki teglar ichida joylashgan src atributiga ega teg yordamida ham belgilanishi mumkin. Tegda yopish tegi yo'q.

Ko'pgina hollarda teg quyidagicha ko'rinadi:

va u har doim src va type atributini o'z ichiga oladi, aksariyat hollarda faqat MIME turiga ega.

Teg atributlari:

• tegning src= "URL" atributi multimedia faylining URL manzilini belgilaydi. Yo'l protokol va domenni ko'rsatuvchi yoki saytning ildiziga nisbatan to'liq bo'lishi mumkin.
• tegning type="MIME-type" atributi yoki to'liqroq type="MIME-type; codecs="codec"" faylning MIME turi va kodekini belgilaydi. Ovoz uchun MIME turini belgilash kifoya, masalan, .mp3 - type="audio/mpeg". Videoning spetsifikatsiyasiga ko'ra, kodek turi atributida ham ko'rsatilishi kerak bo'lsa-da, lekin endi ular ko'pincha faqat MIME turini kodeksiz ko'rsatadilar va buni brauzerlar hal qiladi.
• Tegning "barcha|brayl|qo'lda|chop etish|ekran|nutq|proyeksiyasi|tty|tv" atributi fayl qaysi qurilma uchun ijro etilishini belgilaydi. Standart qiymat hammasi, shuning uchun ko'p hollarda bu atribut umuman ko'rsatilmaydi, agar siz ijro etish uchun qurilmani aniq belgilashni xohlamasangiz.

Teg:

HTML5 video uchun, shuningdek, pleerda subtitrlar, sarlavhalar, boblar, tavsiflar (hali qo'llab-quvvatlanmaydi) va metama'lumotlar (hozircha qo'llab-quvvatlanmaydi) kabi ma'lumotlarga ega qo'shimcha trekni ko'rsatish mumkin. Bu xususiyat teg ichiga tegishli atributlarga ega teglarni qo'shish orqali amalga oshiriladi.

- yopilish yorlig'i yo'q.

Teg qo'shimcha trek fayllarini videoga maxsus WebVTT (Web Video Text Tracks Format) formatida ulash imkonini beradi, ular chiqishni ko'rsatadi. matnli xabarlar video faylga ularning vaqt havolasi bilan. WebVTT standarti nafaqat matnli xabarlarni chiqarishni qo'llab-quvvatlabgina qolmay, balki uning imkoniyatlarini ham taqdim etadi CSS uslubi va video ko'rish maydoniga joylashtirish imkoniyatlari. Hozirda WebVTT fayllari asosan deyarli barcha brauzerlar tomonidan qo'llab-quvvatlanadigan videolarga matn subtitrlarini qo'shish uchun ishlatiladi. WebVTT standartining boshqa xususiyatlari hali brauzerlarning o'zlari tomonidan to'liq amalga oshirilmagan, shuning uchun WebVTT-dan to'liqroq foydalanish uchun JS pleerlaridan foydalanish yaxshiroqdir. Shuningdek, WebVTT fayllari JS pleerlariga qo'shimcha ma'lumotlarni uzatish uchun, masalan, video ramkalar uchun tasvirni oldindan ko'rish URL manzillari kabi JS pleerlari tomonidan nostandart foydalanish mumkin. Videoxosting saytlarida bo'lgani kabi, pleerning orqaga o'tkazish shkalasida (Scrub Bar Thumbnails) video ramkalarni oldindan ko'rishni qanday ko'rsatish haqida savolga. Shuni aytish kerakki, bunday funksiya hali brauzerlarda o'rnatilgan pleyerlarda mavjud emas va shuning uchun JS pleerlari orqali qo'shimcha sifatida amalga oshiriladi. Buni amalga oshirish uchun HTML5 video va audio ob'ektni boshqarishni o'z zimmasiga oladigan va uni uslublashni amalga oshiradigan JS kutubxonasini (js player) ulang. Bunday JS pleerlari video ramkalarni oldindan ko'rishni namoyish qilish uchun nostandart ravishda WEBVTT fayllaridan oldindan ko'rish tasvirlarining URL manzillarini u orqali uzatish uchun tegdan foydalanadilar.

WebVTT fayli .vtt kengaytmali oddiy matn fayli boʻlib, unda satr boʻyicha roʻyxat koʻrinishida boshlanish va tugash vaqtlari koʻrsatilgan vaqt belgilari va ushbu teglarga chiqarish uchun matnli xabarlar yoziladi. Konteynerga turli tillardagi matnli bir nechta WebVTT fayllarini ulashingiz mumkin. Har bir til uchun siz yaratishingiz kerak alohida fayl va har birini teg orqali ulang. Teglar konteyner ichiga barcha teglardan keyin, lekin HTML5 video xato xabarlaridan oldin kiritilishi kerak. Standart tilda subtitr fayli bo'lgan teg joriy konteynerdagi teglar orasida birinchi bo'lib joylashtirilishi kerak.

WEBVTT faylida bir yoki bir nechta vaqt belgilari bo'lishi mumkin. Fayl WEBVTT so'zi bilan boshlanadi. Bo'sh chiziqlar tegishli matn va atributlari bilan alohida vaqt belgilari. Matn o'z ichiga olishi mumkin HTML elementlari va CSS belgilari. Uning identifikatori maxsus iboralar yordamida unga murojaat qilish uchun vaqt tamg'asi oldiga qo'yilishi mumkin. Bu barcha tafsilotlar WEBVTT standartida tasvirlangan. trek turini belgilaydi va quyidagi qiymatlarni olishi mumkin:

• subtitrlar - video ustida ko'rsatiladigan matn ko'rinishidagi subtitrlar. O'ynatilayotgan fayl uchun, agar u uni qo'llab-quvvatlasa, pleerda o'z tanlovini ta'minlash uchun turli tillarda subtitrlarni o'rnatishingiz mumkin. Ko'pgina hollarda, bu tur ko'pchilik brauzerlar tomonidan qo'llab-quvvatlangani uchun ishlatiladi.
• taglavhalar - video ustida ko'rsatiladigan matn va tovush ko'rinishidagi taglavhalar. Subtitrlarga o'xshash, lekin matnga qo'shimcha ravishda ular ovoz effektlari va boshqa audio ma'lumotlarni o'z ichiga olishi mumkin.
• bo'limlar - matnda ro'yxat menyusi sifatida ko'rsatiladigan va media faylida tezkor harakatlanish uchun mo'ljallangan bo'limlar.
• tavsiflar - tavsif, bu matnli fayllar ularni screenreaderda o'ynash uchun video tavsifi bilan.
• metadata - JS skriptlarini o'tkazish uchun metadata.

Tegning src atributi trek faylining URL manzilini belgilaydi Qo'shimcha ma'lumot. Tegga biriktirilgan fayl WebVTT formati va .vtt kengaytmasiga ega.

Tegning srclang atributi trek tilini til kodi orqali belgilaydi. Rus tili uchun u "ru", ingliz uchun "en" ga teng bo'ladi.

Tegning label atributi pleyerda ko'rsatiladigan trek nomini belgilaydi. Agar atribut o'rnatilmagan bo'lsa, brauzer o'zining xizmat nomini ko'rsatadi.

Tegning standart atributi, agar video konteynerida boshqa treklar mavjud bo'lsa, sukut bo'yicha ushbu trekni tanlashni belgilaydi. Bir nechta teglardan faqat bittasi standart atributga ega bo'lishi mumkin. Standart trekni boshqa ulangan treklar orasida birinchi bo'lib joylashtirish yaxshiroqdir.

Teglar misoli: Bu savol juda tez-tez paydo bo'ladi, shuning uchun men darslarda unga alohida maqola bag'ishlashga qaror qildim. HTML barcha brauzerlar uchun audio ijro etish uchun universal texnologiyaga ega emasligi sababli, bu muammoni hal qilish uchun men ko'pgina saytlarda bo'lgani kabi audio pleer faylini yuklab olishni taklif qilaman. Biz hamma narsani bosqichma-bosqich bajaramiz:

1. Saytingiz joylashgan xostingda, ildiz katalogida (indeks fayli joylashgan papka) audio papkani yarating. Kelajakda siz barcha audio fayllarni unga joylashtirasiz.

3. Endi tanlang kerakli fayllar, mp3 formatida yaxshiroq. Saytning ildizida audio papka yarating va ularni yuklang.

4. Pleyerga ulanish kodini kiritishgina qoladi. U har qanday saytga mos keladi.To'g'ri joyda pleer fayli va audiofaylga yo'lni mos ravishda domeningiz va audiofayl nomini o'rniga ko'rsatishingiz kerak:

Va hamma narsa tayyor! Siz ish misolini ham ko'rishingiz mumkin.

Qanday o'rnatish kerak fon musiqasi html da men HTML va brauzer imkoniyatlaridan foydalanaman, siz sahifaga fon musiqasini ham kiritishingiz mumkin. Sizga audio fayl kerak bo'ladi kerakli format: WAV, AU, MIDI yoki MP3. Misol sifatida ko'rsatilgan kengaytmali har qanday fayldan foydalanishingiz mumkin.

Birinchi usul - joylashtirish yorlig'i. O'rnatish elementi brauzer dastlab tushunmaydigan ob'ektlarni (masalan, video fayllar, flesh-filmlar, ba'zi audio fayllar va boshqalar) yuklash va ko'rsatish uchun ishlatiladi.

Sintaksis juda oddiy:

Yopish belgisi shart emas.

Keling, atributlari bo'lgan yozuvning misolini va quyida ularning dekodlanishini ko'rib chiqaylik:

Html formatida audio ijro etish uchun teg atributlarini o'rnatish
kengligi - pikseldagi panel kengligi (yoki foizda)
balandlik - piksellardagi panel balandligi (yoki foiz)
tekislash - panelning matnga nisbatan joylashishi, mumkin bo'lgan qiymatlar chap, o'ng, markaz
yashirin - panelni, atribut qiymatlarini yashirishga imkon beradi: true - panel yashirin, noto'g'ri - panel ko'rinadi (standart qiymat)
autostart - rost - pleer sahifa yuklanganda avtomatik ravishda ishga tushadi, noto'g'ri - o'ynash tugmasi bosilishini kutadi
loop - sikl, rost - trek aylanada o'ynaladi va qachon qiymat noto'g'ri- faqat bir marta

Ikkinchi yo'l. Juda eski, lekin ayni paytda amaliy) Ohangni faylingiz joylashgan papkaga (katalogga) qo'shing va korpusga quyidagi kodni yozing:

Natijada, sahifani yuklaganingizdan so'ng, siz bgsound tegida ko'rsatgan ohang yangraydi. Endi ko'rib chiqaylik yaxshiroq atributlar teg:

src - audio faylingizga yo'l
loop - ohangni necha marta takrorlash kerak (agar -1 bo'lsa, u holda cheksiz takrorlanadi)
balans - stereo balans qiymati (-10000 dan 10000 gacha)
ovoz balandligi - musiqa ijro etish hajmi, bu erda 0 maksimal va -10000 minimal.

Biroq, o'yinchini hech qanday tarzda boshqarishning imkoni bo'lmaydi - sahifa har safar yangilanganda trek yana o'ynaladi.

Fon musiqasini kiritish usulini tasvirlab bergandan so'ng, men sizni bundan qaytarmoqchiman, chunki ko'pchilik foydalanuvchilar, qoida tariqasida, turli saytlarga tashrif buyurganlarida allaqachon musiqa tinglashadi. Shuning uchun, hamrohlik qiluvchi musiqa uni faqat sayt bilan yorliqni yopishga majbur qilishi mumkin.

HTML5-ga audio va musiqa kiritish - audio teg
audio - juftlangan tegni aniqlash fon ovozi, musiqa yoki saytdagi boshqa audio oqim.

Audio teg atributlari

autoplay - fayl sahifa yuklanganda darhol ijro etiladi (bgsound fon musiqasiga o'xshash)
boshqaruv elementlari - brauzerda o'yinchi boshqaruv panelini ko'rsatish
loop - fayl tugagandan keyin yana o'ynaydi
oldindan yuklash - audio fayl sahifa yuklanishi bilan birga yuklanadi
src - audio faylga yo'l (mp3 yoki ogg)

Audio teg bilan kod namunasi

Audio teg

HTML 5 da audio

Audio teg brauzeringiz tomonidan qo'llab-quvvatlanmaydi.
Musiqa yuklab olish.

Tavsif

Veb-sahifadagi audio sozlamalarini qo'shadi, o'ynaydi va boshqaradi. Faylga yo'l src atributi yoki pastki teg orqali belgilanadi. Ushbu teg bilan ishlamaydigan brauzerlarda ko'rsatiladigan matnni konteyner ichiga yozishingiz mumkin.

Brauzerlar tomonidan qo'llab-quvvatlanadigan kodeklar ro'yxati cheklangan va jadvalda keltirilgan. 1.

Jadval 1. Kodeklar va brauzerlar

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

Belgilangan brauzerlarda universal ijro etish uchun audio turli kodeklar yordamida kodlanadi va fayllar bir vaqtning o'zida teg orqali qo'shiladi.

Sintaksis atributlari Ovoz sahifa yuklangandan so'ng darhol o'ynay boshlaydi. Audio faylga boshqaruv panelini qo'shadi. Ovozni boshidan tugaganidan keyin takrorlaydi. Veb-sahifani yuklash bilan birga faylni yuklab olish uchun ishlatiladi. O'ynatilayotgan faylga yo'lni belgilaydi. Yopish belgisi

Majburiy.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

audio

Aleksandr Klimenkov - o'n to'rt

Audio teg brauzeringiz tomonidan qo'llab-quvvatlanmaydi. Musiqa yuklab olish.

Natijaga misol Opera brauzeri shaklda ko'rsatilgan. 1.

Guruch. 1. Audio faylni o'ynang

Brauzerlar

Ovozni o'ynatish boshqaruvlari brauzerlar orasida ko'rinishda farq qiladi, lekin asosiy elementlar bir xil. Bular ijro etish/pauza tugmasi, trek uzunligi, o‘tgan va umumiy ijro vaqti va ovoz balandligi.

Etarlicha tez Internet ulanishlari paydo bo'lishi bilan Flash veb-saytlarda tovushlarni ijro etish uchun yagona vosita edi. Ammo HTML5 Internetda tovushlarni ijro etish usulini tubdan o'zgartiradi. Ushbu maqolada men sizga saytlaringizda tegdan qanday foydalanish haqida batafsil aytib bermoqchiman.

Biz undan ovozli faylni sahifaga kiritish uchun foydalanamiz eng oddiy misol tegdan foydalanib, u mp3 faylni yuklab oladi va uni o'ynaydi. Ovozni avtomatik ijro etish uchun ishlatiladigan autopaly atributiga e'tibor bering. Biroq, saytda avtomatik ravishda tovushlarni o'ynatmaslik kerak, chunki bu foydalanuvchilarni bezovta qiladi. Ovozni loopda ijro etish Ovozni takrorlashni xohlaysizmi? Loop atributi buni amalga oshirishga yordam beradi. Ammo yana takrorlayman, agar foydalanuvchi saytni muddatidan oldin tark etishini xohlamasangiz, avtomatik ijro va loop ijrosidan ortiqcha foydalanmasligingiz kerak. Boshqaruv elementlarini ko'rsatish Tovushlarni avtomatik o'ynatish o'rniga, bu, albatta, yomon amaliyotdir, brauzerda ovoz balandligi va ijro (pauza) tugmalari kabi ba'zi boshqaruv elementlarini ko'rsatishga ruxsat berishingiz kerak. Buni oddiygina boshqaruv atributini qo'shish orqali qilish oson. Turli xil fayl formatlari Teg ko'pchilik zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi, ammo muammo shundaki turli brauzerlar turli fayl formatlarini qo'llab-quvvatlash. Masalan, Safari MP3 ni o'ynata oladi, ammo Firefox buning o'rniga OGG fayllarini o'ynatadi. Ushbu muammoni hal qilish har bir tashrifchi qaysi brauzerdan foydalanishidan qat'i nazar, audioni eshitishi uchun ikkala formatdan foydalanishdir. Fayllarning MIME turini belgilash Turli fayl formatlaridan foydalanganda, brauzer qo'llab-quvvatlaydigan faylni mahalliylashtirishga yordam berish uchun har bir fayl uchun MIME turini belgilash yaxshi amaliyotdir. Buni type atributi yordamida osongina bajarish mumkin. Eski brauzerlar uchun Agar tashrifchi IE6 yoki tegni qo'llab-quvvatlamaydigan boshqa tarixdan oldingi brauzerdan foydalanayotgan bo'lsa-chi? Bu oson: quyida tegni qo'llab-quvvatlamaydigan brauzerlar uchun xabarni ko'rsatadigan kod mavjud. Sizning brauzeringiz audio tegni qo'llab-quvvatlamaydi! Faylni buferlash Katta hajmdagi fayllarni o'ynatishda fayllarni buferlashdan foydalanish mumkin. Buning uchun oldindan yuklash atributidan foydalanishingiz mumkin. U 3 ta qiymatni qabul qilishi mumkin:

• none - agar siz fayl buferidan foydalanishni xohlamasangiz;
• avtomatik - agar siz brauzer butun faylni buferlashni xohlasangiz;
• metadata - faqat xizmat ma'lumotlarini yuklash uchun (tovush davomiyligi va boshqalar).

JavaScript orqali ijroni boshqarish HTML5 audio pleerini JavaScript orqali boshqarish juda oson. Quyidagi misol qanday qilishni ko'rsatadi JavaScript yordamida o'zingizni qurishingiz mumkin asosiy elementlar Audio pleer boshqaruvlari: O'ynatishni to'xtatib turish ovoz balandligi + Ovoz balandligi -

Bugun hammasi shu.
Umid qilamanki, ushbu maqola sizga tushunishga yordam berdi asosiy qobiliyatlar HTML5 tegi.

Yaqin vaqtgacha veb-sahifaga ovoz kiritish unchalik oson ish emas edi. Umuman olganda, ba'zilari aqlli va yaxshiroq ilovalarni taklif qiladi, ammo ko'pchilik usullar sizni ma'lum bir brauzer va ma'lum plaginlarga ega bo'lishni cheklaydi.

Bozorda Flash texnologiyasi paydo bo'lishi bilan bu vazifa ancha osonlashdi, chunki Flash plagini sahifaga istalgan animatsiya yoki tovushni joylashtirish imkonini beradi va texnologiya ko'pchilik brauzerlar tomonidan qo'llab-quvvatlanadi. Ammo Apple kompaniyasining innovatsion qurilmalari: iPhone va iPad sotuvga chiqarilgach, Flash-ga bo'lgan talab asta-sekin so'nib bormoqda. Ma'lumki, Apple o'z qurilmalarini tubdan jihozlamaydi Flash qo'llab-quvvatlash, va mahsulot foydalanuvchilari soni tez o'sib bormoqda.

Qisqasi, bu erda biroz chalkashlik bor.

Yaxshiyamki, HTML5 ishlab chiquvchilar uchun hayotni ancha osonlashtirdi, chunki texnologiya audio elementni o'z ichiga oladi. Bu element audiofayllarni istalgan veb-sahifaga joylashtirish, shuningdek javascript yordamida boshqaruv panelini amalga oshirish imkonini beradi. Eng muhimi, texnologiya qo'shimcha plaginlarni talab qilmaydi va deyarli barcha brauzerlarda qo'llab-quvvatlanadi, dastlabki versiyalar bundan mustasno (brauzerni qo'llab-quvvatlash haqida keyinroq gaplashamiz!).

Bugungi maqolamizda sizga audio element yordamida qanday qilib tovushlarni joylashtirishingiz mumkinligini aytib beramiz. Shuningdek, biz javascript yordamida ijro etish jarayonini qanday boshqarishni o'rganamiz, shuningdek, brauzerlar orasida texnologiyani qo'llab-quvvatlash haqida sizga aytib berishga harakat qilamiz.

HTML5 audio elementi

Ushbu elementdan foydalanish juda oson. Bugungi misolimizda biz Bing Crosbyning "Oq Rojdestvo" ni joylashtiramiz:

Bu erda ko'p tushuntirish kerak emas. Tasvirni img yorlig'i yordamida qo'shganingiz kabi, audio teg yordamida ham xuddi shu tarzda ovoz kiritishingiz mumkin.

Brauzerlarni o'zaro qo'llab-quvvatlash

Yuqoridagi misol barcha brauzerlarda ishlamaydi. Bu erda fayl formati o'ynaydi.

Ba'zi brauzerlar .mp3 fayllarni o'ynashi mumkin, ammo .ogg fayllari emas, boshqalari esa aksincha. Ko'pgina brauzerlar .wav fayllarini o'ynashi mumkin, lekin uning kattaligi tufayli veb-sayt uchun audio sifatida foydalanish noo'rin.

Ovoz formatlarini qo'llab-quvvatlaydigan brauzerlar jadvali:

Brauzeringiz qanday formatlarni qo'llab-quvvatlaydi? Buni orqali aniqlang.

Jadvalda ko'rib turganingizdek, eng maqbul amalga oshirish varianti ikkala fayl formatini ulash bo'ladi.
Buni amalga oshirish uchun siz audio elementga bir nechta manba elementlarini qo'shishingiz mumkin va ularda turli formatlarga yo'llarni belgilashingiz mumkin. Brauzer qo'llab-quvvatlaydigan birinchi faylni o'ynaydi. Mana bir misol:

Albatta, bu sizning Mp3 va OGG versiyasini yaratishingiz kerakligini anglatadi ovoz fayli(bu erda sizning yordamingizga keladi), ammo bu brauzerlararo yordamni tashkil qilishning yagona yo'li.

Internet Explorer-ning dastlabki versiyalari (7 va 8-versiyalari) audio elementni umuman qo'llab-quvvatlamaydi. Biroq, keyingi maqolada biz ushbu muammoni qanday hal qilishni ko'rib chiqamiz.

Ovozni avtomatik ijro etish

Yuqoridagi kod ovozni o'rnatgan bo'lsa-da, uni o'ynatmaydi. Agar sahifa yuklanganda ovoz avtomatik ravishda ijro etilishini istasak, elementga avtomatik ijro atributini qo'shishimiz kerak:

Boshqaruv tugmachalarini qo'shish

Avtomatik ijro etish foydali bo'lishi mumkin bo'lsa-da, ko'p hollarda bu zerikarli yoki mutlaqo mos kelmaydi. Shu sababli, foydalanuvchi o'zi qaror qilishi uchun audio elementlar uchun qo'shimcha boshqaruv tugmalarini o'rnatishimiz mumkin:

Bu to'xtatib turish/o'ynash tugmasi bilan gorizontal chiziqni, slayderli vaqt jadvalini va ovoz balandligini boshqarishni qo'shadi. Hammasi taxminan Youtube-dagi pleyerda ko'rganingiz bilan bir xil.

Boshqarish paneli brauzerlarga qarab farqlanishini yodda tutish kerak. Misol uchun, iPhone brauzerida ovoz balandligi slayderi bo'lmaydi, chunki qurilmada ovoz darajasini boshqarish uchun alohida tugmalar mavjud.

Loop ijrosi

Ovoz elementiga loop atributini qo'shish audioning cheksiz ijro etilishiga olib keladi.

Bu o'yinlarda fon musiqasi yoki ovoz effektlarini yoqish uchun foydali bo'lishi mumkin.

Bundan tashqari, oldindan yuklash atributidan ham foydalanishingiz mumkin, u brauzerga ma'lum bir audio fayl qachon va qayerda yuklanishi kerakligini aytadi.
Audio faylni oldindan yuklash, foydalanuvchi o'ynash tugmasini bosgandan so'ng audio darhol ijro etilishini anglatadi.

Ushbu atributning bir nechta ma'nolari mavjud:

"Yo'q" - brauzer yuklab olingan faylni yuklamasligi kerak. Bular. Agar ko'pchilik foydalanuvchilar faylni o'ynatmasligiga ishonchingiz komil bo'lsa, ushbu parametrdan foydalaning. Yoki iloji boricha ko'proq server o'tkazish qobiliyatini saqlashingiz kerak bo'lganda foydalaning.

"Metama'lumotlar" - parametr hech kimga o'xshamaydi, faqat siz brauzerni audio faylning o'zi emas, balki audio trekning davomiyligi kabi metama'lumotlarni yuklash imkoniyati haqida xabardor qilasiz.

"Avtomatik" - siz brauzerga audio faylni o'zi yuklab olishga ruxsat berasiz.

Masalan:

Yodda tutingki, oldindan yuklash shunchaki qulay xususiyatdir, chunki ba'zi brauzerlar bu buyruqni e'tiborsiz qoldirishi va xohlagan narsani qilishni boshlashi mumkin.

Javascript orqali ijroni boshqarish

Nima qulay javascript elementlari- Buning sababi, ularni javascript yordamida boshqarish oson. Ovoz elementi ko'plab qulay parametrlar va boshqarish usullarini taklif qiladi:

Play() – joriy holatdan tinglashni boshlash;

Pause() – joriy holatda ijroni to‘xtatish;

canPlayType(turi) – brauzer ijroni qo‘llab-quvvatlashini aniqlash bu turdagi ommaviy axborot vositalari;

davomiylik - trekning soniyalarda davomiyligi;

currentTime - soniyalardagi joriy holat. Siz ham o'rnatishingiz mumkin bu parametr ijro holatini siljitish uchun.

Yuqorida tavsiya etilgan variantlar va usullardan foydalanib, biz bir nechta asosiy boshqaruv tugmalarini yaratishimiz mumkin:

Musiqa tinglash
Musiqani to'xtatib turish
Musiqa to'xtatish
Namoyishni ko'rish: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Internet Explorer-ning oldingi versiyalarini qo'llab-quvvatlash

Ko'pgina hollarda, foydalanuvchi brauzeri HTML5 elementini qo'llab-quvvatlaydi. Ammo, afsuski, IE brauzerlarining 7 va hatto 8-versiyalari ushbu elementni qo'llab-quvvatlamaydi (garchi 9-versiya allaqachon qo'llab-quvvatlangan bo'lsa ham). 2008 yilda qolgan foydalanuvchilar uchun orqaga qaytarish versiyasini ko'rib chiqish muhimdir.

Juda qo'pol, ammo samarali usul - brauzer ma'lumotlarini ajratib ko'rsatish uchun maxsus sharhlardan foydalanish va ovoz fayliga ob'ekt ko'rsatkichini berish. Shunday qilib, brauzer ko'pincha foydalanuvchilarga musiqani deyarli HTML5 audiosiga o'xshash tarzda o'ynash, to'xtatib turish yoki orqaga qaytarish imkonini beruvchi o'rnatilgan kontrollerni namoyish etadi. Mana bir misol:

Musiqa tinglash
Musiqani to'xtatib turish
Musiqa to'xtatish

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

Yuqoridagi misol HTML5 Audio-ni qo'llab-quvvatlaydigan barcha brauzerlarda ishlaydi va IE 7 va 8 versiyalarida ham ishlaydi. Sharhlar yordamida biz tugma boshqaruvlarini to'g'ridan-to'g'ri audio faylga yo'naltiramiz.

Orqaga qaytarishning yana bir usuli bu sahifaga Flash pleerni joylashtirishdir. Bu erda Flash pleer shaklida orqaga qaytish haqida gap boradi.

Xulosa

Bugungi maqolamizda biz HTML5 yordamida audio fayllarni qanday joylashtirishni bilib oldik. Audio elementdan foydalanish nafaqat oson, balki biz uni sozlashimiz va javascript orqali ijroni boshqarishimiz ham mumkin.

HTML5 audio elementi haqida ko'proq bilmoqchimisiz? Keyin tekshiring.

Ayrim brauzerlarda (masalan, IE-ning eski versiyalarida) qo'llab-quvvatlash hozirda kam bo'lsa-da, agar kerak bo'lsa, ularni osongina orqaga qaytarishingiz mumkin, bu bugungi kunda tobora kamayib bormoqda.