Για να αφήσουμε όλοι την ανάμνηση να μας πλημμυρίσει για λίγο, εδώ ένα παράδειγμα πώς μπορείτε να ενσωματώσετε βίντεο κλασικά σε μια ιστοσελίδα:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Μια τέτοια σύνταξη είναι φυσικά τα πάντα εκτός από όμορφη.
Αλλά ακόμη και αν αγνοήσουμε την αισθητική πλευρά για μια στιγμή: Η σύνταξη σε αυτήν την μορφή είναι απλά υπερβολικά επιρρεπή σε σφάλματα και πολύπλοκη. Στο HTML5, τα βίντεο ενσωματώνονται πολύ ευκολότερα. Για το σκοπό αυτό χρησιμοποιείται το στοιχείο video.
Εδώ υπάρχει ένα παράδειγμα πώς μπορείτε να ενσωματώσετε το ίδιο το video-στοιχείο:
<video src="video.ogv" width="300" height="200"> Λυπάμαι, ο περιηγητής σας δεν υποστηρίζει HTML5 </video>
Αυτή είναι η απλούστερη μορφή αυτού. Τρία γνωρίσματα είναι κρίσιμα σε αυτήν τη μορφή της σύνταξης. Με το src, δίνεται το βίντεο προς ενσωμάτωση. Εδώ πρέπει να δώσετε προσοχή στη σωστή διαδρομή. Τα δύο γνωρίσματα width και height καθορίζουν το πλάτος και το ύψος του βίντεο. Αν δε δοθούν οι δύο τιμές, τότε το βίντεο εμφανίζεται στο μέγεθός του. Αν δοθεί μόνο μία από τις δύο τιμές, ο περιηγητής υπολογίζει αυτόματα την άλλη τιμή. Το γνώρισμα autoplay εντολή τον περιηγητή να ξεκινήσει αυτόματα το βίντεο μόλις η σελίδα φορτωθεί. Συνήθως δεν θα έπρεπε να το ορίζετε, καθώς η αυτόματη αναπαραγωγή συνήθως δεν είναι επιθυμητή από τους χρήστες. Αυτό ισχύει διπλά για τους χρήστες που χρησιμοποιούν φορητές συσκευές με χαμηλό εύρος ζώνης.
Ένα άλλο ενδιαφέρον γνώρισμα είναι τα controls. Εάν το χρησιμοποιήσετε, ο περιηγητής θα εμφανίσει φυσικά στοιχεία ελέγχου για αναπαραγωγή και ένταση ήχου.
<video src="video.ogv" width="300" height="200" controls> Λυπάμαι, ο περιηγητής σας δεν υποστηρίζει HTML5 </video>
Εδώ είναι το αποτέλεσμα στον περιηγητή:
Μέσω της μπάρας ελέγχου μπορείτε όχι μόνο να παύσετε και να ξεκινήσετε ξανά το βίντεο, αλλά και να ρυθμίσετε την ένταση του ήχου.
Μπορείτε να καθορίσετε μια εικόνα μέσω του γνωρίσματος poster που θα εμφανίζεται μέχρι να ξεκινήσει το βίντεο. Για το σκοπό αυτό, χρησιμοποιείται το γνώρισμα poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Λυπάμαι, ο περιηγητής σας δεν υποστηρίζει HTML5 </video>
Προσέξτε και εδώ τη σωστή διαδρομή, ώστε η εικόνα να εμφανίζεται πράγματι.
Πρέπει να είστε προσεκτικοί όταν χρησιμοποιείτε το γνώρισμα autoplay. Αυτό το γνώρισμα καθορίζει ότι το βίντεο θα αναπαραχθεί αυτόματα μόλις είναι διαθέσιμο.
<video src="video.ogv" width="300" height="200" autoplay> Λυπάμαι, ο περιηγητής σας δεν υποστηρίζει HTML5 </video>
Με σκοπό την κυκλοφορία, το γνώρισμα preload μπορεί να είναι ενδιαφέρον. Αυτό το γνώρισμα ελέγχει τη συμπεριφορά της προφόρτωσης. Σε αυτό το γνώρισμα, μπορεί να πάρει τις ακόλουθες τιμές:
• auto – Ο περιηγητής μπορεί να προφορτώσει ολόκληρο το αρχείο.
• none – Το αρχείο δεν χρειάζεται να προφορτωθεί.
• metadata – Το αρχείο μπορεί να προφορτωθεί.
Αν απουσιάζει το γνώρισμα preload, οι προεπιλεγμένες ρυθμίσεις των περιηγητών εφαρμόζονται.
Βίντεο και Codecs
Όποιος ασχολείται με την ενσωμάτωση και την αναπαραγωγή βίντεο σε ιστοσελίδες, θα αντιμετωπίσει νωρίτερα ή αργότερα το πρόβλημα με τα διάφορα codecs. Χάρη σε αυτά τα codecs, τα βίντεο συμπιέζονται και αποσυμπιέζονται αποδοτικά. Το πρόβλημα είναι ότι μέχρι σήμερα, οι κατασκευαστές περιηγητών δεν κατάφεραν να συμφωνήσουν σε ένα κοινό μορφότυπο codec. Για το HTML5 (και έτσι, τελικά και για εσάς) αυτό σημαίνει ότι δεν υπάρχουν ομοιόμορφοι codecs για βίντεο και αρχεία ήχου.
Για τα βίντεο, τα δύο μορφότυπα Ogg και MP4 έχουν καθιερωθεί. Γι' αυτό είστε πάντα στο σωστό δρόμο αν προσφέρετε το βίντεο σε αυτά τα δύο μορφότυπα. Για να το κάνετε αυτό, αναθέτετε δύο στοιχεία source στο στοιχείο video.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Εδώ λοιπόν δεν καθορίζετε την πηγή βίντεο μέσα στο στοιχείο video. Αντ' αυτού, εκεί γίνονται μόνο γενικές πληροφορίες για την εμφάνιση. Ποιο βίντεο να εμφανιστεί, καθορίζετε μέσω του στοιχείου source. Στο γνωρίσμα src ανατίθετε το αντίστοιχο βίντεο. Μετά το type ακολουθεί η δήλωση για τον τύπο του βίντεο ή σε ποιο μορφή βρίσκεται το βίντεο.
Εάν έχουν καθοριστεί πολλαπλά στοιχεία source, ο περιηγητής θα αναπαράγει πάντα το πρώτο βίντεο που "ταιριάζει". Τι σημαίνει αυτό το "ταιριάζει" θα περιγραφεί παρακάτω.
Αλλά ποιος περιηγητής υποστηρίζει ποια μορφή; Η απάντηση σε αυτό το ερώτημα παρέχεται από τον παρακάτω πίνακα.
| Περιηγητής | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Από Έκδοση 9 | |
| Mozilla Firefox | Ναι | |
| Google Chrome | Ναι | Ναι |
| Opera | Ναι | |
| Safari | Ναι | |
| iPhone | Ναι | |
| Android | Ναι |
Ο πίνακας αποτυπώνει το δίλημμα: Η ερμηνεία των μορφών κατανέμεται σχεδόν ισόποσα στους διάφορους φυλλομετρητές. Γι' αυτό είναι σχεδόν αναγκαίο να καθορίζονται τα βίντεο σε και τα δύο μορφή. Με το γνώρισμα media, το οποίο ανατίθεται αποκλειστικά στο στοιχείο source, μπορεί κανείς μάλιστα να καθορίσει ρητά για ποιον τύπο μέσου είναι κατάλληλο το βίντεο. Για να καθοριστούν βίντεο ειδικά για συγκεκριμένες συσκευές, το γνώρισμα media πρέπει να ανατεθεί στο src. Μέσω αυτού του γνωρίσματος media αναφέρετε τον επιθυμητό τύπο μέσου.
Μια πιθανή εφαρμογή για το στοιχείο source θα μπορούσε να είναι η εξής:
<video width="400" height="300">
<!-- Μόνο για φορητές συσκευές -->
<source src="video_mobil.ogg" media="handheld" />
<!—Όλες οι άλλες συσκευές -->
<source src="video_normal.ogg" media="all" />
</video>
Εδώ ελέγχεται μέσω του γνωρίσματος media αν πρόκειται για μια φορητή συσκευή. Σε αυτή την περίπτωση, αναπαράγεται ένα βίντεο μικρότερου μεγέθους. Αν πρόκειται για μια άλλη συσκευή, χρησιμοποιείται η τιμή "όόλα".
Ασφάλς ενσωμάτωση βίντεο
Όπως είναι γνωστό, το HTML5 δεν υποστηρίζεται ακόμα από όλους τους φυλλομετρητές. Αυτό ισχύει φυσικά και για το στοιχείο video. Μια λύση προσφέρει η συνδυασμός διαφόρων τεχνικών ενσωμάτωσης. Σε αυτόν τον συνδυασμό συνδυάζονται τα γνωστά στοιχεία object και embed με το video. Μπορεί να δείχνει κάπως έτσι:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Τα βίντεο που έχουν ενσωματωθεί με αυτόν τον τρόπο θα μπορούν να αναπαραχθούν σε περισσότερους φυλλομετρητές. Οι φυλλομετρητές που γνωρίζουν το στοιχείο video θα το χρησιμοποιήσουν. Οι άλλοι φυλλομετρητές θα χρησιμοποιήσουν τις πληροφορίες στο στοιχείο object ή ακόμη στο στοιχείο embed.
