-
Χαρακτηριστικά, Ιδιότητες, Μέθοδοι και Συμβάντα του στοιχείου βίντεο HTML
- 26 Αυγούστου 2024
Το στοιχείο video είναι ένα από τα πιο αξιοσημείωτα χαρακτηριστικά της HTML5, καθώς επιτρέπει στους προγραμματιστές να ενσωματώνουν βίντεο απευθείας σε ιστοσελίδες χωρίς να χρειάζονται εξωτερικές προσθήκες όπως το Flash. Μέσα από διάφορα χαρακτηριστικά, ιδιότητες, μεθόδους και γεγονότα , το στοιχείο video προσφέρει πλήρη έλεγχο στην αναπαραγωγή περιεχομένου πολυμέσων. Σε αυτό το άρθρο, θα εξερευνήσουμε λεπτομερώς καθεμία από αυτές τις λειτουργίες.
Χαρακτηριστικά στοιχείων video
Χαρακτηριστικά Στοιχείων video Καθορίζουν τη συμπεριφορά και την εμφάνισή τους απευθείας από το HTML. Όλα τα πιο σχετικά χαρακτηριστικά παρατίθενται παρακάτω:
- src: Καθορίζει τη διεύθυνση URL του αρχείου video που πρέπει να αναπαραχθούν. Αυτό το χαρακτηριστικό είναι προαιρετικό εάν χρησιμοποιούνται στοιχεία 'source' μέσα στο 'video' .
- controls: Εμφανίζει τα προεπιλεγμένα στοιχεία ελέγχου του προγράμματος περιήγησης για αναπαραγωγή, όπως κουμπί αναπαραγωγής, γραμμή προόδου, έλεγχος έντασης ήχου κ.λπ.
- autoplay: Υποδεικνύει ότι το video Θα πρέπει να αρχίσει να παίζει αυτόματα το συντομότερο δυνατό, μόλις φορτιστεί αρκετά.
- loop: Κάνει το video παίζει σε συνεχή βρόχο, ξεκινώντας από την αρχή όταν τελειώνει.
- muted: Κάνει το video παίζει χωρίς ήχο.
- αφίσα : Καθορίζει μια εικόνα που εμφανίζεται ενώ το video ή έως ότου ο χρήστης ξεκινήσει την αναπαραγωγή.
- preload: Προτείνει στο πρόγραμμα περιήγησης πώς πρέπει να χειριστεί τη φόρτωση του video. Μπορείτε να πάρετε τις τιμές:
auto (προφόρτωση όλων των video), metadata (απλώς προφορτώστε τα μεταδεδομένα) ήnone(μην προφορτώνετε τίποτα).
- width και height : Καθορίζει τις διαστάσεις της περιοχής εμφάνισης του video σε pixel.
- playsinline: Υποδεικνύει ότι το video θα πρέπει να παίζεται online αντί σε λειτουργία πλήρους οθόνης σε κινητές συσκευές.
Ιδιότητες στοιχείων video
Ιδιότητες στοιχείων video σας επιτρέπουν να χειριστείτε τη συμπεριφορά του video μέσω JavaScript. Οι πιο σημαντικές ιδιότητες περιγράφονται παρακάτω:
- currentTime: Λήψη ή ρύθμιση της τρέχουσας θέσης αναπαραγωγής του video , σε δευτερόλεπτα. Χρήσιμο για άλμα σε ένα συγκεκριμένο σημείο στο video .
- duration: Επιστρέφει τη συνολική διάρκεια του video σε δευτερόλεπτα. Εάν η διάρκεια δεν είναι διαθέσιμη, επιστρέφει NaN .
- paused: Υποδεικνύει εάν το video αυτή τη στιγμή βρίσκεται σε παύση.
- ended: Υποδεικνύει εάν η αναπαραγωγή του video τελείωσε.
- volume: Σας επιτρέπει να αποκτήσετε ή να ορίσετε το επίπεδο έντασης του video. Η τιμή κυμαίνεται μεταξύ 0,0 (σιωπή) και 1,0 (μέγιστη ένταση ήχου).
- muted: Καθορίζει εάν το video είναι σε σίγαση. Μπορεί να οριστεί σε true ή false.
- playbackRate: Ελέγχει την ταχύτητα αναπαραγωγής του video. Η τιμή 1,0 αντιπροσωπεύει την κανονική ταχύτητα, ενώ οι χαμηλότερες τιμές τη μειώνουν και οι υψηλότερες τιμές την αυξάνουν.
- readyState: Επιστρέφει την κατάσταση φόρτισης του video. Οι πιθανές τιμές είναι:
0 (HAVE_NOTHING), 1 (HAVE_METADATA), 2 (HAVE_CURRENT_DATA),
3 (HAVE_FUTURE_DATA)και 4 (HAVE_ENOUGH_DATA).
- seeking: Υποδεικνύει εάν το videoβρίσκεται σε διαδικασία αναζήτησης νέας θέσης αναπαραγωγής.
- buffered: Επιστρέφει ένα αντικείμενο TimeRanges που υποδεικνύει τα μέρη του video που έχουν αποθηκευτεί προσωρινά.
- videoWidth και videoHeight: Επιστρέψτε το πλάτος και το ύψος του video , αντίστοιχα, σε pixel.
Μέθοδοι στοιχείων video
Μέθοδοι στοιχείων video επιτρέπουν στους προγραμματιστές να ελέγχουν την αναπαραγωγή του video προγραμματικά. Οι πιο χρησιμοποιούμενες μέθοδοι περιγράφονται εδώ:
- play() : Ξεκινά την αναπαραγωγή του video. Αν αυτός video είναι σε παύση, αυτή η μέθοδος συνεχίζει την αναπαραγωγή.
- pause(): Παύση αναπαραγωγής του video. Αν αυτός videoΕίναι ήδη σε παύση, δεν έχει αποτέλεσμα.
- load(): Επαναφορτίστε το video από την καταγωγή του. Αυτό είναι χρήσιμο εάν χρειάζεται να φορτώσετε ξανά ένα video για κάποιο λόγο.
- canPlayType(type): Επιστρέφει μια τιμή που υποδεικνύει εάν το πρόγραμμα περιήγησης μπορεί να αναπαράγει έναν συγκεκριμένο τύπο αρχείου. video. Πιθανές τιμές είναι:
"" (άγνωστο), "probably" (πιθανόν να αναπαραχθεί) και "maybe" (ίσως αναπαραγώγιμο).
- addTextTrack(kind, label, language): Προσθέτει ένα νέο κομμάτι κειμένου (για παράδειγμα, υπότιτλους) στο video. Η παράμετρος kind θα μπορούσε να είναι "subtitles", "captions", "descriptions", "chapters" είτε "metadata".
Γεγονότα στοιχείων video
Γεγονότα στοιχείων video Είναι απαραίτητα για να ανταποκρίνονται στις αλληλεπιδράσεις των χρηστών και στις αλλαγές κατάστασης κατά την αναπαραγωγή. Παρακάτω είναι τα πιο συνηθισμένα συμβάντα:
- play: Ενεργοποιείται όταν το video αρχίζει να παίζει, είτε με μια ενέργεια χρήστη είτε με τη μέθοδο play() .
- pause: Ενεργοποιείται κατά την αναπαραγωγή του video σταματά. Αυτό μπορεί να συμβεί όταν ο χρήστης κάνει παύση video ή όταν καλείται η μέθοδος pause().
- ended: Εμφανίζεται όταν το video φτάνει στο τέλος της διάρκειάς του και σταματά να παίζει.
- timeupdate: Ενεργοποιείται περιοδικά κατά την αναπαραγωγή του τραγουδιού. video και η τρέχουσα θέση αναπαραγωγής αλλάζει.
- volumechange: Εμφανίζεται όταν ο όγκος του video ή η σίγαση είναι ενεργοποιημένη/απενεργοποιημένη.
- loadeddata: Ενεργοποιείται όταν έχει φορτιστεί αρκετή μπαταρία. video ώστε να είναι έτοιμο να ξεκινήσει την αναπαραγωγή, αλλά πριν φορτιστεί πλήρως.
- loadedmetadata: Εμφανίζεται όταν τα μεταδεδομένα του video (για παράδειγμα, διάρκεια, διαστάσεις και κομμάτια κειμένου).
- canplay : Υποδεικνύει ότι το video μπορεί να ξεκινήσει να παίζει, αλλά δεν έχει φορτωθεί ακόμα αρκετά για να παίξει εντελώς χωρίς παύσεις.
- canplaythrough: Ενεργοποιείται όταν το πρόγραμμα περιήγησης εκτιμά ότι το video Μπορεί να παιχτεί ολόκληρο χωρίς διακοπές.
- seeking: Εμφανίζεται όταν ξεκινά μια λειτουργία αναζήτησης, δηλαδή όταν ο χρήστης ή το σενάριο αλλάζει τη θέση αναπαραγωγής.
- seeked: Πυροδοτείται όταν ολοκληρωθεί μια επιχείρηση αναζήτησης.
Το στοιχείο video παρέχει μεγάλη ευελιξία και έλεγχο για την αναπαραγωγή video στον Ιστό. Κατανοώντας και χρησιμοποιώντας τα χαρακτηριστικά, τις ιδιότητες, τις μεθόδους και τα συμβάντα του, μπορείτε να δημιουργήσετε πλούσιες εμπειρίες πολυμέσων προσαρμοσμένες στις ανάγκες των χρηστών σας. Εξερευνήστε όλες τις δυνατότητες που προσφέρει και επωφεληθείτε στο έπακρο από αυτό το ισχυρό εργαλείο!
Comentar: