andew

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

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

11937

Το άρθρο περιγράφει τη δομή του κοντέινερ ήχου και βίντεο HTML5, τις ετικέτες βίντεο, ήχου, πηγής, κομματιού και τα χαρακτηριστικά τους με πιθανές τιμές. Παρέχονται πρότυπα HTML και παραδείγματα υλοποίησης αναπαραγωγής αρχείων πολυμέσων με βάση τις δυνατότητες που είναι ενσωματωμένες στο πρόγραμμα περιήγησης. Εμφανίζεται η σύνδεση με το κομμάτι κειμένου βίντεο με υπότιτλους, τίτλους, πίνακα περιεχομένων χρησιμοποιώντας αρχεία μορφής WEBVTT με παραδείγματα. Παρουσιάζονται πρότυπα κώδικα HTML5 με μικροσήμανση schema.org για ήχο και βίντεο. Υποδεικνύονται οι κύριες μορφές web αρχείων ήχου και βίντεο με τους τύπους MIME και τα εργαλεία μετατροπής βίντεο και ήχου σε αυτές τις μορφές.

Το HTML5 περιέχει νέες δυνατότητες που σας επιτρέπουν να αναπαράγετε αρχεία ήχου και βίντεο απευθείας στο πρόγραμμα περιήγησης χωρίς χρήση προγράμματα τρίτων. Μέχρι στιγμής, παρά το γεγονός ότι η HTML5 δεν είναι πλέον καινούργια, εξακολουθούν να υπάρχουν διαφωνίες σχετικά με τον τρόπο με τον οποίο τα προγράμματα περιήγησης επεξεργάζονται τις ετικέτες βίντεο και ήχου και πώς εμφανίζεται το ίδιο το πρόγραμμα αναπαραγωγής. Μερικοί άνθρωποι το κάνουν καλύτερα κάθε φορά νέα έκδοση, άλλοι ακόμα υστερούν. Σε παγκόσμιο επίπεδο, η τάση είναι ότι τα προγράμματα περιήγησης θα παρέχουν όλο και περισσότερες λειτουργίες για την αναπαραγωγή αρχείων πολυμέσων.

Screencast: Παράδειγμα χρήσης προτύπων

Λήψη βίντεο

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συσκευή αναπαραγωγής για αναπαραγωγή αρχείου πολυμέσων. Λαμβάνοντας υπόψη ότι η μορφή mp4 έχει γίνει πολύ δημοφιλής, μπορεί κανείς να ελπίζει σε χαμηλή πιθανότητα προβλημάτων με την αναπαραγωγή της σε προγράμματα περιήγησης. Αυτό το σχήμα απαιτεί μόνο ένα αρχείο πολυμέσων στην καθορισμένη μορφή, το οποίο εξοικονομεί χώρο στο δίσκο και πόρους για την επεξεργασία αρχείων. Επίσης, ένα τέτοιο σχήμα θα είναι στρατηγικά πιο σωστό, καθώς η τάση είναι ότι τα προγράμματα περιήγησης είναι όλο και καλύτερα στην εφαρμογή βίντεο και ήχου HTML5.

Για να υποδείξετε στη συσκευή αναπαραγωγής HTML5 το αρχείο που πρόκειται να αναπαραχθεί, εκτός από τη διεύθυνση URL του αρχείου, πρέπει επίσης να μεταβιβάσετε τον τύπο MIME του αρχείου, ώστε το πρόγραμμα περιήγησης να καταλάβει ποιον κωδικοποιητή πρέπει να χρησιμοποιήσει. Ο παρακάτω πίνακας παραθέτει τις πιο κοινές μορφές αρχείων και τους τύπους MIME τους.

Μορφές αρχείων και οι τύποι MIME τους Αρχεία πολυμέσων Επεκτάσεις τύπου Mime

Ήχος mp3	mp3	ήχου/mpeg
Ήχος mp4	m4a	ήχος/mp4
Ήχος webm	webm	ήχος/ιστός
Ήχος ogg	ogg	ήχος/ogg
Βίντεο mp4 (H.264)	mp4	βίντεο/mp4
Βίντεο webm	webm	βίντεο/ιστό
Βίντεο ogg	ogv	βίντεο/ogg

Εργαλεία κωδικοποίησης ήχου και βίντεο

Για να κωδικοποιήσετε αρχεία βίντεο και ήχου στις παραπάνω μορφές web, μπορείτε να χρησιμοποιήσετε ανοιχτό πρόγραμμα, το οποίο υποστηρίζει τη μετατροπή αρχείων ήχου και βίντεο στις κύριες μορφές που είναι κοινές για το web ( MP4, WebM, Ogg Theora, MP3, κ.λπ.). Το Miro Video Converter είναι διαθέσιμο για διαφορετικά λειτουργικά συστήματα- Windows, Mac και Linux και είναι ένα γραφικό κέλυφος για βοηθητικά προγράμματα κονσόλας και που είναι βολικά στη χρήση διακομιστή ιστούγια αυτόματη επεξεργασία βίντεο και ήχου που έχετε κατεβάσει.

: Παράδειγμα κώδικα ήχου HTML5 με μικροσήμανση schema.org: Κεφαλίδα ήχου

Ο ήχος HTML5 δεν υποστηρίζεται από το πρόγραμμα περιήγησής σας.

Λήψη ήχου

Έτσι θα φαίνονται τα δεδομένα μικροσήμανσης που εξάγονται από τον κώδικα για το πρότυπο ήχου που περιγράφεται παραπάνω.

Audioobject itemType = http://schema.org/AudioObject name = Περιγραφή τίτλου ήχου = Περιγραφή ήχου... isfamilyfriendly = true encodingformat = mp3 duration = PT04M59S uploaddate = 2015-12-31 image = Full URL to image.jpg εναλλακτικό όνομα = Εναλλακτικό τίτλος audio contenturl href = URL σε αρχείο.mp3 text = Λήψη στοιχείου προσώπου συγγραφέα ήχου = http://schema.org/Person url href = URL text = Όνομα συγγραφέα = Εικόνα ονόματος συγγραφέα = Πλήρες url σε άτομο.jpg

Η ελάχιστη σήμανση ήχου σύμφωνα με το schema.org θα πρέπει να περιλαμβάνει itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" . Οι υπόλοιπες ιδιότητες είναι προαιρετικές.

Παράδειγμα τυπικής χρήσης ετικέτας HTML5:

Στην επίδειξη, εφάρμοσα στυλ CSS στην ετικέτα μέσω του χαρακτηριστικού class, κάνοντας το πλάτος της περιοχής βίντεο δυναμικό ανάλογα με το μέγεθος της οθόνης. Η συσκευή αναπαραγωγής ρυθμίζεται μόνη της σε ύψος. Δοκιμάστε να αλλάξετε το μέγεθος του παραθύρου του προγράμματος περιήγησής σας για να δείτε πώς λειτουργεί. Επομένως, στην πηγή κώδικα για αυτήν την επίδειξη δεν υπάρχουν χαρακτηριστικά πλάτους και ύψους για την ετικέτα, αντικαθίστανται από στυλ CSS. Αλλά αυτή η μέθοδος δεν εμφανίζεται στη λίστα κωδικών προτύπου, επειδή είναι ήδη ένα ιδιαίτερο πράγμα.

Παράδειγμα κώδικα βίντεο HTML5 με μικροσήμανση schema.org: Τίτλος βίντεο

Δείτε στο YouTube

Το βίντεο HTML5 δεν υποστηρίζεται από το πρόγραμμα περιήγησής σας.

Λήψη βίντεο: Τίτλος βίντεο

Έτσι θα φαίνονται τα δεδομένα μικροσήμανσης που εξάγονται από τον κώδικα για το πρότυπο βίντεο που περιγράφεται παραπάνω.

Videoobject itemType = http://schema.org/VideoObject name = μικρογραφία τίτλου βίντεο imageobject itemType = http://schema.org/ImageObject contenturl = URL στο video-thumbnail.jpg|png πλάτος = 100 ύψος = 100 διάρκεια = PT14M59S isfamily = αληθινή ενημέρωση = περιγραφή 2015-12-31 = Σύντομη περιγραφήγια βίντεο... url href = URL σε αρχείο.mp4 κείμενο = τίτλος βίντεο συγγραφέας πρόσωπο itemType = http://schema.org/Person url href = URL προς τον συγγραφέα κείμενο ιστοσελίδας = όνομα συγγραφέα = όνομα συγγραφέα εικόνα = Πλήρης διεύθυνση URL προς author.jpg thumbnailurl = URL προς file.jpg|png

Ελάχιστο απαραίτητηΓια τις μηχανές αναζήτησης, η σήμανση βίντεο schema.org πρέπει να περιλαμβάνει όλες τις ιδιότητες itemprop που εμφανίζονται στον κώδικα του παραδείγματος, με εξαίρεση το μπλοκ itemprop "author", το οποίο είναι προαιρετικό για τις μηχανές αναζήτησης και μπορεί να διαγραφεί εάν δεν υπάρχουν δεδομένα για γεμισέ το. Για τη μικρογραφία βίντεο, το Yandex απαιτεί από εσάς να καθορίσετε τη μικροσήμανση σύμφωνα με το schema.org ως itemprop = "μικρογραφία" με τη μορφή ImageObject , και Googleαπαιτεί τον καθορισμό του στοιχείου "thumbnailUrl" , επομένως πρέπει να εισαγάγετε το αρχείο μικρογραφίας βίντεο δύο φορές και επομένως η δεύτερη ετικέτα img έλαβε την εμφάνιση: κανένα στυλ για να μην εμφανίζεται στο πρόγραμμα περιήγησης. Αντί να χρησιμοποιήσετε μια ετικέτα img με display:none, μπορείτε να μεταβιβάσετε αυτήν την ιδιότητα στην ετικέτα συνδέσμου μέσω του χαρακτηριστικού href. Επίσης, παρά το γεγονός ότι η μικροσήμανση μπορεί να μεταδοθεί μέσω ετικετών meta και συνδέσμων που δεν εμφανίζονται στον χρήστη, συνιστάται, αν είναι δυνατόν, η προσθήκη μικροσήμανσης κυρίως σε ετικέτες που θα εμφανίζονται στον χρήστη. Η επικύρωση της μικροσήμανσης schema.org μπορεί να γίνει χρησιμοποιώντας αυτούς τους συνδέσμους: , . Το κύριο πλεονέκτημα της χρήσης μικροσήμανσης είναι η ευκολία αυτού του περιεχομένου για ρομπότ αναζήτησης και ρομπότ κοινωνικών δικτύων. Αυτά τα ρομπότ εξάγουν δεδομένα με ετικέτα και τα συγκεντρώνουν. Επομένως, βελτιώνεται η χρήση της μικροσήμανσης SEOτοποθεσία και διευκολύνει την αυτόματη διανομή δεδομένων σε στα κοινωνικά δίκτυα. Μια λεπτομερής περιγραφή της μικρο-σήμανσης Schema.org για βίντεο που επισημαίνονται με το σχήμα VideoObjec t στον ιστότοπο. Επίσης, αξίζει να σημειωθεί ότι για τις περιπτώσεις που εισάγετε ένα βίντεο στον ιστότοπό σας όχι απευθείας, αλλά χρησιμοποιώντας γραφικά στοιχεία φιλοξενίας βίντεο Yandex.Video ή YouTube, μπορείτε να προσθέσετε το μπλοκ κώδικα HTML με μια περιγραφή του βίντεο κάτω από το μπλοκ κώδικα γραφικών στοιχείων και ενσωματώστε τη σήμανση Schema.org για αυτό το βίντεο. Ταυτόχρονα, ως παράμετρος URL - σύνδεσμος προς ένα βίντεο, μην καθορίσετε έναν άμεσο σύνδεσμο προς ένα στατικό αρχείο, αλλά καθορίστε έναν σύνδεσμο που λαμβάνεται από τη φιλοξενία βίντεο. Αν και η προδιαγραφή Schema.org λέει ότι ο σύνδεσμος πρέπει να είναι σε ένα άμεσο αρχείο, οι μηχανές αναζήτησης επεξεργάζονται επίσης συνδέσμους σε βίντεο από φιλοξενία βίντεο ( δείτε παραδείγματα στον ιστότοπο Yandex στην ενότητα Webmaster), παρά το γεγονός ότι δεν μπορείτε να κάνετε λήψη του αρχείου από έναν τέτοιο σύνδεσμο και δεν μπορείτε να το προβάλετε απευθείας στο πρόγραμμα αναπαραγωγής πολυμέσων HTML5 στη σελίδα, μόνο στο γραφικό στοιχείο φιλοξενίας βίντεο.

Εάν αντιμετωπίζετε το ερώτημα από ποια φιλοξενία να κατεβάσετε αρχεία ήχου και βίντεο πολυμέσων, τότε δείτε το άρθρο, το οποίο περιγράφει την επιλογή εισαγωγής αρχείων πολυμέσων σε μια σελίδα WEB από το Yandex Disk.

Χαρακτηριστικά και ετικέτες:

Τα χαρακτηριστικά src , προφόρτωση , αυτόματη αναπαραγωγή , ομάδα μέσων , βρόχος , σίγαση , στοιχεία ελέγχου είναι κοινά χαρακτηριστικά για όλα τα στοιχεία πολυμέσων, συμπεριλαμβανομένων των ετικετών και του .

χαρακτηριστικό autoplay: είτε ή

• Το χαρακτηριστικό autoplay καθορίζεται από την παρουσία του στην ετικέτα ή και δεν χρειάζεται να ορίσετε μια τιμή για αυτό το χαρακτηριστικό, απλώς αρκεί η παρουσία του. Για τους επεξεργαστές HTML που επεξεργάζονται τον κώδικα στοιχείου, μπορείτε να ορίσετε αυτό το χαρακτηριστικό ως autoplay = "autoplay ", το οποίο ισοδυναμεί με απλή παρουσία του χαρακτηριστικού. Η παρουσία του χαρακτηριστικού αυτόματης αναπαραγωγής λέει στο πρόγραμμα περιήγησης να ξεκινήσει την αναπαραγωγή του αρχείου αμέσως μετά τη φόρτωση της ιστοσελίδας. Αντίστοιχα, το χαρακτηριστικό αυτόματης αναπαραγωγής παρακάμπτει τις τιμές του χαρακτηριστικού προφόρτωσης, το οποίο ελέγχει τον τρόπο φόρτωσης του βίντεο στη συσκευή αναπαραγωγής, επειδή το βίντεο πρέπει να αρχίσει να παίζει αμέσως και επομένως πρέπει να φορτωθεί. Από προεπιλογή, δεν υπάρχει χαρακτηριστικό αυτόματης αναπαραγωγής.

χαρακτηριστικό ελέγχου: είτε ή

• Το χαρακτηριστικό Controls λέει στο πρόγραμμα περιήγησης να εμφανίζει τον πίνακα ελέγχου του προγράμματος αναπαραγωγής όταν η σελίδα έχει φορτωθεί αλλά η εγγραφή δεν έχει ξεκινήσει να παίζει. Αυτό το χαρακτηριστικό, όπως και το χαρακτηριστικό autoplay, καθορίζεται μόνο από την παρουσία του στην ετικέτα ή και δεν απαιτεί τιμή, αρκεί μόνο η παρουσία του. Από προεπιλογή, αυτό το χαρακτηριστικό απουσιάζει, δηλ. Η συσκευή αναπαραγωγής δεν εμφανίζει τον πίνακα ελέγχου πριν ξεκινήσει η αναπαραγωγή. Όταν ξεκινήσει η αναπαραγωγή του αρχείου, ο πίνακας ελέγχου θα εμφανιστεί όταν τοποθετείτε το ποντίκι πάνω από την περιοχή του προγράμματος αναπαραγωγής.

χαρακτηριστικό βρόχου: είτε ή

• Το χαρακτηριστικό loop αναγκάζει τη συσκευή αναπαραγωγής να παίξει το αρχείο σε βρόχο. Ένα χαρακτηριστικό καθορίζεται μόνο από την παρουσία του στην ετικέτα ή και δεν έχει παραμέτρους. Από προεπιλογή δεν υπάρχει χαρακτηριστικό βρόχου.

χαρακτηριστικό προφόρτωσης:

• το χαρακτηριστικό preload καθορίζει τη φόρτωση ενός αρχείου μαζί με τη φόρτωση μιας ιστοσελίδας και παίρνει μία από τις ακόλουθες τρεις τιμές:
  • κανένα - μην κάνετε λήψη του αρχείου μαζί με τη φόρτωση της ιστοσελίδας. Αυτό σημαίνει ότι το αρχείο θα ξεκινήσει να φορτώνεται στη συσκευή αναπαραγωγής μόνο αφού πατήσετε το κουμπί αναπαραγωγής. Αυτό μπορεί να είναι χρήσιμο για την επιτάχυνση της φόρτωσης της σελίδας. Η τιμή none είναι η προεπιλεγμένη τιμή για το χαρακτηριστικό προφόρτωσης, επομένως είναι δυνατό να μην εισαχθεί καθόλου το χαρακτηριστικό προφόρτωσης στην ετικέτα ή για αυτήν την περίπτωση.
  • μεταδεδομένα - δεν πραγματοποιεί λήψη του αρχείου μαζί με τη φόρτωση της ιστοσελίδας, αλλά πραγματοποιεί λήψη των μεταδεδομένων του αρχείου πολυμέσων.
  • αυτόματη - πραγματοποιήστε λήψη πλήρους αρχείου μαζί με τη φόρτωση της ιστοσελίδας. Σε αυτήν την επιλογή, τα προγράμματα περιήγησης θα φορτώσουν αυτόματα το αρχείο πολυμέσων μαζί με ιστοσελίδα y, αλλά αυτό δεν θα παρεμποδίσει τη φόρτωση της ίδιας της σελίδας και την απόδοσή της στο πρόγραμμα περιήγησης. Εάν το χαρακτηριστικό προφόρτωσης ="" με κενή τιμή έχει καθοριστεί στην ετικέτα ή, θα χρησιμοποιηθεί η αυτόματη τιμή για αυτό.
  • Το χαρακτηριστικό προφόρτωσης θα παρακαμφθεί εάν χρησιμοποιηθεί το χαρακτηριστικό αυτόματης αναπαραγωγής.

χαρακτηριστικό src:

• το χαρακτηριστικό src της ετικέτας ή σας επιτρέπει να ορίσετε αμέσως τη διαδρομή προς το αρχείο πολυμέσων στην ετικέτα. Η διαδρομή μπορεί να είναι είτε πλήρης, υποδεικνύοντας το πρωτόκολλο και τον τομέα, είτε σε σχέση με τη ρίζα της τρέχουσας τοποθεσίας. Μπορείτε επίσης να καθορίσετε τη διαδρομή προς το αρχείο σε ετικέτες που είναι ενσωματωμένες σε ένα κοντέινερ ήχου ή βίντεο.< source src=" URL"> .

Χαρακτηριστικό αφίσας της ετικέτας βίντεο:

• το χαρακτηριστικό αφίσας χρησιμοποιείται μόνο στην ετικέτα και καθορίζει τη διεύθυνση URL της εικόνας (gif, png, jpeg κ.λπ.) που θα εμφανίζεται ενώ το βίντεο δεν είναι διαθέσιμο. Εάν το χαρακτηριστικό αφίσας δεν έχει οριστεί, το πρόγραμμα αναπαραγωγής του προγράμματος περιήγησης θα προσπαθήσει να εμφανίσει το πρώτο καρέ του βίντεο.

Τα χαρακτηριστικά πλάτους και ύψους της ετικέτας βίντεο:

• τα χαρακτηριστικά πλάτους και ύψους ισχύουν μόνο για την ετικέτα και ορίζουν το πλάτος και το ύψος της περιοχής αναπαραγωγής του προγράμματος αναπαραγωγής βίντεο, αντίστοιχα. Η τιμή αναμένεται να είναι ένας θετικός ακέραιος αριθμός, που καθορίζεται σε pixel ή ποσοστό. Η ρύθμιση αυτών των χαρακτηριστικών επηρεάζει το μέγεθος εμφάνισης του βίντεο, αλλά δεν αλλάζει την αναλογία διαστάσεων του βίντεο. Το βίντεο θα προσαρμοστεί στις καθορισμένες διαστάσεις διατηρώντας τις αναλογίες του. Εάν οι καθορισμένες διαστάσεις δεν ταιριάζουν με τις αναλογίες του βίντεο, τότε θα υπάρχουν σκούρες λωρίδες κατά μήκος του επάνω ή/και των πλαϊνών άκρων του βίντεο. Επομένως, όταν ρυθμίζετε αυτές τις παραμέτρους, συνιστάται να επιλέξετε την αναλογία τους ίδια με αυτή του βίντεο που αναπαράγεται ή να ορίσετε μόνο το πλάτος και η συσκευή αναπαραγωγής θα προσαρμόσει η ίδια το ύψος.
• Εάν μία ή και οι δύο από αυτές τις παραμέτρους δεν έχουν καθοριστεί, τότε η απροσδιόριστη παράμετρος θα ληφθεί από το αντίστοιχο μέγεθος εικόνας που καθορίζεται στο χαρακτηριστικό αφίσας.
• Εάν λείπει το χαρακτηριστικό αφίσας, τότε αυτές οι παράμετροι θα οριστούν ως εξής: για πλάτος = 300 px και για ύψος = 150 εικονοστοιχεία. Για να μην υπολογίσετε και να συντονίσετε τις διαστάσεις της περιοχής βίντεο σύμφωνα με τις αναλογίες του ίδιου του κλιπ, θα συνιστούσα να ρυθμίσετε μόνο μία παράμετρο πλάτους, τότε το ύψος (ύψος) της περιοχής αναπαραγωγής θα επιλεγεί αυτόματα με βάση τις αναλογίες βίντεο .
• Επίσης, το μέγεθος και ο σχεδιασμός του προγράμματος αναπαραγωγής HTML5 μπορούν να επηρεαστούν μέσω Ιδιότητες CSSεφαρμόζεται σε ετικέτες ή .

χαρακτηριστικό σίγασης: είτε ή

• Το χαρακτηριστικό σίγασης ορίζει την παρουσία του σε ετικέτες ή τον ήχο σε κατάσταση σίγασης στο πρόγραμμα αναπαραγωγής HTML5. Από προεπιλογή, το χαρακτηριστικό λείπει.

χαρακτηριστικό crossorigin:

• Το χαρακτηριστικό crossorigin λέει στο πρόγραμμα περιήγησης να εκτελέσει ένα αίτημα CORS για αυτό το στοιχείο. Από προεπιλογή, το χαρακτηριστικό απουσιάζει, πράγμα που σημαίνει ότι δεν χρησιμοποιούνται καθόλου αιτήματα CORS. Εάν υπάρχει το χαρακτηριστικό, οι πιθανές τιμές είναι ανώνυμες και χρήση-διαπιστευτήρια . Το CORS () είναι μια τεχνολογία σε σύγχρονα προγράμματα περιήγησης που σας επιτρέπει να διαχειρίζεστε τα δικαιώματα για τη φόρτωση πόρων στην τρέχουσα ιστοσελίδα από άλλους τομείς εκτός από τον τομέα της τρέχουσας σελίδας. Η υποστήριξη προγράμματος περιήγησης για το πρότυπο CORS σάς επιτρέπει να εφαρμόσετε ασφαλή ανταλλαγή δεδομένων μεταξύ τομέων εκτελώντας ένα ειδικό αίτημα (κεφαλίδα) στον τομέα της τρέχουσας σελίδας για να προσδιορίσετε εάν επιτρέπεται η φόρτωση πόρων από άλλο καθορισμένο τομέα σε αυτήν τη σελίδα. Σε απάντηση σε ένα τέτοιο αίτημα, ο διακομιστής πρέπει να υποδείξει τους τομείς από τους οποίους επιτρέπεται η λήψη πόρων.

χαρακτηριστικό ομάδας πολυμέσων: div ( περιθώριο: 1em αυτόματο; θέση: σχετικό; πλάτος: 400 εικονοστοιχεία; ύψος: 300 εικονοστοιχεία; ) βίντεο (θέση; απόλυτη; κάτω: 0; δεξιά: 0; ) βίντεο: πρώτο παιδί (πλάτος: 100%; ύψος : 100%; ) video:last-child (πλάτος: 30%; )

• Το χαρακτηριστικό mediagroup σάς επιτρέπει να συνδυάσετε τον έλεγχο πολλών αρχείων πολυμέσων σε ένα MediaController δημιουργώντας μια ομάδα αρχείων πολυμέσων σε διαφορετικά σημεία της σελίδας. Η διαχείριση αυτής της ομάδας θα γίνεται ταυτόχρονα για όλα τα αρχεία που περιλαμβάνονται σε αυτήν. Αυτό είναι βολικό, για παράδειγμα, εάν χρειάζεται να αναπαράγετε και να ελέγχετε το ίδιο βίντεο την ίδια στιγμή σε διαφορετικά σημεία της σελίδας με διαφορετικούς υπότιτλους ή διαφορετικά βίντεο.

Ετικέτες και απαιτείται ετικέτα κλεισίματος.

Για τις περιπτώσεις που το πρόγραμμα περιήγησης δεν υποστηρίζει HTML5 και ετικέτες, κάτι που είναι πλέον πολύ σπάνιο, γράφεται ένα μήνυμα κειμένου πριν από την ετικέτα κλεισίματος του κοντέινερ και συνήθως προστίθεται ένας σύνδεσμος για τη λήψη του αρχείου. Εάν το πρόγραμμα αναπαραγωγής HTML5 που είναι ενσωματωμένο στο πρόγραμμα περιήγησης ελέγχεται επιπλέον από μια βιβλιοθήκη JS (JS player), τότε τα περισσότερα από αυτά συνδέουν ένα πρόγραμμα αναπαραγωγής flash εάν είναι αδύνατη η αναπαραγωγή βίντεο και ήχου HTML5 στο πρόγραμμα περιήγησης λόγω του ότι το πρόγραμμα περιήγησης δεν υποστηρίζει βίντεο και ήχο ετικέτες ή τη μορφή αρχείου πολυμέσων.

Ετικέτα:

Η διαδρομή προς το αρχείο που αναπαράγεται μπορεί επίσης να καθοριστεί χρησιμοποιώντας μια ετικέτα με το χαρακτηριστικό src τοποθετημένο μέσα στις ετικέτες ή. Η ετικέτα δεν έχει ετικέτα κλεισίματος.

Στις περισσότερες περιπτώσεις η ετικέτα μοιάζει με αυτό:

και περιέχει πάντα το χαρακτηριστικό src και type, το οποίο στις περισσότερες περιπτώσεις έχει μόνο τύπο MIME.

Χαρακτηριστικά ετικέτας:

• το χαρακτηριστικό src= "URL" της ετικέτας καθορίζει τη διεύθυνση URL στο αρχείο πολυμέσων. Η διαδρομή μπορεί να είναι είτε πλήρης, υποδεικνύοντας το πρωτόκολλο και τον τομέα, είτε σε σχέση με τη ρίζα του ιστότοπου.
• το χαρακτηριστικό type="MIME-type" της ετικέτας ή πληρέστερα type="MIME-type; codecs="codec"" καθορίζει τον τύπο MIME και τον κωδικοποιητή του αρχείου. Για τον ήχο, αρκεί να καθορίσετε τον τύπο MIME, για παράδειγμα, για .mp3 - type="audio/mpeg". Αν και σύμφωνα με τις προδιαγραφές για το βίντεο, ο κωδικοποιητής πρέπει επίσης να προσδιορίζεται στο χαρακτηριστικό type, αλλά τώρα συχνά υποδεικνύουν μόνο τον τύπο 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) όπως γίνεται σε ιστότοπους φιλοξενίας βίντεο. Εδώ πρέπει να ειπωθεί ότι τέτοια λειτουργικότητα δεν είναι ακόμη διαθέσιμη σε προγράμματα αναπαραγωγής ενσωματωμένα σε προγράμματα περιήγησης και επομένως υλοποιείται μέσω των προγραμμάτων αναπαραγωγής 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".

Το χαρακτηριστικό label της ετικέτας καθορίζει το όνομα του κομματιού που θα εμφανίζεται στη συσκευή αναπαραγωγής. Εάν το χαρακτηριστικό δεν έχει οριστεί, το πρόγραμμα περιήγησης θα εμφανίσει το όνομα της υπηρεσίας του.

Το προεπιλεγμένο χαρακτηριστικό της ετικέτας καθορίζει την επιλογή αυτού του κομματιού από προεπιλογή εάν υπάρχουν άλλα κομμάτια στο κοντέινερ βίντεο. Μόνο μία από τις πολλές ετικέτες μπορεί να έχει προεπιλεγμένο χαρακτηριστικό. Είναι καλύτερα να τοποθετήσετε το προεπιλεγμένο κομμάτι πρώτα μεταξύ άλλων συνδεδεμένων κομματιών.

Παράδειγμα ετικετών: Αυτή η ερώτηση εμφανίζεται πολύ συχνά, γι' αυτό αποφάσισα να της αφιερώσω ένα ξεχωριστό άρθρο στα μαθήματα. Δεδομένου ότι η HTML δεν διαθέτει μια καθολική τεχνολογία αναπαραγωγής ήχου για όλα τα προγράμματα περιήγησης, για να λύσετε αυτό το πρόβλημα, προτείνω τη λήψη του αρχείου αναπαραγωγής ήχου, όπως γίνεται στους περισσότερους ιστότοπους. Κάνουμε τα πάντα βήμα προς βήμα:

1. Στη φιλοξενία όπου βρίσκεται ο ιστότοπός σας, στον ριζικό κατάλογο (ο φάκελος όπου βρίσκεται το αρχείο ευρετηρίου), δημιουργήστε τον φάκελο ήχου. Στο μέλλον θα τοποθετήσετε όλα τα αρχεία ήχου σε αυτό.

3. Τώρα επιλέξτε απαραίτητα αρχεία, καλύτερα σε μορφή mp3. Δημιουργήστε έναν φάκελο ήχου στη ρίζα του ιστότοπου και μεταφορτώστε τον.

4. Το μόνο που μένει είναι να εισαγάγετε τον κωδικό σύνδεσης της συσκευής αναπαραγωγής. Είναι κατάλληλο για οποιονδήποτε ιστότοπο. Στη σωστή θέση, πρέπει απλώς να υποδείξετε τη διαδρομή προς το αρχείο αναπαραγωγής και το αρχείο ήχου, αντικαθιστώντας αντίστοιχα τις λέξεις your_domain και audio_file name:

Και όλα είναι έτοιμα! Μπορείτε επίσης να δείτε το παράδειγμα εργασίας.

Πώς να εγκαταστήσω μουσική υπόκρουσησε html Χρησιμοποιώ τις δυνατότητες του HTML και του προγράμματος περιήγησης, μπορείτε επίσης να εισάγετε μουσική υπόκρουση στη σελίδα. Θα χρειαστείτε ένα αρχείο ήχου απαιτούμενη μορφή: WAV, AU, MIDI ή MP3. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε αρχείο με την καθορισμένη επέκταση ως παράδειγμα.

Ο πρώτος τρόπος είναι η ετικέτα ενσωμάτωσης. Το στοιχείο ενσωμάτωσης χρησιμοποιείται για τη φόρτωση και την εμφάνιση αντικειμένων (για παράδειγμα, αρχείων βίντεο, ταινιών flash, ορισμένων αρχείων ήχου κ.λπ.) που αρχικά δεν κατανοεί το πρόγραμμα περιήγησης.

Η σύνταξη είναι αρκετά απλή:

Δεν απαιτείται ετικέτα κλεισίματος.

Ας δούμε τώρα ένα παράδειγμα εγγραφής με χαρακτηριστικά και παρακάτω με την αποκωδικοποίησή τους:

Ενσωμάτωση χαρακτηριστικών ετικετών για αναπαραγωγή ήχου σε html
πλάτος - πλάτος πίνακα σε pixel (ή ποσοστό)
ύψος - ύψος πίνακα σε pixel (ή ποσοστό)
στοίχιση - θέση του πίνακα σε σχέση με το κείμενο, οι πιθανές τιμές είναι αριστερά, δεξιά, κέντρο
κρυφό - σας επιτρέπει να αποκρύψετε τον πίνακα, τιμές χαρακτηριστικών: true - ο πίνακας είναι κρυφός, false - ο πίνακας είναι ορατός (προεπιλεγμένη τιμή)
autostart - true - το πρόγραμμα αναπαραγωγής ξεκινά αυτόματα όταν φορτώνει η σελίδα, false - περιμένει να πατηθεί το κουμπί αναπαραγωγής
βρόχος - κύκλος, αληθινό - το κομμάτι παίζεται σε κύκλο και πότε τιμή ψευδής- μόνο μια φορά

Δεύτερος τρόπος. Πολύ παλιά, αλλά και πρακτική) Προσθέστε τη μελωδία στον ίδιο φάκελο (κατάλογο) όπου βρίσκεται το αρχείο σας και στο σώμα γράψτε τον ακόλουθο κώδικα:

Ως αποτέλεσμα, μετά τη φόρτωση της σελίδας, θα ακουστεί η μελωδία που καθορίσατε στην ετικέτα bgsound. Τώρα ας αναλογιστούμε καλύτερα χαρακτηριστικάετικέτα:

src - διαδρομή προς το αρχείο ήχου σας
βρόχος - πόσες φορές να επαναλάβετε τη μελωδία (αν -1, τότε επαναλαμβάνεται ατελείωτα)
ισορροπία - τιμή υπολοίπου στερεοφωνικού (από -10000 έως 10000)
ένταση - ένταση αναπαραγωγής μελωδίας, όπου 0 είναι το μέγιστο και -10000 είναι το ελάχιστο.

Ωστόσο, δεν θα υπάρχει τρόπος να ελέγξετε τη συσκευή αναπαραγωγής με οποιονδήποτε τρόπο - κάθε φορά που ανανεώνεται η σελίδα, το κομμάτι θα αναπαράγεται ξανά.

Αφού περιγράψω τη μέθοδο εισαγωγής μουσικής υπόκρουσης, θέλω να σας αποτρέψω από αυτό, καθώς οι περισσότεροι χρήστες, κατά κανόνα, ακούν ήδη μουσική όταν επισκέπτονται διάφορους ιστότοπους. Επομένως, η συνοδευτική μουσική μπορεί μόνο να τον αναγκάσει να κλείσει την καρτέλα με τον ιστότοπο.

Εισαγωγή ήχου και μουσικής σε HTML5 - ετικέτα ήχου
ήχος - καθορισμός ζευγών ετικετών ήχος φόντου, μουσική ή άλλη ροή ήχου στον ιστότοπο.

Χαρακτηριστικά ετικέτας ήχου

αυτόματη αναπαραγωγή - το αρχείο αναπαράγεται αμέσως μετά τη φόρτωση της σελίδας (παρόμοιο με τη μουσική υπόκρουση bgsound)
χειριστήρια - εμφάνιση του πίνακα ελέγχου του προγράμματος αναπαραγωγής στο πρόγραμμα περιήγησης
βρόχος - αναπαράγει ξανά το αρχείο αφού τελειώσει
προφόρτωση - το αρχείο ήχου θα φορτωθεί μαζί με τη φόρτωση της σελίδας
src - διαδρομή προς το αρχείο ήχου (mp3 ή ogg)

Παράδειγμα κώδικα με ετικέτα ήχου

Ετικέτα ήχου

Ήχος σε HTML 5

Η ετικέτα ήχου δεν υποστηρίζεται από το πρόγραμμα περιήγησής σας.
Κατεβάζω μουσική.

Περιγραφή

Προσθέτει, αναπαράγει και διαχειρίζεται ρυθμίσεις ήχου σε μια ιστοσελίδα. Η διαδρομή προς το αρχείο καθορίζεται μέσω του χαρακτηριστικού src ή μιας δευτερεύουσας ετικέτας. Μπορείτε να γράψετε κείμενο μέσα στο κοντέινερ που θα εμφανίζεται σε προγράμματα περιήγησης που δεν λειτουργούν με αυτήν την ετικέτα.

Η λίστα των κωδικοποιητών που υποστηρίζονται από προγράμματα περιήγησης είναι περιορισμένη και δίνεται στον πίνακα. 1.

Τραπέζι 1. Κωδικοποιητές και προγράμματα περιήγησης

Codec	Internet Explorer	Χρώμιο	ΛΥΡΙΚΗ ΣΚΗΝΗ	Σαφάρι	Firefox
ogg/vorbis
wav
mp3
A.A.C.

Για καθολική αναπαραγωγή σε καθορισμένα προγράμματα περιήγησης, ο ήχος κωδικοποιείται χρησιμοποιώντας διαφορετικούς κωδικοποιητές και τα αρχεία προστίθενται ταυτόχρονα μέσω της ετικέτας.

Συντακτικά Χαρακτηριστικά Ο ήχος αρχίζει να παίζει αμέσως μετά τη φόρτωση της σελίδας. Προσθέτει έναν πίνακα ελέγχου σε ένα αρχείο ήχου. Επαναλαμβάνει τον ήχο από την αρχή μετά το τέλος του. Χρησιμοποιείται για τη λήψη ενός αρχείου μαζί με τη φόρτωση μιας ιστοσελίδας. Καθορίζει τη διαδρομή προς το αρχείο που αναπαράγεται. Ετικέτα κλεισίματος

Απαιτείται.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

ήχου

Alexander Klimenkov - Δεκατέσσερα

Η ετικέτα ήχου δεν υποστηρίζεται από το πρόγραμμα περιήγησής σας. Κατεβάζω μουσική.

Παράδειγμα αποτέλεσμα σε Πρόγραμμα περιήγησης Operaφαίνεται στο Σχ. 1.

Ρύζι. 1. Αναπαραγωγή αρχείου ήχου

Προγράμματα περιήγησης

Τα στοιχεία ελέγχου αναπαραγωγής ήχου διαφέρουν ως προς την εμφάνιση μεταξύ των προγραμμάτων περιήγησης, αλλά τα βασικά στοιχεία είναι τα ίδια. Αυτά είναι το κουμπί αναπαραγωγής/παύσης, το μήκος του κομματιού, ο χρόνος που έχει παρέλθει και ο συνολικός χρόνος αναπαραγωγής και το επίπεδο έντασης.

Με την έλευση των αρκετά γρήγορων συνδέσεων στο Διαδίκτυο, το Flash ήταν το μόνο εργαλείο για την αναπαραγωγή ήχων σε ιστότοπους. Αλλά η HTML5 θα αλλάξει ριζικά τον τρόπο αναπαραγωγής των ήχων στο Διαδίκτυο. Σε αυτό το άρθρο θέλω να σας πω λεπτομερώς πώς να χρησιμοποιήσετε την ετικέτα στους ιστότοπούς σας.

Το χρησιμοποιούμε για να εισάγουμε ένα αρχείο ήχου στη σελίδα απλούστερο παράδειγμαχρησιμοποιώντας την ετικέτα, κατεβάζει το αρχείο mp3 και το παίζει. Σημειώστε το χαρακτηριστικό autopaly, το οποίο χρησιμοποιείται για την αυτόματη αναπαραγωγή ήχου. Ωστόσο, δεν πρέπει να αναπαράγετε αυτόματα ήχους στον ιστότοπο, καθώς αυτό θα ενοχλήσει τους χρήστες. Αναπαραγωγή ήχου σε βρόχο Θέλετε να επαναφέρετε έναν ήχο; Το χαρακτηριστικό loop θα σας βοηθήσει να το κάνετε αυτό. Αλλά και πάλι, δεν θα πρέπει να κάνετε υπερβολική χρήση της αυτόματης αναπαραγωγής και της αναπαραγωγής βρόχου εάν δεν θέλετε ο χρήστης να εγκαταλείψει πρόωρα τον ιστότοπο. Εμφάνιση στοιχείων ελέγχου Αντί να αναπαράγονται οι ήχοι αυτόματα, κάτι που είναι σίγουρα κακή πρακτική, θα πρέπει να επιτρέψετε την εμφάνιση ορισμένων στοιχείων ελέγχου στο πρόγραμμα περιήγησης, όπως τα κουμπιά έντασης ήχου και αναπαραγωγής (παύσης). Αυτό είναι εύκολο να γίνει προσθέτοντας απλώς το χαρακτηριστικό controls. Διάφορες μορφές αρχείων Η ετικέτα υποστηρίζεται από τα περισσότερα σύγχρονα προγράμματα περιήγησης, αλλά το πρόβλημα είναι ότι διαφορετικά προγράμματα περιήγησηςυποστηρίζει διαφορετικές μορφές αρχείων. Το Safari, για παράδειγμα, μπορεί να αναπαράγει MP3, αλλά ο Firefox δεν μπορεί και αναπαράγει αρχεία OGG. Η λύση σε αυτό το πρόβλημα είναι να χρησιμοποιήσετε και τις δύο μορφές, έτσι ώστε κάθε επισκέπτης να μπορεί να ακούσει τον ήχο, ανεξάρτητα από το πρόγραμμα περιήγησης που χρησιμοποιεί. Καθορισμός του τύπου MIME των αρχείων Όταν χρησιμοποιείτε διαφορετικές μορφές αρχείων, είναι καλή πρακτική να καθορίζετε τον τύπο MIME για κάθε αρχείο για να βοηθήσετε το πρόγραμμα περιήγησης να τοπικοποιήσει το αρχείο που υποστηρίζει. Αυτό μπορεί να γίνει εύκολα χρησιμοποιώντας το χαρακτηριστικό type. Για παλαιότερα προγράμματα περιήγησης Τι γίνεται αν ο επισκέπτης χρησιμοποιεί IE6 ή κάποιο άλλο προϊστορικό πρόγραμμα περιήγησης που δεν υποστηρίζει την ετικέτα; Είναι εύκολο: παρακάτω είναι ο κώδικας που θα εμφανίζει ένα μήνυμα για προγράμματα περιήγησης που δεν υποστηρίζουν την ετικέτα. Το πρόγραμμα περιήγησής σας δεν υποστηρίζει την ετικέτα ήχου! File Buffering Κατά την αναπαραγωγή μεγάλων αρχείων, μπορεί να χρησιμοποιηθεί προσωρινή αποθήκευση αρχείων. Μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό προφόρτωσης για αυτό. Μπορεί να πάρει 3 τιμές:

• κανένα - εάν δεν θέλετε να χρησιμοποιήσετε το buffer αρχείων.
• auto - εάν θέλετε το πρόγραμμα περιήγησης να αποθηκεύσει ολόκληρο το αρχείο.
• μεταδεδομένα - για φόρτωση μόνο πληροφοριών υπηρεσίας (διάρκεια ήχου κ.λπ.).

Έλεγχος αναπαραγωγής μέσω JavaScript Ο έλεγχος του προγράμματος αναπαραγωγής ήχου HTML5 μέσω JavaScript είναι πολύ εύκολος. Το παρακάτω παράδειγμα δείχνει πώς να χρησιμοποιώντας JavaScriptμπορείς να φτιάξεις το δικό σου βασικά στοιχείαΧειριστήρια αναπαραγωγής ήχου: Παύση αναπαραγωγής έντασης ήχου + έντασης ήχου -

Αυτά για σήμερα.
Ελπίζω αυτό το άρθρο να σας βοήθησε να καταλάβετε βασικές δυνατότητεςΕτικέτα HTML5.

Μέχρι πρόσφατα, η ενσωμάτωση ήχου σε μια ιστοσελίδα δεν ήταν τόσο εύκολη υπόθεση. Γενικά, υπάρχουν μερικά που προσφέρουν πιο έξυπνες και καλύτερες υλοποιήσεις, αλλά οι περισσότερες μέθοδοι σας περιορίζουν στο να έχετε ένα συγκεκριμένο πρόγραμμα περιήγησης και ορισμένα πρόσθετα.

Με την έλευση της τεχνολογίας Flash στην αγορά, αυτή η εργασία έχει γίνει πολύ πιο εύκολη, καθώς η προσθήκη Flash σάς επιτρέπει να ενσωματώνετε οποιοδήποτε κινούμενο σχέδιο ή ήχο σε μια σελίδα και η τεχνολογία υποστηρίζεται από τα περισσότερα προγράμματα περιήγησης. Αλλά η ζήτηση για Flash σταδιακά εξασθενεί μετά την κυκλοφορία καινοτόμων συσκευών από την Apple: iPhone και iPad. Όπως γνωρίζετε, η Apple δεν εξοπλίζει ουσιαστικά τις συσκευές της Υποστήριξη Flash, και ο αριθμός των χρηστών προϊόντων αυξάνεται ραγδαία.

Εν ολίγοις, υπάρχει μια μικρή σύγχυση εδώ.

Ευτυχώς, η HTML5 έχει κάνει τη ζωή πολύ πιο εύκολη για τους προγραμματιστές, καθώς η τεχνολογία περιλαμβάνει ένα στοιχείο ήχου. Αυτό το στοιχείο σάς επιτρέπει να ενσωματώσετε αρχεία ήχου σε οποιαδήποτε ιστοσελίδα, καθώς και να εφαρμόσετε έναν πίνακα ελέγχου χρησιμοποιώντας javascript. Το πιο σημαντικό είναι ότι η τεχνολογία δεν απαιτεί πρόσθετα πρόσθετα και υποστηρίζεται σχεδόν σε όλα τα προγράμματα περιήγησης, με εξαίρεση τις πρώιμες εκδόσεις (θα μιλήσουμε για την υποστήριξη του προγράμματος περιήγησης αργότερα!).

Στο σημερινό μας άρθρο θα σας πούμε πώς μπορείτε να ενσωματώσετε ήχους χρησιμοποιώντας το στοιχείο ήχου. Θα μάθουμε επίσης πώς να ελέγχουμε τη διαδικασία αναπαραγωγής χρησιμοποιώντας javascript και θα προσπαθήσουμε επίσης να σας ενημερώσουμε για την τεχνολογική υποστήριξη μεταξύ των προγραμμάτων περιήγησης.

Στοιχείο ήχου HTML5

Αυτό το στοιχείο είναι εξαιρετικά εύκολο στη χρήση. Στο σημερινό μας παράδειγμα, θα ενσωματώσουμε το "White Christmas" του Bing Crosby:

Δεν χρειάζονται πολλές εξηγήσεις εδώ. Όπως ακριβώς εισάγετε μια εικόνα χρησιμοποιώντας την ετικέτα img, μπορείτε να εισάγετε ήχο χρησιμοποιώντας την ετικέτα ήχου με τον ίδιο τρόπο.

Υποστήριξη μεταξύ προγραμμάτων περιήγησης

Το παραπάνω παράδειγμα είναι απίθανο να λειτουργήσει σε όλα τα προγράμματα περιήγησης. Εδώ μπαίνει στο παιχνίδι η μορφή αρχείου.

Ορισμένα προγράμματα περιήγησης μπορούν να αναπαράγουν αρχεία .mp3, αλλά όχι αρχεία .ogg, ενώ άλλα κάνουν το αντίθετο. Τα περισσότερα προγράμματα περιήγησης μπορούν να αναπαράγουν αρχεία .wav, αλλά λόγω του μεγάλου μεγέθους του, είναι ακατάλληλο να χρησιμοποιείται ως ήχος για έναν ιστότοπο.

Ακολουθεί ένας πίνακας προγραμμάτων περιήγησης που δείχνουν υποστήριξη για μορφές ήχου:

Ποιες μορφές υποστηρίζει το πρόγραμμα περιήγησής σας; Προσδιορίστε αυτό με .

Όπως μπορείτε να δείτε στον πίνακα, η βέλτιστη επιλογή υλοποίησης θα ήταν να συνδέσετε και τις δύο μορφές αρχείων.
Για να το κάνετε αυτό, μπορείτε να προσθέσετε πολλά στοιχεία πηγής στο στοιχείο ήχου και σε αυτά να καθορίσετε τις διαδρομές προς τις διάφορες μορφές. Το πρόγραμμα περιήγησης θα παίξει το πρώτο αρχείο που υποστηρίζει. Εδώ είναι ένα παράδειγμα:

Φυσικά, αυτό σημαίνει ότι πρέπει να δημιουργήσετε μια έκδοση Mp3 και OGG αρχείο ήχου(εδώ σας βοηθάει), αλλά αυτός είναι ο μόνος τρόπος για να οργανώσετε την υποστήριξη μεταξύ προγραμμάτων περιήγησης.

Οι πρώτες εκδόσεις του Internet Explorer (εκδόσεις 7 και 8) δεν υποστηρίζουν καθόλου το στοιχείο ήχου. Ωστόσο, αργότερα στο άρθρο θα εξετάσουμε πώς να αντιμετωπίσετε αυτό το πρόβλημα.

Αυτόματη αναπαραγωγή ήχου

Αν και ο παραπάνω κώδικας ενσωματώνει ήχο, δεν τον αναπαράγει. Εάν θέλουμε ο ήχος να αναπαράγεται αυτόματα κατά τη φόρτωση της σελίδας, πρέπει να προσθέσουμε το χαρακτηριστικό autoplay στο στοιχείο:

Προσθήκη κουμπιών ελέγχου

Αν και η αυτόματη αναπαραγωγή μπορεί να είναι χρήσιμη, σε πολλές περιπτώσεις είναι ενοχλητική ή εντελώς ακατάλληλη. Επομένως, μπορούμε να εγκαταστήσουμε πρόσθετα κουμπιά ελέγχου για στοιχεία ήχου, ώστε ο χρήστης να μπορεί να αποφασίσει μόνος του:

Αυτό προσθέτει μια οριζόντια γραμμή με ένα κουμπί παύσης/αναπαραγωγής, μια γραμμή χρόνου με ένα ρυθμιστικό και έναν έλεγχο έντασης. Όλα είναι περίπου τα ίδια όπως μπορείτε να δείτε στη συσκευή αναπαραγωγής στο Youtube.

Είναι σημαντικό να θυμάστε ότι ο πίνακας ελέγχου θα διαφέρει ανάλογα με τα προγράμματα περιήγησης. Για παράδειγμα, το πρόγραμμα περιήγησης σε ένα iPhone δεν θα έχει ρυθμιστικό έντασης, επειδή η συσκευή διαθέτει ξεχωριστά κουμπιά για τον έλεγχο των επιπέδων ήχου.

Αναπαραγωγή βρόχου

Η προσθήκη ενός χαρακτηριστικού βρόχου στο στοιχείο ήχου θα προκαλέσει την επ' αόριστον αναπαραγωγή του ήχου.

Αυτό μπορεί να είναι χρήσιμο για την ενεργοποίηση της μουσικής παρασκηνίου ή των ηχητικών εφέ σε παιχνίδια.

Μπορείτε επίσης να χρησιμοποιήσετε το χαρακτηριστικό προφόρτωσης, το οποίο θα ενημερώσει το πρόγραμμα περιήγησης πότε και πού πρέπει να φορτωθεί ένα συγκεκριμένο αρχείο ήχου.
Η προφόρτωση του αρχείου ήχου σημαίνει ότι ο ήχος μπορεί να αναπαραχθεί αμέσως όταν ο χρήστης πατήσει την αναπαραγωγή.

Υπάρχουν πολλές έννοιες για αυτό το χαρακτηριστικό:

"Κανένα" - το πρόγραμμα περιήγησης δεν πρέπει να επιβάλλει το ληφθέν αρχείο. Εκείνοι. Εάν είστε βέβαιοι ότι οι περισσότεροι χρήστες δεν θα παίξουν το αρχείο, χρησιμοποιήστε αυτήν την επιλογή. Ή χρησιμοποιήστε το όταν χρειάζεται να εξοικονομήσετε όσο το δυνατόν περισσότερο εύρος ζώνης διακομιστή.

"μεταδεδομένα" - η παράμετρος δεν είναι παρόμοια με καμία, εκτός από το ότι ειδοποιείτε το πρόγραμμα περιήγησης για τη δυνατότητα φόρτωσης μεταδεδομένων, όπως η διάρκεια του κομματιού ήχου, αλλά όχι το ίδιο το αρχείο ήχου.

"auto" - επιτρέπετε στο πρόγραμμα περιήγησης να κατεβάσει το ίδιο το αρχείο ήχου.

Για παράδειγμα:

Λάβετε υπόψη ότι η προφόρτωση είναι απλώς μια δυνατότητα ευκολίας, καθώς ορισμένα προγράμματα περιήγησης μπορεί απλώς να αγνοήσουν αυτήν την εντολή και να αρχίσουν να κάνουν ό,τι θέλουν.

Έλεγχος αναπαραγωγής μέσω javascript

Τι είναι βολικό σε στοιχεία javascript– αυτό συμβαίνει επειδή είναι εύκολο να διαχειρίζονται χρησιμοποιώντας javascript. Το στοιχείο ήχου προσφέρει πολλές βολικές παραμέτρους και μεθόδους ελέγχου:

Αναπαραγωγή() – έναρξη της αναπαραγωγής από την τρέχουσα θέση.

Pause() – διακοπή της αναπαραγωγής στην τρέχουσα θέση.

canPlayType(type) – καθορίστε εάν το πρόγραμμα περιήγησης υποστηρίζει την αναπαραγωγή αυτού του τύπουμεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ;

διάρκεια – διάρκεια του κομματιού σε δευτερόλεπτα.

CurrentTime – τρέχουσα θέση σε δευτερόλεπτα. Μπορείτε επίσης να εγκαταστήσετε αυτή η παράμετροςγια να μετακινήσετε τη θέση αναπαραγωγής.

Χρησιμοποιώντας τις επιλογές και τις μεθόδους που προτείνονται παραπάνω, μπορούμε να δημιουργήσουμε μερικά βασικά κουμπιά ελέγχου:

ΠΑΙΞΕ μουσική
Παύση μουσικής
Σταματήστε τη μουσική
Προβολή επίδειξης: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

Υποστήριξη για παλαιότερες εκδόσεις του Internet Explorer

Στις περισσότερες περιπτώσεις, το πρόγραμμα περιήγησης του χρήστη θα υποστηρίζει το στοιχείο HTML5. Όμως, δυστυχώς, οι εκδόσεις 7 και ακόμη και 8 των προγραμμάτων περιήγησης IE δεν υποστηρίζουν αυτό το στοιχείο (αν και η έκδοση 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 και θα λειτουργήσει επίσης στις εκδόσεις 7 και 8 του IE. Χρησιμοποιώντας σχόλια, ανακατευθύνουμε τα στοιχεία ελέγχου κουμπιών απευθείας στο αρχείο ήχου.

Ένας άλλος τρόπος επαναφοράς είναι να ενσωματώσετε ένα πρόγραμμα αναπαραγωγής Flash στη σελίδα. Εδώ, που μιλάει για επαναφορά με τη μορφή Flash player.

συμπέρασμα

Στο σημερινό μας άρθρο, μάθαμε πώς να ενσωματώνουμε αρχεία ήχου χρησιμοποιώντας HTML5. Όχι μόνο το στοιχείο ήχου είναι εύκολο στη χρήση, αλλά μπορούμε επίσης να το προσαρμόσουμε και να ελέγξουμε την αναπαραγωγή μέσω javascript.

Θέλετε να μάθετε περισσότερα για το στοιχείο ήχου στην HTML5; Στη συνέχεια, ελέγξτε έξω.

Αν και η υποστήριξη επί του παρόντος υποφέρει σε ορισμένα προγράμματα περιήγησης (όπως οι παλαιότερες εκδόσεις του IE), μπορείτε εύκολα να τα επαναφέρετε εάν είναι απαραίτητο, κάτι που γίνεται όλο και λιγότερο συνηθισμένο αυτές τις μέρες.