Html audio yorlig'i. HTML5 audio tegini o'zlashtirish
va yana
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 tasvirlangan. HTML shablonlari va o'rnatilgan brauzer imkoniyatlari asosida multimediali fayllarni ijro etish misollari keltirilgan. Misollar bilan WEBVTT formatidagi fayllardan foydalanib, subtitrlar, sarlavhalar, tarkib jadvalining matnli trekining videoga ulanishini ko'rsatadi. Audio va video uchun schema.org formatlangan HTML5 kod shablonlari. Ovoz va videofayllarning asosiy veb -formatlari, ularning MIME turlari va video va ovozni ushbu formatga o'tkazish vositalari ko'rsatilgan.
IN HTML5 uchinchi tomon dasturlarini ishlatmasdan to'g'ridan-to'g'ri brauzer orqali audio va video fayllarni ijro etish imkonini beruvchi yangi xususiyatlar mavjud. Hozircha, bunga qaramay HTML5 endi yangilik emas, brauzerlar teglarni qanday boshqarishi haqida hali ham kelishmovchiliklar mavjud video va audio va o'yinchi qanday ko'rsatiladi. Ba'zilar buni har bir yangi versiya bilan yaxshiroq qilishadi, boshqalari esa hamon ortda qolmoqda. Butun dunyoda tendentsiya shundaki, brauzerlar multimediali fayllarni ijro etish uchun ko'proq imkoniyatlar beradi.
Screencast: shablonlardan foydalanishga misol
Videoni yuklab olish
Screencast: maqoladan andozalardan foydalanish misollari - sayt
HTML5 video va audio - bu rivojlanayotgan standart va u 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. Endi bu farq asl faylni bir nechta kodeklar bilan kodlashi va fayllarning ushbu barcha versiyalarini teglarga ulashlari bilan qoplanadi. yoki ichki teglar orqali <
manbasrc = "URL ">... Biroq, brauzer tomonidan qo'llab-quvvatlanadigan audio va video fayl formatlari orasida etakchilar paydo bo'ladi. Video uchun bu, albatta, format mp4 (H.264), va audio uchun bu format mp3 va m4a... Endi, ehtimol, barcha brauzerlar ushbu formatdagi fayllarni ijro etishga qodir. Bundan tashqari, brauzerlar Firefox, Chrome va Opera umumiy video format sifatida WEBM standartini qo'llab -quvvatlashga rozi bo'ldi. Menimcha, hozircha foydalanishning eng maqbul varianti HTML5 video va audio formatda bitta multimediali faylni ishlatishga asoslangan sxema bo'ladi mp4(H.264) video va m4a audio uchun va JsHTML5 o'yinchi. Belgilangan formatda faqat bitta fayl audio yoki video konteynerga ulangan. Hozir ko'pchilik brauzerlar mp4 formatini o'ynashi mumkin. Bog'langan JS kutubxonasi brauzerda o'rnatilgan pleyerga uslub beradi. Agar brauzer formatni qo'llab -quvvatlamasa mp4/m4a, keyin Js pleer, bu holda, multimediya faylini ijro etish uchun Flash pleer ulanishini amalga oshiradi. Mp4 formati juda mashhur bo'lib ketganini hisobga olsak, biz uni brauzerlarda ijro etish bilan bog'liq muammolar ehtimolini past deb umid qilishimiz mumkin. Bu sxema ko'rsatilgan formatdagi faqat bitta media faylni talab qiladi, bu diskdagi bo'sh joy va fayllarni qayta ishlash uchun resurslarni tejaydi. Bundan tashqari, bunday sxema strategik jihatdan to'g'ri bo'ladi, chunki tendentsiya shundaki, brauzerlar tobora ko'proq amalga oshirilmoqda HTML5 video va audio.
Pleyerga HTML5 faylini ko'rsatish uchun, faylning URL manzilidan tashqari, uzatish va MIME fayl turi, shuning uchun brauzer qaysi kodekdan foydalanishi kerakligini tushunadi. Jadvalda men eng keng tarqalgan fayl formatlarini va ularning ro'yxatini keltiraman MIME turlari.
Fayl formatlari va ularning MIME turlari
Media fayllar
Kengaytmalar
Mime turi
Audio mp3
mp3
audio / mpeg
Audio mp4
m4a
audio / mp4
Ovozli veb
webm
audio / veb
Audio ogg
ogg
audio / ogg
Video mp4 (H.264)
mp4
video / mp4
Webm video
webm
video / veb
Ogg video
ogv
video / ogg
Audio va video kodlash vositalari
Video va audio fayllarni yuqoridagi veb formatlarga kodlash uchun siz audio va videofayllarni veb uchun keng tarqalgan asosiy formatlarga aylantirishni qo'llab -quvvatlaydigan ochiq kodli dasturdan foydalanishingiz mumkin ( MP4, WebM, Ogg teorisi, MP3 va h.k.). Miro video konvertori turli xil operatsion tizimlar uchun mavjud Windows, Mac va Linux va yuklangan video va ovozni avtomatik rejimda qayta ishlash uchun veb -serverda foydalanish uchun qulay bo'lgan konsol yordamchi dasturlarining grafik qobig'i.
Schema.org belgisi bilan audio misol uchun HTML5 kodi:
Audio sarlavha
Shunday qilib, koddan olingan mikro-markirovka ma'lumotlari yuqorida tasvirlangan audio shablonni qidiradi.
Audioobject itemType = http://schema.org/AudioObject nomi = Ovoz sarlavhasi tavsifi = Ovoz tavsifi ... isfamilyfriendly = true encodingformat = mp3 muddati = PT04M59S uploaddate = 2015-12-31 image = image.jpg alternatename = Alternativ audio sarlavhasi contenturl href = faylga havola.mp3 matn = Ovoz muallifi shaxsini yuklashType = http://schema.org/Person url href = URL matn = Muallif ismi = Muallif ismi tasviri = To'liq url to person.jpg
Ovozni minimal belgilash schema.org o'z ichiga olishi kerak itemprop= "ism", itemprop= "tavsif", itemprop= "contentUrl". Qolgan mulklar ixtiyoriy.
Standart HTML5 tegidan foydalanish misoli
Demoda men teg uchun ariza topshirdim atribut orqali sinfCSS Ekran maydoniga qarab video maydonining kengligini dinamik qiladigan uslublar. O'yinchi balandlikka moslashadi. Brauzer oynasining hajmini o'zgartiring va u qanday ishlashini bilib oling. Shuning uchun, bu demoning kod manbasida atributlar yo'q kenglik va balandlik teg uchun , ular almashtiriladi CSS uslublar. Ammo shablon kodlari ro'yxatida bu ko'rsatilmagan allaqachon o'ziga xosdir.
HTML5 kodi, masalan, schema.org belgisi bilan video:
Video sarlavhasi
YouTube -da tomosha qiling
Koddan olingan mikro-markirovka ma'lumotlari yuqorida tasvirlangan video shablonni shunday izlaydi.
Videoobject itemType = http://schema.org/VideoObject nomi = Video eskiz sarlavhasi imageobject itemType = http://schema.org/ImageObject contenturl = video-thumbnail.jpg manzili | png kengligi = 100 balandlik = 100 davomiyligi = PT14M59S oilaviy do'stlik = true uploaddate = 2015-12-31 description = Video uchun qisqacha tavsif ... url href = faylga havola.mp4 matn = Video sarlavhasi muallifi shaxs itemType = http://schema.org/Person url href = Muallif veb-saytiga URL sahifa matni = muallifning ismi = muallifning ismi tasviri = muallifning to'liq URL.jpg thumbnailurl = file.jpg uchun manzil | png
Eng kam zarur tomonidan qidiruv tizimlari uchun video belgilash schema.org misol kodida ko'rsatilgan barcha xususiyatlarni o'z ichiga olishi kerak itemprop blokdan tashqari itemprop= "muallif", bu qidiruv tizimlari uchun ixtiyoriydir va agar uni to'ldirish uchun ma'lumotlar bo'lmasa, uni o'chirish mumkin. Uchun video-eskiz Yandex mikro-belgini belgilashni talab qiladi schema.org Qanday itemprop= "eskiz" kabi ImageObject, lekin Google sifatida belgilashni talab qiladi itemprop= "thumbnailUrl", shuning uchun siz kiritishingiz kerak video-eskiz faylni ikki marta va ikkinchi teg img uslubga ega bo'ldi ko'rsatish: yo'q, brauzerda ko'rsatilmasligi uchun. Foydalanish o'rniga img bilan belgilang ko'rsatish: yo'q bu xususiyatni teg bo'yicha o'tkazing havola atribut orqali href... Bundan tashqari, mikro belgilash meta va orqali o'tishi mumkinligiga qaramay havola, shunga qaramay, agar iloji bo'lsa, asosan foydalanuvchiga ko'rsatiladigan teglarga mikro belgilar qo'shish tavsiya etiladi. Mikro belgilarni tasdiqlash schema.org bu havolalar yordamida amalga oshirilishi mumkin:,. Mikro belgilashdan foydalanishning asosiy afzalligi-qidiruv robotlari va ijtimoiy tarmoq robotlari uchun bunday tarkibning qulayligi. Bu robotlar belgilangan ma'lumotlarni oladi va yig'adi. Shunday qilib, mikro-markirovkadan foydalanish yaxshilanadi SEO saytida joylashgan va ijtimoiy tarmoqlarda ma'lumotlarni avtomatik ravishda tarqatishga hissa qo'shadi. Schema.org mikro-belgilash sxemasi bilan belgilangan videolarning batafsil tavsifi VideoObjec t saytida. Shuni ham ta'kidlash joizki, siz o'z saytingizga videoni to'g'ridan -to'g'ri emas, balki video -xosting vidjetlaridan foydalangan holda joylashtirasiz Yandex.Video yoki Youtube, keyin siz o'zingizning HTML kod blokingizni vidjet kodli blok ostida video ta'rifi bilan qo'shishingiz va unga mikro belgi qo'yishingiz mumkin. Schema.org bu video uchun. Shu bilan birga, URL parametri - videoga havola sifatida, statik faylga to'g'ridan -to'g'ri havolani emas, balki videoxostingdan olingan havolani ko'rsating. Schema.org spetsifikatsiyasida havola to'g'ridan -to'g'ri fayl bo'lishi kerakligi aytilgan bo'lsa -da, qidiruv tizimlari video xostingdagi videolarga havolalarni qayta ishlaydilar ( misollarni veb -ustasi bo'limida Yandex veb -saytida ko'ring), shunga qaramay, bunday havola faylni yuklay olmaydi va uni to'g'ridan -to'g'ri sahifadagi HTML5 media pleerida, faqat video xosting vidjetida ko'ra olmaydi.
Agar siz multimediali audio va videofayllarni qaysi xostingdan yuklab olish kerakligi haqidagi savolga duch kelsangiz, Yandex Diskdan WEB sahifasiga media fayllarni kiritish variantini tavsiflovchi maqolaga qarang.
Atributlar va teglar:
Atributlar src, oldindan yuklamoq, avtomatik, mediagrup, pastadir, ovozi o'chirilgan, nazorat qiladi barcha media elementlari, shu jumladan teglar uchun umumiy atributlardir va .
Nima uchun telefon doimo o'zini qayta ishga tushiradi
Soxta planshetni asl nusxadan qanday ajratish mumkin?
Samsungning asl planshetini soxtasidan qanday ajratish mumkin?