Ενσωμάτωση ήχου και βίντεο σε HTML 5 Σελίδες

Στο μάθημα 1 και το μάθημα 2 για το HTML 5 tutorial μας, εξετάσαμε μερικές νέες ετικέτες που μπορείτε να χρησιμοποιήσετε για να βοηθήσει στην εξάλειψη του χάους που δημιουργούν τα divs της HTML 4.x, καθώς και ορισμένες άλλες σημασιολογικές ετικέτες για να δώσει στις σελίδες σας ημερομηνίες, μεταδεδομένα και λεζάντες εικόνων.

Τώρα ήρθε η ώρα να ρίξουμε μια ματιά στις ετικέτες ήχου και βίντεο.

Προς το παρόν, ο μόνος τρόπος για να ενσωματώσουμε βίντεο με αξιοπιστία σε μια ιστοσελίδα, έτσι ώστε όλοι οι χρήστες να μπορούν να το δουν, ανεξάρτητα από browser ή το λειτουργικό σύστημα, είναι με το Flash. Αυτό απαιτεί το Adobe Flash plugin και συνδυασμός των των ετικετών object και embed.

Οι περισσότεροι χρήστες έχουν το Flash plugin ήδη εγκατεστημένο (στην πραγματικότητα, το 95% του web-συνδεδεμένων χρηστών έχουν κάποια εκδοχή του), αλλά οι υποστηρικτές της HTML 5 πιέζουν για ένα ανοικτό πρότυπο βίντεο που δεν απαιτεί κανένα plugin. Αυτή είναι η ιδέα πίσω από το νέα ετικέτα video στην HTML 5 - παρέχει έναν τρόπο για την ενσωμάτωση βίντεο χωρίς την ανάγκη για ένα plugin όπως το Flash .

Δυστυχώς, το βίντεο δεν είναι τόσο απλό. Δεν είναι μόνο το πρόγραμμα περιήγησης που πρέπει να κατανοήσει την ετικέτα video αλλά πρέπει επίσης να υπάρχει και η αναγκαία κωδικοποίηση (codec) για να παίξει το βίντεο. Η προφανής λύση θα ήταν για τους συντάκτες της HTML 5 να επιλέξουν ένα video codec και κάθε κατασκευαστής προγράμματος περιήγησης να το εφαρμόζει στον browser του.

Αυτή ήταν η ιδέα που προτάθηκε, έτσι κι αλλιώς. Αλλά οι υπεύθυνοι κατασκευαστές browser δεν μπορούσαν να συμφωνήσουν σε ένα βίντεο video codec. Στην Apple δεν αρέσει η κωδικοποίηση ogg, στις Opera και Mozilla δεν θέλουν το codec H.264. Η Google τις εφαρμόζει και τις δύο αυτές κωδικοποιήσεις , και η Microsoft έμεινε μακριά από τη συμπλοκή, δεδομένου ότι δεν είναι στα άμεσα σχέδια της η εφαρμογή του HTML 5 στοιχείου video.

Mέχρι τώρα δεν έχουν καταλήξει σε κάποιο συγκεκριμένο video codec.

Αυτό σημαίνει ότι η ετικέτα video είναι άχρηστη; Όχι, απλώς ότι η ευρεία υιοθέτηση ενός video codec είναι ακόμα πολύ μακριά.

Εν τω μεταξύ, ας ρίξουμε μια ματιά στο πώς μπορείτε να χρησιμοποιήσετε την ετικέτα video.

Η ετικέτα video

Λοιπόν, πώς δουλεύει το βίντεο; Εδώ είναι ο κώδικας για να ενσωματώσετε ένα βίντεο σε μορφή HTML 5:


<video src="/myvideo.mp4"></video>


Αρκετά απλό έτσι;

Λοιπόν, στην ιδανική περίπτωση θα κάνατε κάτι περισσότερο σαν αυτό (το οποίο είναι αυτό που κάνει το YouTube HTML 5 demo):


<video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
<div class="fallback">
<p>You must have an HTML5 capable browser.</p>
</div>
</video>


Υπάρχουν επίσης ορισμένα χρήσιμα χαρακτηριστικά για την ετικέτα video, συμπεριλαμβανομένων των ελέγχων auto-play, ελέγχοι play/pause κ.α. Ο πλήρης κατάλογος των χαρακτηριστικών tag βίντεο μπορείτε να βρείτε στην ιστοσελίδα του W3C schools.

Η ετικέτα video έχει επίσης μια ολόκληρη σειρά από γεγονότα που μπορείτε να χρησιμοποιείσετε με JavaScript, επιτρέποντας σας να παίξετε ταινίες μέσα σε ταινίες και να δημιουργήσετε πολύπλοκες αλληλεπιδράσεις χρήστη μέσω του ποντικιού και του πληκτρολογίου με τη χρήση γεγονότων.

Η ετικέτα audio

Ο ετικέτα audio είναι λίγο - πολύ ένα αντίγραφο της ετικέτα video. Ισχύουν οι ίδιοι codec περιορισμοί - Ο Mozilla υποστηρίζει μόνο αρχεία Ogg Vorbis, ενώ ο Safari μπορεί να χειριστεί σχεδόν οτιδήποτε μπορεί και το QuickTime.

Ο κώδικας είναι πολύ παρόμοιος με του video:


<audio src="/music/myaudio.ogg" autoplay>
Sorry, your browser does not support the <audio> element.
</audio>


Συμπέρασμα

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

Στην ιδανική περίπτωση, όλοι οι browsers θα στηρίξουν τόσο Ogg όσο και H.264, δίνοντας στους προγραμματιστές ακόμη περισσότερες επιλογές.

0 σχόλια

Δημοσίευση σχολίου