Στο πρώτο από τα blog του για PC Pro , προγραμματιστής ιστού Ίαν Ντέβλιν αποκαλύπτει πώς να ενσωματώσετε βίντεο στον ιστότοπό σας με HTML5
πώς να αλλάξετε τα χαρακτηριστικά sims 4
Πιθανώς το μεγαλύτερο και πιο πολυσυζητημένο χαρακτηριστικό του HTML5 είναι ενσωματωμένο βίντεο. Προς το παρόν, η μόνη μέθοδος προσθήκης περιεχομένου βίντεο στον ιστότοπό σας είναι με μια προσθήκη τρίτου μέρους, όπως Flash, QuickTime ή RealPlayer. Με το ξεκίνημα του HTML5 και του στοιχείου βίντεο, όλα αυτά θα αλλάξουν, με τον χειρισμό της υποστήριξης βίντεο από το πρόγραμμα περιήγησης ιστού, καταργώντας την ανάγκη για υποστήριξη τρίτων.
Αρκετά προγράμματα περιήγησης στο Web προσφέρουν ήδη υποστήριξη για HTML5. Εδώ θα αποκαλύψουμε πώς μπορείτε να ενσωματώσετε βίντεο χωρίς προσθήκες στον ιστότοπό σας και τα προβλήματα που θα αντιμετωπίσετε.
Τύποι αρχείων και συμβατότητα προγράμματος περιήγησης
Αρχικά, θα ρίξουμε μια σύντομη ματιά στους διαφορετικούς τύπους αρχείων βίντεο που υποστηρίζονται στο HTML5. Αυτά είναι τα Theora OGG και H.264 (.mp4). Διαφορετικά προγράμματα περιήγησης υποστηρίζουν διαφορετικούς τύπους και ορισμένα δεν υποστηρίζουν καθόλου. Ο παρακάτω πίνακας το υποδεικνύει:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | Χ |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | Χ | ✓ |
| Όπερα 10.5+ | ✓ | Χ |
| Internet Explorer 8 | Χ | Χ |
| Internet Explorer 9 | Χ | ✓ |
| iPhone | Χ | ✓ |
| Android | Χ | ✓ |
Κωδικοποιητές και άλλα τεχνικά θέματα
Το ίδιο το HTML5 δεν καθορίζει έναν κωδικοποιητή βίντεο για χρήση και αυτό οδήγησε σε επιχειρήματα σχετικά με το ποιο είναι το καλύτερο για χρήση στον Ιστό . Επομένως, για να καλύψουμε όλα τα προγράμματα περιήγησης, πρέπει να υποστηρίξουμε και τους δύο κωδικοποιητές.
Και φυσικά υπάρχει ο Internet Explorer. Προς το παρόν, καμία από τις εκδοθείσες εκδόσεις του Internet Explorer δεν υποστηρίζει το στοιχείο βίντεο και απαιτείται ακόμη μια προσθήκη για την αναπαραγωγή βίντεο. Αυτό θα αλλάξει με την κυκλοφορία του Internet Explorer 9 (πιθανότατα στις αρχές του επόμενου έτους), όταν θα υποστηρίζεται το H.264, μαζί με πολλά άλλα καλούδια HTML5.
Σε περίπτωση που αναρωτιέστε πώς, μπορείτε να μετατρέψετε τα αρχεία βίντεο σε OGG (μπορείτε να διαβάσετε περισσότερα για τον τύπο Theora OGG στο Βιβλίο TheoraCook ) αρχεία που χρησιμοποιούν το Μετατροπέας βίντεο Miro .
Για περισσότερες αναλυτικές πληροφορίες σχετικά με το στοιχείο βίντεο και τους κωδικοποιητές, κατευθυνθείτε προς το βουτιά στο html5: βίντεο στον Ιστό από τον Mark Pilgrim.
Κωδικός HTML5
Τώρα προχωρούμε στον πραγματικό κώδικα HTML5 και πώς μπορούμε να κάνουμε το πράγμα να λειτουργήσει. Το HTML5 μας παρέχει δύο νέα στοιχεία που μπορούμε να χρησιμοποιήσουμε για να προσθέσουμε βίντεο στις ιστοσελίδες μας: το στοιχείο, το οποίο έχουμε ήδη αναφέρει, και το στοιχείο. Ας δούμε κάθε ένα από αυτά με τη σειρά.
Το στοιχείο
Το στοιχείο βίντεο μπορεί να έχει τα ακόλουθα χαρακτηριστικά:
| Χαρακτηριστικό | Περιγραφή |
|---|---|
| src | μια έγκυρη διεύθυνση URL για το ίδιο το αρχείο βίντεο |
| αυτόματη αναπαραγωγή | ένα boolean που δείχνει εάν το βίντεο πρέπει να αναπαράγεται αυτόματα |
| έλεγχοι | ένα boolean που δείχνει ότι τα προεπιλεγμένα στοιχεία ελέγχου πολυμέσων πρέπει να εμφανίζονται από το πρόγραμμα περιήγησης |
| βρόχος | ένα boolean που δείχνει εάν το βίντεο πρέπει να αναπαράγεται επανειλημμένα |
| προφόρτιση | υποδεικνύει στο πρόγραμμα περιήγησης εάν απαιτείται προληπτική λήψη του ίδιου του βίντεο ή εάν μόνο τα μεταδεδομένα είναι όλα όσα χρειάζονται. Πιθανές τιμές είναι:
|
| αφίσα | τη διεύθυνση URL ενός αρχείου εικόνας που θα εμφανίζεται όταν δεν υπάρχουν διαθέσιμα δεδομένα βίντεο |
| πλάτος | το πλάτος του βίντεο, σε εικονοστοιχεία CSS |
| ύψος | το ύψος του βίντεο, σε εικονοστοιχεία CSS |
Από αυτό, μπορεί να φανεί πόσο εύκολο είναι να ενσωματώσετε ένα βίντεο OGG στον ιστότοπό σας χρησιμοποιώντας μόνο το στοιχείο βίντεο:
Αυτό είναι το μόνο που υπάρχει σε αυτό.
Οποιοδήποτε πρόγραμμα περιήγησης που υποστηρίζει τη μορφή Theora OGG θα πρέπει τώρα να εμφανίζει και να αναπαράγει με επιτυχία το βίντεό σας χωρίς άλλη καθυστέρηση. Φυσικά δεν είναι τόσο εύκολο, γιατί όπως έχουμε δει από τον παραπάνω πίνακα, ο κώδικας θα λειτουργούσε μόνο σε Firefox, Chrome και Opera. Επομένως, πρέπει επίσης να έχουμε ένα εναλλακτικό στο H.264. Αυτό μπορεί να επιτευχθεί χρησιμοποιώντας το στοιχείο, το οποίο μας επιτρέπει να ορίσουμε πολλές πηγές πολυμέσων για το στοιχείο βίντεο.
πώς φτιάχνετε ένα φίλτρο αντοχής στη φωτιά στο minecraft
Το στοιχείο
Το στοιχείο προέλευσης έχει τα ακόλουθα χαρακτηριστικά:
| Χαρακτηριστικό | Περιγραφή |
|---|---|
| src | μια έγκυρη διεύθυνση URL για το ίδιο το αρχείο πολυμέσων (σε αυτήν την περίπτωση βίντεο) |
| τύπος | τον τύπο του αρχείου πολυμέσων που πρέπει να είναι Τύπος MIME , π.χ. type='video/ogg' υποδεικνύει ότι είναι ένα βίντεο Theora OGG και μπορείτε επίσης να παρέχετε τον κωδικοποιητή MIME για να βοηθήσετε το πρόγραμμα περιήγησης να αποφασίσει πώς θα παίξει το βίντεο χρησιμοποιώντας το type='video/ogg; codecs='theora, vorbis'. |
| Ήμισυ | δίνει τον προβλεπόμενο τύπο μέσου του πόρου πολυμέσων και πρέπει να είναι έγκυρος ερώτημα πολυμέσων , π.χ. media='handheld' υποδηλώνει ότι το βίντεο είναι κατάλληλο για φορητές συσκευές ή media='all and (min-device-height:720px)' το οποίο υποδεικνύει ότι το βίντεο είναι κατάλληλο για οθόνες 720 pixel και άνω. |
Σημείωση: ότι το στοιχείο προέλευσης είναι άκυρο και έχει αρχική ετικέτα αλλά χωρίς ετικέτα κλεισίματος
Το πιο χρήσιμο πράγμα για το στοιχείο προέλευσης είναι ότι μπορούμε να το χρησιμοποιήσουμε για να στοιβάξουμε τους διαφορετικούς τύπους αρχείων, επιτρέποντας στο πρόγραμμα περιήγησης να δοκιμάσει το κάθε ένα με τη σειρά του μέχρι να βρει έναν που μπορεί να παίξει.
Χρησιμοποιώντας και μαζί
Για να στοιβάζουμε βίντεο σε διαφορετικούς τύπους μέσα στο στοιχείο βίντεο, εισάγουμε τον κωδικό ως εξής:
Your browser does not support the video element.
Ο παραπάνω κώδικας θα λειτουργεί πλέον σε όλα τα προγράμματα περιήγησης εκτός από τον Internet Explorer, ο οποίος θα εμφανίζει το μήνυμα που αναφέρεται παραπάνω.
Μπορείτε να το δοκιμάσετε μόνοι σας βλέποντας τη σελίδα δοκιμής βίντεο HTML5, η οποία περιέχει ένα δείγμα βίντεο μιας πεταλούδας σε μορφή Theora OGG και MP4, οπότε αν το βλέπετε σε Firefox, Chrome, Safari, Opera ή στο iPhone ή σε ένα Ακουστικό Android, θα πρέπει να μπορείτε να το δείτε.
Τα αιχμηρά μαχαίρια μεταξύ σας θα παρατηρήσετε τώρα ότι μπορούμε να επωφεληθούμε από αυτήν τη στοίβα και να έχουμε ένα εναλλακτικό στο Flash (ή σε κάποιο άλλο πρόσθετο) στο κάτω μέρος, αντί να εμφανιστεί μια συγγνώμη που δεν μπορείτε να δείτε αυτό το μήνυμα βίντεο, χρησιμοποιώντας τον ακόλουθο κώδικα :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
συμπέρασμα
Όπως με τα περισσότερα στοιχεία HTML5, η υποστήριξη του προγράμματος περιήγησης για τα στοιχεία προέλευσης και βίντεο είναι επί του παρόντος ανομοιογενής. Υπάρχει επίσης μια μεγάλη συζήτηση αυτή τη στιγμή σχετικά με το εάν το στοιχείο προέλευσης θα σκοτώσει τη χρήση του Flash ως την πιο δημοφιλή μέθοδο προσθήκης περιεχομένου βίντεο σε ιστότοπους. Δεν είμαι σίγουρος ότι θα σκοτώσει εντελώς το Flash, αλλά παρόλα αυτά πιστεύω ότι είναι δίκαιο να πούμε ότι είναι εδώ για να μείνετε και θα παρέχει στους προγραμματιστές ιστού μια πιο καθαρή και ευκολότερη προσέγγιση για την ενσωμάτωση του βίντεο.
