Basic HTML Version
Η
HTML5 είναι η νέα γενιά της ταπεινής Γλώσσας Υπερ-
κειμένου, πάνω στην οποία θα βασίζονται οι ιστοσελί-
δες στο εξής και προσφέρει λειτουργίες με πολυμέσα
που μέχρι τώρα γίνονταν συνήθως μόνο με την πλατφόρμα
της Adobe ή με αρκετά πολύπλοκη JavaScript. Με λίγα λόγια,
η HTML5 ενσωματώνει νέα tags (ετικέτες) που δεν υπήρχαν
στις προηγούμενες εκδόσεις της γλώσσας, και βοηθούν τους
Web developers να κάνουν ευκολότερα τη δουλειά τους.
Πολυμέσα
Για παράδειγμα, τα νέα tags <video> και <audio> υπό-
σχονται να λύσουν μια και καλή το πρόβλημα με τα πολυμέσα
στις ιστοσελίδες όπου το Flash μεσουρανούσε, προκαλώντας
όμως ένα σωρό προβλήματα στους developers και στους
χρήστες που χρειάζονταν το κλειστού κώδικα plug-in της
Adobe για να δουν ένα απλό βίντεο ή να ακούσουν μουσική
με ένα ή δύο καλαίσθητα κουμπιά ελέγχου.
Βέβαια, η HTML5 δεν λύνει οριστικά το πρόβλημα, καθώς
δεν «προτείνει» κάποιο ανοικτού κώδικα codec για την αναπα-
ραγωγή του βίντεο ή του ήχου. Αντίθετα, αφήνει αυτό το κρί-
σιμο ζήτημα στην ευθύνη του browser ή του λειτουργικού συ-
στήματος, οπότε και πάλι θα υπάρχουν προβλήματα. Ευτυ-
χώς, οι σύγχρονοι browsers προσφέρουν υποστήριξη τόσο
για τον ελεύθερο Theora codec όσο και για το WebM format
της Google. Το WebM πακετάρει τα πάντα σε ένα Matroska
container, χρησιμοποιώντας Ogg συμπίεση ήχου και VP8 συ-
μπίεση βίντεο και υποστηρίζεται από Firefox, Chrome και
Opera (καλά, μη ρωτάτε καν για Explorer!). Καλά όλα αυτά,
αλλά στην πράξη πώς παίζουμε ένα βίντεο μέσω HTML5; Πά-
ρα πολύ εύκολα. Πρακτικά, χρησιμοποιούμε απλώς την ετικέ-
τα <video> και μέσα βάζουμε την τοποθεσία (src) όπου βρί-
σκεται το βίντεό μας. Π.χ., το παρακάτω θα σας παίξει ένα
δοκιμαστικό βίντεο που έχουμε ανεβάσει στο linuxinside.gr:
<video src="http://www.linuxinside.gr/files/robot.ogg" />
Το βίντεο εμφανίζεται κατευθείαν σε έναν απλό player και...
απλώς παίζει
(εικόνα 1)
. Είναι τόσο απλό και δεν χρειάζεται να
γράψουμε ειδικό κώδικα ούτε να προσθέσουμε κάποιο κλει-
στού κώδικα plug-in (λέγε με flash) όπως χρειαζόταν παλιά!
Επιπλέον, αν θέλουμε να υπάρχουν κουμπιά ελέγχου του
βίντεο, αλλά και να παίζει αυτόματα μόλις φορτώσει η σελίδα,
αρκεί να προσθέσουμε τις κατάλληλες λέξεις–κλειδιά
(controls και autoplay) μέσα στην ετικέτα μας. Και, όπως πά-
ντα, μπορούμε να «παίξουμε» με το πλάτος και το ύψος του
video player με τα width και height:
<video controls autoplay src="robot.ogg" width="320"
height="240” />
Αυτός είναι ο απλός τρόπος να προσθέσουμε ένα HTML5
βίντεο στη σελίδα μας.
Όμως η ετικέτα video έχει και μία υποετικέτα που λέγεται
source και μας επιτρέπει να ορίσουμε την τοποθεσία και τον
τύπο του βίντεο.
Επίσης, μπορεί να θέλουμε να γράψουμε ένα μήνυμα σε
κάποιον που δεν μπορεί να δει το βίντεό μας. Έτσι, ένας
εναλλακτικός τρόπος να γράψουμε τον ίδιο με τον παραπάνω
κώδικα είναι:
<video controls="controls" autoplay=”autoplay”>
<source src="robot.ogv" type="video/ogg” />
You can also <a href="robot.mp4">download</a> the
video!
</video>
Όπως είπαμε, τα παραπάνω παραδείγματα θα δουλέψουν
μια χαρά σε Firefox, Opera και Chrome, αλλά όχι σε Explorer.
Για να καλύψουμε τους καημένους τους χρήστες του Explo-
rer, μπορούμε με δύο-τρεις γραμμές κώδικα παραπάνω να
προσφέρουμε διαφορετικούς τύπους του ίδιου βίντεο! Δείτε
ένα παράδειγμα:
<video controls="controls" autoplay="autoplay">
<source src="robot.mp4" type="video/mp4" />
<source src="robot.webm" type="video/webm" />
<source src="robot.ogv" type="video/ogg" />
You can also <a href="robot.mp4">download</a> the
video!
</video>
Linux Inside
74
Xρησιμοποιούμε απλώς την ετικέτα <video>
και μέσα βάζουμε την τοποθεσία (src) όπου
βρίσκεται το βίντεό μας.
Του Δημήτρη Καλαμαρά <editor@linuxinside.gr>
Linux Labs - HTML5
Σε αυτό το άρθρο παίρνουμε μία γεύση από τις νέες
δυνατότητες που προσφέρει η HTML5 στην προβολή
πολυμέσων και στη σχεδίαση πάνω σε καμβά.
Εργαλεία:
Firefox, JavaScript
Δυσκολία:
URL:
www.linuxinside.gr
/html5.html
Δείτε τα
παραδείγματα!
HTML 5: Μερικά νέα κόλπα
Ο Δημήτρης αγαπά το Linux, τις γάτες, τον προγραμματισμό και την Ελένη.
Αναπαραγωγή βίντεο χωρίς ανάγκη για flash player.
1