HTML5 აუდიო ტეგი. HTML5 აუდიო ტეგის დაუფლება

ამატებს, უკრავს და მართავს აუდიო პარამეტრებს ვებ გვერდზე. ფაილისკენ მიმავალი გზა მითითებულია src ატრიბუტის ან ქვეთეგის მეშვეობით. თქვენ შეგიძლიათ დაწეროთ ტექსტი კონტეინერის შიგნით, რომელიც გამოჩნდება ბრაუზერებში, რომლებიც არ მუშაობენ ამ ტეგთან.

ბრაუზერების მიერ მხარდაჭერილი კოდეკების სია შეზღუდულია და მოცემულია ცხრილში. 1.

მითითებულ ბრაუზერებში უნივერსალური დაკვრისთვის, აუდიო კოდირდება სხვადასხვა კოდეკების გამოყენებით და ფაილები ერთდროულად ემატება ტეგის მეშვეობით.

საჭირო.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

აუდიო

ალექსანდრე კლიმენკოვი - თოთხმეტი

მაგალითის შედეგი Opera ბრაუზერში ნაჩვენებია ნახ. 1.

ბრინჯი. 1. აუდიო ფაილის დაკვრა

აუდიო აღწარმოების კონტროლი განსხვავდება გარეგნულად ბრაუზერებს შორის, მაგრამ ძირითადი ელემენტები იგივეა. ეს არის დაკვრის/პაუზის ღილაკი, ტრეკის სიგრძე, გასული და დაკვრის მთლიანი დრო და ხმის დონე.

1. ჰოსტინგზე, სადაც თქვენი საიტი მდებარეობს, root დირექტორიაში (საქაღალდე, სადაც არის ინდექსის ფაილი), შექმენით აუდიო საქაღალდე. მომავალში თქვენ განათავსებთ მასში ყველა აუდიო ფაილს.

3. ახლა აირჩიეთ თქვენთვის საჭირო ფაილები, სასურველია mp3 ფორმატში. შექმენით აუდიო საქაღალდე საიტის ძირში და ატვირთეთ ისინი.

4. რჩება მხოლოდ მოთამაშის კავშირის კოდის ჩასმა. ის შესაფერისია ნებისმიერი საიტისთვის სწორ ადგილას, თქვენ უბრალოდ უნდა მიუთითოთ ბილიკი პლეერის ფაილისა და აუდიო ფაილისკენ, შესაბამისად შეცვალოთ სიტყვები your_domain და audio_file name:

და ყველაფერი მზადაა! თქვენ ასევე შეგიძლიათ ნახოთ სამუშაო მაგალითი.

პირველი გზა არის ჩაშენებული ტეგი. ჩაშენების ელემენტი გამოიყენება ობიექტების ჩატვირთვისა და ჩვენებისთვის (მაგალითად, ვიდეო ფაილები, ფლეშ ფილმები, ზოგიერთი აუდიო ფაილი და ა.შ.), რომლებიც ბრაუზერს თავდაპირველად არ ესმის.

სინტაქსი საკმაოდ მარტივია:

დახურვის ტეგი საჭირო არ არის.

ახლა მოდით შევხედოთ ჩანაწერის მაგალითს ატრიბუტებით და ქვემოთ მათი დეკოდირებით:

ჩადეთ ტეგის ატრიბუტები html-ში აუდიოს დასაკრავად
სიგანე - პანელის სიგანე პიქსელებში (ან პროცენტებში)
სიმაღლე - პანელის სიმაღლე პიქსელებში (ან პროცენტებში)
გასწორება - პანელის პოზიცია ტექსტთან მიმართებაში, შესაძლო მნიშვნელობები არის მარცხნივ, მარჯვნივ, ცენტრში
დამალული - საშუალებას გაძლევთ დამალოთ პანელი, ატრიბუტების მნიშვნელობები: true - პანელი დამალულია, false - პანელი ჩანს (ნაგულისხმევი მნიშვნელობა)
autostart - true - მოთამაშე ავტომატურად იწყება გვერდის ჩატვირთვისას, false - ელოდება დაკვრის ღილაკის დაჭერას
loop - loop, true - სიმღერა ითამაშება წრეში, ხოლო თუ false - მხოლოდ ერთხელ

მეორე გზა. ძალიან ძველი, მაგრამ ასევე პრაქტიკული) დაამატეთ მელოდია იმავე საქაღალდეში (საქაღალდეში), სადაც მდებარეობს თქვენი ფაილი და ჩაწერეთ შემდეგი კოდი:

შედეგად, გვერდის ჩატვირთვის შემდეგ გაჟღერდება მელოდია, რომელიც მიუთითეთ bgsound ტეგში. ახლა მოდით უკეთ შევხედოთ ტეგის ატრიბუტებს:

src - გზა თქვენი აუდიო ფაილისკენ
მარყუჟი - რამდენჯერ უნდა გაიმეოროთ მელოდია (თუ -1, მაშინ მეორდება უსასრულოდ)
ბალანსი - სტერეო ბალანსის მნიშვნელობა (-10000-დან 10000-მდე)
მოცულობა - მელოდიის დაკვრის მოცულობა, სადაც 0 არის მაქსიმალური, ხოლო -10000 არის მინიმალური.

თუმცა, პლეერის არანაირად გაკონტროლების საშუალება არ იქნება - ყოველ ჯერზე, როცა გვერდი განახლდება, ტრეკი კვლავ ითამაშებს.

ფონური მუსიკის ჩასმის მეთოდის აღწერის შემდეგ, მსურს ამისგან გადაგერიდოთ, რადგან მომხმარებელთა უმეტესობა, როგორც წესი, უკვე უსმენს მუსიკას, როდესაც ისინი სტუმრობენ სხვადასხვა საიტებს. ამიტომ, თანმხლებ მუსიკას შეუძლია მხოლოდ აიძულოს იგი დახუროს ჩანართი საიტზე.

აუდიო ტეგის ატრიბუტები

ავტომატური დაკვრა - ფაილის დაკვრა დაუყოვნებლივ ხდება გვერდის ჩატვირთვისას (bgsound ფონური მუსიკის მსგავსი)
კონტროლი - ბრაუზერში მოთამაშის მართვის პანელის ჩვენება
loop - კვლავ უკრავს ფაილს მისი დასრულების შემდეგ
წინასწარ ჩატვირთვა - აუდიო ფაილი იტვირთება გვერდის ჩატვირთვასთან ერთად
src - ბილიკი აუდიო ფაილამდე (mp3 ან ogg)

კოდის მაგალითი აუდიო ტეგით

აუდიო ტეგი

აუდიო HTML 5-ში

ანდიუ

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

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

11937

სტატიაში აღწერილია აუდიო და ვიდეო HTML5 კონტეინერის სტრუქტურა, ვიდეო, აუდიო, წყარო, ტრეკის ტეგები და მათი ატრიბუტები შესაძლო მნიშვნელობებით. მოწოდებულია HTML შაბლონები და მულტიმედიური ფაილების დაკვრის განხორციელების მაგალითები ბრაუზერში ჩაშენებული შესაძლებლობების საფუძველზე. ნაჩვენებია სუბტიტრების, სათაურების, სარჩევის ვიდეო ტექსტურ ტრეკთან კავშირი WEBVTT ფორმატის ფაილებთან მაგალითებით. წარმოდგენილია HTML5 კოდის შაბლონები schema.org მიკრო მარკირებით აუდიო და ვიდეოსთვის. მითითებულია აუდიო და ვიდეო ფაილების ძირითადი ვებ ფორმატები მათი MIME ტიპებით და ინსტრუმენტებით ვიდეო და აუდიოს ამ ფორმატებში გადაყვანისთვის.

HTML5 შეიცავს ახალ ფუნქციებს, რომლებიც საშუალებას გაძლევთ დაუკრათ აუდიო და ვიდეო ფაილები პირდაპირ ბრაუზერში მესამე მხარის პროგრამების გამოყენების გარეშე. ჯერჯერობით, იმისდა მიუხედავად, რომ HTML5 ახალი აღარ არის, ჯერ კიდევ არსებობს უთანხმოება, თუ როგორ ამუშავებენ ბრაუზერები ვიდეო და აუდიო ტეგებს და როგორ არის ნაჩვენები თავად პლეერი. ზოგი ამას ყოველი ახალი ვერსიით უკეთ აკეთებს, ზოგი კი მაინც ჩამორჩება. გლობალურად, ტენდენცია არის ის, რომ ბრაუზერები უზრუნველყოფენ უფრო და უფრო მეტ ფუნქციონირებას მულტიმედიური ფაილების სათამაშოდ.

ვიდეოს ჩამოტვირთვა

Screencast: შაბლონების გამოყენების მაგალითები სტატიიდან - ვებსაიტიდან

HTML5 ვიდეო და აუდიო არის განვითარებადი სტანდარტი და არ არის დაკავშირებული რაიმე აუდიო ან ვიდეო ფორმატთან, ამიტომ ბრაუზერებს შორის არსებობს განსხვავებები იმაში, თუ რას უჭერენ მხარს. ფორმატებიაუდიო და ვიდეო ფაილები. ეს განსხვავება ახლა კომპენსირდება ორიგინალური ფაილის რამდენიმე სხვადასხვა კოდეკით დაშიფვრით და ყველა ამ ფაილის ვერსიის ტეგებთან ან ჩადგმული ტეგების საშუალებით დაკავშირებით.< source src=" URL">. თუმცა, ლიდერები ჩნდებიან ბრაუზერების მიერ მხარდაჭერილი აუდიო და ვიდეო ფაილების ფორმატებს შორის. ვიდეოსთვის ეს არის, რა თქმა უნდა, mp4 ფორმატი (H.264), ხოლო აუდიოსთვის ეს არის mp3 და m4a ფორმატი. ახლა, ალბათ, ყველა ბრაუზერს შეუძლია ამ ფორმატების ფაილების თამაში. ასევე, ბრაუზერები Firefox, Chrome და Opera შეთანხმდნენ, რომ მხარი დაუჭირონ WEBM სტანდარტს, როგორც საერთო ვიდეო ფორმატს. ჩემი აზრით, ახლა HTML5 ვიდეო და აუდიოს გამოყენების ოპტიმალური ვარიანტი იქნება სქემა, რომელიც დაფუძნებულია ერთი მულტიმედიური ფაილის გამოყენებაზე mp4 ფორმატში ( H.264) ვიდეოსთვის და m4a აუდიო და JS HTML5 პლეერისთვის. მხოლოდ ერთი ფაილი მითითებულ ფორმატში არის დაკავშირებული აუდიო ან ვიდეო კონტეინერთან. დღესდღეობით ბრაუზერების უმეტესობას შეუძლია mp4 ფორმატში თამაში. დაკავშირებული JS ბიბლიოთეკა ბრაუზერში ჩაშენებულ პლეერს დაასტილობს. თუ ბრაუზერს არ აქვს mp4 / m4a ფორმატის მხარდაჭერა, მაშინ JS პლეერი, ამ შემთხვევაში, ახორციელებს Flash Player-ის კავშირს მულტიმედიური ფაილის დასაკრავად. იმის გათვალისწინებით, რომ mp4 ფორმატი გახდა ძალიან პოპულარული, შეიძლება ვიმედოვნებთ, რომ ბრაუზერებში მისი დაკვრის პრობლემების დაბალი ალბათობაა. ეს სქემა მოითხოვს მხოლოდ ერთ მულტიმედია ფაილს მითითებულ ფორმატში, რომელიც დაზოგავს დისკზე ადგილს და რესურსებს ფაილების დამუშავებისთვის. ასევე, ასეთი სქემა სტრატეგიულად უფრო სწორი იქნება, რადგან ტენდენცია არის ის, რომ ბრაუზერები სულ უფრო უკეთ ახდენენ HTML5 ვიდეოს და აუდიოს დანერგვას.

იმისათვის, რომ HTML5 პლეერს მიანიშნოთ დასაკრავი ფაილი, ფაილის URL-ის გარდა, თქვენ ასევე უნდა გადასცეთ ფაილის MIME ტიპი, რათა ბრაუზერმა გაიგოს რომელი კოდეკი უნდა გამოიყენოს. ქვემოთ მოცემულ ცხრილში მოცემულია ფაილის ყველაზე გავრცელებული ფორმატები და მათი MIME ტიპები.

ვიდეო და აუდიო ფაილების ზემოაღნიშნულ ვებ ფორმატებში დაშიფვრისთვის შეგიძლიათ გამოიყენოთ ღია პროგრამა, რომელიც მხარს უჭერს აუდიო და ვიდეო ფაილების მთავარ ფორმატებად გადაქცევას ვებსთვის ( MP4, WebM, Ogg Theora, MP3 და ა.შ.). Miro Video Converter ხელმისაწვდომია სხვადასხვა ოპერაციული სისტემებისთვის - Windows, Mac და Linux და არის გრაფიკული გარსი კონსოლის კომუნალური პროგრამებისთვის, რომლებიც მოსახერხებელია ვებ სერვერზე გამოსაყენებლად გადმოწერილი ვიდეოსა და აუდიოს ავტომატურად დასამუშავებლად.

HTML5 აუდიო არ არის მხარდაჭერილი თქვენი ბრაუზერის მიერ.

აუდიოს ჩამოტვირთვა

ასე გამოიყურება კოდიდან ამოღებული მიკრო მარკირების მონაცემები ზემოთ აღწერილი აუდიო შაბლონისთვის.

Audioobject itemType = http://schema.org/AudioObject სახელი = აუდიოს სათაურის აღწერა = აუდიო აღწერა... isfamilyfriendly = ნამდვილი კოდირების ფორმატი = mp3 ხანგრძლივობა = PT04M59S ატვირთვის განახლება = 2015-12-31 სურათი = სრული URL image.jpg ალტერნატიული სახელი = ალტერნატივა სათაური აუდიო contenturl href = URL ფაილზე.mp3 ტექსტი = ჩამოტვირთეთ აუდიო ავტორის პირი itemType = http://schema.org/Person url href = URL text = ავტორის სახელი = ავტორის სახელი სურათი = სრული url პირს.jpg

მინიმალური აუდიო მარკირება schema.org-ის მიხედვით უნდა შეიცავდეს itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . დარჩენილი თვისებები არჩევითია.

დემო ვერსიაში, მე გამოვიყენე CSS სტილები ტეგზე კლასის ატრიბუტის საშუალებით, რაც ვიდეო არეალის სიგანეს დინამიური გავხდი ეკრანის ზომაზე დაყრდნობით. მოთამაშე თავად არეგულირებს სიმაღლეს. სცადეთ თქვენი ბრაუზერის ფანჯრის ზომის შეცვლა, რომ ნახოთ როგორ მუშაობს. ამიტომ, ამ დემო კოდის წყაროში არ არის ტეგის სიგანე და სიმაღლე, ისინი ჩანაცვლებულია CSS სტილებით. მაგრამ ეს მეთოდი არ არის ნაჩვენები შაბლონის კოდების სიაში, რადგან ეს უკვე განსაკუთრებულია.

უყურეთ YouTube-ზე

HTML5 ვიდეო არ არის მხარდაჭერილი თქვენი ბრაუზერის მიერ.

ვიდეოს ჩამოტვირთვა: ვიდეოს სათაური

ასე გამოიყურება კოდიდან ამოღებული მიკრო მარკირების მონაცემები ზემოთ აღწერილი ვიდეო შაბლონისთვის.

Videoobject itemType = http://schema.org/VideoObject სახელი = ვიდეოს სათაური მინიატურა imageobject itemType = http://schema.org/ImageObject contenturl = URL to video-thumbnail.jpg|png სიგანე = 100 სიმაღლე = 100 ხანგრძლივობა = PT14M59S isfamily = true uploaddate = 2015-12-31 აღწერა = მოკლე აღწერა ვიდეოსთვის... url href = URL ფაილზე.mp4 ტექსტი = ვიდეოს სათაური ავტორის პირი itemType = http://schema.org/Person url href = URL ავტორის ვებ გვერდის ტექსტი = ავტორის სახელი = ავტორის სახელის სურათი = ავტორის სრული URL.jpg მინიატურა = URL file.jpg|png

Მინიმალური საჭიროსაძიებო სისტემებისთვის, schema.org-ის მიხედვით ვიდეოს მარკირება უნდა შეიცავდეს ყველა itemprop თვისებას, რომელიც ნაჩვენებია მაგალითის კოდში, გარდა itemprop ="author" ბლოკისა, რომელიც არჩევითია საძიებო სისტემებისთვის და შეიძლება წაიშალოს, თუ მონაცემები არ არის. მის შესავსებად. ვიდეო მინიატურისთვის Yandex მოითხოვს, რომ მიუთითოთ მიკრო მარკირება schema.org-ის მიხედვით, როგორც itemprop = "მინიატურა" ImageObject-ის სახით და Googleმოითხოვს itemprop = "thumbnailUrl" -ის მითითებას, ასე რომ თქვენ უნდა ჩასვათ ვიდეო მინიატურების ფაილი ორჯერ და, შესაბამისად, მეორე img ტეგმა მიიღო ჩვენება: none style ისე, რომ არ იყოს ნაჩვენები ბრაუზერში. იმის ნაცვლად, რომ გამოიყენოთ img ტეგი display:none-ით, შეგიძლიათ ეს თვისება გადასცეთ ბმულის ტეგს href ატრიბუტის მეშვეობით. ასევე, იმისდა მიუხედავად, რომ მიკრო მარკირება შეიძლება გადაიცეს მეტა და ბმული ტეგებით, რომლებიც არ არის ნაჩვენები მომხმარებლისთვის, მაინც რეკომენდებულია, თუ ეს შესაძლებელია, მიკრო მარკირების დამატება ძირითადად იმ ტეგებზე, რომლებიც გამოჩნდება მომხმარებლისთვის. schema.org-ის მიკრო მარკირების დადასტურება შესაძლებელია ამ ბმულების გამოყენებით: , . მიკრო მარკირების გამოყენების მთავარი უპირატესობა არის ასეთი შინაარსის მოხერხებულობა საძიებო რობოტებისთვის და სოციალური ქსელის რობოტებისთვის. ეს რობოტები ამოიღებენ ეტიკეტირებულ მონაცემებს და აგროვებენ მას. ამრიგად, მიკრო მარკირების გამოყენება უმჯობესდება SEOვებსაიტზე და ხელს უწყობს მონაცემთა ავტომატურ გავრცელებას სოციალურ ქსელებში. ვებსაიტზე VideoObjec t სქემით მონიშნული ვიდეოებისთვის Schema.org მიკრო მარკირების დეტალური აღწერა. ასევე, აღსანიშნავია, რომ იმ შემთხვევისთვის, როდესაც ვიდეოს თქვენს ვებსაიტზე აყენებთ არა პირდაპირ, არამედ ვიჯეტის Yandex.Video ან YouTube-ის ვიჯეტების გამოყენებით, მაშინ შეგიძლიათ დაამატოთ თქვენი HTML კოდის ბლოკი ვიდეოს აღწერით ვიჯეტის კოდის ბლოკის ქვეშ. და ჩადეთ Schema.org მარკირება ამ ვიდეოსთვის. ამავდროულად, როგორც URL პარამეტრი - ბმული ვიდეოზე, არ მიუთითოთ პირდაპირი ბმული სტატიკურ ფაილზე, არამედ მიუთითეთ ვიდეო ჰოსტინგიდან მიღებული ბმული. მიუხედავად იმისა, რომ Schema.org სპეციფიკაციაში ნათქვამია, რომ ბმული უნდა იყოს პირდაპირ ფაილზე, საძიებო სისტემები ასევე ამუშავებენ ვიდეოების ბმულებს ვიდეო ჰოსტინგიდან ( იხილეთ მაგალითები Yandex ვებსაიტზე Webmaster განყოფილებაში), მიუხედავად იმისა, რომ თქვენ ვერ გადმოტვირთავთ ფაილს ასეთი ბმულიდან და არ შეგიძლიათ მისი ნახვა პირდაპირ თქვენს HTML5 მედია ფლეერში გვერდზე, მხოლოდ ვიდეო ჰოსტინგის ვიჯეტში.

თუ თქვენ წინაშე დგახართ კითხვა, რომელი ჰოსტინგიდან ჩამოტვირთეთ მულტიმედიური აუდიო და ვიდეო ფაილები, მაშინ გადახედეთ სტატიას, რომელიც აღწერს Yandex Disk-დან ვებ გვერდზე მედია ფაილების ჩასმის ვარიანტს.

ატრიბუტები src , preload , autoplay , mediagroup , loop , muted , controls არის საერთო ატრიბუტები ყველა მედია ელემენტისთვის, მათ შორის ტეგები და .

• autoplay ატრიბუტი მითითებულია მისი არსებობით ან ტეგში და არ არის საჭირო ამ ატრიბუტის მნიშვნელობის დაყენება, საკმარისია მხოლოდ მისი არსებობა. HTML რედაქტორებისთვის, რომლებიც არედაქტირებენ ელემენტის კოდს, შეგიძლიათ დააყენოთ ეს ატრიბუტი, როგორც autoplay = "autoplay ", რაც უდრის უბრალოდ ატრიბუტის არსებობას. ავტომატური დაკვრის ატრიბუტის არსებობა ბრაუზერს ეუბნება, რომ დაუყოვნებლივ დაიწყოს ფაილის თამაში ვებ გვერდის ჩატვირთვის შემდეგ. შესაბამისად, ავტომატური დაკვრის ატრიბუტი აჭარბებს წინასწარ ჩატვირთვის ატრიბუტის მნიშვნელობებს, რომელიც აკონტროლებს ვიდეოს ჩატვირთვას პლეერში, რადგან ვიდეომ დაუყონებლივ უნდა დაიწყოს დაკვრა და ამიტომ უნდა ჩაიტვირთოს. ნაგულისხმევად, არ არსებობს ავტომატური დაკვრის ატრიბუტი.

• კონტროლის ატრიბუტი ეუბნება ბრაუზერს, აჩვენოს მოთამაშის მართვის პანელი, როდესაც გვერდი ჩაიტვირთება, მაგრამ ჩაწერა არ დაწყებულა. ეს ატრიბუტი, ისევე როგორც ავტომატური დაკვრის ატრიბუტი, მითითებულია მხოლოდ მისი არსებობით ან ტეგში და არ საჭიროებს მნიშვნელობას, საკმარისია მხოლოდ მისი არსებობა. ნაგულისხმევად, ეს ატრიბუტი არ არის, ე.ი. პლეერი არ აჩვენებს მართვის პანელს დაკვრის დაწყებამდე. როდესაც ფაილი დაიწყებს დაკვრას, საკონტროლო პანელი გამოჩნდება, როდესაც მაუსის ატარებთ მოთამაშის ზონას.

• მარყუჟის ატრიბუტი იწვევს მოთამაშის მიერ ფაილის მარყუჟის დაკვრას. ატრიბუტი მითითებულია მხოლოდ ან ტეგში მისი არსებობით და არ აქვს პარამეტრები. ნაგულისხმევად არ არსებობს მარყუჟის ატრიბუტი.

• preload ატრიბუტი განსაზღვრავს ფაილის ჩატვირთვას ვებ გვერდის ჩატვირთვასთან ერთად და იღებს შემდეგი სამი მნიშვნელობიდან ერთს:
  • არცერთი - არ გადმოწეროთ ფაილი ვებ გვერდის ჩატვირთვასთან ერთად. ეს ნიშნავს, რომ ფაილი დაიწყებს პლეერში ჩატვირთვას მხოლოდ დაკვრის ღილაკის დაჭერის შემდეგ. ეს შეიძლება იყოს მოსახერხებელი გვერდის დატვირთვის დასაჩქარებლად. მნიშვნელობა none არის ნაგულისხმევი მნიშვნელობა წინასწარ ჩატვირთვის ატრიბუტისთვის, ამიტომ შესაძლებელია საერთოდ არ ჩასვათ preload ატრიბუტი ტეგში ან ამ შემთხვევაში.
  • მეტამონაცემები - არ ჩამოტვირთავს ფაილს ვებ გვერდის ჩატვირთვასთან ერთად, არამედ ჩამოტვირთავს მულტიმედიური ფაილის მეტამონაცემებს.
  • auto - შეასრულეთ ფაილის სრული ჩამოტვირთვა ვებ გვერდის ჩატვირთვასთან ერთად. ამ პარამეტრში ბრაუზერები ავტომატურად ჩატვირთავს მედია ფაილს ვებ გვერდთან ერთად, მაგრამ ეს ხელს არ შეუშლის თავად გვერდის ჩატვირთვას და ბრაუზერში მის რენდერირებას. თუ წინასწარ ჩატვირთვის ="" ატრიბუტი ცარიელი მნიშვნელობით არის მითითებული ან ტეგში, გამოყენებული იქნება მისი ავტომატური მნიშვნელობა.
  • წინასწარ ჩატვირთვის ატრიბუტი გაუქმდება, თუ ავტომატური დაკვრის ატრიბუტი გამოიყენება.

• ტეგის src ატრიბუტი ან საშუალებას გაძლევთ დაუყოვნებლივ დააყენოთ გზა ტეგში მულტიმედიური ფაილისკენ. ბილიკი შეიძლება იყოს სრული, პროტოკოლისა და დომენის მითითებით, ან მიმდინარე საიტის ძირთან შედარებით. თქვენ ასევე შეგიძლიათ მიუთითოთ ფაილის გზა აუდიო ან ვიდეო კონტეინერში ჩაშენებულ ტეგებში.< source src=" URL"> .

• პოსტერის ატრიბუტი გამოიყენება მხოლოდ ტეგში და განსაზღვრავს სურათის URL-ს (gif, png, jpeg და ა.შ.), რომელიც ნაჩვენები იქნება ვიდეოს მიუწვდომლობის დროს. თუ პოსტერის ატრიბუტი არ არის დაყენებული, ბრაუზერის დამკვრელი შეეცდება აჩვენოს ვიდეოს პირველი კადრი.

• სიგანისა და სიმაღლის ატრიბუტები ვრცელდება მხოლოდ ტეგზე და, შესაბამისად, დააყენეთ ვიდეო პლეერის დაკვრის არეალის სიგანე და სიმაღლე. სავარაუდო მნიშვნელობა იქნება დადებითი მთელი რიცხვი, მითითებული პიქსელებში ან პროცენტებში. ამ ატრიბუტების დაყენება გავლენას ახდენს ვიდეოს ჩვენების ზომაზე, მაგრამ არ ცვლის ვიდეოს ასპექტის თანაფარდობას. ვიდეო მოერგება მითითებულ ზომებს მისი პროპორციების შენარჩუნებით. თუ მითითებული ზომები არ ემთხვევა ვიდეოს პროპორციებს, მაშინ იქნება მუქი ზოლები ვიდეოს ზედა და/ან გვერდითი კიდეების გასწვრივ. ამიტომ, ამ პარამეტრების დაყენებისას, მიზანშეწონილია აირჩიოთ მათი თანაფარდობა იგივე, რაც ვიდეოს დაკვრას, ან დააყენოთ მხოლოდ სიგანე და მოთამაშე თავად დაარეგულირებს სიმაღლეს.
• თუ რომელიმე ან ორივე პარამეტრი არ არის მითითებული, მაშინ დაუზუსტებელი პარამეტრი(ებ)ი აღებული იქნება პოსტერის ატრიბუტში მითითებული სურათის შესაბამისი ზომიდან.
• თუ პოსტერის ატრიბუტი აკლია, მაშინ ეს პარამეტრები დაყენდება შემდეგნაირად: სიგანე = 300 px და სიმაღლე = 150 px. იმისათვის, რომ არ გამოვთვალოთ და კოორდინირებული იყოს ვიდეო ზონის ზომები თავად კლიპის პროპორციების მიხედვით, გირჩევთ დააყენოთ მხოლოდ ერთი სიგანის პარამეტრი, შემდეგ დაკვრის არეალის სიმაღლე (სიმაღლე) ავტომატურად შეირჩევა ვიდეო პროპორციების მიხედვით. .
• ასევე, HTML5 მოთამაშის ზომასა და დიზაინზე შეიძლება გავლენა იქონიოს CSS თვისებების მეშვეობით, რომლებიც გამოიყენება ან ტეგებზე.

• დადუმებული ატრიბუტი აყენებს მის არსებობას ტეგებში ან ხმაში დადუმებულ მდგომარეობაში HTML5 პლეერში. ნაგულისხმევად, ატრიბუტი აკლია.

• crossorigin ატრიბუტი ეუბნება ბრაუზერს, შეასრულოს CORS მოთხოვნა ამ ელემენტისთვის. ნაგულისხმევად, ატრიბუტი არ არის, რაც ნიშნავს, რომ CORS მოთხოვნები საერთოდ არ გამოიყენება. თუ ატრიბუტი არსებობს, შესაძლო მნიშვნელობები არის ანონიმური და გამოყენების სერთიფიკატები. CORS () არის ტექნოლოგია თანამედროვე ბრაუზერებში, რომელიც საშუალებას გაძლევთ მართოთ ნებართვები მიმდინარე ვებ გვერდზე რესურსების ჩატვირთვისთვის სხვა დომენებიდან, გარდა მიმდინარე გვერდის დომენისა. CORS სტანდარტის ბრაუზერის მხარდაჭერა საშუალებას გაძლევთ განახორციელოთ მონაცემთა ჯვარედინი დომენების უსაფრთხო გაცვლა მიმდინარე გვერდის დომენზე სპეციალური მოთხოვნის (header) შესრულებით, რათა დადგინდეს, ნებადართულია თუ არა ამ გვერდზე სხვა მითითებული დომენის რესურსების ჩატვირთვა. ასეთი მოთხოვნის საპასუხოდ, სერვერმა უნდა მიუთითოს ის დომენები, საიდანაც ნებადართულია რესურსების ჩამოტვირთვა.

• mediagroup ატრიბუტი საშუალებას გაძლევთ დააკავშიროთ მრავალი მედია ფაილის კონტროლი ერთ MediaController-ში მედია ფაილების ჯგუფის შექმნით გვერდზე სხვადასხვა ადგილას. ეს ჯგუფი ერთდროულად იმართება მასში შემავალი ყველა ფაილისთვის. ეს მოსახერხებელია, მაგალითად, თუ თქვენ გჭირდებათ ერთი და იგივე ვიდეოს ერთდროულად დაკვრა და კონტროლი გვერდის სხვადასხვა ადგილას სხვადასხვა სუბტიტრებით ან სხვადასხვა ვიდეოებით.

ტეგებს და მოითხოვს დახურვის ტეგს.

იმ შემთხვევებისთვის, როდესაც ბრაუზერს არ აქვს HTML5 და ტეგების მხარდაჭერა, რაც ახლა ძალიან იშვიათია, ტექსტური შეტყობინება იწერება კონტეინერის დახურვის ტეგამდე და ჩვეულებრივ ემატება ფაილის გადმოტვირთვის ბმული. თუ ბრაუზერში ჩაშენებული HTML5 პლეერი დამატებით აკონტროლებს JS ბიბლიოთეკას (JS player), მაშინ მათი უმეტესობა აკავშირებს ფლეშ ფლეერს, თუ ბრაუზერში შეუძლებელია HTML5 ვიდეოს და აუდიოს დაკვრა იმის გამო, რომ ბრაუზერს არ აქვს ვიდეო და აუდიო მხარდაჭერა. ტეგები ან მულტიმედიური ფაილის ფორმატი.

გასათამაშებელი ფაილის გზა ასევე შეიძლება განისაზღვროს ტეგის გამოყენებით src ატრიბუტით მოთავსებული ან ტეგების შიგნით. ტეგს არ აქვს დახურვის ტეგი.

უმეტეს შემთხვევაში, ტეგი ასე გამოიყურება:

და ის ყოველთვის შეიცავს src და type ატრიბუტს, რომელსაც უმეტეს შემთხვევაში აქვს მხოლოდ MIME ტიპი.

• ტეგის src= "URL" ატრიბუტი განსაზღვრავს მულტიმედიური ფაილის URL-ს. ბილიკი შეიძლება იყოს სრული, პროტოკოლისა და დომენის მითითებით, ან საიტის ფესვთან შედარებით.
• ტეგის type="MIME-type" ატრიბუტი, ან უფრო სრულად type="MIME-type; codecs="codec"" განსაზღვრავს ფაილის MIME ტიპს და კოდეკს. აუდიოსთვის საკმარისია MIME ტიპის მითითება, მაგალითად, .mp3 - type="audio/mpeg". მართალია, ვიდეოს სპეციფიკაციის მიხედვით, კოდეკი ასევე უნდა იყოს მითითებული ტიპის ატრიბუტში, მაგრამ ახლა ისინი ხშირად მიუთითებენ მხოლოდ MIME ტიპის კოდეკის გარეშე, რაც ბრაუზერებს უტოვებენ გადასაწყვეტად.
• თეგის მედია ატრიბუტი ="all|braille|handheld|print|screen|Speech|projection|tty|tv" განსაზღვრავს მოწყობილობის ტიპს, რომლითაც უნდა დაკვრა ფაილი. ნაგულისხმევი მნიშვნელობა არის ყველაფერი, ასე რომ უმეტეს შემთხვევაში ეს ატრიბუტი საერთოდ არ არის მითითებული, თუ არ გსურთ კონკრეტული მოწყობილობის იდენტიფიცირება დასაკრავად.

HTML5 ვიდეოსთვის ასევე შესაძლებელია პლეერში დამატებითი ჩანაწერის ჩვენება ისეთი ინფორმაციით, როგორიცაა სუბტიტრები, წარწერები, თავები, აღწერილობები (ჯერ არ არის მხარდაჭერილი) და მეტამონაცემები (ჯერ არ არის მხარდაჭერილი). ეს ფუნქცია ხორციელდება ტეგის შიგნით შესაბამისი ატრიბუტების მქონე ტეგების დამატებით.

- არ აქვს დახურვის ტეგი.

ტეგი საშუალებას გაძლევთ დააკავშიროთ ვიდეოს დამატებითი ტრეკის ფაილები სპეციალურ WebVTT ფორმატში (Web Video Text Tracks Format), რომელიც მიუთითებს ასახულ ტექსტურ შეტყობინებებზე მათი დროის მითითებით ვიდეო ფაილზე. WebVTT სტანდარტი არა მხოლოდ მხარს უჭერს ტექსტური შეტყობინებების ჩვენებას, არამედ უზრუნველყოფს CSS სტილის ვარიანტებს და ვიდეოს ნახვის ზონაში განთავსების ვარიანტებს. ამჟამად WebVTT ფაილები ძირითადად გამოიყენება ვიდეოებზე ტექსტური სუბტიტრების დასამაგრებლად, რასაც თითქმის ყველა ბრაუზერი უჭერს მხარს. WebVTT სტანდარტის სხვა ფუნქციები ჯერ კიდევ არ არის სრულად დანერგილი თავად ბრაუზერების მიერ, ამიტომ, WebVTT-ის უფრო სრულყოფილი გამოყენებისთვის, უმჯობესია გამოიყენოთ JS მოთამაშეები. ასევე, WebVTT ფაილები შეიძლება არასტანდარტულად გამოიყენონ JS ფლეერებმა დამატებითი მონაცემების გადასატანად JS პლეერზე, როგორიცაა, მაგალითად, სურათების გადახედვის URL-ები ვიდეო ჩარჩოებისთვის. კითხვაზე, თუ როგორ უნდა აჩვენოთ ვიდეო ჩარჩოების გადახედვა მოთამაშის უკან გადახვევის მასშტაბით (Scrub Bar Thumbnails), როგორც ეს ხდება ვიდეო ჰოსტინგის საიტებზე. აქვე უნდა ითქვას, რომ ასეთი ფუნქციონირება ჯერ არ არის ხელმისაწვდომი ბრაუზერებში ჩაშენებულ ფლეერებში და, შესაბამისად, დანერგილია JS ფლეერების საშუალებით, როგორც დანამატი. ამისათვის დააკავშირეთ JS ბიბლიოთეკა (js player), რომელიც აკონტროლებს HTML5 ვიდეო და აუდიო ობიექტს და ასრულებს მის სტილს. ასეთი JS მოთამაშეები ვიდეო ჩარჩოების გადახედვის საჩვენებლად არასტანდარტულად იყენებენ WEBVTT ფაილებს ტეგიდან, რათა გადასცეს წინასწარი გადახედვის სურათების URL-ები.

WebVTT ფაილი არის ჩვეულებრივი ტექსტური ფაილი .vtt გაფართოებით, რომელშიც სტრიქონი-სტრიქონული სიის სახით იწერება დროის შტამპები დაწყების და დასრულების დროებით და ტექსტური შეტყობინებები ამ ტეგებზე გამოსატანად. თქვენ შეგიძლიათ დააკავშიროთ რამდენიმე WebVTT ფაილი ტექსტით სხვადასხვა ენაზე კონტეინერში. თითოეული ენისთვის თქვენ უნდა შექმნათ ცალკე ფაილი და დააკავშიროთ თითოეული . ტეგები უნდა იყოს ჩასმული კონტეინერის შიგნით ყველა ტეგის შემდეგ, მაგრამ HTML5 ვიდეო შეცდომის შეტყობინებებამდე. ნაგულისხმევ ენაზე სუბტიტრების ფაილით თეგი პირველ რიგში უნდა განთავსდეს მიმდინარე კონტეინერში არსებულ ტეგებს შორის.

WEBVTT ფაილი შეიძლება შეიცავდეს ერთ ან მეტ დროის ნიშანს. ფაილი იწყება სიტყვით WEBVTT. ცარიელი ხაზები გამოყოფს დროის ნიშანს მათი ასოცირებული ტექსტით და ატრიბუტებით. ტექსტი შეიძლება შეიცავდეს HTML და CSS მარკირების ელემენტებს. მისი პირადობის მოწმობა შეიძლება განთავსდეს დროის ანაბეჭდის წინ, რათა მიმართოთ მას სპეციალური გამონათქვამების გამოყენებით. ყველა ეს დეტალი აღწერილია WEBVTT სტანდარტში. განსაზღვრავს ტრეკის ტიპს და შეუძლია მიიღოს შემდეგი მნიშვნელობები:

• სუბტიტრები - სუბტიტრები ტექსტის სახით, რომელიც ნაჩვენებია ვიდეოზე. დასაკრავი ფაილისთვის შეგიძლიათ დააყენოთ სუბტიტრები სხვადასხვა ენაზე, რათა უზრუნველყოთ მათი არჩევანი პლეერში, თუ ის მხარს უჭერს მას. უმეტეს შემთხვევაში, ეს ტიპი გამოიყენება, რადგან მას მხარს უჭერს ბრაუზერების უმეტესობა.
• წარწერები - წარწერები ტექსტისა და ხმის სახით, რომლებიც ნაჩვენებია ვიდეოზე. სუბტიტრების მსგავსი, მაგრამ ტექსტის გარდა, შეიძლება შეიცავდეს ხმოვან ეფექტებს და სხვა აუდიო ინფორმაციას.
• თავები - თავები, რომლებიც ნაჩვენებია ტექსტში, როგორც სიის მენიუ და განკუთვნილია სწრაფი ნავიგაციისთვის მედია ფაილში.
• აღწერილობები - აღწერილობები, ეს არის ტექსტური ფაილები ვიდეო აღწერილობებით ეკრანის მკითხველში დაკვრისთვის.
• მეტამონაცემები - მეტამონაცემები js სკრიპტების გადაცემისთვის.

ტეგის src ატრიბუტი განსაზღვრავს ტრეკის ფაილის URL-ს დამატებითი ინფორმაციით. ტეგზე მიმაგრებულ ფაილს აქვს WebVTT ფორმატი და .vtt გაფართოება.

ტეგის srclang ატრიბუტი განსაზღვრავს ტრეკის ენას ენის კოდის საშუალებით. რუსულისთვის ეს ტოლი იქნება "ru", ინგლისურისთვის "en".

ტეგის ლეიბლის ატრიბუტი განსაზღვრავს ტრეკის სახელს, რომელიც ნაჩვენები იქნება დამკვრელში. თუ ატრიბუტი არ არის დაყენებული, ბრაუზერი აჩვენებს მის სერვისის სახელს.

ტეგის ნაგულისხმევი ატრიბუტი განსაზღვრავს ნაგულისხმევად ამ ჩანაწერის არჩევას, თუ ვიდეო კონტეინერში არის სხვა ჩანაწერები. რამდენიმე ტეგიდან მხოლოდ ერთს შეიძლება ჰქონდეს ნაგულისხმევი ატრიბუტი. უმჯობესია განათავსოთ ნაგულისხმევი ბილიკი პირველ რიგში სხვა დაკავშირებულ ტრეკებს შორის.

ერთ-ერთი ყველაზე გამორჩეული თვისება HTML5არის აუდიოს ნაკადი.

თუ თქვენ ხართ ვებ განვითარების მოყვარული, მაშინ ეს 10 წარმოუდგენელი HTML5 აუდიო პლეერი გამოგადგებათ.

- აუდიო და ვიდეო პლეერი, რომელიც იწერება სუფთა სახით HTML5და CSS. ძველი ბრაუზერების მხარდაჭერა ხდება გამოყენებით ფლეშიდა Silverlightმოთამაშეები, რომლებიც ბაძავენ HTML5 MediaElement API.
MediaElement-ს აქვს მრავალი დიზაინი და მხარდაჭერა პოპულარული პლატფორმებისთვის: WordPress, Drupal, Joomla და ა.შ.

ეს მოთამაშე საკმაოდ მინიმალისტურია, მაგრამ ფუნქციონალური. კარგია, როდესაც გჭირდებათ დასაკრავი სიები და ლამაზი ეფექტები!

კიდევ ერთი შესანიშნავი მოთამაშე, ალბათ საუკეთესო მთელ სიაში. დადებითი არის ის, რომ მისი დაყენება ძალიან მარტივია და საკმაოდ მოქნილი ზომით და მორგებულია ფერების შეუზღუდავი რაოდენობით.
უ ჯვარედინი ბრაუზერის მხარდაჭერა და ძველი ბრაუზერებისთვის არის ის ფლეში-ანალოგური.

თქვენ იყენებთ Mootoolsთქვენს საიტზე? თუ კი, მაშინ შეიძლება მოგეწონოთ ეს მოთამაშე, დამზადებული HTML5და Mootools JavaScriptჩარჩო. პლეერი იდეალურად მუშაობს ყველა თანამედროვე ბრაუზერში.

ეს მოთამაშე ერთადერთია სიაში, რომელიც გადახდილია. ღირს მხოლოდ $5, მაგრამ მუშაობს იდეალურად. პლეერს აქვს მრავალი სასარგებლო ფუნქცია, როგორიცაა თქვენი აუდიოს დაცვა სიგნალის გადაფარვისგან, რაც ძალიან კარგია კომერციული გამოყენებისთვის.

წყარო: http://codecanyon.net/item/universal-html5-audio-player

IN ჩართული ტექნოლოგიები HTML5და ფლეში, რაც მას აქცევს ძალიან მსუბუქ წონაში (10 KB) მძლავრ ბრაუზერულ გადაწყვეტას აუდიო ნაკადისთვის.
გსურთ იცოდეთ რისი გაკეთება შეგიძლიათ ხმის მენეჯერი 2? ეწვიეთ დემოს სანახავად!

ბოლო დრომდე, ვებ გვერდზე აუდიოს ჩასმა არც ისე ადვილი საქმე იყო. ზოგადად, არის ისეთებიც, რომლებიც გვთავაზობენ უფრო ჭკვიანურ და უკეთეს განხორციელებას, მაგრამ მეთოდების უმეტესობა ზღუდავს თქვენ გქონდეთ გარკვეული ბრაუზერი და გარკვეული დანამატები.

ბაზარზე Flash ტექნოლოგიის გამოჩენასთან ერთად, ეს ამოცანა ბევრად გამარტივდა, რადგან Flash მოდული საშუალებას გაძლევთ ჩართოთ ნებისმიერი ანიმაცია ან ხმა გვერდზე და ტექნოლოგია მხარს უჭერს ბრაუზერების უმეტესობას. მაგრამ Flash-ზე მოთხოვნა თანდათან ქრება Apple-ის ინოვაციური მოწყობილობების: iPhone-ისა და iPad-ის გამოშვების შემდეგ. მოგეხსენებათ, Apple ფუნდამენტურად არ აღჭურავს თავის მოწყობილობებს Flash მხარდაჭერით და პროდუქტის მომხმარებელთა რაოდენობა სწრაფად იზრდება.

მოკლედ, აქ ცოტა გაუგებრობაა.

საბედნიეროდ, HTML5-მა დეველოპერებს ცხოვრება გაუადვილა, რადგან ტექნოლოგია მოიცავს აუდიო ელემენტს. ეს ელემენტი საშუალებას გაძლევთ ჩართოთ აუდიო ფაილები ნებისმიერ ვებ გვერდზე, ასევე განახორციელოთ მართვის პანელი Javascript-ის გამოყენებით. რაც მთავარია, ტექნოლოგია არ საჭიროებს დამატებით დანამატებს და მხარდაჭერილია თითქმის ყველა ბრაუზერში, გარდა ადრეული ვერსიებისა (ბრაუზერის მხარდაჭერაზე მოგვიანებით ვისაუბრებთ!).

ჩვენს დღევანდელ სტატიაში ჩვენ გეტყვით, თუ როგორ შეგიძლიათ ჩართოთ ხმები აუდიო ელემენტის გამოყენებით. ჩვენ ასევე ვისწავლით როგორ გავაკონტროლოთ დაკვრის პროცესი javascript-ის გამოყენებით და ასევე შევეცდებით გითხრათ ბრაუზერებს შორის ტექნოლოგიური მხარდაჭერის შესახებ.

HTML5 აუდიო ელემენტი

ამ ელემენტის გამოყენება ძალიან მარტივია. ჩვენს დღევანდელ მაგალითში ჩვენ ჩავრთავთ Bing Crosby-ს "თეთრი შობა":

აქ ბევრი ახსნა არ არის საჭირო. ისევე, როგორც სურათის ჩასმა img ტეგის გამოყენებით, შეგიძლიათ ხმის ჩასმა აუდიო ტეგის გამოყენებით იმავე გზით.

ჯვარედინი ბრაუზერის მხარდაჭერა

ზემოთ მოყვანილი მაგალითი ნაკლებად სავარაუდოა, რომ იმუშაოს ყველა ბრაუზერში. ეს არის სადაც ფაილის ფორმატი მოქმედებს.

ზოგიერთ ბრაუზერს შეუძლია .mp3 ფაილების დაკვრა, მაგრამ არა .ogg ფაილების, ზოგი კი პირიქით. ბრაუზერების უმეტესობას შეუძლია .wav ფაილების დაკვრა, მაგრამ მისი დიდი ზომის გამო, ვებსაიტისთვის აუდიოს სახით გამოყენება შეუსაბამოა.

აქ არის ბრაუზერების ცხრილი, რომელიც აჩვენებს ხმის ფორმატების მხარდაჭერას:

რა ფორმატებს უჭერს მხარს თქვენი ბრაუზერი? განსაზღვრეთ ეს .

როგორც ცხრილში ხედავთ, განხორციელების ყველაზე ოპტიმალური ვარიანტი იქნება ორივე ფაილის ფორმატის დაკავშირება.
ამისათვის თქვენ შეგიძლიათ დაამატოთ რამდენიმე წყარო ელემენტი აუდიო ელემენტში და მათში მიუთითოთ ბილიკები სხვადასხვა ფორმატში. ბრაუზერი დაუკრავს პირველ ფაილს, რომელსაც მხარს უჭერს. აი მაგალითი:

რა თქმა უნდა, ეს ნიშნავს, რომ თქვენ უნდა შექმნათ როგორც Mp3, ასევე OGG ვერსიები თქვენი აუდიო ფაილის (აქ არის ) სამაშველოში, მაგრამ ეს არის ერთადერთი გზა ბრაუზერის მხარდაჭერის უზრუნველსაყოფად.

Internet Explorer-ის ადრეული ვერსიები (ვერსიები 7 და 8) საერთოდ არ უჭერს მხარს აუდიო ელემენტს. თუმცა, მოგვიანებით სტატიაში განვიხილავთ, თუ როგორ უნდა მოგვარდეს ეს პრობლემა.

ხმის ავტომატური დაკვრა

მიუხედავად იმისა, რომ ზემოთ მოცემული კოდი ჩაშენებულია აუდიოს, ის არ უკრავს მას. თუ გვინდა, რომ ხმა ავტომატურად დაკვრას გვერდის ჩატვირთვისას, ელემენტს უნდა დავამატოთ autoplay ატრიბუტი:

საკონტროლო ღილაკების დამატება

მიუხედავად იმისა, რომ ავტომატური დაკვრა შეიძლება სასარგებლო იყოს, ხშირ შემთხვევაში ეს არის შემაშფოთებელი ან სრულიად შეუსაბამო. ამიტომ, ჩვენ შეგვიძლია დავაყენოთ დამატებითი საკონტროლო ღილაკები აუდიო ელემენტებისთვის, რათა მომხმარებელმა თავად გადაწყვიტოს:

ეს ამატებს ჰორიზონტალურ ზოლს პაუზის/თამაშის ღილაკით, დროის ხაზს სლაიდერით და ხმის კონტროლით. ყველაფერი დაახლოებით იგივეა, რაც შეგიძლიათ იხილოთ პლეერზე Youtube-ზე.

მნიშვნელოვანია გვახსოვდეს, რომ მართვის პანელი განსხვავდება ბრაუზერების მიხედვით. მაგალითად, iPhone-ის ბრაუზერს არ ექნება ხმის სლაიდერი, რადგან მოწყობილობას აქვს ცალკე ღილაკები აუდიო დონის გასაკონტროლებლად.

მარყუჟის დაკვრა

აუდიო ელემენტზე მარყუჟის ატრიბუტის დამატება გამოიწვევს აუდიოს განუსაზღვრელი ვადით დაკვრას.

ეს შეიძლება სასარგებლო იყოს თამაშებში ფონური მუსიკის ან ხმის ეფექტების ჩართვისთვის.

თქვენ ასევე შეგიძლიათ გამოიყენოთ წინასწარ ჩატვირთვის ატრიბუტი, რომელიც ბრაუზერს აცნობებს როდის და სად უნდა ჩაიტვირთოს კონკრეტული აუდიო ფაილი.
აუდიო ფაილის წინასწარ ჩატვირთვა ნიშნავს, რომ აუდიოს დაკვრა შესაძლებელია დაუყოვნებლივ, როდესაც მომხმარებელი დააჭერს დაკვრის ღილაკს.

ამ ატრიბუტის რამდენიმე მნიშვნელობა არსებობს:

"არცერთი" - ბრაუზერმა არ უნდა დააწესოს გადმოწერილი ფაილი. იმათ. თუ დარწმუნებული ხართ, რომ მომხმარებლების უმეტესობა არ ითამაშებს ფაილს, გამოიყენეთ ეს ვარიანტი. ან გამოიყენეთ ის, როდესაც გჭირდებათ სერვერის რაც შეიძლება მეტი გამტარობის დაზოგვა.

"მეტამონაცემები" - პარამეტრი არ არის მსგავსი, გარდა იმისა, რომ თქვენ აცნობებთ ბრაუზერს მეტამონაცემების ჩატვირთვის შესაძლებლობის შესახებ, როგორიცაა აუდიო ჩანაწერის ხანგრძლივობა, მაგრამ არა თავად აუდიო ფაილი.

"auto" - თქვენ ნებას რთავთ ბრაუზერს თავად გადმოწეროს აუდიო ფაილი.

Მაგალითად:

გაითვალისწინეთ, რომ წინასწარ ჩატვირთვა მხოლოდ მოსახერხებელი ფუნქციაა, რადგან ზოგიერთმა ბრაუზერმა შეიძლება უბრალოდ იგნორირება გაუკეთოს ამ ბრძანებას და დაიწყონ რისი გაკეთებაც სურთ.

დაკვრის კონტროლი Javascript-ის საშუალებით

ჯავასკრიპტის ელემენტების შესანიშნავია ის, რომ მათი მანიპულირება ძალიან მარტივია ჯავასკრიპტის გამოყენებით. აუდიო ელემენტი გთავაზობთ ბევრ მოსახერხებელ პარამეტრს და კონტროლის მეთოდს:

Play() – დაკვრის დაწყება მიმდინარე პოზიციიდან;

Pause() – დაკვრის შეჩერება მიმდინარე პოზიციაზე;

canPlayType(type) – განსაზღვრავს, მხარს უჭერს თუ არა ბრაუზერი ამ ტიპის მედიის დაკვრას;

ხანგრძლივობა – ტრეკის ხანგრძლივობა წამებში;

currentTime - მიმდინარე პოზიცია წამებში. თქვენ ასევე შეგიძლიათ დააყენოთ ეს პარამეტრი დაკვრის პოზიციის გადასატანად.

ზემოთ შემოთავაზებული ვარიანტებისა და მეთოდების გამოყენებით, ჩვენ შეგვიძლია შევქმნათ რამდენიმე ძირითადი საკონტროლო ღილაკი:

მუსიკის დაკვრა
მუსიკის პაუზა
შეაჩერე მუსიკა
დემოს ნახვა: 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 Audio-ს და ასევე იმუშავებს IE 7 და 8 ვერსიებში. კომენტარების გამოყენებით, ჩვენ გადამისამართებთ ღილაკების კონტროლს პირდაპირ აუდიო ფაილზე.

დაბრუნების კიდევ ერთი გზაა გვერდზე Flash Player-ის ჩასმა. აქ, რომელიც საუბრობს დაბრუნებაზე Flash Player-ის სახით.

დასკვნა

ჩვენს დღევანდელ სტატიაში ვისწავლეთ თუ როგორ უნდა ჩავდოთ აუდიო ფაილები HTML5-ის გამოყენებით. აუდიო ელემენტი არა მხოლოდ მარტივი გამოსაყენებელია, არამედ შეგვიძლია მისი მორგება და დაკვრის კონტროლი Javascript-ის საშუალებით.

გსურთ გაიგოთ მეტი აუდიო ელემენტის შესახებ HTML5-ში? შემდეგ შეამოწმეთ.

მიუხედავად იმისა, რომ მხარდაჭერა ამჟამად ზარალდება ზოგიერთ ბრაუზერში (როგორიცაა IE-ს ძველი ვერსიები), საჭიროების შემთხვევაში შეგიძლიათ მარტივად დააბრუნოთ ისინი, რაც ამ დღეებში სულ უფრო და უფრო ნაკლებად ხდება.