HTML5 Video

• 04 Μαΐου 2012
• by: Georgios
• in: Web Development

Πολλές σύγχρονες ιστοσελίδες αναπαράγουν βίντεο.Η HTML5 παρέχει ένα πρότυπο για την προβολή τους.

Video στο Web

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

Υποστήριξη προγράμματων περιήγησης

Ο Internet Explorer 9, Firefox, Opera, Chrome και ο Safari υποστηρίζουν το στοιχείο <video>.
Σημείωση: Οι νεότερες εκδόσεις του Internet Explorer 8 δεν το υποστηρίζουν.

HTML5 Video – Πώς λειτουργεί

Για να δείτε ένα βίντεο στην HTML5, χρειάζεστε τον παρακάτω κώδικα:


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


Η ιδιότητα control προσθέτει στοιχεία ελέγχου στο βιντεο, όπως play, pause, και την ένταση ήχου.
Είναι επίσης καλή ιδέα να περιλαμβάνονται το πλάτος και το ύψος. Εάν το ύψος και το πλάτος είναι προκαθορισμένα, ο χώρος που απαιτείται για το βίντεο παραχωρείται όταν φορτώνεται η σελίδα. Ωστόσο, χωρίς αυτά τα χαρακτηριστικά, ο Browser δεν γνωρίζει το μέγεθος του βίντεο, και δεν μπορεί να προκαθορίσει τον κατάλληλο χώρο για αυτό. Το αποτέλεσμα θα είναι ότι η διάταξη της σελίδας θα αλλάξει κατά τη διάρκεια της φόρτωσης.
Θα πρέπει επίσης να εισάγετε το περιεχόμενο του κειμένου μεταξύ <video> και </video> tags για browsers που δεν το υποστηρίζουν.
Το στοιχείο <video> επιτρέπει σε πολλαπλές πηγές <source> να συνδεθούν σε διαφορετικά αρχεία βίντεο. Ο browser θα χρησιμοποιήσει το πρώτο αναγνωρισμένο format.

---

Video Formats και υποστήριξη Browser

Επί του παρόντος, υπάρχουν 3 υποστηριζόμενες μορφές βίντεο για το στοιχείο στοιχείο: MP4, WebM, και Ogg:

Browser	MP4	WebM	Ogg
Internet Explorer 9	Ναι	Όχι	Όχι
Firefox 4.0	Όχι	Ναι	Ναι
Google Chrome 6	Ναι	Ναι	Ναι
Apple Safari 5	Ναι	Όχι	Όχι
Opera 10.6	Όχι	Ναι	Ναι

• MP4 = MPEG 4 αρχεία με H264 video codec και AAC audio codec
• WebM = WebM αρχεία με VP8 video codec και Vorbis audio codec
• Ogg = Ogg αρχεία με Theora video codec και Vorbis audio codec

---

HTML5 Video Tags

Tag	Περιγραφή
<video>	Καθορίζει ένα βίντεο ή μια ταινία
<source>	Καθορίζει πολλαπλές πηγές (sources) για <video> και <audio>
<track>	Καθορίζει <track> κομμάτια κειμένου για <video> και <audio>