Βίντεο 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.

Το στοιχείο <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" />
Ο περιηγητής σας δεν υποστηρίζει το ετικέτα βίντεο.
</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> Μη υποστηριζόμενο.Ορίζει το ενσωματωμένο αντικείμενο. (Επιτρέπεται στο HTML 5)
<object> Ορίζει το ενσωματωμένο αντικείμενο.
<param> Ορίζει τις παραμέτρους του αντικειμένου.

Ειδικοί Τύποι Μηχανικής του HTML 5

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