андью

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

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

11937

Энэхүү нийтлэлд аудио болон видео HTML5 контейнерийн бүтэц, видео, аудио, эх сурвалж, трек хаягууд болон тэдгээрийн шинж чанаруудыг боломжит утгуудтай хамт тайлбарласан болно. HTML загварууд болон хөтөч дээр суурилуулсан боломжууд дээр үндэслэн мультимедиа файлуудыг тоглуулах жишээг үзүүлэв. WEBVTT форматтай файлуудыг ашиглан хадмал орчуулга, гарчиг, агуулгын хүснэгтийн видео бичлэгийн холболтыг жишээн дээр үзүүлэв. Аудио болон видеонд зориулсан schema.org бичил тэмдэглэгээ бүхий HTML5 кодын загваруудыг танилцуулж байна. Аудио болон видео файлын үндсэн вэб форматыг MIME төрлүүд болон видео болон аудиог эдгээр формат руу хөрвүүлэх хэрэгслүүдийг зааж өгсөн болно.

HTML5 нь аудио болон видео файлуудыг ашиглахгүйгээр шууд хөтөч дээр тоглуулах боломжийг олгодог шинэ боломжуудыг агуулдаг гуравдагч талын програмууд. Одоогоор HTML5 шинэ байхаа больсон ч хөтчүүд видео болон аудио шошгыг хэрхэн боловсруулж, тоглуулагч өөрөө хэрхэн харагдах талаар санал зөрөлдөөн байсаар байна. Зарим хүмүүс үүнийг хийх болгондоо илүү сайн хийдэг шинэ хувилбар, бусад нь хоцрогдсон хэвээр байна. Дэлхий даяар хөтчүүд мултимедиа файлуудыг тоглуулах илүү олон функцээр хангах хандлагатай байна.

Screencast: Загвар ашиглах жишээ

Видео татаж авах

Дэлгэц: нийтлэл дэх загваруудыг ашиглах жишээ - вэбсайт

HTML5 видео болон аудио нь хөгжиж буй стандарт бөгөөд ямар ч аудио эсвэл видео форматтай холбоогүй тул хөтчүүдийн дэмждэг зүйлд ялгаатай байдаг. форматуудаудио болон видео файлууд. Энэ ялгааг одоо тэд кодчилсноор нөхөж байна эх файлхэд хэдэн өөр кодлогч болон эдгээр бүх файлын хувилбаруудыг хаягууд эсвэл үүрлэсэн шошгуудаар холбоно< source src=" URL">. Гэсэн хэдий ч хөтчүүдийн дэмждэг аудио болон видео файлын форматуудын дунд удирдагчид гарч ирж байна. Видеоны хувьд энэ нь мэдээжийн хэрэг mp4 формат (H.264), аудионы хувьд mp3 болон m4a формат юм. Одоо бүх хөтчүүд эдгээр форматтай файлуудыг тоглуулах боломжтой болсон байх. Мөн, Firefox хөтчүүд, Chrome болон Opera нь WEBM стандартыг нийтлэг видео формат болгон дэмжихээр тохиролцсон. Миний бодлоор одоо HTML5 видео болон аудио ашиглах хамгийн оновчтой сонголт бол mp4 форматтай нэг мультимедиа файл ашиглахад суурилсан схем байх болно ( H.264) видео болон аудио болон JS HTML5 тоглуулагчийн хувьд m4a. Заасан форматтай зөвхөн нэг файл аудио эсвэл видео контейнерт холбогдсон байна. Өнөө үед ихэнх хөтчүүд mp4 форматыг тоглуулах чадвартай байдаг. Холбогдсон JS номын сан нь хөтөч дээр суулгасан тоглуулагчийг загварчлах болно. Хэрэв хөтөч mp4 / m4a форматыг дэмждэггүй бол JS тоглуулагч энэ тохиолдолд хэрэгжүүлдэг. Флэш холболтмультимедиа файл тоглуулах тоглуулагч. Mp4 формат нь маш их алдартай болсон тул хөтчүүдэд тоглуулахтай холбоотой асуудал гарах магадлал багатай гэж найдаж болно. Энэ схем нь заасан форматтай зөвхөн нэг мультимедиа файлыг шаарддаг бөгөөд энэ нь дискний зай болон файл боловсруулах нөөцийг хэмнэдэг. Түүнчлэн, хөтчүүд HTML5 видео болон аудиог илүү сайн хэрэгжүүлэх хандлагатай байгаа тул ийм схем нь стратегийн хувьд илүү зөв байх болно.

HTML5 тоглуулагчид тоглуулах файлыг зааж өгөхийн тулд файлын URL-аас гадна MIME төрлийг дамжуулах ёстой бөгөөд ингэснээр хөтөч ямар кодлогч ашиглах шаардлагатайг ойлгох болно. Доорх хүснэгтэд хамгийн түгээмэл файлын форматууд болон тэдгээрийн MIME төрлүүдийг жагсаав.

Файлын формат ба тэдгээрийн MIME төрлүүд Медиа файлууд Mime төрлийн өргөтгөлүүд

Аудио mp3	mp3	аудио / mpeg
Аудио mp4	м4а	аудио/mp4
Аудио вэб	вэбм	аудио/webm
Аудио огг	ogg	аудио/ogg
Видео mp4 (H.264)	mp4	видео/mp4
Видео вэб	вэбм	видео/webm
Видео бичлэг	ogv	видео/ogg

Аудио болон видео кодлох хэрэгслүүд

Видео болон аудио файлуудыг дээрх вэб формат руу кодлохын тулд та ашиглаж болно нээлттэй програм, энэ нь аудио болон видео файлуудыг вэбд түгээмэл хэрэглэгддэг үндсэн формат руу хөрвүүлэхийг дэмждэг ( MP4, WebM, Ogg Theora, MP3 гэх мэт.). Miro Video Converter нь өөр хувилбарт зориулагдсан үйлдлийн системүүд- Windows, Mac болон Linux үйлдлийн системүүд нь консолын хэрэгслүүдэд зориулагдсан график бүрхүүл бөгөөд ашиглахад тохиромжтой вэб сервертатаж авсан видео болон аудиог автоматаар боловсруулах.

: schema.org бичил тэмдэглэгээ бүхий HTML5 аудио жишээ код: Аудио толгой

HTML5 аудиог таны хөтөч дэмждэггүй.

Аудио татаж авах

Кодоос гаргаж авсан бичил тэмдэглэгээний өгөгдөл нь дээр дурдсан аудио загварт иймэрхүү харагдах болно.

Audioobject itemType = http://schema.org/AudioObject нэр = Аудио гарчгийн тайлбар = Аудио тайлбар... гэр бүлийн ээлтэй = үнэн кодчилол = mp3 үргэлжлэх хугацаа = PT04M59S байршуулах огноо = 2015-12-31 зураг = image.jpg-н бүрэн URL өөр нэр = Өөр хувилбар гарчиг аудио контентurl href = файлын URL.mp3 текст = Татаж авах аудио зохиогчийн файлын төрөл = http://schema.org/Person url href = URL текст = Зохиогчийн нэр = Зохиогчийн нэрийн зураг = Хүн рүү бүрэн url.jpg

schema.org-ын дагуу хамгийн бага аудио тэмдэглэгээнд itemprop = "нэр" , itemprop "тайлбар" , itemprop "contentUrl" багтсан байх ёстой. Үлдсэн шинж чанарууд нь сонголттой байдаг.

Стандарт HTML5 шошго ашиглах жишээ:

Үзүүлэн дээр би CSS-ийн хэв маягийг классын атрибутаар дамжуулан шошгон дээр хэрэглэж, дэлгэцийн хэмжээнээс хамааран видео талбайн өргөнийг динамик болгосон. Тоглогч өөрөө өндрийг тохируулдаг. Хэрхэн ажиллаж байгааг харахын тулд хөтчийнхөө цонхны хэмжээг өөрчилж үзнэ үү. Тиймээс, энэхүү үзүүлэнгийн кодын эх сурвалжид шошгоны өргөн ба өндрийн шинж чанарууд байхгүй бөгөөд тэдгээрийг CSS загвараар сольсон болно. Гэхдээ энэ аргыг загвар кодын жагсаалтад харуулаагүй тул аль хэдийн тодорхой зүйл юм.

schema.org бичил тэмдэглэгээ бүхий HTML5 видео жишээ код: Видеоны гарчиг

YouTube дээр үзэх

HTML5 видеог таны хөтөч дэмждэггүй.

Видеог татаж авах: Видеоны гарчиг

Кодоос гаргаж авсан бичил тэмдэглэгээний өгөгдөл нь дээр дурдсан видеоны загварт иймэрхүү харагдах болно.

Videoobject itemType = http://schema.org/VideoObject нэр = Видеоны нэрний өнгөц зураг imageobject itemType = http://schema.org/ImageObject contenturl = video-thumbnail.jpg хаягийн URL|png өргөн = 100 өндөр = 100 үргэлжлэх хугацаа = PT14M59ly = үнэн байршуулах огноо = 2015-12-31 тайлбар = Товч тодорхойлолтвидеонд зориулсан... url href = файлын URL.mp4 текст = Видеоны гарчиг зохиогч хүн itemType = http://schema.org/Person url href = Зохиогчийн вэб хуудасны URL текст = зохиогчийн нэр = зохиогчийн нэр зураг = Бүтэн URL to author.jpg thumbnailurl = файлын URL.jpg|png

Хамгийн бага шаардлагатайХайлтын системүүдийн хувьд schema.org-ын дагуу видео тэмдэглэгээ нь хайлтын системд нэмэлт бөгөөд өгөгдөл байхгүй тохиолдолд устгаж болох itemprop = "зохиогч" блокоос бусад жишээ кодонд үзүүлсэн бүх itemprop шинж чанарыг агуулсан байх ёстой. дүүргэхийн тулд. Видеоны өнгөц зургийн хувьд Yandex танаас schema.org сайтын дагуу бичил тэмдэглэгээг ImageObject хэлбэрээр itemprop = "thumbnail" болгон зааж өгөхийг шаардаж байна. Google itemprop ="thumbnailUrl"-г зааж өгөх шаардлагатай тул та видеоны өнгөц зургийн файлыг хоёр удаа оруулах шаардлагатай бөгөөд ингэснээр хөтөч дээр харагдахгүйн тулд хоёр дахь img шошго нь: none загварын дэлгэцийг хүлээн авсан. Display:none бүхий img тагийг ашиглахын оронд та энэ өмчийг href атрибутаар дамжуулан холбоосын шошго руу дамжуулж болно. Мөн микро тэмдэглэгээг хэрэглэгчдэд үзүүлэхгүй мета болон холбоос хаягаар дамжуулж болох ч боломжтой бол хэрэглэгчдэд үзүүлэх шошгон дээр микро тэмдэглэгээг нэмэхийг зөвлөж байна. Schema.org бичил тэмдэглэгээний баталгаажуулалтыг дараах холбоосыг ашиглан хийж болно: , . Бичил тэмдэглэгээг ашиглах гол давуу тал нь хайлтын роботууд болон нийгмийн сүлжээний роботуудад зориулсан ийм контентын тав тухтай байдал юм. Эдгээр роботууд шошготой өгөгдлийг гаргаж аваад нэгтгэдэг. Тиймээс бичил тэмдэглэгээний хэрэглээ сайжирдаг SEOсайт болон өгөгдлийг автоматаар түгээх ажлыг хөнгөвчилдөг нийгмийн сүлжээнд. Вэбсайт дээрх VideoObjec t схемээр тэмдэглэгдсэн видеонуудад зориулсан Schema.org бичил тэмдэглэгээний дэлгэрэнгүй тайлбар. Түүнчлэн, та вэбсайтдаа шууд биш, харин Yandex.Video эсвэл YouTube видео байршуулах виджет ашиглан видео оруулах тохиолдолд виджет кодын блокийн доор видеоны тайлбар бүхий HTML кодын блок нэмж болно гэдгийг тэмдэглэх нь зүйтэй. мөн энэ видеонд Schema.org тэмдэглэгээг оруулаарай. Үүний зэрэгцээ, URL параметрийн хувьд - видеоны холбоос, статик файл руу шууд холбоосыг зааж өгөхгүй, харин видео байршуулахаас хүлээн авсан холбоосыг зааж өгнө. Schema.org-ийн тодорхойлолтод холбоос нь шууд файлтай байх ёстой гэж заасан боловч хайлтын системүүд видео байршуулах видеоны холбоосыг боловсруулдаг ( Вэбмастер хэсгээс Yandex вэбсайт дээрх жишээг үзнэ үү), та ийм линкээс файлыг татаж авах боломжгүй бөгөөд та үүнийг хуудсан дээрх HTML5 медиа тоглуулагч дээрээ шууд үзэх боломжгүй, зөвхөн видео байршуулах виджет дээр үзэх боломжтой.

Хэрэв та мультимедиа аудио болон видео файлуудыг аль хостингоос татаж авах вэ гэсэн асуулттай тулгарвал Yandex Disk-ээс WEB хуудсанд медиа файл оруулах сонголтыг тайлбарласан нийтлэлийг харна уу.

Шинж чанарууд ба шошго:

src , preload , autoplay , mediagroup , loop , muted , controls шинж чанарууд нь шошго болон .

автоматаар тоглуулах шинж чанар: аль эсвэл

• Автоматаар тоглуулах атрибут нь эсвэл шошгонд байгаагаар нь тодорхойлогддог бөгөөд энэ атрибутад утга тогтоох шаардлагагүй, зөвхөн байх нь хангалттай. Элемент кодыг засдаг HTML засварлагчдын хувьд та энэ атрибутыг автоматаар тоглуулах = "autoplay" болгож тохируулах боломжтой бөгөөд энэ нь зүгээр л атрибут байгаатай адил юм. Автомат тоглуулах шинж чанар байгаа нь вэб хуудсыг ачаалсны дараа шууд файлыг тоглуулж эхлэхийг хөтчид хэлдэг. Үүний дагуу автоматаар тоглуулах шинж чанар нь видеог тоглуулагч руу хэрхэн ачаалахыг хянадаг урьдчилан ачаалах атрибутын утгыг дарж, учир нь видео шууд тоглож эхлэх ёстой тул ачаалах ёстой. Анхдагч байдлаар автоматаар тоглуулах шинж чанар байхгүй.

хяналтын шинж чанар: аль эсвэл

• Controls шинж чанар нь хуудас ачаалагдсан боловч бичлэг тоглуулж эхлээгүй үед тоглуулагчийн хяналтын самбарыг харуулахыг хөтчид хэлдэг. Энэ шинж чанар нь автоматаар тоглуулах атрибуттай адил зөвхөн эсвэл шошгонд байгаагаар нь тодорхойлогддог бөгөөд утга шаарддаггүй, зөвхөн байх нь хангалттай. Анхдагч байдлаар, энэ шинж чанар байхгүй, өөрөөр хэлбэл. Тоглож эхлэхээс өмнө тоглуулагч хяналтын самбарыг харуулахгүй. Файл тоглож эхлэх үед хулганыг тоглуулагч талбар дээр аваачихад хяналтын самбар гарч ирнэ.

давталтын шинж чанар: аль эсвэл

• Loop шинж чанар нь тоглуулагчийг файлыг гогцоонд тоглуулахад хүргэдэг. Атрибут нь зөвхөн эсвэл шошгонд байгаагаар нь тодорхойлогддог бөгөөд ямар ч параметргүй байдаг. Анхдагч байдлаар давталтын шинж чанар байхгүй.

урьдчилан ачаалах шинж чанар:

• preload шинж чанар нь вэб хуудсыг ачаалахын зэрэгцээ файлын ачааллыг зааж өгөх ба дараах гурван утгын аль нэгийг авна.
  • аль нь ч биш - вэб хуудсыг ачаалахын зэрэгцээ файлыг татаж болохгүй. Энэ нь тоглуулах товчийг дарсны дараа л файл тоглуулагчид ачаалагдаж эхэлнэ гэсэн үг. Энэ нь хуудас ачааллыг хурдасгахад тохиромжтой. None утга нь урьдчилан ачаалах атрибутын өгөгдмөл утга учир энэ тохиолдолд урьдчилан ачаалах атрибутыг шошгонд огт оруулахгүй байх боломжтой.
  • мета өгөгдөл - вэб хуудсыг ачаалахын зэрэгцээ файлыг татаж авдаггүй, харин мультимедиа файлын мета өгөгдлийг татаж авдаг.
  • автомат - вэб хуудсыг ачаалахын зэрэгцээ файлыг бүрэн татаж авах. Энэ сонголтоор хөтчүүд медиа файлыг автоматаар ачаалах болно вэб хуудас y, гэхдээ энэ нь хуудсыг өөрөө ачаалах, хөтөч дээр үзүүлэхэд саад болохгүй. Хэрэв эсвэл таг-д хоосон утгатай preload = "" шинж тэмдэг заасан бол түүний автомат утгыг ашиглана.
  • Автоматаар тоглуулах шинж чанарыг ашигласан тохиолдолд урьдчилан ачаалах атрибутыг дарна.

src шинж чанар:

• шошгоны src атрибут эсвэл шошгон доторх мультимедиа файлын замыг нэн даруй тохируулах боломжийг танд олгоно. Зам нь протокол болон домайныг зааж өгсөн эсвэл одоогийн сайтын үндэстэй холбоотой бүрэн байж болно. Та мөн аудио эсвэл видео саванд суулгасан шошгонд файл руу хүрэх замыг зааж өгч болно.< source src=" URL"> .

Видео шошгын постерын шинж чанар:

• зурагт хуудасны шинж чанар нь зөвхөн шошгонд ашиглагддаг бөгөөд видео байхгүй үед харагдах зургийн URL-г (gif, png, jpeg гэх мэт) зааж өгдөг. Хэрэв зурагт хуудасны шинж чанарыг тохируулаагүй бол хөтөч тоглуулагч видеоны эхний хүрээг харуулахыг оролдох болно.

Видео шошгын өргөн ба өндрийн шинж чанарууд:

• өргөн ба өндрийн шинж чанарууд нь зөвхөн шошгонд хамаарах бөгөөд видео тоглуулагчийн тоглуулах талбайн өргөн ба өндрийг тус тус тохируулна. Утга нь пиксел эсвэл хувиар тодорхойлогдсон эерэг бүхэл тоо байх төлөвтэй байна. Эдгээр шинж чанаруудыг тохируулах нь видеоны дэлгэцийн хэмжээнд нөлөөлөх боловч видеоны харьцааг өөрчлөхгүй. Видео нь пропорцоо хадгалахын зэрэгцээ заасан хэмжээсийг тохируулах болно. Хэрэв заасан хэмжээсүүд нь видеоны пропорцтой тохирохгүй байвал видеоны дээд ба / эсвэл хажуугийн ирмэг дээр бараан судлууд байх болно. Тиймээс, эдгээр параметрүүдийг тохируулахдаа тэдгээрийн харьцааг тоглуулж буй видеоныхтой адил сонгох эсвэл зөвхөн өргөнийг тохируулахыг зөвлөж байна, тоглуулагч өөрөө өндрийг тохируулна.
• Хэрэв эдгээр параметрүүдийн аль нэгийг нь эсвэл хоёуланг нь заагаагүй бол зурагт хуудасны шинж чанарт заасан тохирох зургийн хэмжээнээс тодорхойгүй параметрүүдийг авна.
• Хэрэв зурагт хуудасны шинж чанар байхгүй бол эдгээр параметрүүдийг дараах байдлаар тохируулна: өргөн = 300 пиксел, өндөр нь = 150 пиксел. Видео талбайн хэмжээсийг клипний пропорцын дагуу тооцоолох, зохицуулахгүйн тулд зөвхөн нэг өргөн параметрийг тохируулахыг зөвлөж байна, дараа нь тоглуулах хэсгийн өндөр (өндөр) нь видеоны пропорциональ дээр үндэслэн автоматаар сонгогдоно. .
• Мөн HTML5 тоглуулагчийн хэмжээ, загварт нөлөөлж болно CSS шинж чанаруудшошгонд хэрэглэсэн эсвэл .

дуугүй атрибут: аль эсвэл

• Дууг хаасан шинж чанар нь HTML5 тоглуулагчийн таг эсвэл дууг хаасан төлөвт оруулдаг. Өгөгдмөлөөр, атрибут байхгүй байна.

crossorigin шинж чанар:

• Crossorigin шинж чанар нь хөтөчийг энэ элементийн CORS хүсэлтийг гүйцэтгэхийг хэлдэг. Анхдагч байдлаар, атрибут байхгүй бөгөөд энэ нь CORS хүсэлтийг огт ашиглахгүй гэсэн үг юм. Хэрэв атрибут байгаа бол боломжит утгууд нь үл мэдэгдэх бөгөөд ашиглах итгэмжлэл юм. CORS () нь орчин үеийн хөтөч дээрх технологи бөгөөд одоогийн хуудасны домэйноос бусад домэйноос одоогийн вэб хуудсанд нөөц ачаалах зөвшөөрлийг удирдах боломжийг олгодог. CORS стандартад зориулсан хөтчийн дэмжлэг нь тухайн хуудасны домайн руу тусгай хүсэлт (толгой) гүйцэтгэх замаар домэйн дамнасан мэдээллийн аюулгүй солилцоог хэрэгжүүлэх боломжийг олгодог бөгөөд энэ хуудсанд өөр тодорхойлсон домэйны нөөцийг ачаалах боломжтой эсэхийг тодорхойлох боломжтой. Ийм хүсэлтийн хариуд сервер нь нөөцийг татаж авах боломжтой домэйнүүдийг зааж өгөх ёстой.

mediagroup шинж чанар: div (маржин: 1em auto; байрлал: харьцангуй; өргөн: 400px; өндөр: 300px; ) видео (байршил; үнэмлэхүй; доод: 0; баруун: 0; ) видео: анхны хүүхэд ( өргөн: 100%; өндөр : 100%; ) видео: сүүлчийн хүүхэд ( өргөн: 30%; )

• Mediagroup шинж чанар нь хуудасны өөр өөр газар медиа файлуудын бүлэг үүсгэх замаар олон медиа файлын хяналтыг нэг MediaController болгон нэгтгэх боломжийг олгодог. Энэ бүлэгт багтсан бүх файлыг нэгэн зэрэг удирдах болно. Жишээлбэл, та өөр өөр хадмал орчуулгатай эсвэл өөр өөр видео бичлэг бүхий хуудасны өөр өөр газар нэг видеог нэгэн зэрэг тоглуулах, хянах шаардлагатай бол энэ нь тохиромжтой.

шошго ба хаалтын шошго шаардлагатай.

Хөтөч нь HTML5 болон хаягуудыг дэмждэггүй тохиолдолд энэ нь маш ховор тохиолддог бол контейнерийн хаалтын шошгын өмнө текст мессеж бичиж, файлыг татаж авах холбоосыг ихэвчлэн нэмдэг. Хэрэв хөтөч дээр суулгасан HTML5 тоглуулагчийг JS номын сан (JS тоглуулагч) нэмэлтээр удирддаг бол видео болон аудиог дэмждэггүй вэб хөтчөөс HTML5 видео болон аудиог хөтчөөр тоглуулах боломжгүй бол ихэнх нь флаш тоглуулагчийг холбодог. шошго эсвэл мультимедиа файлын формат.

Шошго:

Тоглож буй файлын замыг мөн шошгон дотор байрлуулсан src шинж чанар бүхий таг ашиглан зааж өгч болно. Шошго нь хаах шошгогүй байна.

Ихэнх тохиолдолд шошго дараах байдлаар харагдана.

мөн энэ нь үргэлж src болон type шинж чанарыг агуулдаг бөгөөд ихэнх тохиолдолд зөвхөн MIME төрөл байдаг.

Шошгоны шинж чанарууд:

• Тагийн src= "URL" шинж чанар нь мультимедиа файлын URL-г зааж өгдөг. Зам нь протокол болон домайныг зааж өгсөн эсвэл сайтын үндэстэй холбоотой бүрэн байж болно.
• Тагийн төрөл="MIME-type" шинж чанар, эсвэл илүү бүрэн type="MIME-type; codecs="codec"" нь файлын MIME төрөл болон кодлогчийг тодорхойлдог. Аудионы хувьд MIME төрлийг зааж өгөхөд хангалттай, жишээлбэл, .mp3 - type="audio/mpeg". Хэдийгээр видеоны техникийн үзүүлэлтийн дагуу кодлогчийг мөн төрлийн шинж чанарт зааж өгөх ёстой боловч одоо тэд ихэвчлэн кодлогчгүйгээр зөвхөн MIME төрлийг зааж өгдөг бөгөөд үүнийг хөтчүүдэд шийддэг.
• Тагийн ="бүх|брайл|гар|хэвлэх|дэлгэц|ярианы|проекц|tty|tv" гэсэн атрибут нь файлыг тоглуулах төхөөрөмжийн төрлийг зааж өгдөг. Өгөгдмөл утга нь бүгд байдаг тул ихэнх тохиолдолд та тоглуулах төхөөрөмжийг тусгайлан тодорхойлохыг хүсэхгүй л бол энэ шинж чанарыг огт заадаггүй.

Шошго:

HTML5 видеоны хувьд хадмал орчуулга, тайлбар, бүлэг, тайлбар (одоохондоо дэмжигдээгүй) болон мета өгөгдөл (одоохондоо дэмжигдээгүй) гэх мэт мэдээлэл бүхий нэмэлт дууг тоглуулагч дээр харуулах боломжтой. Энэ функцийг шошгон дотор тохирох шинж чанаруудтай шошго нэмэх замаар хэрэгжүүлдэг.

- хаалтын шошго байхгүй.

Энэ шошго нь гаралтыг заадаг тусгай WebVTT (Вэб видео бичлэгийн текстийн формат) форматаар видео руу нэмэлт файлуудыг холбох боломжийг олгодог. мессежвидео файлын цаг хугацааны лавлагаатай. WebVTT стандарт нь текст мессежийн гаралтыг дэмжихээс гадна түүнд зориулсан сонголтуудыг өгдөг CSS загварчлалболон видео үзэх хэсэгт байрлуулах сонголтууд. Одоогоор WebVTT файлуудыг видеонуудад текст хадмалтай хавсаргахад ашигладаг бөгөөд үүнийг бараг бүх хөтөч дэмждэг. WebVTT стандартын бусад боломжуудыг хөтчүүд өөрсдөө бүрэн хэрэгжүүлээгүй байгаа тул WebVTT-ийг бүрэн ашиглахын тулд JS тоглуулагчийг ашиглах нь дээр. Түүнчлэн, WebVTT файлуудыг JS тоглуулагчид стандарт бус байдлаар ашиглаж, JS тоглуулагч руу нэмэлт өгөгдөл, тухайлбал, видео фреймийн дүрсийг урьдчилан үзэх URL зэрэг ашиглаж болно. Видео байршуулах сайтууд дээр хийдэг шиг тоглуулагчийн эргүүлэх масштабаар (Scrub Bar Thumbnails) видео хүрээг хэрхэн урьдчилан харуулах вэ гэсэн асуултын талаар. Хөтөч дээр суулгасан тоглогчдод ийм функц хараахан байхгүй байгаа тул JS тоглуулагчаар дамжуулан нэмэлт болгон хэрэгжүүлдэг гэдгийг энд хэлэх хэрэгтэй. Үүнийг хийхийн тулд HTML5 видео болон аудио объектыг удирдаж, загварчлалыг нь гүйцэтгэдэг JS номын санг (js тоглуулагч) холбоно уу. Ийм JS тоглуулагчид видео фреймүүдийг урьдчилан үзэхийн тулд стандарт бус WEBVTT файлуудыг ашиглан урьдчилан үзэх зургийн URL-уудыг түүгээр дамжуулдаг.

WebVTT файл нь .vtt өргөтгөлтэй ердийн текст файл бөгөөд үүнд мөр мөрөөр жагсаалт хэлбэрээр, эхлэх, дуусах цаг, эдгээр шошгонд гарах текст мессеж бүхий цагийн тэмдэг бичигдсэн байдаг. Та өөр өөр хэл дээрх текст бүхий хэд хэдэн WebVTT файлыг контейнерт холбож болно. Хэл бүрийн хувьд та үүсгэх хэрэгтэй тусдаа файлболон тус бүрийг хаягаар холбоно. Шошгуудыг бүх шошгоны дараа, гэхдээ HTML5 видео алдааны мэдэгдлийн өмнө саванд оруулах ёстой. Өгөгдмөл хэл дээрх хадмалтай файлтай шошгыг одоогийн контейнерийн шошгуудын дунд хамгийн түрүүнд байрлуулах ёстой.

WEBVTT файл нь нэг буюу хэд хэдэн цагийн тэмдэг агуулж болно. Файл нь WEBVTT гэсэн үгээр эхэлдэг. Хоосон мөрүүдхолбогдох текст болон шинж чанаруудын хамт тусдаа цагийн тэмдэг. Текст агуулж болно HTML элементүүдболон CSS тэмдэглэгээ. Үүний ID-г тусгай илэрхийлэл ашиглан лавлахын тулд цагийн тэмдгийн өмнө байрлуулж болно. Эдгээр бүх мэдээллийг WEBVTT стандартад тайлбарласан болно. замын төрлийг зааж өгөх ба дараах утгыг авч болно:

• хадмал орчуулга - видеон дээр харуулсан текст хэлбэрээр хадмал орчуулга. Тоглож буй файлын хувьд та өөр өөр хэл дээрх хадмал орчуулгыг тоглуулагчийн сонголтоор тохируулах боломжтой. Ихэнх тохиолдолд энэ төрлийг ихэнх хөтөч дэмждэг тул ашигладаг.
• тайлбар - видеон дээр гарч буй текст болон дууны хэлбэрээр бичсэн тайлбарууд. Хадмалтай төстэй боловч текстээс гадна дууны эффект болон бусад аудио мэдээллийг агуулж болно.
• бүлгүүд - жагсаалтын цэс хэлбэрээр текстэд харагдах бүлгүүд бөгөөд медиа файлаар хурдан шилжихэд зориулагдсан.
• тайлбар - тайлбар, энэ текст файлууддэлгэц уншигч дээр тоглуулах видео тайлбартай.
• мета өгөгдөл - js скриптийг дамжуулах мета өгөгдөл.

Тагийн src атрибут нь зам файлын URL-г зааж өгдөг нэмэлт мэдээлэл. Шошгонд хавсаргасан файл нь WebVTT формат болон .vtt өргөтгөлтэй байна.

Тагийн srclang шинж чанар нь хэлний кодоор дамжуулан дууны хэлийг зааж өгдөг. Оросын хувьд энэ нь "ru", англи хэл дээр "en"-тэй тэнцүү байх болно.

Шошгоны шинж чанар нь тоглуулагч дээр харагдах дууны нэрийг зааж өгдөг. Хэрэв атрибутыг тохируулаагүй бол хөтөч үйлчилгээнийхээ нэрийг харуулах болно.

Тагийн өгөгдмөл шинж чанар нь видео саванд өөр зам байгаа тохиолдолд энэ замыг сонгохыг зааж өгдөг. Хэд хэдэн шошгуудын зөвхөн нэг нь өгөгдмөл шинж чанартай байж болно. Бусад холбогдсон замуудын дунд анхдагч замыг хамгийн түрүүнд байрлуулах нь дээр.

Тэмдэглэгээний жишээ: Энэ асуулт маш олон удаа гарч ирдэг тул би хичээл дээрээ тусдаа нийтлэл гаргахаар шийдсэн. HTML-д бүх хөтчүүдэд аудио тоглуулах түгээмэл технологи байдаггүй тул энэ асуудлыг шийдэхийн тулд ихэнх сайтууд дээр байдаг шиг аудио тоглуулагч файлыг татаж авахыг санал болгож байна. Бид бүгдийг алхам алхмаар хийдэг:

1. Таны сайт байрладаг хостинг дээрх үндсэн директорт (индекс файл байгаа хавтас) аудио хавтас үүсгэнэ үү. Ирээдүйд та бүх аудио файлуудыг түүнд байрлуулах болно.

3. Одоо сонгоно уу шаардлагатай файлууд, mp3 форматтай байх нь дээр. Сайтын үндсэн хэсэгт аудио хавтас үүсгээд тэдгээрийг байршуулна уу.

4. Тоглогчийн холболтын кодыг оруулахад л үлдлээ. Энэ нь ямар ч сайтад тохиромжтой. Зөв газарт та тоглуулагчийн файл болон аудио файл руу орох замыг зааж, өөрийн домайн болон аудио файлын нэр гэсэн үгсийг орлуулахад хангалттай.

Мөн бүх зүйл бэлэн боллоо! Та мөн ажлын жишээг харж болно.

Хэрхэн суулгах вэ дэвсгэр хөгжим html дээр би HTML болон хөтчийн чадавхийг ашигладаг тул та хуудсанд арын хөгжим оруулах боломжтой. Танд аудио файл хэрэгтэй болно шаардлагатай формат: WAV, AU, MIDI эсвэл MP3. Та жишээ болгон заасан өргөтгөлтэй ямар ч файлыг ашиглаж болно.

Эхний арга бол оруулах шошго юм. Embed элемент нь хөтөч анх ойлгодоггүй объектуудыг (жишээлбэл, видео файл, флаш кино, зарим аудио файл гэх мэт) ачаалах, харуулахад ашиглагддаг.

Синтакс нь маш энгийн:

Хаалтын шошго шаардлагагүй.

Одоо шинж чанаруудтай бичлэгийн жишээг, мөн тэдгээрийн код тайлалтыг доор авч үзье.

Html дээр аудио тоглуулахын тулд шошгоны шинж чанаруудыг оруулах
өргөн - самбарын өргөнийг пикселээр (эсвэл хувиар)
өндөр - самбарын өндөр пикселээр (эсвэл хувиар)
зэрэгцүүлэх - тексттэй харьцуулахад самбарын байрлал, боломжит утгууд нь зүүн, баруун, төвд байна
нуугдмал - самбарыг нуух боломжийг олгодог, шинж чанарын утгууд: үнэн - самбар нуугдсан, худал - самбар харагдаж байна (өгөгдмөл утга)
autostart - үнэн - хуудас ачаалагдах үед тоглогч автоматаар эхэлдэг, худал - тоглуулах товчийг дарахыг хүлээнэ
давталт - мөчлөг, үнэн - зам нь тойрог хэлбэрээр тоглогддог, хэзээ үнэ цэнэ худал- ганцхан удаа

Хоёр дахь арга зам. Маш хуучин, гэхдээ бас практик) Өөрийн файл байгаа хавтсанд (лавлах) аяыг нэмээд үндсэн хэсэгт дараах кодыг бичнэ үү.

Үүний үр дүнд хуудсыг ачаалсны дараа bgsound tag-д заасан аялгуу сонсогдоно. Одоо авч үзье илүү сайн шинж чанаруудшошго:

src - таны аудио файл руу орох зам
гогцоо - аяыг хэдэн удаа давтах вэ (хэрэв -1 бол эцэс төгсгөлгүй давтана)
баланс - стерео балансын утга (-10000-аас 10000 хүртэл)
дууны хэмжээ - ая тоглуулах хэмжээ, энд 0 нь хамгийн их, -10000 нь хамгийн бага байна.

Гэсэн хэдий ч тоглуулагчийг ямар ч байдлаар хянах боломжгүй болно - хуудсыг шинэчлэх болгонд зам дахин тоглуулах болно.

Арын хөгжим оруулах аргыг тайлбарласны дараа ихэнх хэрэглэгчид янз бүрийн сайтад зочлохдоо аль хэдийн хөгжим сонсдог тул би үүнээс татгалзахыг хүсч байна. Тиймээс, дагалдах хөгжим нь түүнийг сайтын табыг хаахад л хүргэж болзошгүй юм.

HTML5-д аудио болон хөгжим оруулах - аудио шошго
аудио - хосолсон шошго тодорхойлох дэвсгэр дуу, сайт дээрх хөгжим эсвэл бусад аудио урсгал.

Аудио шошгын шинж чанарууд

автоматаар тоглуулах - хуудсыг ачаалах үед файл шууд тоглуулдаг (bgsound фон хөгжимтэй төстэй)
удирдлага - хөтөч дээр тоглуулагчийн хяналтын самбарыг харуулах
давталт - файл дууссаны дараа дахин тоглуулна
урьдчилан ачаалах - аудио файлыг хуудас ачаалахтай хамт ачаалах болно
src - аудио файлын зам (mp3 эсвэл ogg)

Аудио шошготой жишээ код

Аудио шошго

HTML 5 дахь аудио

Аудио шошгыг таны хөтөч дэмждэггүй.
Хөгжим татаж авах.

Тодорхойлолт

Вэб хуудсан дээрх аудио тохиргоог нэмж, тоглуулж, удирдана. Файлд хүрэх замыг src атрибут эсвэл дэд хаягаар тодорхойлно. Та энэ шошготой ажиллахгүй хөтөч дээр харагдах текстийг контейнер дотор бичиж болно.

Хөтөчүүдийн дэмждэг кодлогчдын жагсаалт хязгаарлагдмал бөгөөд хүснэгтэд өгсөн болно. 1.

Хүснэгт 1. Кодек болон хөтчүүд

Codec	Internet Explorer	Chrome	Дуурь	Сафари	Firefox
ogg/vorbis
wav
mp3
A.A.C.

Заасан хөтөч дээр бүх нийтийн тоглуулахын тулд дууг өөр өөр кодлогч ашиглан кодчилдог бөгөөд файлуудыг шошгон дээр нэгэн зэрэг нэмдэг.

Синтакс шинж чанарууд Дуу нь хуудсыг ачаалсны дараа шууд тоглож эхэлдэг. Аудио файлд хяналтын самбар нэмнэ. Дууг дуусаад эхнээс нь давтана. Вэб хуудсыг ачаалахын зэрэгцээ файл татаж авахад ашигладаг. Тоглож буй файлын замыг зааж өгнө. Хаалтын шошго

Шаардлагатай.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

аудио

Александр Клименков - Арван дөрөв

Аудио шошгыг таны хөтөч дэмждэггүй. Хөгжим татаж авах.

Жишээ үр дүн Opera хөтөчЗурагт үзүүлэв. 1.

Цагаан будаа. 1. Аудио файл тоглуулах

Хөтөчүүд

Аудио тоглуулах удирдлага нь хөтчүүдийн гадаад төрхөөрөө өөр өөр байдаг ч үндсэн элементүүд нь ижил байдаг. Эдгээр нь тоглуулах/түр зогсоох товчлуур, дууны урт, өнгөрсөн болон нийт тоглуулах хугацаа, дууны түвшин юм.

Хангалттай хурдан интернэт холболт бий болсноор Flash нь вэб сайтууд дээр дуу тоглуулах цорын ганц хэрэгсэл байв. Гэхдээ HTML5 нь интернетэд дууг тоглуулах арга барилыг үндсээр нь өөрчлөх болно. Энэ нийтлэлд би таны сайт дээр шошгыг хэрхэн ашиглах талаар дэлгэрэнгүй хэлэхийг хүсч байна.

Бид үүнийг хуудас руу дууны файл оруулахад ашигладаг. Доорх нь хамгийн энгийн жишээшошгыг ашиглан mp3 файлыг татаж аваад тоглуулдаг. Аудиог автоматаар тоглуулахад ашигладаг autopaly шинж чанарыг анхаарна уу. Гэсэн хэдий ч та сайт дээр дуу чимээг автоматаар тоглуулах ёсгүй, учир нь энэ нь хэрэглэгчдийг бухимдуулах болно. Дууг гогцоонд тоглуулж байна Дууг давтахыг хүсч байна уу? Loop шинж чанар нь танд үүнийг хийхэд тусална. Гэхдээ дахин хэлэхэд, хэрэв та хэрэглэгчийг сайтыг хугацаанаас нь өмнө орхихыг хүсэхгүй байгаа бол автоматаар тоглуулах, давталт тоглуулахыг хэтрүүлэн ашиглах ёсгүй. Удирдлагуудыг харуулах Дууг автоматаар тоглуулахын оронд та дууны түвшин, тоглуулах (түр зогсоох) товчлуур гэх мэт зарим удирдлагыг хөтөч дээр харуулахыг зөвшөөрөх хэрэгтэй. Хяналтын шинж чанарыг нэмснээр үүнийг хийхэд хялбар байдаг. Төрөл бүрийн файлын форматууд Энэ шошгыг ихэнх орчин үеийн хөтчүүд дэмждэг боловч асуудал нь үүнд оршдог өөр өөр хөтөчянз бүрийн файлын форматыг дэмждэг. Жишээлбэл, Safari нь MP3 тоглуулж чаддаг, харин Firefox нь чадахгүй, оронд нь OGG файлуудыг тоглуулдаг. Энэ асуудлыг шийдэх шийдэл нь аль аль хөтчөөс үл хамааран зочин бүр аудиог сонсох боломжтой байхын тулд хоёр форматыг ашиглах явдал юм. Файлын MIME төрлийг зааж өгөх Өөр өөр файлын форматыг ашиглах үед хөтөч нь дэмждэг файлаа нутагшуулахад нь туслахын тулд файл бүрийн MIME төрлийг зааж өгөх нь зүйтэй. Үүнийг type шинж чанарыг ашиглан хялбархан хийж болно. Хуучин хөтчүүдийн хувьд зочин IE6 эсвэл шошгыг дэмждэггүй эртний хөтөч ашиглаж байгаа бол яах вэ? Энэ нь амархан: доор нь шошгыг дэмждэггүй хөтчүүдэд зориулсан мессежийг харуулах код байна. Таны хөтөч аудио шошгыг дэмждэггүй! File buffering Том файлуудыг тоглуулах үед файлын буферийг ашиглаж болно. Үүний тулд та урьдчилан ачаалах атрибутыг ашиглаж болно. Энэ нь 3 утгыг авч болно:

• аль нь ч биш - хэрэв та файлын буферийг ашиглахыг хүсэхгүй байгаа бол;
• автомат - хэрэв та хөтөчийг бүхэлд нь файлыг буфер болгохыг хүсвэл;
• мета өгөгдөл - зөвхөн үйлчилгээний мэдээллийг ачаалахад зориулагдсан (дууны үргэлжлэх хугацаа гэх мэт).

JavaScript-ээр тоглуулахыг удирдах HTML5 аудио тоглуулагчийг JavaScript-ээр удирдах нь маш хялбар. Дараах жишээ нь яаж хийхийг харуулж байна JavaScript ашигланта өөрөө барьж болно үндсэн элементүүдАудио тоглуулагчийн удирдлага: Тоглуулах Дууны түвшнийг түр зогсоох + Дууны түвшин -

Өнөөдрийн хувьд энэ л байна.
Энэ нийтлэл танд ойлгоход тусалсан гэж найдаж байна үндсэн чадварууд HTML5 шошго.

Саяхныг хүртэл вэб хуудсанд дуу оруулах нь тийм ч амар ажил биш байсан. Ерөнхийдөө зарим нь илүү ухаалаг, илүү сайн хэрэгжилтийг санал болгодог боловч ихэнх аргууд нь таныг тодорхой хөтөч болон зарим залгаасуудтай байхаар хязгаарладаг.

Зах зээл дээр Flash технологи гарч ирснээр Flash залгаас нь ямар ч хөдөлгөөнт дүрс, дууг хуудсанд оруулах боломжийг олгодог бөгөөд энэ технологийг ихэнх хөтчүүд дэмждэг тул энэ ажил илүү хялбар болсон. Гэвч Apple-аас шинэлэг төхөөрөмжүүд болох iPhone, iPad гарсны дараа Flash-ийн эрэлт аажмаар буурч байна. Та бүхний мэдэж байгаагаар Apple төхөөрөмжөө үндсэндээ тоноглодоггүй Flash дэмжлэг, бүтээгдэхүүн хэрэглэгчдийн тоо хурдацтай өсч байна.

Товчхондоо энд жаахан төөрөгдөл байна.

Аз болоход HTML5 нь хөгжүүлэгчдийн амьдралыг илүү хялбар болгосон, учир нь технологи нь аудио элементийг агуулдаг. Энэ элемент нь аудио файлуудыг дурын вэб хуудсанд оруулах, мөн javascript ашиглан хяналтын самбарыг хэрэгжүүлэх боломжийг олгодог. Хамгийн чухал нь технологи нь нэмэлт залгаас шаарддаггүй бөгөөд эхний хувилбаруудаас бусад бараг бүх хөтөч дээр дэмжигддэг (бид хөтчийн дэмжлэгийн талаар дараа нь ярих болно!).

Өнөөдрийн нийтлэлд бид аудио элементийг ашиглан дууг хэрхэн оруулахыг танд хэлэх болно. Мөн бид javascript ашиглан тоглуулах процессыг хэрхэн хянах талаар суралцахаас гадна хөтчүүдийн технологийн дэмжлэгийн талаар танд хэлэхийг хичээх болно.

HTML5 аудио элемент

Энэ элементийг ашиглахад маш хялбар байдаг. Өнөөдрийн жишээн дээр бид Bing Crosby-ийн "Цагаан Зул"-г оруулах болно.

Энд нэг их тайлбар хийх шаардлагагүй. Та img тагийг ашиглан зураг оруулахтай адил аудио шошгыг ашиглан дуу оруулах боломжтой.

Хөтөч хоорондын дэмжлэг

Дээрх жишээ нь бүх хөтөч дээр ажиллах боломжгүй юм. Эндээс файлын формат орж ирдэг.

Зарим хөтчүүд .mp3 файлуудыг тоглуулж чаддаг ч .ogg файлуудыг тоглуулахгүй байхад зарим нь эсрэгээрээ байдаг. Ихэнх хөтчүүд .wav файлуудыг тоглуулж чаддаг ч том хэмжээтэй учир вэб сайтад аудио болгон ашиглах нь зохисгүй юм.

Дууны форматыг дэмждэг хөтчүүдийн хүснэгтийг энд харуулав.

Таны хөтөч ямар форматыг дэмждэг вэ? Үүнийг тодорхойлно.

Хүснэгтээс харж байгаачлан хэрэгжүүлэх хамгийн оновчтой сонголт бол файлын форматыг хоёуланг нь холбох явдал юм.
Үүнийг хийхийн тулд та аудио элементэд олон эх сурвалжийн элементүүдийг нэмж, тэдгээрт янз бүрийн формат руу орох замыг зааж өгч болно. Хөтөч нь дэмждэг анхны файлаа тоглуулах болно. Энд нэг жишээ байна:

Мэдээжийн хэрэг, энэ нь та өөрийн Mp3 болон OGG хувилбарыг хоёуланг нь үүсгэх хэрэгтэй гэсэн үг юм дууны файл(энд танд туслах болно), гэхдээ энэ нь хөтчүүд хоорондын дэмжлэгийг зохион байгуулах цорын ганц арга зам юм.

Internet Explorer-ийн эхний хувилбарууд (7 ба 8-р хувилбарууд) аудио элементийг огт дэмждэггүй. Гэсэн хэдий ч, дараа нь нийтлэлд бид энэ асуудлыг хэрхэн даван туулах талаар авч үзэх болно.

Дууг автоматаар тоглуулах

Хэдийгээр дээрх код нь аудиог оруулдаг ч үүнийг тоглуулдаггүй. Хэрэв бид хуудсыг ачаалах үед дууг автоматаар тоглуулахыг хүсвэл тухайн элементэд автоматаар тоглуулах шинж чанарыг нэмэх хэрэгтэй:

Хяналтын товчлууруудыг нэмж байна

Хэдийгээр автоматаар тоглуулах нь ашигтай байж болох ч ихэнх тохиолдолд энэ нь ядаргаатай эсвэл огт тохиромжгүй байдаг. Тиймээс бид аудио элементүүдийн хяналтын нэмэлт товчлууруудыг суулгаж болох бөгөөд ингэснээр хэрэглэгч өөрөө шийдэх боломжтой болно.

Энэ нь түр зогсоох/тоглуулах товчлуур бүхий хэвтээ баар, гулсагчтай цагийн хэлхээс, дууны түвшний хяналт зэргийг нэмдэг. Youtube дээрх тоглуулагч дээрээс харахад бүх зүйл ойролцоогоор ижил байна.

Хяналтын самбар нь хөтчөөс хамаарч өөр өөр байх болно гэдгийг санах нь чухал юм. Жишээлбэл, iPhone дээрх хөтөч дээр дууны түвшний гулсагч байхгүй болно, учир нь төхөөрөмж нь дууны түвшинг хянах тусдаа товчлууруудтай.

Давталт тоглуулах

Аудио элементэд давталтын шинж чанарыг нэмснээр дууг тодорхойгүй хугацаагаар тоглуулах болно.

Энэ нь тоглоомын арын хөгжим эсвэл дууны эффектийг асаахад хэрэг болно.

Та мөн тодорхой аудио файлыг хэзээ, хаана ачаалахыг хөтчид зааж өгөх урьдчилан ачаалах атрибутыг ашиглаж болно.
Аудио файлыг урьдчилан ачаалснаар хэрэглэгч тоглуулах товчийг дарахад дууг шууд тоглуулж болно гэсэн үг.

Энэ шинж чанарын хэд хэдэн утгатай:

"байхгүй" - хөтөч татаж авсан файлыг оруулах ёсгүй. Тэдгээр. Хэрэв та ихэнх хэрэглэгчид файлыг тоглуулахгүй гэдэгт итгэлтэй байгаа бол энэ сонголтыг ашиглана уу. Эсвэл аль болох их серверийн зурвасын өргөнийг хэмнэх шаардлагатай үед үүнийг ашиглаарай.

"Мета өгөгдөл" - параметр нь аль нь ч биш, зөвхөн аудио файлын өөрөө биш харин аудио бичлэгийн үргэлжлэх хугацаа гэх мэт мета өгөгдлийг ачаалах боломжийн талаар хөтчид мэдэгдэхээс бусад тохиолдолд.

"авто" - та хөтөчийг аудио файлыг өөрөө татаж авахыг зөвшөөрдөг.

Жишээлбэл:

Зарим хөтчүүд энэ тушаалыг үл тоомсорлож, хүссэн бүхнээ хийж эхэлдэг тул урьдчилан ачаалах нь зүгээр л тав тухтай функц гэдгийг санаарай.

Javascript-ээр тоглуулах хяналт

Юунд тохиромжтой вэ javascript элементүүд- Энэ нь JavaScript ашиглан удирдахад хялбар байдагтай холбоотой юм. Аудио элемент нь олон тохиромжтой параметр, хяналтын аргыг санал болгодог.

Play() – одоогийн байрлалаас тоглуулж эхлэх;

Pause() – одоогийн байрлал дээр тоглуулахыг зогсоох;

canPlayType(төрөл) – хөтөч нь тоглуулахыг дэмждэг эсэхийг тодорхойлно энэ төрлийнхэвлэл мэдээллийн хэрэгсэл;

үргэлжлэх хугацаа - замын үргэлжлэх хугацаа секундээр;

одоогийн цаг - секундээр одоогийн байрлал. Та мөн суулгаж болно энэ параметртоглуулах байрлалыг шилжүүлэх.

Дээр санал болгосон сонголтууд болон аргуудыг ашиглан бид үндсэн хяналтын товчлууруудыг үүсгэж болно:

Хөгжим тоглох
Хөгжимийг түр зогсоох
Хөгжимийг зогсоо
Демо үзэх: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Internet Explorer-ийн өмнөх хувилбаруудын дэмжлэг

Ихэнх тохиолдолд хэрэглэгчийн хөтөч HTML5 элементийг дэмждэг. Гэвч харамсалтай нь IE хөтчүүдийн 7 ба 8-р хувилбарууд нь энэ элементийг дэмждэггүй (хэдийгээр 9-р хувилбар аль хэдийн дэмжлэгтэй байдаг). 2008 онд үлдсэн хэрэглэгчдийн хувьд буцаах хувилбарыг авч үзэх нь чухал юм.

Маш бүдүүлэг боловч үр дүнтэй арга бол хөтчийн өгөгдлийг тодруулахын тулд тусгай тайлбарыг ашиглах, дууны файлд объект заагч өгөх явдал юм. Тиймээс хөтөч нь ихэвчлэн HTML5 аудио шиг хөгжим тоглуулах, түр зогсоох, эргүүлэх боломжийг олгодог суурилуулсан хянагчийг харуулах болно. Энд нэг жишээ байна:

Хөгжим тоглох
Хөгжимийг түр зогсоох
Хөгжимийг зогсоо

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

Дээрх жишээ нь HTML5 Аудио дэмждэг бүх хөтчүүдэд ажиллах ба IE 7 ба 8-р хувилбаруудад ажиллах болно. Тайлбарыг ашиглан бид товчлуурын удирдлагыг аудио файл руу шууд чиглүүлдэг.

Буцах өөр нэг арга бол хуудас руу Flash тоглуулагч оруулах явдал юм. Энд Flash тоглуулагч хэлбэрээр буцаах тухай ярьж байна.

Дүгнэлт

Өнөөдрийн нийтлэлээрээ бид HTML5 ашиглан аудио файлуудыг хэрхэн оруулах талаар сурсан. Аудио элементийг ашиглахад хялбар төдийгүй бид үүнийг өөрчилж, javascript-ээр тоглуулахыг удирдах боломжтой.

HTML5 дахь аудио элементийн талаар илүү ихийг мэдэхийг хүсч байна уу? Дараа нь шалгаарай.

Одоогоор зарим хөтчүүдэд (IE-ийн хуучин хувилбарууд гэх мэт) дэмжлэг муу байгаа ч шаардлагатай бол тэдгээрийг хялбархан буцаах боломжтой бөгөөд энэ нь өнөө үед улам бүр багасч байна.