HTML-011 — HTML Media: Audio & Video — Ενσωμάτωση και αναπαραγωγή πολυμέσων

HTML-011 — HTML Media: Audio & Video — Ενσωμάτωση και αναπαραγωγή πολυμέσων

Καλώς ήρθες σε ένα ακόμη μάθημα του Jerry's CodeLab!

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

Ήρθε η στιγμή να προσθέσουμε κάτι ακόμη: ήχο και εικόνα σε κίνηση!

Στο σημερινό μάθημα θα γνωρίσουμε τα στοιχεία <audio> και <video>, θα μάθουμε πώς λειτουργούν οι ενσωματωμένοι players του browser και θα δημιουργήσουμε τη δική μας μικρή συλλογή πολυμέσων.

---

1. Τι είναι το HTML Media;

Ο όρος HTML Media αναφέρεται στα πολυμέσα που μπορούμε να ενσωματώσουμε σε μια ιστοσελίδα, όπως:

• Μουσική και ηχητικά αρχεία.
• Εκπαιδευτικά βίντεο.
• Παρουσιάσεις και επιδείξεις.
• Ηχητικές οδηγίες και αφηγήσεις.
• Υπότιτλους και συνοδευτικό κείμενο.

Στο παρελθόν, η αναπαραγωγή πολυμέσων απαιτούσε συχνά πρόσθετα προγράμματα περιήγησης (plugins). Σήμερα, η HTML5 μάς προσφέρει ενσωματωμένα στοιχεία για την αναπαραγωγή ήχου και βίντεο.

Τα δύο βασικά στοιχεία που θα χρησιμοποιήσουμε είναι:

• <audio>: Για την αναπαραγωγή ήχου.
• <video>: Για την αναπαραγωγή βίντεο.

---

2. Το στοιχείο audio — Αναπαραγωγή ήχου

Το στοιχείο <audio> μάς επιτρέπει να ενσωματώσουμε ένα ηχητικό αρχείο στην ιστοσελίδα μας.

Η απλούστερη μορφή του είναι:

<audio controls src="music.mp3">
  Ο browser σου δεν υποστηρίζει αναπαραγωγή ήχου.
</audio>

Η ιδιότητα src καθορίζει τη διεύθυνση του αρχείου ήχου.

Η ιδιότητα controls εμφανίζει τα χειριστήρια του browser, όπως:

• Play / Pause.
• Ρύθμιση έντασης.
• Γραμμή προόδου.
• Χρόνο αναπαραγωγής.

Πρακτικό παράδειγμα

Ας χρησιμοποιήσουμε ένα δοκιμαστικό ηχητικό αρχείο:

Δοκίμασε να πατήσεις Play, να σταματήσεις την αναπαραγωγή και να αλλάξεις την ένταση.

---

3. Το στοιχείο video — Αναπαραγωγή βίντεο

Το στοιχείο <video> λειτουργεί με παρόμοιο τρόπο, αλλά αυτή τη φορά ενσωματώνουμε ένα αρχείο βίντεο.

Η βασική σύνταξη είναι:

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
  Ο browser σου δεν υποστηρίζει HTML video.
</video>

Η ιδιότητα width καθορίζει το πλάτος του player σε pixels.

Η ιδιότητα controls εμφανίζει τα χειριστήρια αναπαραγωγής, όπως:

• Play / Pause.
• Ρύθμιση έντασης.
• Γραμμή προόδου.
• Πλήρης οθόνη, όπου υποστηρίζεται.

Πρακτικό παράδειγμα

Παρατήρησε ότι το βίντεο διαθέτει εικόνα προεπισκόπησης πριν ξεκινήσει η αναπαραγωγή του.

---

4. Το στοιχείο source — Πολλαπλές πηγές πολυμέσων

Ένα σημαντικό θέμα είναι ότι όλοι οι browsers δεν υποστηρίζουν απαραίτητα τις ίδιες μορφές αρχείων και τους ίδιους codecs.

Για να αυξήσουμε τη συμβατότητα, μπορούμε να προσθέσουμε περισσότερες από μία πηγές μέσα στο <audio> ή στο <video>.

Για αυτό χρησιμοποιούμε το στοιχείο <source>.

Παράδειγμα με audio

<audio controls>
  <source src="music.ogg" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
  Ο browser σου δεν υποστηρίζει ήχο.
</audio>

Παράδειγμα με video

<video controls>
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  Ο browser σου δεν υποστηρίζει βίντεο.
</video>

Ο browser εξετάζει τις διαθέσιμες πηγές και προσπαθεί να χρησιμοποιήσει μια μορφή που μπορεί να αναπαράγει.

Η ιδιότητα type

Η ιδιότητα type περιγράφει τον τύπο του αρχείου, χρησιμοποιώντας ένα MIME type.

Αρχείο	MIME type
MP3	audio/mpeg
OGG Audio	audio/ogg
WAV	audio/wav
MP4 Video	video/mp4
WebM Video	video/webm

Προσοχή: Η υποστήριξη ενός container, όπως MP4 ή WebM, δεν σημαίνει ότι υποστηρίζεται κάθε codec που μπορεί να περιέχει. Η πραγματική συμβατότητα εξαρτάται και από τους codecs.

---

5. Οι σημαντικότερες ιδιότητες των audio και video

Τα δύο στοιχεία διαθέτουν αρκετές κοινές ιδιότητες που ελέγχουν τον τρόπο με τον οποίο φορτώνεται και αναπαράγεται το περιεχόμενο.

controls

Εμφανίζει τα χειριστήρια του browser.

<audio controls src="music.mp3"></audio>

autoplay

Ζητά από τον browser να ξεκινήσει αυτόματα την αναπαραγωγή.

<video autoplay controls>
  <source src="movie.mp4" type="video/mp4">
</video>

Πολλοί browsers περιορίζουν την αυτόματη αναπαραγωγή, ιδιαίτερα όταν υπάρχει ήχος.

Για αυτό, σε περιπτώσεις όπου το autoplay είναι πραγματικά απαραίτητο, συχνά χρησιμοποιείται μαζί με το muted.

<video autoplay muted playsinline>
  <source src="movie.mp4" type="video/mp4">
</video>

muted

Ξεκινά ή διατηρεί το στοιχείο σε κατάσταση σίγασης.

<video controls muted>
  <source src="movie.mp4" type="video/mp4">
</video>

loop

Επαναλαμβάνει την αναπαραγωγή όταν το αρχείο ολοκληρωθεί.

<audio controls loop>
  <source src="music.mp3" type="audio/mpeg">
</audio>

preload

Δίνει στον browser μια ένδειξη για το πόσο περιεχόμενο μπορεί να φορτώσει πριν ο χρήστης ξεκινήσει την αναπαραγωγή.

Υπάρχουν τρεις βασικές τιμές:

• none: Δεν ζητάμε προφόρτωση του αρχείου.
• metadata: Ζητάμε πληροφορίες όπως διάρκεια και διαστάσεις.
• auto: Αφήνουμε τον browser να αποφασίσει αν θα φορτώσει περισσότερο περιεχόμενο.

<video controls preload="metadata">
  <source src="movie.mp4" type="video/mp4">
</video>

poster — Εικόνα προεπισκόπησης βίντεο

Η ιδιότητα poster χρησιμοποιείται μόνο στο <video>.

Καθορίζει την εικόνα που εμφανίζεται πριν ξεκινήσει η αναπαραγωγή του βίντεο.

<video controls
       poster="preview.jpg"
       width="640">

  <source src="movie.mp4" type="video/mp4">

</video>

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

playsinline

Είναι ιδιαίτερα χρήσιμη σε κινητές συσκευές. Ζητά από τον browser να αναπαράγει το βίντεο μέσα στην περιοχή της ιστοσελίδας αντί να μεταβεί υποχρεωτικά σε ξεχωριστή προβολή πλήρους οθόνης.

<video controls playsinline>
  <source src="movie.mp4" type="video/mp4">
</video>

width και height

Χρησιμοποιούνται στο <video> για να καθορίσουν τις διαστάσεις του player.

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
</video>

Το στοιχείο <audio> δεν χρησιμοποιεί τις ιδιότητες width και height, επειδή δεν διαθέτει ορατή επιφάνεια βίντεο.

Συγκεντρωτικός πίνακας

Ιδιότητα	Λειτουργία
controls	Εμφανίζει χειριστήρια αναπαραγωγής.
autoplay	Ζητά αυτόματη αναπαραγωγή.
muted	Απενεργοποιεί τον ήχο.
loop	Επαναλαμβάνει την αναπαραγωγή.
preload	Καθοδηγεί την προφόρτωση.
poster	Ορίζει εικόνα προεπισκόπησης video.
playsinline	Ζητά αναπαραγωγή μέσα στη σελίδα.
width	Καθορίζει το πλάτος του video.
height	Καθορίζει το ύψος του video.

---

6. Το στοιχείο track — Υπότιτλοι και κείμενο στο βίντεο

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

Για αυτό χρησιμοποιούμε το στοιχείο <track>.

Μπορεί να χρησιμοποιηθεί μέσα σε <video> ή <audio>, αλλά σήμερα θα επικεντρωθούμε στους υπότιτλους βίντεο.

Τι είναι το WebVTT;

Το WebVTT (Web Video Text Tracks) είναι μια μορφή αρχείου κειμένου με χρονικές σημάνσεις.

Το αρχείο έχει κατάληξη .vtt και περιέχει το κείμενο που πρέπει να εμφανιστεί σε συγκεκριμένα χρονικά σημεία.

Ένα απλό αρχείο WebVTT μοιάζει ως εξής:

WEBVTT

00:00:01.000 --> 00:00:04.000
Καλώς ήρθες στο Jerry's CodeLab!

00:00:04.500 --> 00:00:08.000
Σήμερα μαθαίνουμε HTML Media.

Η πρώτη γραμμή πρέπει να περιέχει το WEBVTT.

Στη συνέχεια ορίζουμε τα χρονικά διαστήματα και το κείμενο που θα εμφανιστεί.

Προσθήκη υποτίτλων στο video

<video controls>

  <source src="lesson.mp4" type="video/mp4">

  <track
    kind="subtitles"
    src="subtitles-el.vtt"
    srclang="el"
    label="Ελληνικά"
    default>

</video>

Ας δούμε τις ιδιότητες του track:

• kind: Καθορίζει το είδος του κειμένου.
• src: Η διεύθυνση του αρχείου VTT.
• srclang: Η γλώσσα του κειμένου.
• label: Το όνομα που εμφανίζεται στον χρήστη.
• default: Ορίζει το προεπιλεγμένο track.

Οι βασικές τιμές του kind

Τιμή	Χρήση
subtitles	Μεταφρασμένοι υπότιτλοι.
captions	Υπότιτλοι που περιλαμβάνουν και σημαντικούς ήχους, όπως μουσική ή ηχητικά εφέ.
descriptions	Κείμενο περιγραφής οπτικών πληροφοριών.
chapters	Κεφάλαια για ευκολότερη πλοήγηση.
metadata	Πληροφορίες που προορίζονται για χρήση από scripts.

Για να εμφανιστούν οι υπότιτλοι, ο χρήστης μπορεί να επιλέξει τη σχετική επιλογή από τα χειριστήρια του player, εφόσον αυτή υποστηρίζεται.

---

7. Προσβασιμότητα και εναλλακτικό περιεχόμενο

Όταν δημιουργούμε μια ιστοσελίδα, πρέπει να σκεφτόμαστε όλους τους επισκέπτες της.

Κάποιος μπορεί:

• Να μην μπορεί να ακούσει τον ήχο.
• Να μην μπορεί να παρακολουθήσει οπτικά το βίντεο.
• Να χρησιμοποιεί υποστηρικτικές τεχνολογίες.
• Να έχει αργή σύνδεση στο διαδίκτυο.
• Να χρησιμοποιεί browser που δεν μπορεί να αναπαράγει το συγκεκριμένο αρχείο.

Υπότιτλοι και απομαγνητοφώνηση

Σε βίντεο με ομιλία, οι υπότιτλοι βοηθούν τους χρήστες που δεν μπορούν να ακούσουν τον ήχο.

Σε ηχητικό περιεχόμενο με ομιλία, μια γραπτή απομαγνητοφώνηση επιτρέπει στον χρήστη να διαβάσει το περιεχόμενο.

Εναλλακτικό περιεχόμενο

Μπορούμε να προσθέσουμε ένα μήνυμα ή έναν σύνδεσμο μέσα στο στοιχείο media:

<video controls>

  <source src="lesson.mp4" type="video/mp4">

  <p>
    Ο browser σου δεν υποστηρίζει HTML video.
    <a href="lesson.mp4">
      Κατέβασε το βίντεο.
    </a>
  </p>

</video>

Το εναλλακτικό περιεχόμενο εμφανίζεται όταν ο browser δεν υποστηρίζει το ίδιο το στοιχείο media.

---

8. Responsive Video με CSS

Ένα βίντεο με σταθερό πλάτος μπορεί να ξεπεράσει τα όρια της οθόνης ενός κινητού.

Για αυτό χρησιμοποιούμε CSS ώστε το video να προσαρμόζεται στο διαθέσιμο πλάτος.

video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

Με αυτόν τον τρόπο το βίντεο μπορεί να προσαρμόζεται στο πλάτος του περιβάλλοντος στοιχείου.

Έλεγχος αναλογίας εικόνας με aspect-ratio

Η ιδιότητα aspect-ratio μάς επιτρέπει να καθορίζουμε την αναλογία πλάτους και ύψους.

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Το 16 / 9 είναι μια συνηθισμένη αναλογία για βίντεο.

Η ιδιότητα object-fit: contain διατηρεί ολόκληρο το βίντεο ορατό, χωρίς να το περικόπτει.

---

9. Ολοκληρωμένο παράδειγμα — Media Studio

Τώρα θα συνδυάσουμε όσα μάθαμε για να δημιουργήσουμε μια μικρή σελίδα παρουσίασης πολυμέσων.

Θα περιλαμβάνει:

• Έναν audio player.
• Έναν video player.
• Εικόνα προεπισκόπησης.
• Responsive εμφάνιση.
• Περιγραφές για το περιεχόμενο.

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

Επίσης, το preload="metadata" στο βίντεο επιτρέπει στον browser να ανακτήσει βασικές πληροφορίες χωρίς να ζητάμε την πλήρη προφόρτωση του αρχείου.

---

10. Συνηθισμένα λάθη και καλές πρακτικές

• Ξεχνάμε το controls και ο χρήστης δεν έχει τα προεπιλεγμένα χειριστήρια.
• Χρησιμοποιούμε λάθος MIME type στο source.
• Δίνουμε διεύθυνση αρχείου που δεν υπάρχει ή δεν είναι προσβάσιμη.
• Υποθέτουμε ότι κάθε browser υποστηρίζει όλους τους codecs.
• Χρησιμοποιούμε autoplay με ήχο χωρίς να λαμβάνουμε υπόψη τις πολιτικές του browser.
• Ξεχνάμε τους υπότιτλους σε βίντεο με ομιλία.
• Δεν ελέγχουμε το responsive πλάτος του video.
• Χρησιμοποιούμε μεγάλα αρχεία χωρίς να σκεφτόμαστε τον χρόνο φόρτωσης.
• Δεν παρέχουμε απομαγνητοφώνηση όταν είναι απαραίτητη για την κατανόηση του ηχητικού περιεχομένου.

---

11. Ώρα για εξάσκηση!

Ήρθε η στιγμή να περάσουμε από τη θεωρία στην πράξη!

Άνοιξε την Παιδική Χαρά μέσω του κουμπιού RUN ON PLAYGROUND και δοκίμασε τα παρακάτω:

1. Άλλαξε τον τίτλο της σελίδας Media Studio.
2. Πρόσθεσε ένα δεύτερο audio element.
3. Πρόσθεσε την ιδιότητα loop στο δεύτερο audio.
4. Αφαίρεσε και ξαναπρόσθεσε το controls για να παρατηρήσεις τη διαφορά.
5. Πρόσθεσε ένα δεύτερο source στο video με διαφορετικό format.
6. Άλλαξε την εικόνα poster.
7. Πρόσθεσε muted στο video.
8. Δοκίμασε το preload="none".
9. Πρόσθεσε ένα κείμενο περιγραφής κάτω από κάθε player.
10. Δοκίμασε να μικρύνεις το πλάτος της προεπισκόπησης και έλεγξε αν το video παραμένει responsive.

---

12. Έλεγχος γνώσεων — Quiz

Ας δούμε τι θυμόμαστε από το σημερινό μάθημα!

1. Ποιο στοιχείο χρησιμοποιούμε για αναπαραγωγή ήχου;

• α) <sound>
• β) <audio>
• γ) <music>

2. Ποιο στοιχείο χρησιμοποιούμε για αναπαραγωγή βίντεο;

• α) <movie>
• β) <media>
• γ) <video>

3. Ποια ιδιότητα εμφανίζει τα χειριστήρια αναπαραγωγής;

• α) controls
• β) player
• γ) buttons

4. Ποιο στοιχείο χρησιμοποιείται για να ορίσουμε πολλαπλές πηγές;

• α) <file>
• β) <source>
• γ) <format>

5. Ποια ιδιότητα χρησιμοποιείται για την εικόνα προεπισκόπησης ενός video;

• α) thumbnail
• β) preview
• γ) poster

6. Ποια ιδιότητα ενεργοποιεί την επανάληψη αναπαραγωγής;

• α) loop
• β) repeat
• γ) replay

7. Ποιο στοιχείο χρησιμοποιούμε για υπότιτλους;

• α) <caption>
• β) <track>
• γ) <text>

8. Ποια μορφή αρχείου χρησιμοποιεί το WebVTT;

• α) .vtt
• β) .txt
• γ) .srt

9. Ποια ιδιότητα χρησιμοποιείται για να σιγάσουμε ένα video;

• α) silent
• β) volume="0"
• γ) muted

10. Ποια CSS ιδιότητα βοηθά ένα video να προσαρμόζεται στο πλάτος του container;

• α) width: 100%
• β) position: fixed
• γ) display: none

Απαντήσεις: 1-β, 2-γ, 3-α, 4-β, 5-γ, 6-α, 7-β, 8-α, 9-γ, 10-α.

---

13. Τι μάθαμε σήμερα;

Στο HTML-011 γνωρίσαμε τον κόσμο των πολυμέσων στην HTML5.

• Το <audio> για αναπαραγωγή ήχου.
• Το <video> για αναπαραγωγή βίντεο.
• Το <source> για πολλαπλές πηγές αρχείων.
• Τα MIME types και τη σημασία της συμβατότητας.
• Τις ιδιότητες controls, autoplay, muted, loop και preload.
• Το poster για εικόνα προεπισκόπησης.
• Το playsinline για κινητές συσκευές.
• Το <track> και το WebVTT για υπότιτλους.
• Τις βασικές αρχές προσβασιμότητας.
• Τη δημιουργία responsive video με CSS.

Επόμενο μάθημα

Στο επόμενο μάθημα θα συνεχίσουμε την εξερεύνηση της HTML με ακόμη πιο σύνθετες τεχνικές και πρακτικά παραδείγματα.

Κάθε νέο στοιχείο που μαθαίνουμε είναι ένα ακόμη εργαλείο για να δημιουργούμε καλύτερες ιστοσελίδες!

Jerry's CodeLab
LEARN · EXPERIMENT · CREATE