Λύσεις — Εφαρμογή 13 · Πολυμεσική πανδαισία — audio ΚΑΙ video (σελ. 69–72) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 13 · Πολυμεσική πανδαισία — audio ΚΑΙ video (σελ. 69–72)

Ο κώδικας-λύση και ασκήσεις (audio/video, controls/autoplay/loop/muted/poster, source & εναλλακτικές μορφές, MP3/MP4). Γλώσσα HTML5.

Ο κώδικας-λύση της Εφαρμογής 13

Ερώτηση: Ενσωματώστε έναν ήχο (MP3+Ogg) με χειριστήρια και ένα βίντεο (MP4) με εικόνα προεπισκόπησης.

Απάντηση:

• Ο φυλλομετρητής σας δεν υποστηρίζει audio.
• Ο φυλλομετρητής σας δεν υποστηρίζει video.

Σύνοψη: (ενδεικτική)

Κριτήρια αξιολόγησης:

• Κριτήριο: audio/video με controls + <source src/type> + fallback message.

Παράμετροι audio

Ερώτηση: Τι κάνουν οι παράμετροι controls, autoplay και loop του

Απάντηση:

• controls: εμφανίζει τα πλήκτρα ελέγχου (play/pause, γραμμή χρόνου, ένταση).
• autoplay: ξεκινά αυτόματα μόλις φορτώσει η σελίδα.
• loop: επαναλαμβάνεται διαρκώς.

Σύνοψη: (ενδεικτική) controls: χειριστήρια player. autoplay: αυτόματη έναρξη. loop: συνεχής επανάληψη.

Κριτήρια αξιολόγησης:

• Κριτήριο: σωστή περιγραφή controls/autoplay/loop (παράμετροι χωρίς τιμή).

Το στοιχείο source

Ερώτηση: Γιατί βάζουμε πολλά μέσα σε ένα

Απάντηση:

• Κάθε <source src="…" type="…"> περιγράφει διαφορετική μορφή του ίδιου αρχείου (π.χ. MP3 και Ogg).
• Επειδή δεν υποστηρίζουν όλοι οι browsers τις ίδιες μορφές, ο browser διαλέγει την πρώτη που υποστηρίζει → παίζει παντού. Το κείμενο μετά τα source είναι μήνυμα ασυμβατότητας.

Σύνοψη: (ενδεικτική) Για να δίνουμε εναλλακτικές μορφές (π.χ. MP3+Ogg)· ο browser διαλέγει όποια υποστηρίζει (συμβατότητα).

Κριτήρια αξιολόγησης:

• Κριτήριο: εναλλακτικές μορφές για συμβατότητα + ρόλος fallback.

Επιπλέον παράμετροι video

Ερώτηση: Ποιες επιπλέον παραμέτρους (πέρα από audio) έχει το

Απάντηση:

• Πέρα από controls/autoplay/loop: muted (χωρίς ήχο), poster="URL" (εικόνα προεπισκόπησης), width/height.
• Η μορφή MP4 υποστηρίζεται από τους περισσότερους browsers (για ήχο, το MP3).

Σύνοψη: (ενδεικτική) video: επιπλέον muted, poster (εικόνα προεπισκόπησης), width/height. Ευρέως υποστηριζόμενη μορφή: MP4 (ήχος: MP3).

Κριτήρια αξιολόγησης:

• Κριτήριο: muted/poster + MP4 ως ευρέως υποστηριζόμενη μορφή.