Βίντεο HTML

Υπάρχουν πολλά τρόποι για να παίξετε βίντεο στο HTML.

Παράδειγμα

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Προσπαθήστε το個人τικά

Προβλήματα, προβλήματα και λύσεις

Η αναπαραγωγή βίντεο στο HTML δεν είναι εύκολη!

Χρειάζεστε πολλές δεξιότητες για να διασφαλίσετε ότι τα αρχεία βίντεο σας θα παίζουν σε όλους τους περιηγητές (Internet Explorer, Chrome, Firefox, Safari, Opera) και σε όλες τις συσκευές (PC, Mac, iPad, iPhone).

Σε αυτή την ενότητα, το CodeW3C.com σας συνοψίζει τα προβλήματα και τις λύσεις.

Χρήση της ετικέτας <embed>

Η λειτουργία της ετικέτας <embed> είναι να ενσωματώνει στοιχεία πολυμέσων σε σελίδες HTML.

Η παρακάτω κώδικας HTML εμφανίζει ένα βίντεο Flash ενσωματωμένο στην ιστοσελίδα:

Παράδειγμα

<embed src="movie.swf" height="200" width="200"/>

Προσπαθήστε το個人τικά

Πρόβλημα

  • Το HTML4 δεν μπορεί να αναγνωρίσει την ετικέτα <embed>. Η σελίδα σας δεν μπορεί να επικυρωθεί.
  • Αν ο περιηγητής δεν υποστηρίζει το Flash, το βίντεο δεν θα μπορεί να παίξει
  • iPad και iPhone δεν μπορούν να εμφανίσουν βίντεο Flash.
  • Αν μετατρέψετε το βίντεο σε άλλο μορφή, δεν θα μπορεί να παίξει σε όλους τους περιηγητές.

Χρήση της ετικέτας <object>

Η λειτουργία της ετικέτας <object> είναι να ενσωματώνει στοιχεία πολυμέσων σε σελίδες HTML.

Η παρακάτω κλάση HTML εμφανίζει ένα βίντεο Flash ενσωματωμένο στην ιστοσελίδα:

Παράδειγμα

<object data="movie.swf" height="200" width="200"/>

Προσπαθήστε το個人τικά

Πρόβλημα

  • Αν ο περιηγητής δεν υποστηρίζει το Flash, το βίντεο δεν θα μπορεί να παίξει.
  • iPad και iPhone δεν μπορούν να εμφανίσουν βίντεο Flash.
  • Αν μετατρέψετε το βίντεο σε άλλο μορφή, δεν θα μπορεί να παίξει σε όλους τους περιηγητές.

Χρήση της ετικέτας <video>

Το <video> είναι η νέα ετικέτα του HTML 5.

Το tag <video> χρησιμοποιείται για την ενσωμάτωση στοιχείων βίντεο σε σελίδες HTML.

Το παρακάτω κομμάτι HTML θα εμφανίσει ένα βίντεο σε μορφή ogg, mp4 ή webm που ενσωματώνεται στη σελίδα:

Παράδειγμα

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Το πρόγραμμα περιήγησής σας δεν υποστηρίζει το tag βίντεο.
</video>

Προσπαθήστε το個人τικά

Πρόβλημα

  • Πρέπει να μετατρέψετε το βίντεο σε πολλούς διαφορετικούς μορφές.
  • Το στοιχείο <video> δεν λειτουργεί σε παλιούς περιηγητές.
  • <video> στοιχείο δεν μπορεί να επικυρωθεί με HTML 4 και XHTML.

Η καλύτερη λύση HTML

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Προσπαθήστε το個人τικά

Στο παραπάνω παράδειγμα χρησιμοποιήθηκαν 4 διαφορετικές μορφές βίντεο. Το στοιχείο <video> του HTML 5 προσπαθεί να παίξει το βίντεο σε μορφή mp4, ogg ή webm. Αν αποτύχει, θα επιστρέψει στο στοιχείο <embed>.

Πρόβλημα

  • Πρέπει να μετατρέψετε το βίντεο σε πολλούς διαφορετικούς μορφές.
  • <video> στοιχείο δεν μπορεί να επικυρωθεί με HTML 4 και XHTML.
  • <embed> στοιχείο δεν μπορεί να επικυρωθεί με HTML 4 και XHTML.

Σημείωση:Χρησιμοποιήστε <!DOCTYPE html> (HTML5) για να λύσετε το πρόβλημα επικύρωσης.

Λύση του Youku

Ο απλούστερος τρόπος για να εμφανίσετε βίντεο στο HTML είναι να χρησιμοποιήσετε ιστοσελίδες βίντεο όπως το Youku.

Εάν θέλετε να παίξετε βίντεο στη σελίδα σας, μπορείτε να ανεβάσετε το βίντεο σε ιστοσελίδες βίντεο όπως το Youku και να προσθέσετε τον κώδικα HTML για να παίξετε το βίντεο:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Προσπαθήστε το個人τικά

Χρήση σύνδεσμων

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

Ο παρακάτω κώδικας δείχνει σύνδεσμο σε αρχείο AVI. Αν ο χρήστης κάνει κλικ στον σύνδεσμο, ο περιηγητής θα ξεκινήσει την "επιπρόσθετη εφαρμογή", όπως τον Windows Media Player, για να παίξει το αρχείο AVI:

Παράδειγμα

<a href="movie.swf">Παίξτε αρχείο βίντεο</a>

Προσπαθήστε το個人τικά

Ένα σχόλιο για τα ενσωματωμένα βίντεο

Όταν το βίντεο περιλαμβάνεται στη σελίδα, ορίζεται ως ενσωματωμένο βίντεο.

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

Επίσης, παρακαλούμε σημειώστε ότι ο χρήστης μπορεί ήδη να έχει απενεργοποιήσει την επιλογή ενσωματωμένων βίντεο στον περιηγητή.

Η καλύτερη μας συμβουλή είναι να περιλαμβάνετε τα ενσωματωμένα βίντεο μόνο στις περιπτώσεις όπου ο χρήστης θέλει να τα δει.

Τύποι Μέσων του HTML 4.01

Τύπος Περιγραφή
<applet> Μη υποστηριζόμενο.Ορίζει το ενσωματωμένο applet.
<embed> Μη υποστηριζόμενο.Ορίζει το ενσωματωμένο αντικείμενο (επιτρέπεται στο HTML5).
<object> Ορίζει το ενσωματωμένο αντικείμενο.
<param> Ορίζει τα παραμέτρια του αντικειμένου.

Τύποι Μέσων του HTML 5

Τύπος Περιγραφή
<video> Ο τύπος ορίζει τον ήχο, όπως τη μουσική ή άλλες ροές ήχου.
<embed> Ο τύπος ορίζει το ενσωματωμένο περιεχόμενο, όπως το πρόγραμμα περιήγησης.