Πριν την δημοσίευση των Μαθημάτων HTML5, Μέρος 1ο

Η ετικέτα <video>


Μια από τις ριζοσπαστικές αλλαγές που έφερε η HTML5 είναι ο τρόπος που προσθέτουμε βίντεο και audio στις σελίδες.

Μέχρι σήμερα δεν υπήρχε στάνταρ τρόπος με τον οποίον παρουσιαζόταν τα βίντεο στις ιστοσελίδες, καθώς χρησιμοποιούνταν διαφορετικά plug-ins από τους χρήστες, όπως το flash. Η HTML5 ορίζει συγκεκριμένο τρόπο για να προσθέτουμε βίντεο στις σελίδες, χρησιμοποιώντας την ετικέτα <video>

Προς το παρόν δύο τύποι βίντεο υποστηρίζονται από την HTML5:
- ο τύπος Ogg (ogg αρχεία με το Thedora video codec και το Vorbis audio codec) και
- ο τύπος MPEG4 (MPEG 4 αρχεία με το H.264 video codec και το AAC audio codec).

Μπορούμε να γράψουμε κείμενο μέσα στις ετικέτες αρχής και τέλους, το οποίο εμφανίζεται στους browsers που δεν υποστηρίζουν την ετικέτα αυτή.

Ιδιότητες της ετικέτας <video>

Ιδιότητα	Τιμή	Περιγραφή
autoplay (HTML5)	autoplay	Αν υπάρχει η ιδιότητα αυτή, η αναπαραγωγή του βίντεο θα αρχίσει μόλις ολοκληρωθεί η φόρτωση του
controls (HTML5)	controls	Η ύπαρξη της ιδιότητας εμφανίζει τα κουμπιά ελέγχου στο βίντεο, όπως το play, stop κτλ.
height (HTML5)	pixels	Ορίζει το ύψος του βίντεο
loop (HTML5)	loop	Αν υπάρχει η ιδιότητα, η αναπαραγωγή του βίντεο, κάθε φορά που τελειώνει, θα αρχίζει από την αρχή
preload (HTML5)	preload	Αν υπάρχει η ιδιότητα αυτή, το βίντεο θα φορτωθεί (load) όταν η σελίδα φορτωθεί. Αγνοείται όταν υπάρχει η ιδιότητα autoplay
src (HTML5)	URL	Ορίζει το url του βίντεο
width (HTML5)	pixels	Ορίζει το μήκος του βίντεο

Παραδείγματα

Μια απλή σύνταξη της ετικέτας

<video src="movie.ogg">
</video>

Εμφανίζουμε βίντεο με συγκεκριμένες διαστάσεις

<video src="movie.ogg" width="300" height="200">
</video>

Εμφανίζουμε το βίντεο με συγκεκριμένες διαστάσεις με τα κουμπιά ελέγχου

<video src="movie.ogg" width="300" height="200" controls="controls">
</video>

Εμφανίζουμε βίντεο με συγκεκριμένες διαστάσεις και κάποιες άλλες ιδιότητες

<video src="movie.ogg" width="300" height="200" controls="controls" autoplay="autoplay" loop="loop">
</video>

Εμφανίζουμε το βίντεο με συγκεκριμένες διαστάσεις με τα κουμπιά ελέγχου, το οποίο θα αρχίσει να παίζει από την στιγμή που θα φορτώσει και θα συνεχίζει να παίζει από την αρχή κάθε φορά που φτάνει στο τέλος

Η ετικέτα <source>

Η ετικέτα <source> προσθέσει πολλά media στην σειρά, είτε βίντεο, είτε ήχους. Έτσι όταν η αναπαραγωγή ενός media τελειώνει αρχίζει η αναπαραγωγή του επόμενου media. Η ετικέτα τοποθετείται μέσα στις ετικέτες <video> και <audio>.

Το παρακάτω παράδειγμα προσθέτει 3 βίντεο στην σειρά:

Τίτλος

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie2.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>