Βίντεο 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">Play a video file</a>

Δοκιμάστε το προσωπικά

Μια σημείωση για το εσωτερικό βίντεο

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

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

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

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

Ετικέτες Μηχανημάτων Ενημέρωσης HTML 4.01

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

Ετικέτες Μηχανημάτων Ενημέρωσης HTML 5

Ετικέτα Περιγραφή
<video> Η ετικέτα define ήχους, όπως μουσική ή άλλες ακοές.
<embed> Η ετικέτα define το εσωτερικό περιεχόμενο, όπως τα plugins.