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.

Bugun ko'p narsa o'zgardi. Brauzerlar va JavaScript kutubxonalari audio va video kontentga xizmat ko‘rsatadigan har qanday loyiha uchun standart variant sifatida HTML5 Media-dan foydalanishingiz mumkin (va kerak) darajaga yetdi. Hatto HTML5 da o'ynash uchun mavjud Flash va Silverlight video kontentini qayta sozlash ham nisbatan sodda bo'ldi. Ushbu maqolada biz media-rendering uchun HTML5 dan foydalanishning afzalliklarini ko'rib chiqamiz, ba'zi kod misollarini ko'rib chiqamiz, ishlab chiquvchilar duch keladigan asosiy qiyinchiliklarni muhokama qilamiz va bu muammolarni hal qilish yo'llari haqida gapiramiz.

HTML5 Medianing afzalliklari

Mediani ko'rsatish uchun HTML5 dan foydalanishning afzalligi shundaki, siz Flash yoki Silverlightni o'rganish o'rniga HTML, CSS va JavaScript ko'nikmalaringizdan foydalanishingiz mumkin. Agar siz HTML-da tugmalar yaratishingiz va ularni JavaScript-dan foydalanib boshqarishingiz mumkin bo'lsa, unda siz HTML5 Media uchun ishlab chiqishingiz kerak bo'lgan hamma narsani bilasiz. HTML5 Media yangi trek elementi yordamida taglavhalar va subtitrlar uchun o'rnatilgan yordamga ega; videoni manipulyatsiya qilish uchun to'g'ridan-to'g'ri baytga kirishni qo'llab-quvvatlash kabi qo'shimcha funktsiyalar ham qamrab olingan.

Bundan tashqari, HTML5 video va audio teglar orqali media ijro etish Flash yoki Silverlight kabi plaginlarga qaraganda samaraliroq bo‘lib, tinglash yanada silliq va batareyaning ishlash muddatini uzaytiradi. Bunga qo'shimcha ravishda mobil qurilmalar ostida Windows boshqaruvi Telefon 7.5, Apple iOS va Android (shuningdek, Windows 8 da Metro uslubidagi brauzer) faqat HTML5 video va audio teglar orqali media tinglashni qo'llab-quvvatlaydi. Ba'zilar Android qurilmalari Flash-ni o'z ichiga oladi, ammo Adobe yaqinda uning ustidagi keyingi ishlardan voz kechdi mobil versiyasi Flash, ya'ni kelajakda HTML5 mobil qurilmalarda media o'ynashning yagona usuli bo'ladi.

HTML5 va boshqaruv atributida oddiy renderlash

Videoni o'ynash uchun Flash yoki Silverlight-dan foydalangan kunlarda, bu vazifani bajarish uchun eng oddiy belgilash (bu holda, mp4 videoni o'ynatish) quyidagicha ko'rinadi:

Ushbu sub-teglarni ob'ekt, parametr va joylashtirishni h.264 kodlashda bir xil videoni o'ynash uchun ishlatiladigan quyidagi HTML5 video tegi bilan solishtiring:

Ushbu parametr ancha sodda - shunchaki sof HTML, bu deyarli hech qanday tushuntirishni talab qilmaydi. Brauzer freymlarning asl balandligi va kengligini aniqlash uchun yetarli darajada videoni yuklab olgandan so'ng, videoning hajmini mos ravishda o'zgartiradi. Ammo, img teglarida bo'lgani kabi, sahifani qayta yuklash zaruratidan qochish uchun balandlik va kenglik atributlarini ko'rsatish har doim yaxshiroqdir. Bundan tashqari, siz kenglik va balandlik uchun px yoki foiz qiymatlarini belgilash uchun uslub atributidan foydalanishingiz mumkin (keyingi misollarda ikkalasini ham ishlataman).

Men qo'shgan atributlardan biri bu boshqaruvdir. U brauzerga o'rnatilgan ijro etish boshqaruvlarini ko'rsatishni aytadi, ular odatda boshlash/to'xtatib turish tugmasi, harakatlanish paneli va ovoz balandligini boshqarish vositalarini o'z ichiga oladi. Boshqaruv elementlari mantiqiy atribut bo'lib, unga qiymat berish shart emas. XHTML ga yaqinroq sintaksisda siz controls="controls" deb yozishingiz mumkin, biroq brauzer boshqaruv elementlari mavjud bo'lmasa, noto'g'ri, agar mavjud bo'lsa yoki unga qandaydir qiymat berilgan bo'lsa, rost deb hisoblaydi.

HTML5 media atributlari va bola manba teglari

Brauzer media-kontentni oxirgi foydalanuvchiga qanday taqdim etishini aniqlash uchun audio va video elementlar uchun bir nechta yangi atributlar kiritildi:

• src o'ynash uchun bitta media faylni belgilaydi (turli kodeklarga ega bir nechta manbalar uchun, iltimos, pastga qarang);
• afisha - foydalanuvchi Play tugmasini bosmasdan oldin ko'rsatiladigan rasmning URL manzili (faqat video);
• oldindan yuklash brauzer media faylni qanday va qachon yuklashini aniqlaydi. Uchta mumkin bo'lgan qiymat mavjud: hech biri (foydalanuvchi o'ynatmaguncha video yuklab olinmaydi), metadata (brauzerga ramkalarning balandligi va kengligini, shuningdek, media videoning davomiyligini aniqlash uchun etarli ma'lumotlarni yuklab olishni aytadi) va avtomatik (foydalanuvchi o'ynashni boshlashdan oldin brauzerga qancha videoni yuklab olish kerakligini hal qilish imkonini beradi);
• autoplay - sahifa yuklangandan so'ng darhol videoni boshlash uchun ishlatiladigan mantiqiy atribut (mobil qurilmalar o'tkazish qobiliyatini tejash uchun ko'pincha bu atributni e'tiborsiz qoldiradi);
• loop - yozuvning oxiriga yetganda videoni qayta ko'rishga olib keladigan mantiqiy atribut;
• ovozsiz - videoni ovoz o'chirilgan holda boshlash kerakligini ko'rsatadigan mantiqiy atribut;
• boshqaruv elementlari - brauzer o'z boshqaruvlarini ko'rsatishi kerakligini ko'rsatadigan mantiqiy atribut;
• kenglik va balandlik ma'lum o'lchamdagi videoni tinglashni belgilaydi (faqat video uchun, qiymatlar foizlarda bo'lishi mumkin emas).

Muayyan vaqt uchun matn elementlarini ko'rsatish

Brauzerlar, shuningdek, videolarda subtitrlar, yopiq taglavhalar, tarjimalar va sharhlarni qo'llab-quvvatlaydigan trek elementini joriy qilishni boshlaydilar. Mana, trekka ega video element: pastki element:

Ushbu misolda men beshta mumkin bo'lgan trek elementi atributlaridan to'rttasidan foydalandim:

• src - Web Video Timed Text (WebVTT) yoki Timed Text Markup Language (TTML) formatidagi faylga havola;
• srclang - TTML fayl tili (masalan, en, es yoki ar);
• tur matn mazmuni turini ko'rsatadi: subtitrlar, sarlavhalar, tavsiflar, boblar yoki metama'lumotlar;
• label trekni tanlagan foydalanuvchiga ko'rsatilgan matnni saqlaydi;
• standart - boshlang'ich trek elementini belgilaydigan mantiqiy atribut.

WebVTT oddiy matn formati bo'lib, u bir qatorli deklaratsiya (WEBVTT FILE) bilan boshlanadi va keyin boshlanish va tugash vaqtlarini sanab o'tadi; Ajratuvchi --> bo'lib, boshlanish va tugash vaqtlaridan keyin o'sha vaqt oralig'ida ko'rsatilgan matn keladi. Mana, ikki xil vaqt oralig'ida ikki qator matnni ko'rsatadigan oddiy WebVTT fayli:

WEBVTT FILE 00:00:02.5 --> 00:00:05.1 Bu ko'rsatiladigan matnning birinchi qatori. 00:00:09.1 --> 00:00:12.7 Bu qator videoda keyinroq paydo bo'ladi.

Ushbu yozish vaqtida trek elementi faqat Internet Explorer 10 Platforma Preview va Chrome 19 da qo'llab-quvvatlanadi va tez orada qo'llab-quvvatlash boshqa brauzerlarda ham mavjud bo'lishi kerak. Ba'zi JavaScript kutubxonalari, ular haqida keyinroq to'xtalib o'taman, brauzerlar uchun trek elementini qo'llab-quvvatlaydi, ular hali mos keladigan dasturga ega emas, lekin trekni qo'llab-quvvatlash uchun alohida kutubxona ham mavjud - captionator.js (captionatorjs.com).), trek teglarini tahlil qiladigan, WebVTT va TTML fayllarini (shuningdek, SRT va YouTube SBV) o'qiydi va hali mahalliy qo'llab-quvvatlamaydigan brauzerlar uchun UI taqdim etadi.

HTML5 Media skriptini boshqarish

Ilgari men brauzer o'z boshqaruvlarini video yoki audio teglar ustida ko'rsatishi uchun boshqaruv atributidan foydalanganman. Muammo shundaki, har bir brauzerda o'z boshqaruv elementlari mavjud, ular veb-saytingiz dizayniga mos kelmaydi. Kattaroq barqarorlik uchun siz brauzer boshqaruvlarini olib tashlashingiz va keyin sahifaga JavaScript kodi bilan boshqariladigan maxsus tugmalarni qo'shishingiz mumkin. Video yoki audio ijro etish jarayonining holatini kuzatish uchun voqea tinglovchilarini ham qo'shishingiz mumkin. Quyidagi misolda men controls atributini olib tashladim va asosiy boshqaruv paneli sifatida ishlatiladigan videoning ostiga belgilashni qo'shdim:

00:00 00:00

Oddiy JavaScript kodi (1-rasm) videoni ijro etish va namoyish qilishni boshqaradi joriy vaqt videoda, shuningdek, rasmda ko'rsatilgan to'liq huquqli o'yinchini yaratadi. 2 (Internet Explorer 9). (HTML5 da type="text/javascript" atributi skript tegida ixtiyoriy ekanligini unutmang.)

Guruch. 1. Videoni ijro etishni boshqarish

// Nomlar maydonini himoya qilish uchun kodni funksiyaga oʻrash (funksiya() ( // DOM obyektlarini toping var video = document.getElementById("video1"), playBtn = document.getElementById("video1-play"), muteBtn = hujjat getElementById("video1-mute"), joriy = document.getElementById("video1-current"), davomiyligi = document.getElementById("video1-duration" // PlayBtn.addEventListener("); ", function() ni bosing ( agar (video.paused || video.ended) ( video.play(); playBtn.value = "Pauza)"; } else { video.pause(); playBtn.value = "O'ynang"; } }, false); // Переключаем состояние "звук включен/выключен" muteBtn.addEventListener("click", function() { if (video.muted) { video.muted = false; muteBtn.value = "Ovozsiz"; } else { video.muted = true; muteBtn.value = "Ovozni yoqish"; } }, false); // Показываем длительность, когда это становится возможным video.addEventListener("loadedmetadata", function() { duration.innerHTML = formatTime(video.duration); }, false); // Обновляем текущее время video.addEventListener("timeupdate", function() { current.innerHTML = formatTime(video.currentTime); }, false); function formatTime(time) { var minutes = Math.floor(time / 60) % 60, seconds = Math.floor(time % 60); return (minutes !}< 10 ? "0" + minutes: minutes) + ":" + (seconds < 10 ? "0" + seconds: seconds); } })();

Shakldagi kod. 1 o'ynash va to'xtatib turish usullarini, vaqtni yangilash va yuklangan metama'lumotlar hodisalarini hamda to'xtatilgan, tugatilgan, joriy vaqt va davomiylik xususiyatlarini taqdim etadi. Toʻliq HTML5 Media API (w3.org/TR/html5/video.html) toʻliq ishlaydigan media pleer yaratish uchun kerak boʻlganidan ham koʻproq narsani oʻz ichiga oladi. Yuqorida sanab o'tilgan media yorlig'i atributlariga qo'shimcha ravishda, HTML5 media ob'ektlari faqat JavaScript orqali kirish mumkin bo'lgan boshqa xususiyatlarga ega:

• currentSrc ichida joylashgan media faylni tavsiflaydi hozirgi paytda agar manba teglari ishlatilsa, brauzer tomonidan ko'rsatiladi;
• videoHeight va videoWidth video ramkaning dastlabki o'lchamlarini o'rnatadi;
• ovoz balandligi 0 dan 1 gacha bo'lgan oraliqda ovoz balandligini belgilaydigan qiymatni belgilaydi (mobil qurilmalar bu xususiyatga e'tibor bermaydi; ular apparat ovoz balandligini boshqarish vositalaridan foydalanadi);
• currentTime joriy ijro o'rnini soniyalarda belgilaydi;
• davomiyligi - media faylning soniyalardagi umumiy davomiyligi;
• buferlangan - media faylning qaysi qismlari yuklab olinganligini ko'rsatadigan massiv;
• playbackRate - videoni ijro etish tezligi (standart - 1). O'ynatishni tezlashtirish (1,5) yoki sekinlashtirish (0,5) uchun bu qiymatni o'zgartiring;
• ended videoning oxiriga yetganligini bildiradi;
• pauzed har doim ishga tushirishda to'g'ri, keyin esa noto'g'ri bo'ladi (video o'ynashni boshlashi bilanoq);
• qidiruv, brauzer keyingi qismni yuklab olishga urinayotganini va yangi joyga o'tishini bildiradi.

HTML5 media ob'ektlari quyidagi skript usullarini ham o'z ichiga oladi:

• play videoni yuklashga va o'ynashga harakat qiladi;
• pauza joriy videoni o'ynashni to'xtatadi;
• canPlayType(turi) ) brauzer qaysi kodeklarni qo'llab-quvvatlashini taniydi. Agar siz video/mp4 kabi biror narsa yuborsangiz, brauzer ehtimol, ehtimol, yo'q yoki bo'sh qator bilan javob beradi;
• load i src atributini o'zgartirsangiz, yangi videoni yuklash uchun chaqiriladi.

HTML5 Media spetsifikatsiyasi 21 ta hodisani belgilaydi; Bu erda eng ko'p ishlatiladigan ba'zilari:

• loadedmetadata davomiylik va o'lchamlar ma'lum bo'lganda yonadi;
• loadeddata brauzer joriy holatdan o'ynashni boshlaganda ishga tushadi;
• o'ynatish videoni to'xtatib qo'yilmasa yoki tugatmasa boshlanadi;.
• pauza, buferlash yoki qidirishdan keyin o'ynatish boshlanganda yong'in o'ynash;
• pauza videoni ijro qilishni to'xtatadi;
• videoning oxiriga yetganda tugatilgan yong'inlar;
• progress media faylning keyingi qismi yuklab olinganligini ko'rsatadi;
• brauzer qidiruvni boshlaganida qidiruv to'g'ri bo'ladi;
• brauzer qidiruvni tugatgandan so'ng so'ralgan noto'g'ri;
• media resurs o'ynayotganda vaqtni yangilash yonadi;
• ovozsiz yoki ovoz balandligi xususiyati o'zgarganda volumechange yonadi.

Bu xususiyatlar, usullar va hodisalar kuchli vositalar foydalanuvchilar uchun to'liq HTML, CSS va JavaScript tomonidan boshqariladigan boy multimedia tajribasini yaratish. Shakldagi asosiy misolda. 1 Men avval barcha sahifa elementlari uchun o'zgaruvchilar yarataman:

// DOM obyektlarini toping var video = document.getElementById("video1"), playBtn = document.getElementById("video1-play"), muteBtn = document.getElementById("video1-mute"), joriy = document.getElementById( "video1-joriy"), davomiyligi = document.getElementById("video1-davomiylik");

Keyin media tinglashni boshqarish uchun tugmalarimga bosish hodisasini qo'shaman. Bu yerda men videoni boshlash/pauza holatini almashtiraman va tugmachadagi yorliqni o‘zgartiraman:

// Oʻynatish/pauza holatini almashtirish playBtn.addEventListener("click", function() ( if (video.paused || video.ended)) ( video.play(); playBtn.value = "Pause)"; } else { video.pause(); playBtn.value = "O'ynang"; } }, false);!}

Nihoyat, men media ob'ektning hozirgi holatini kuzatish uchun voqealarni qo'shaman. Men timeupdate hodisasini tinglayman va boshqaruv panelini o'yin boshidagi joriy vaqt qiymati bilan soniyalarni "daqiqa: soniya" uslubida formatlash orqali yangilayman:

// Joriy vaqtni yangilash video.addEventListener("timeupdate", function() (Current.innerHTML = formatTime(media.currentTime); ), false);

HTML5 media bilan bog'liq muammolar

Afsuski, HTML5 Media-ning barcha brauzerlar va qurilmalarda doimiy ishlashi mening misolimdek oson emas. Men allaqachon barcha brauzerlar trek elementini qo'llab-quvvatlamasligini aytib o'tganman, lekin endi men audio va video teglardan foydalanishda duch keladigan yana uchta muammoni ko'rib chiqaman va bu muammolarni bartaraf etish uchun echimlarni ko'rsataman. Maqolaning oxirida men ushbu echimlarning barchasini osongina joylashtiriladigan paketlarga o'rab oladigan ba'zi JavaScript kutubxonalari haqida gapiraman.

HTML5 audio va video kodeklarni qo'llab-quvvatlash HTML5 Media bilan ishlashda duch keladigan birinchi muammo audio va video kodeklarning mos kelmasligidir. Mening misollarim Internet Explorer 9 va undan yuqori versiyalarida, Chrome va Safari da ishlaydi, lekin Firefox yoki Operada ishlamaydi, chunki bu brauzerlar HTML5 video tegini qo'llab-quvvatlasa-da, h.264 kodekni qo'llab-quvvatlamaydi. Intellektual mulk huquqlari bilan bog'liq muammolar tufayli, kodeklar haqida gap ketganda, brauzer sotuvchilari ikkita lagerga bo'lingan, bu bizni 1-jadvalga olib keladi. 1, qaysi kodeklar qaysi brauzerlar bilan ishlashini ko'rsatadi.

Jadval 1. Turli brauzerlarda video kodeklarni qo'llab-quvvatlash

Internet Explorer 9+, Safari, Chrome va mobil qurilmalar (iPhone, iPad, Android 2.1+ va Windows Phone 7.5+) - ularning barchasi odatda MP4 konteyneriga joylashtirilgan h.264 video kodekni qo'llab-quvvatlaydi. Firefox va Opera esa WebM konteyneriga joylashtirilgan VP8 video kodekni qo'llab-quvvatlaydi. Chrome shuningdek, WebM-ni qo'llab-quvvatlaydi va brauzer sotuvchisi ma'lum bir bosqichda h.264 yordamini to'xtatishga tayyor. Agar foydalanuvchi kerakli kodekni o'rnatsa, Internet Explorer 9+ WebM-ni ko'rsatishi mumkin. Nihoyat, Firefox, Opera va Chrome ham Ogg konteyneriga qadoqlangan Theora kodekini qo'llab-quvvatlaydi, ammo bu brauzer sotuvchilari WebM foydasiga (agar siz Firefox 3.x-ni qo'llab-quvvatlashingiz shart bo'lmasa), uni qo'llab-quvvatlashni bosqichma-bosqich to'xtatmoqdalar. soddalik Men uni jadval va misollardan tashqarida qoldirdim.

Ovoz haqida gap ketganda, brauzer sotuvchilari ham ikkita lagerga bo'lingan, birinchi guruh (Internet Explorer 9, Chrome va Safari) tanish MP3 formatini, ikkinchisi (Firefox va Opera) Ogg konteyneridagi Vorbisni qo'llab-quvvatlaydi. Ko'pgina brauzerlar WAV fayllarini ham o'ynashi mumkin. Jadvalga qarang. 2.

Jadval 2. Turli brauzerlarda audio kodeklarni qo'llab-quvvatlash

Ushbu farqlarni hal qilishda sizga yordam berish uchun video va audio teglar brauzerga o'ynashga qodir bo'lgan media faylni tanlash imkonini beruvchi bir nechta bola manba teglarini qo'llab-quvvatlaydi. Har bir manba elementi ikkita atributga ega:

• src media faylning URL manzilini belgilaydi;
• type mimetipni va ixtiyoriy ravishda maxsus video kodekni belgilaydi.

H.264 va VP8 video kodeklarini tanlashni taklif qilish uchun quyidagi belgilarni ishlatishingiz mumkin:

Esda tutingki, iOS va Android-ning oldingi versiyalari uchun avval MP4 faylini ko'rsatishingiz kerak.

Ushbu belgi barcha zamonaviy brauzerlarda ishlaydi. JavaScript kodi brauzer qaysi video kodek tanlashini boshqaradi. Audio teg uchun belgilash quyidagicha ko'rinadi:

Agar siz serveringizda audio va video kontentni joylashtirsangiz, barcha media fayllaringiz to'g'ri MIME turiga ega bo'lishi kerak, aks holda ko'plab HTML5-ga tayyor brauzerlar (masalan, Internet Explorer va Firefox) media ma'lumotlarini o'ynata olmaydi. IIS 7 da MIME turlarini qo'shish uchun Xususiyatlar ko'rinishini oching, MIME turlarini ikki marta bosing, Amallar bo'limidagi Qo'shish tugmasini tanlang, kengaytmani (mp4) va MIME turini (video/mp4) qo'shing va keyin OK tugmasini bosing. Keyin foydalanishni rejalashtirgan qolgan turlar (webm va video/webm) uchun ham xuddi shunday qiling.

Eski brauzerlarni qo'llab-quvvatlash, jumladan, ikkita media fayli (video uchun MP4 va WebM kabi) HTML5 Media barcha zamonaviy brauzerlarda ishlashiga imkon beradi. Ammo Internet Explorer 8 kabi eski brauzerlar video yorlig'iga duch kelganda, ular videoni ko'rsata olmaydi. Biroq, ular ochilish yorlig'i va yopilish yorlig'i orasiga joylashtirilgan HTMLni ko'rsatadi. Bu holatda quyidagi misol foydalanuvchiga ko'proq o'tishni so'ragan xabarni ko'rsatadi yangi brauzer:

Brauzeringizni yangilang

HTML5-ga tayyor bo'lmagan brauzer foydalanuvchilariga videolarni o'ynashga ruxsat berish uchun siz 1-rasmda ko'rsatilganidek, Internet Explorer 9, Safari va Chrome foydalanuvchilariga taklif qiladigan bir xil MP4-ni o'ynaydigan o'rnatilgan Flash shaklida muqobil taqdim etishingiz mumkin. 3.

Guruch. 3. Quyidagidan videoni ijro eting Flash yordamida

Iltimos, brauzeringizni yangilang yoki Flash-ni o'rnating

Ushbu belgi barcha brauzerlarga videolarni o'ynashga imkon beradi. HTML5 yoki Flash-ni qo'llab-quvvatlamaydigan brauzerlar foydalanuvchiga o'tishni taklif qiladigan xabarni ko'rsatadi yangi versiya. Ushbu ichki belgilash qanday va nima uchun ishlashi haqida qo'shimcha ma'lumot olish uchun Krok Kamenning "Hamma uchun video" maqolasiga qarang (camendesign.com/code/video_for_everybody)).

Biroq, bu yondashuv o'zining kamchiliklariga ega. Birinchidan, saqlash uchun juda ko'p belgilar mavjud. Ikkinchidan, siz kamida ikkita media faylni kodlashingiz va saqlashingiz kerak. Uchinchidan, siz sahifaga qo'shadigan har qanday HTML/JavaScript boshqaruv elementlari Flash o'rnatilgan pleer bilan ishlamaydi. Keyinchalik men ushbu qiyinchiliklarni engishga yordam beradigan bir nechta JavaScript kutubxonalarini taklif qilaman, lekin birinchi navbatda biz oxirgi muammoni muhokama qilamiz.

To'liq ekranni qo'llab-quvvatlash Flash va Silverlight video va boshqa kontentni to'liq ekranda ko'rishni qo'llab-quvvatlaydi. Bu funksiyani oddiy tugma yaratish va uni ActionScript (Flash uchun) yoki C# (Silverlight uchun) da toʻliq ekranli buyruq bilan bogʻlash orqali amalga oshirishingiz mumkin.

Zamonaviy brauzerlarda xuddi shunday to'liq ekran rejimi mavjud bo'lib, unga menyu buyrug'i yoki tugmachani bosish orqali kirish mumkin (ko'pincha F11 yoki Ctrl+F). Biroq yaqin vaqtgacha JavaScript API dasturchilarga sahifadagi tugma bosilganda ushbu rejimga o‘tishga ruxsat bermas edi. Bu shuni anglatadiki, HTML5 videolarini faqat to'liq brauzer oynasida ko'rish mumkin, lekin butun ekranda emas.

2011-yil oxirida Safari, Chrome va Firefox W3C tomonidan taklif qilingan FullScreen API-ni qo'llab-quvvatladi, bu Flash va Silverlight-da topilgan funksiyalarga o'xshash funksiyalarni ta'minlaydi. Opera ishlab chiqish guruhi hozirda ushbu interfeysni amalga oshirmoqda, biroq Internet Explorer ishlab chiqish jamoasi ushbu matnni yozish vaqtida ushbu APIni qo'llash yoki yo'qligini hali hal qilmagan. Windows 8 da Metro uslubidagi brauzer sukut bo'yicha to'liq ekranli bo'ladi, lekin ish stoli Internet Explorer foydalanuvchilari menyu buyrug'i yoki F11 tugmachasi yordamida qo'lda to'liq ekran rejimiga o'tishlari kerak.

Uni qo'llab-quvvatlaydigan brauzerlarda to'liq ekran rejimiga kirish uchun siz to'liq ekranni ko'rsatmoqchi bo'lgan elementda so'rovning to'liq ekran usulini chaqirasiz. To'liq ekran rejimidan chiqish buyrug'i hujjat ob'ektidan chaqiriladi - bu document.exitFullscreen usuli. W3C taklifi hali ham ishlab chiqilmoqda, shuning uchun men bu erda batafsil ma'lumot bermayman, lekin men bit.ly/zlgxUA blogimda ushbu API holatini kuzatib boryapman..

HTML5-da video va audio uchun JavaScript kutubxonalari

Bir qator ishlab chiquvchilar barcha tegishli kodlarni bitta paketga birlashtirish orqali HTML5-da video va audio bilan ishlashni osonlashtiradigan JavaScript kutubxonalarini yaratdilar. Eng yaxshi ochiq kodli kutubxonalardan ba'zilari quyidagilardir: MediaElement.js, jPlayer, VideoJS, Projekktor, Playr va LeanBack. To'liq ro'yxat Imkoniyatlar solishtirmasini praegnanz.de/html5video havolasida topasiz..

Sizga kerak bo'lgan narsa video yoki audio yorlig'ini taqdim etish va kutubxona avtomatik ravishda maxsus boshqaruv elementlari to'plamini yaratadi, shuningdek, HTML5 Media-ni qo'llab-quvvatlamaydigan brauzerlar uchun Flash pleerni o'rnatadi. Yagona muammo shundaki, ko'pgina kutubxonalar o'z ichiga olgan Flash pleerlar har doim ham HTML5 pleyeriga o'xshamaydi yoki ishlamaydi. Bu shuni anglatadiki, siz qo'shgan HTML5 hodisasi Flash pleer bilan ishlamaydi va siz foydalanadigan har qanday maxsus CSS ko'rinmaydi.

Mening ishimda mendan sinxronlashtirilgan slaydlar va transkriptlarga ega HTML5 video pleerini yaratishni so'rashdi (onlayn.dts.edu/player da demoga qarang).). Bizda h.264 formatidagi 3000 dan ortiq videofayllar kutubxonasi bor edi va ularni Firefox va Opera uchun WebM-ga transkod qilish haqiqatga to'g'ri kelmaydi. Biz Internet Explorer 8 kabi eski brauzerlarni ham qo‘llab-quvvatlashga muhtoj edik, biroq alohida Flash pleerga o‘tish imkoni yo‘q edi, chunki u slaydlar va matnlar uchun hodisalarga javob bermaydi.

Ushbu qiyinchiliklarni bartaraf etish uchun men MediaElement.js (mediaelementjs.com) umumiy nomi ostida yuqorida aytib o'tilgan o'yinchilardan birini yaratdim.). Bu HTML5 API taqlid qiluvchi Flash va Silverlight pleyerlarining maxsus versiyalarini o'z ichiga olgan ochiq manbali JavaScript kutubxonasi (MIT/GLPv2). Toʻliq mustaqil Flash pleer oʻrniga MediaElement.js videoni koʻrsatish uchun faqat Flash-dan foydalanadi va keyin videoni HTML5 API-ga oʻxshagan JavaScript obyektiga oʻradi. Oxir-oqibat, bu barcha brauzerlarni yangilanishiga imkon beradi, shunda ular video yorlig'i va qo'shimcha kodeklardan foydalanishlari mumkin. JQuery yordamida pleerni bitta h.264 faylida ishga tushirish uchun quyidagi kodni kiritish kifoya:

jQuery(hujjat).ready(function() ( $("video1").mediaelementplayer(); ));

Video yorlig'ini (masalan, Internet Explorer 8) yoki h.264 kodekini (Firefox va Opera) qo'llab-quvvatlamaydigan brauzerlar uchun MediaElement.js Flash (yoki Silverlight - foydalanuvchi o'rnatgan narsaga qarab) kompensatsiya qatlamini kiritadi. Men aytib o'tgan HTML5 Media xususiyatlari va hodisalarini qo'llab-quvvatlash uchun bunday brauzerlarni "yangilang".

Ovozni qo'llab-quvvatlash uchun siz bitta MP3 faylidan foydalanishingiz mumkin:

Shu bilan bir qatorda, bitta Ogg/Vorbis faylini qo'shishingiz mumkin:

Shunga qaramay, audio yorlig'ini (Internet Explorer 8) yoki Ogg/Vorbis kodekini (Internet Explorer 9+ va Safari) qo'llab-quvvatlamaydigan brauzerlar uchun MediaElement.js ushbu brauzerlarning barchasini qo'llab-quvvatlagandek ishlashi uchun kompensatsiya qatlamini kiritadi. bu kodek. (E'tibor bering, Ogg/Vorbis mobil qurilmalarda o'ynamaydi.)

MediaElement.js, shuningdek, trek elementini va JavaScript API-ni qo'llaydigan brauzerlar uchun mahalliy to'liq ekran rejimini qo'llab-quvvatlashni o'z ichiga oladi. Siz o'zingizning HTML5 hodisalaringizni yoki kuzatuv xususiyatlarini qo'shishingiz mumkin va ular istalgan brauzerda va har qanday mobil qurilmada ishlaydi.

Umid qilamanki, ba'zi muammolarga qaramay, HTML5 video va audio elementlari, ayniqsa men taklif qilgan ajoyib kutubxonalar bilan birlashganda, mavjud veb-saytlarga qo'shish juda oson va har qanday yangi loyihalarda standart vositalar bo'lishi kerakligini ko'rsatdim.

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.

Quyidagi sahifaga tovush faylini 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. 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 foydalanilganda, 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 siz o'zingizning asosiy audio pleyer boshqaruvlarini yaratishingiz mumkin: To'xtatib turish ovoz balandligi + Ovoz balandligi - Bugun uchun hammasi shu.

Umid qilamanki, ushbu maqola sizga HTML5 tegining asosiy imkoniyatlarini tushunishga yordam berdi.

HTML5 audio audio kontent bilan ishlash uchun yaxshilangan imkoniyatlarni taqdim etadi. Yaqin vaqtgacha veb-sahifalarga audio fayllarni qo'shishning yagona yo'li integratsiya edi fon ovozi

foydalanuvchi sahifani o'chirish imkoniyatisiz ko'rayotganda o'ynagan tegdan foydalanish.
HTML5 spetsifikatsiyasiga yangi element qo‘shilishi tufayli plaginlarga ehtiyoj sezmasdan o‘rnatilgan dasturlash interfeysi bilan audio kontentni qo‘shish mumkin.
Veb-sahifaga HTML5 audio qanday qo'shiladi
1. Element brauzerini qo'llab-quvvatlash
IE: 9.0
Firefox: 3.5 asosiy qoʻllab-quvvatlash, 15.0 toʻliq qoʻllab-quvvatlash
Chrome: 3.0
Safari: 3.1
Opera: 10.5

iOS Safari: 7.1 Opera Mini: - Android brauzeri: 4.1

Controls atributi audiopleer boshqaruv interfeysini ko'rsatish uchun brauzerlarni qo'shadi - ijro etish, to'xtatib turish, ovoz balandligi tugmachalari.

Guruch. 1. Tashqi ko'rinish turli brauzerlarda audio pleer

Hozirda barcha brauzerlarda ishlaydigan audio format mavjud emas, shuning uchun kontentning eng keng auditoriyaga kirishiga ishonch hosil qilish uchun elementning src atributi yordamida taqdim etilgan bir nechta audio manbalarni kiritish tavsiya etiladi. Shu bilan birga, elementni qo'llab-quvvatlamaydigan brauzerlar uchun zaxira tarkibni qo'shishingiz mumkin.

Yuklab olish nomi.mp3

Jadval 1. Teg atributlari Atribut

avtomatik ijro	Sahifani yuklagandan so'ng darhol audio faylni avtomatik ravishda tinglash.
nazorat qiladi	Brauzerga asosiy ijroni boshqarish vositalarini ko‘rsatishni aytadi (ijroni boshlash va to‘xtatish, yozuvdagi boshqa joyga o‘tish, ovoz balandligini sozlash).
halqa	Audio faylni loop tinglash.
ovozsiz	Audio faylni o'ynatganda ovozni o'chiradi.
oldindan yuklash	Atribut uchun javobgardir oldindan yuklash audio kontent. Majburiy emas, ba'zi brauzerlar buni e'tiborsiz qoldiradilar. Mumkin qiymatlar: avtomatik - Brauzer butun audio faylni yuklab oladi, shunda foydalanuvchi uni o'ynay boshlaganda mavjud bo'ladi. metadata - Brauzer audio faylning birinchi kichik qismini uning asosiy xususiyatlarini aniqlash uchun yuklab oladi. hech - audio faylni avtomatik yuklab olish yo'q.
src	Audio faylning mutlaq yoki nisbiy URL manzilini o'z ichiga oladi.

2. Audio kodeklar

Audio kodek (dekoder) - bu raqamli ma'lumotlarni audio fayl yoki audio oqim formatiga aylantirish uchun dastur. Ommabop audio formatlari:

MP3 yo'qolgan siqishni ishlatadigan va fayl hajmini bir necha marta kamaytirishga imkon beruvchi eng mashhur audio formatdir. Litsenziya to'lovlari tufayli Firefox va Opera qo'llab-quvvatlanmaydi.

A.A.C. (Kengaytirilgan audio kodek)- yopiq kodek, MP3 ga o'xshash, ammo ikkinchisiga nisbatan u ko'proq narsani qo'llab-quvvatlaydi yuqori sifatli o'xshash fayl hajmi bilan ovoz.

Ogg Vorbis bepul formatdir ochiq manba, Firefox, Opera va Chrome-da qo'llab-quvvatlanadi. beradi yaxshi sifat ovozli, lekin apparat o'yinchilari tomonidan keng qo'llab-quvvatlanmaydi.

3. Muqobil media resurslari

Element va uchun bir nechta media resurslarini qo'shish uchun ishlatiladi. Brauzer qo'llab-quvvatlanadigan media turi yoki kodek asosida tanlashi mumkin bo'lgan muqobil video/audio fayllarni bildiradi.

4. Subtitrlar va sarlavhalar qo'shing

Element bola element sifatida ishlatiladi va . Subtitrlar, media sarlavhalari yoki boshqalar uchun matn trekini qo'shadi matnli ma'lumotlar, audio yoki video faylni o'ynatishda ko'rinadigan bo'lishi kerak.

Jadval 3. Teg atributlari Atribut tavsifi, qabul qilingan qiymat

standart	Ushbu trek sukut bo'yicha ijro etilishini bildiradi. Faqat bitta element berilgan atributni o'z ichiga olishi mumkin.
mehribon	Sukut bo'yicha ko'rsatiladigan matnli trek turini belgilaydi; Qabul qilingan qiymatlar: taglavhalar - video orqali matn sifatida ko'rsatilgan dialoglar va ovoz effektlarining tarjimasi (kar foydalanuvchilar uchun). boblar - bo'lim sarlavhalarini media fayl bo'ylab harakatlanish uchun ro'yxat sifatida qo'shadi. tavsiflar - videoda sodir bo'layotgan voqealarning audio tavsifini qo'shadi (ko'zi ojiz foydalanuvchilar uchun). metadata - skriptlar tomonidan ishlatiladigan metadata foydalanuvchilarga ko'rsatilmaydi. subtitrlar - matnni takrorlash audio trek video, video uchun subtitr sifatida ko'rsatiladi.
yorliq	Trek nomini qo'shadi. Agar bu atribut o'rnatilmagan bo'lsa, brauzer standart qiymatni qo'llaydi.
src	Matn treki ma'lumotlariga mutlaq yoki nisbiy URLni o'z ichiga oladi.
srclang	Ijro etilayotgan trek tili.

5. Audio pleyerning stilize qilingan namunasi

CSS uslublaridan foydalanib, audio pleeringizga g'ayrioddiy ko'rinish berishingiz mumkin. Ijro qilish kichik skript (jQuery kutubxonasi yordamida) yordamida boshqariladi, ovoz kursorni yozuv ustiga olib borganingizda paydo bo'ladi.

Ilgari brauzerlar audio va video kontentni qo'llab-quvvatlash uchun o'rnatilgan imkoniyatlarga ega emas edi, lekin Internetning rivojlanishi bilan zamonaviy brauzerlarning xususiyati sifatida multimedia elementlarini qo'llab-quvvatlash zaruratga aylandi. HTML5 barcha zamonaviy brauzerlarda qo'llab-quvvatlanadigan va yangi elementlarni taqdim etdi. Tegning asosiy maqsadi sahifaga audio kontent qo'shishdir.

Audio fayl formati saqlash muhitida (saqlash qurilmasi) saqlanganda audio ma'lumotlarning tuzilishi va taqdimot xususiyatlarini aniqlaydi. Ovozli ma'lumotlarning ortiqchaligini bartaraf qilish uchun, qoida tariqasida, maxsus audio kodeklardan foydalaniladi, buning yordamida audio ma'lumotlar siqiladi. Zamonaviy brauzerlar quyidagi 3 ta audio formatni qo'llab-quvvatlaydi:

MP3 Wav Ogg brauzerOpera I.E. Chet

HA	HA	HA
HA	HA	HA
HA	HA	HA
HA	HA	YO'Q
HA	YO'Q	YO'Q
HA	HA	YO'Q

• MP3 formati bir vaqtning o'zida kodek va konteynerdir. Yuklab olingan musiqalarni joylashtirish uchun hamma joyda keng qo'llaniladi.
• WAV formati ham bir vaqtning o'zida kodek va konteynerdir.
• Ogg konteyner + Vorbis audio kodek. U odatda "Ogg Vorbis" deb ataladi. U Xiph hamjamiyati tomonidan xususiy MP3, AAC va WMA o'rniga ishlab chiqilgan.

Audio uchun MIME turlari:

MIME turlarini formatlashMP3 Ogg Wav

audio/mpeg

audio/ogg

audio/wav

Brauzerni qo'llab-quvvatlash teg
Opera
IExplorer
Chet

	4.0	3.5	10.5	4.0	9.0	12.0

Atributlar Atribut qiymati tavsifi

avtomatik ijro	avtomatik ijro	Ovoz tayyor bo'lishi bilanoq avtomatik ravishda ishga tushishini bildiradi.
nazorat qiladi	nazorat qiladi	O'rnatilgan media fayl boshqaruvlarini ko'rsatadi (o'ynatish/to'xtatib turish tugmasi, videoning ma'lum bir qismiga o'tish imkonini beruvchi slayder va ovoz balandligini boshqarish).
halqa	halqa	Faylni tinglashni tsikllar (bizning qo'shiq yaxshi - boshidan boshlash).
ovozsiz	ovozsiz	Ovoz o'chirilishini bildiradi (ovoz yo'q).
oldindan yuklash	avto metadata yo'q	Sahifa yuklanganda audio qanday yuklanishi kerakligini belgilaydi. Avtomatik ijro atributi mavjud bo'lsa, atribut e'tiborga olinmaydi.
src	URL	Audio faylning URL manzilini belgilaydi.

Foydalanish misoli

Element element bilan bir xil atributlardan foydalanadi, kenglik, balandlik va poster atributlaridan tashqari. Elementdan foydalanishga o'xshab, quyidagi misolda ko'rsatilganidek, element yordamida bir nechta audio format variantlarini taqdim etishingiz mumkin:

HTML5-dagi audio HTML5-dagi audio Brauzeringiz ushbu audio formatini qo'llab-quvvatlamaydi.

Ushbu faylni quyidagi havoladan yuklab olishingiz mumkin:

Yuklab oling

Ushbu misolda biz:

Muammolar