Σχεδιασμός και Ανάπτυξη Ιστότοπων

Transcript

1 Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων HTML Πολυμέσα Παρουσίαση 12 η 1 Βελώνης Γεώργιος Καθηγητής

2 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τι ετικέτες στον κώδικά σας. Deprecated tags: Αντικαταστήστε αυτές τις ετικέτες πριν καταστούν παρωχημένες. Αυτό γίνεται για να εξασφαλιστεί η μελλοντική συμβατότητα. Restored/ Redefined tags in HTML5: Αναθεωρήστε αυτές τις ετικέτες στον κώδικά σας, όπως καθορίστηκαν στην HTML5 και ως εκ τούτου έχουν νέες έννοιες. 2

3 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags: <embed>, <audio>, <video> Deprecated tags: ιδιότητες align, archive, border, classid, codebase, codetype, declare, hspace, standby, vspace (<object>), type, valuetype (<param>) 3

4 Βελώνης Γεώργιος Καθηγητής Χρήσιμοι Ορισμοί Deprecated και Obsolete Deprecated καλείται ένα στοιχείο ή παράμετρος που θεωρείται ξεπερασμένο. Τα deprecated στοιχεία μπορεί να καταστούν άνευ αντικειμένου στο μέλλον, αλλά οι browsers θα πρέπει να συνεχίσουν να τα υποστηρίζουν για λόγους συμβατότητας με παλαιότερες εκδόσεις. Obsolete καλείται ένα στοιχείο ή χαρακτηριστικό που δεν έχει καμία εγγύηση για τη μελλοντική του από τους browsers υποστήριξη και πλέον δεν ορίζεται στην προδιαγραφή W3C. 4

5 Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google Chrome 52.0 Mozilla FireFox 48.0 Yandex 16.7 Internet Explorer 11.0 Safari Opera

6 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Τι είναι Πολυμέσα (Multimedia) Μορφές Πολυμέσων (Multimedia Formats) Γενικά Μορφές Βίντεο (Video Formats) Μορφές Ήχου (Audio Formats) HTML Plug-ins Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτες <embed>, <object>, <param> Ενσωμάτωση Flash βίντεο Ενσωμάτωση ψηφιακού ήχου Ετικέτα <sound> 6

7 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> HTML YouTube βίντεο Εισαγωγή Ενσωμάτωση βίντεο Αυτόματη αναπαραγωγή Επανάληψη αναπαραγωγής Ξεκίνημα αναπαραγωγής από συγκεκριμένο σημείο Ενσωμάτωση λίστας αναπαραγωγής (playlist) Αναπαραγωγή με τη χρήση των ετικετών <object> και <embed> 7

8 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Ενσωμάτωση κινούμενης εικόνας (animated gif) Δημιουργία Link αναπαραγωγής ήχου ή βίντεο 8

9 Τι είναι Πολυμέσα (Multimedia) Πολυμέσα στο διαδίκτυο είναι ο ήχος, η μουσική, το βίντεο, οι ταινίες και τα κινούμενα σχέδια. Τα στοιχεία αυτά εμφανίζονται πολύ συχνά στις ιστοσελίδες σε διαφορετικούς τύπους και μορφές, όπως.swf,.wav,.mp3,.mp4,.mpg,.wmv και.avi. Οι πρώτοι browsers στο Web υποστήριζαν ένα ενιαίο χρώμα και ένα μόνο τύπο γραμματοσειράς, ενώ αργότερα υποστήριξαν περισσότερα χρώματα, γραμματοσειρές, αλλά και εικόνες. Ο ήχος, το βίντεο και το animation είναι τα νεότερα στοιχεία που προστέθηκαν και έχουν αντιμετωπιστεί με διαφορετικό τρόπο από τους δημοφιλέστερους browsers. Υποστηρίζονται πολλές και διαφορετικές μορφές, ενώ μερικές μορφές απαιτούν επιπλέον βοηθητικά προγράμματα (plug-ins) για να λειτουργήσουν, προβλήματα που ευτυχώς λύνει η HTML5. 9

10 Μορφές Πολυμέσων (Multimedia Formats) Τα στοιχεία πολυμέσων (όπως ήχου ή βίντεο) αποθηκεύονται σε αρχεία πολυμέσων και ο πιο συνηθισμένος τρόπος για να ανακαλυφθεί ο τύπος ενός αρχείου, είναι να εξεταστεί η επέκτασή του. Από τα στοιχεία που προαναφέρθηκαν, η πιο κοινή μορφή βίντεο είναι το MP4, το οποίο είναι μια από τις νέες και επερχόμενες μορφές βίντεο (αλλά και ήχου) στο διαδίκτυο, η οποία συνιστάται από το YouTube, υποστηρίζεται από Flash players αλλά και από την HTML5. Το MP3 είναι η νεώτερη μορφή για ηχογραφημένη με συμπίεση μουσική και σαν όρος έχει γίνει συνώνυμο με την ψηφιακή μουσική. 10

11 Μορφές Πολυμέσων Μορφές Βίντεο (Video Formats) Μορφή Τύπος αρχείου Περιγραφή MPEG AVI.mpg,.mpeg.avi Αναπτύχθηκε από την ομάδα Moving Pictures Expert Group και ήταν η πρώτη δημοφιλή μορφή βίντεο στο Web. Δημιουργήθηκε για να υποστηρίζεται απ όλους τους browsers, αλλά δεν υποστηρίζεται από την HTML5. Audio Video Interleave. Αναπτύχθηκε από τη Microsoft και συνήθως χρησιμοποιείται σε βίντεο κάμερας και την τηλεόραση. Παίζει καλά σε υπολογιστές με Windows, αλλά όχι σε browsers χωρίς το κατάλληλο plug-in. 11

12 Μορφές Πολυμέσων Μορφές Βίντεο (Video Formats) Μορφή WMV Τύπος αρχείου Περιγραφή.wmv QuickTime.mov Ogg.ogg Windows Media Video - Ισχύει ότι και με τη μορφή AVI. Αναπτύχθηκε από την Apple και συνήθως χρησιμοποιείται σε βίντεο κάμερες και τηλεόρασης. Παίζει καλά σε υπολογιστές της Apple, αλλά όχι σε browsers χωρίς το κατάλληλο plug-in. Theora Ogg. Αναπτύχθηκε από το ίδρυμα Xiph.Org και υποστηρίζεται από την HTML5. 12

13 Μορφές Πολυμέσων Μορφές Βίντεο (Video Formats) Μορφή RealVideo.rm, Flash Τύπος αρχείου Περιγραφή.ram.swf,.flv Αναπτύχθηκε από την Real Media για να επιτρέπει βίντεο συνεχούς ροής (streaming), με χαμηλό εύρος ζώνης. Χρησιμοποιείται ακόμα και για απευθείας σύνδεση βίντεο και διαδικτυακή τηλεόραση, αλλά όχι σε browsers χωρίς το κατάλληλο plug-in. Αναπτύχθηκε από την Macromedia και συχνά απαιτεί ένα επιπλέον στοιχείο (plugin) για να παίξει σε browsers στο Web. 13

14 Μορφές Πολυμέσων Μορφές Βίντεο (Video Formats) Μορφή Τύπος αρχείου Περιγραφή WebM MPEG-4 ή MP4.webm.mp4 Αναπτύχθηκε από τους «γίγαντες» του Web, Mozilla, Opera, Adobe και Google και υποστηρίζεται από την HTML5. Αναπτύχθηκε από την Moving Pictures Expert Group βασιζόμενο στο QuickTime. Συνήθως χρησιμοποιείται σε νεότερης τεχνολογίας βίντεο κάμερες και τηλεόρασης. Υποστηρίζεται από όλους τους HTML5 browsers και συνιστάται από το YouTube. 14

15 Μορφές Πολυμέσων Μορφές Ήχου (Audio Formats) Μορφή MIDI RealAudio Τύπος αρχείου Περιγραφή.mid.midi.rm.ram Musical Instrument Digital Interface. Είναι η κύρια μορφή για όλες τις συσκευές ηλεκτρονικής μουσικής, όπως συνθεσάιζερ και κάρτες ήχου υπολογιστών. Τα αρχεία MIDI δεν περιέχουν ήχο, αλλά ψηφιακές νότες που μπορούν να παιχτούν ηλεκτρονικά. Παίζουν καλά σε όλους τους υπολογιστές και τις μουσικές συσκευές, αλλά όχι σε browsers χωρίς το κατάλληλο plug-in. Αναπτύχθηκε από την Real Media για να επιτρέψει τη ροή του ήχου με χαμηλό εύρος ζώνης, αλλά δεν παίζει σε browsers χωρίς το κατάλληλο plug-in. 15

16 Μορφές Πολυμέσων Μορφές Ήχου (Audio Formats) Μορφή Τύπος αρχείου Περιγραφή WAV Ogg MP3.wav.ogg.mp3 Αναπτύχθηκε από την IBM και τη Microsoft. Παίζει καλά σε Windows, Macintosh και Linux Λ.Σ. και υποστηρίζεται από HTML5. Αναπτύχθηκε από το ίδρυμα Xiph.Org και υποστηρίζεται από την HTML5. Τα MP3 αρχεία είναι στην πραγματικότητα το ηχητικό μέρος των αρχείων MPEG και αποτελούν την πιο δημοφιλής μορφή για συσκευές αναπαραγωγής μουσικής. Συνδυάζει την καλή συμπίεση (μικρά αρχεία) με την υψηλή ποιότητα και υποστηρίζεται από όλους τους browsers. 16

17 Μορφές Πολυμέσων Μορφές Ήχου (Audio Formats) Μορφή Τύπος αρχείου Περιγραφή MP4.mp4 Το MP4 είναι μια μορφή βίντεο, αλλά μπορεί επίσης να χρησιμοποιηθεί και για τον ήχο. Είναι η επερχόμενη μορφή βίντεο στο Διαδίκτυο και αυτό οδηγεί σε αυτόματη υποστήριξη του MP4 ήχου απ όλους τους bowsers στο Web. Από το πρότυπο της HTML5 υποστηρίζονται μονό οι MP4, WebM και Ogg μορφές βίντεο και MP3, WAV και Ogg μορφές ήχου. 17

18 HTML Plug-ins Ένας HTML Helper ή αλλιώς plug-in, είναι ένα μικρό κομμάτι λογισμικού το οποίο είναι σχεδιασμένο να εγκαθίσταται σε ένα μεγαλύτερο πρόγραμμα, με σκοπό να του προσδώσει νέες δυνατότητες, ώστε να εκτελεί λειτουργίες τις οποίες αδυνατούσε να εκτελέσει πριν την εγκατάσταση αυτής της βοηθητικής εφαρμογής. Τα plug-ins, σχεδόν πάντα, προέρχονται από διαφορετικό κατασκευαστή και σκοπός τους είναι να επεκτείνουν τη λειτουργικότητα ενός Web browser για την αναπαραγωγή ήχου και βίντεο. Παραδείγματα γνωστών plug-ins είναι το Adobe Flash Player και QuickTime. Ένα plug-in μπορεί να προστεθεί σε μία ιστοσελίδα μέσω της ετικέτας <object> ή της ετικέτα <embed>, επιτρέποντας διάφορους ελέγχους ρυθμίσεων, όπως κίνηση εμπρός ή πίσω, παύση, διακοπή κ.ά. 18

19 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <embed> Η ετικέτα <embed> υποστηρίζεται απ όλους τους γνωστούς browsers και ορίζει ένα ενσωματωμένο αντικείμενο μέσα σε ένα έγγραφο HTML. Αν και υποστηρίζεται από τους browsers για μεγάλο χρονικό διάστημα, ωστόσο, δεν ήταν μέρος των προδιαγραφών της HTML πριν την HTML5. Σημειωτέον, η ετικέτα <embed> δεν έχει ετικέτα κλεισίματος και δεν μπορεί να περιέχει εναλλακτικό κείμενο. Σύνταξη: <embed src="url" type="media_type" height="pixels" width="pixels"/> 19 Σημείωση: Ο Firefox υποστηρίζει μόνο Flash αρχεία

20 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <embed> Ιδιότητες: height: Ορίζει το ύψος της περιοχής που θα εμφανίζεται το εξωτερικό περιεχόμενο (σε px). src: Ορίζει τη διεύθυνση του εξωτερικού αρχείου που θα ενσωματωθεί. type: Ορίζει τον τύπο του περιεχομένου (πληροφορίες εδώ: width: Ορίζει το μήκος της περιοχής που θα εμφανίζεται το εξωτερικό περιεχόμενο (σε px). Παράδειγμα: <embed src="./sounds/one.mp3" width="250" height="50"/> 20

21 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <object> Η ετικέτα <object> υποστηρίζεται απ όλους τους browsers και ορίζει ένα ενσωματωμένο αντικείμενο μέσα σε ένα έγγραφο HTML. Χρησιμοποιείται για την ενσωμάτωση plug-ins (όπως Java applets, αναγνώστες PDF, Flash players) σε ιστοσελίδες. Σύνταξη: <object data= "URL" ιδιότητες></object> Το κείμενο μεταξύ της ετικέτας αρχής και τέλους εμφανίζεται όταν o browser του χρήστη δεν υποστηρίζει την ετικέτα <object>. 21 Σημείωση: Ο Firefox υποστηρίζει μόνο Flash αρχεία

22 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <object> Ιδιότητες που υποστηρίζονται από την HTML5: data: Ορίζει το URL όπου υπάρχουν τα δεδομένα του αντικειμένου. Σύνταξη: <object data="url"> form: Μπορεί να πάρει σαν τιμές τις τιμές των id των φορμών στις οποίες ανήκει το πεδίο, χωρισμένες με κενό. Σύνταξη: <object form="form_id"> Προς το παρόν δεν υποστηρίζεται από κανέναν browser. height: Ορίζει το ύψος του αντικειμένου. Σύνταξη: <object height="pixels"> name: Ορίζει ένα μοναδικό όνομα για το αντικείμενο. Σύνταξη: <object name="όνομα"> 22

23 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <object> Ιδιότητες που υποστηρίζονται από την HTML5 συνέχεια: type: Ορίζει τον τύπο περιεχομένου των δεδομένων. Σύνταξη: <object type="media_type"> Παράδειγμα: <object data="face.gif" type="image/gif"> </object> usemap: Ορίζει το URL στο οποίο υπάρχουν σημεία επάνω στο αντικείμενο τα οποία θα είναι σύνδεσμοι (links). Σύνταξη: <object usemap="#όνομα_χάρτη"> width: Ορίζει το μήκος του αντικειμένου. Σύνταξη: <object width="pixels"> 23

24 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <object> Ιδιότητες που ΔΕΝ υποστηρίζονται από την HTML5 και αντ αυτών για κάποιες χρησιμοποιούνται CSS: align: Ορίζει την στοίχιση μεταξύ του αντικειμένου και των στοιχείων της σελίδας γύρω από αυτό. Σύνταξη: <object align="left right middle top bottom"> Σύνταξη CSS: <object style="vertical-align:left right middle top bottom"> archive: Ορίζει μια λίστα από URLs, χωρισμένα μεταξύ τους με κενά, η οποία περιέχει τους πόρους που σχετίζονται με το αντικείμενο, ώστε αυτό να μπορέσει να τρέξει σωστά. Σύνταξη: <object archive="url"> Παράδειγμα: <object classid="java:arcade1.class" archive="arcade1.jar"></object> 24

25 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <object> Ιδιότητες που ΔΕΝ υποστηρίζονται από την HTML5 και αντ αυτών για κάποιες χρησιμοποιούνται CSS (συνέχεια 1): border: Ορίζει το πάχος του πλαισίου γύρω από το αντικείμενο Σύνταξη: <object border="pixels"> Σύνταξη CSS: <object style="border:πάχος στυλ χρώμα"> Παράδειγμα: <object style="border:6px double red"> classid: Ορίζει την τιμή της κλάσης του αντικειμένου (έτσι όπως υπάρχει στην Registry των Windows), ή το URL της θέσης του. Χρησιμοποιείται συνήθως για να διασφαλίσει ότι ο browser έχει τη σωστή έκδοση του στοιχείου ελέγχου. Σύνταξη: <object classid="class_id URL"> Παράδειγμα: <object classid="clsid:8ad9c e-11d1- B3E F499D93" width="250" height="250"> </object > 25

26 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <object> Ιδιότητες που ΔΕΝ υποστηρίζονται από την HTML5 και αντ αυτών για κάποιες χρησιμοποιούνται CSS (συνέχεια 2): codebase: Ορίζει το URL που βρίσκεται ο κώδικας για το αντικείμενο. Σύνταξη: <object codebase="url"> Παράδειγμα: <object codebase=" products/plugin/autodl/jinstall-1_5_0-windowsi586.cab#version=1,5,0,0"> </object> codetype: Ορίζει τον τύπο περιεχομένου του κώδικα. Σύνταξη: <object codetype="media_type"> Παράδειγμα: <object data="cv.doc" codetype="application/ msword"></object> 26

27 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <object> Ιδιότητες που ΔΕΝ υποστηρίζονται από την HTML5 και αντ αυτών για κάποιες χρησιμοποιούνται CSS (συνέχεια 3): declare: Ορίζει ότι πρέπει να δηλωθεί μόνο το αντικείμενο, δεν δημιουργείται ή τεκμηριώνεται μέχρι να χρειαστεί. Σύνταξη: <object declare="declare"> hspace: Ορίζει το κενό μεταξύ του αντικειμένου και των στοιχείων της σελίδας που βρίσκονται αριστερά και δεξιά του αντικειμένου. Σύνταξη: <object hspace="pixels"> Σύνταξη CSS: <object style="margin: 0px οριζόντιο_κενόpx"> Παράδειγμα: <object style="margin: 0px 50px"> 27

28 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <object> Ιδιότητες που ΔΕΝ συμπεριλαμβάνονται στην HTML5 και αντ αυτών για κάποιες χρησιμοποιούνται CSS (συνέχεια 4): standby: Ορίζει ένα κείμενο το οποίο θα εμφανιστεί κατά την φόρτωση του αντικειμένου. Σύνταξη: <object standby="κείμενο"> vspace: Ορίζει το κενό μεταξύ του αντικειμένου και των στοιχείων της σελίδας που βρίσκονται επάνω και κάτω από αυτό. Σύνταξη: <object vspace="pixels"> Σύνταξη CSS: <object style="margin: κατακόρυφο_κενόpx 0px"> Παράδειγμα: <object style="margin: 50px 0px"> 28

29 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <param> Η ετικέτα <param> χρησιμοποιείται για τον καθορισμό των παραμέτρων των plugins που είναι ενσωματωμένα σε ένα <object> στοιχείο. Η ετικέτα <param> υποστηρίζεται απ όλους τους γνωστούς browsers, ωστόσο, η μορφή αρχείου που ορίζεται στο <object> μπορεί να υποστηρίζεται από κάποιους browsers, ενώ από κάποιους άλλους όχι. Ιδιότητες που υποστηρίζονται από την HTML5: name: Ορίζει ένα μοναδικό όνομα για μια παράμετρο. Αυτή η ιδιότητα χρησιμοποιείται μαζί με την ιδιότητα value για να καθορίσει τις παραμέτρους για το plugin που καθορίζεται με την ετικέτα <object>. Η τιμή της ιδιότητας name μπορεί να είναι οποιοδήποτε όνομα που υποστηρίζεται από το καθορισμένο αντικείμενο. Σύνταξη: <param name="όνομα"/> 29

30 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <param> Ιδιότητες που υποστηρίζονται από την HTML5 συνέχεια: value: Ορίζει την τιμή της παραμέτρου. Σύνταξη: <param value="τιμή"/> Παράδειγμα:.. <object data="./mp3/snap.mp3" width="180" height="50" > <param name="autoplay" value="false"/> <param name="controller" value="false"/> </object>.. 30

31 Ενσωμάτωση ψηφιακού ήχου/ βίντεο Ετικέτα <param> Ιδιότητες που ΔΕΝ υποστηρίζονται από την HTML5: type: Ορίζει τον τύπο περιεχομένου των δεδομένων για την παράμετρο. Σύνταξη: <param type="media_type"/> valuetype: Ορίζει τον τύπο της τιμής. Σύνταξη: <param valuetype="data ref object"/> Η HTML5 περιλαμβάνει επίσης δύο νέες ιδιότητες για την αναπαραγωγή ήχου ή βίντεο: Την <audio> και την <video>. 31

32 Ενσωμάτωση Flash βίντεο Το Adobe Flash είναι ένα «βαρύ» πρόσθετο, γεμάτο κενά ασφαλείας και έλλειψη σταθερότητας, που προκαλεί browser crashes, κακές επιδόσεις και αυξημένη κατανάλωση ρεύματος. Αυτό οδήγησε όλους τους γνωστούς browser, όπως Chrome, Firefox κ.ά. στη σταδιακή παύση της υποστήριξής του. Η αναπαραγωγή των βίντεο γίνεται πλέον από τον HTML5 player και για την αναπαραγωγή των αρχείων Flash, ζητείται από το χρήστη η ενεργοποίησή του. Για την αναπαραγωγή του βίντεο θα πρέπει ο χρήστης να κάνει κλικ στο link "Activate Adobe Flash" 32

33 Ενσωμάτωση Flash βίντεο Υπάρχουν δύο τρόποι για την ενσωμάτωση Flash βίντεο σε μια ιστοσελίδα, ο ένας με την ετικέτα <embed> και ο άλλος με την ετικέτα <object>. Εδώ θα γίνει αναφορά στη μη τυποποιημένη μέθοδο της <embed>. Σύνταξη: <embed src="url" ιδιότητες></embed> Ιδιότητες: height, width, src: Βλέπε διαφάνεια 16. loop: Η τιμή true (default τιμή) επαναλαμβάνει το βίντεο συνεχώς, ενώ η false με επιλογή του χρήστη, κάνοντας κλικ στο κουμπί αναπαραγωγής. Σύνταξη: <embed src="url" loop="true false"></embed> 33

34 Ενσωμάτωση Flash βίντεο Ιδιότητες (συνέχεια 1): play: Η τιμή true (default τιμή) αναπαράγει το βίντεο αυτόματα, ενώ το αντίθετο η false. Σύνταξη: <embed src="url" play="true false"></embed> pluginspage: Δίνει τη θέση του Flash Player plugin, για κατέβασμα και εγκατάσταση (όταν αυτό δεν έχει εγκατασταθεί), ώστε να γίνει αναπαραγωγή του αρχείου Flash. Σύνταξη: <embed src="url" pluginspage= " </embed> quality: Καθορίζει την ποιότητα του βίντεο που θα αναπαραχθεί. Σύνταξη: <embed src="url" quality="low autolow autohigh high medium best"> </embed> 34

35 Ενσωμάτωση Flash βίντεο Ιδιότητες (συνέχεια 2): type: Δείχνει τον τύπο των πολυμέσων για το αρχείο Flash, που αναφέρεται στην ιδιότητα src, βάσει της επέκτασης των αρχείων βίντεο. Σύνταξη: <embed src="url" type="application/x-shockwaveflash"> </embed> 35

36 Ενσωμάτωση Flash βίντεο Παράδειγμα:.. <embed src="rabbit.swf" quality="best" type="application/xshockwave-flash" width="640" height="368" play="true" loop="false" pluginspage= " </embed>.. 36

37 Ενσωμάτωση ψηφιακού ήχου Ετικέτα <audio> Η ετικέτα <audio> ορίζει ήχο σε μια σελίδα, όπως τη μουσική ή άλλα audio streams. Προς το παρόν, υποστηρίζει μόνο τρεις μορφές αρχείων ήχου: MP3, WAV και Ogg. Μπορεί να γραφεί κείμενο μέσα στις ετικέτες αρχής και τέλους, το οποίο εμφανίζεται στους browsers που δεν υποστηρίζουν την ετικέτα αυτή. Σύνταξη: <audio ιδιότητες></audio> Ιδιότητες: autoplay: Η αναπαραγωγή του αρχείου ήχου θα ξεκινήσει μόλις ολοκληρωθεί η φόρτωσή του. Σύνταξη: <audio autoplay="autoplay"> 37

38 Ενσωμάτωση ψηφιακού ήχου Ετικέτα <audio> Ιδιότητες (συνέχεια 1): controls: Εμφανίζει τα κουμπιά ελέγχου της κονσόλας ήχου, όπως το play, stop, seeking και volume. Σύνταξη: <audio controls="controls"> loop: Κάθε φορά που τελειώνει η αναπαραγωγή ήχου, θα αρχίζει από την αρχή. Σύνταξη: <audio loop="loop"> muted: Η ένταση του ήχου πηγαίνει στο «μηδέν». Μπορείτε, κάνοντας κλικ στο σημείο έντασης που θέλετε, να την ανεβάσετε. Σύνταξη: <audio muted="muted"> 38

39 Ενσωμάτωση ψηφιακού ήχου Ετικέτα <audio> Ιδιότητες (συνέχεια 2): preload: Το αρχείο ήχου θα φορτωθεί όταν φορτωθεί η σελίδα και αγνοείται όταν υπάρχει η ιδιότητα autoplay. Σύνταξη: <audio preload="auto metadata none"> auto: Ο δημιουργός πιστεύει ότι ο browser θα πρέπει να φορτώσει ολόκληρο το αρχείο ήχου όταν η σελίδα φορτώνει. metadata: Ο δημιουργός πιστεύει ότι ο browser θα πρέπει να φορτώσει μόνο τα μεταδεδομένα, όταν η σελίδα φορτώνει. none: Ο δημιουργός πιστεύει ότι ο browser ΔΕΝ πρέπει να φορτώσει το αρχείο ήχου όταν η σελίδα φορτώνει. src: Ορίζει το URL του αρχείου ήχου. Σύνταξη: <audio src="url"> 39

40 Ενσωμάτωση ψηφιακού ήχου Ετικέτα <audio> Browser Internet Explorer MP3 Wav Ogg ΝΑΙ ΌΧΙ ΌΧΙ Chrome ΝΑΙ ΝΑΙ ΝΑΙ Firefox ΝΑΙ ΝΑΙ ΝΑΙ Safari ΝΑΙ ΝΑΙ ΌΧΙ Opera ΝΑΙ ΝΑΙ ΝΑΙ Yandex ΝΑΙ ΝΑΙ ΝΑΙ Browsers και υποστηριζόμενες μορφές ήχου Μορφή Τύπος MIME MP3 audio/mpeg Ogg audio/ogg Wav audio/wav Τύποι ΜΙΜΕ για μορφές ήχου 40

41 Ενσωμάτωση ψηφιακού ήχου Ετικέτα <audio> Ορισμένες μορφές αρχείων ήχου μπορεί να αναγνωρίζονται από κάποιους browsers, ενώ από κάποιους άλλους όχι. Για να μπορεί ο ήχος να λειτουργήσει σε όλους τους browsers, πρέπει να γίνει χρήση της ετικέτας <source>, μέσα στην ετικέτα <audio>. Με αυτή την ετικέτα μπορούν να συνδεθούν διαφορετικά αρχεία ήχου και ο browser θα χρησιμοποιήσει την πρώτη αναγνωρισμένη μορφή. Σύνταξη: <source src="url" type="media_type"/> 41

42 Ενσωμάτωση ψηφιακού ήχου Ετικέτα <audio> Παράδειγμα:.. <audio controls="controls" loop="loop"> <source src= "cardinal.ogg" type="audio/ogg"/> <source src="cardinal.mp3" type="audio/mpeg"/> <source src="cardinal.wav" type="audio/wav"/> Ο browser που χρησιμοποιείται δεν υποστηρίζει την ετικέτα <strong>audio</strong> </audio>.. 42

43 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Η ετικέτα <video> εισάγει στη σελίδα ένα βίντεο. Μπορεί να γραφεί κείμενο μέσα στις ετικέτες αρχής και τέλους, το οποίο εμφανίζεται στους browsers που δεν υποστηρίζουν την ετικέτα αυτή. Σύνταξη: <video ιδιότητες></video> Ιδιότητες: autoplay, controls, loop, muted, preload, src: Ισχύει ότι και για την ετικέτα <audio> (βλέπε διαφάνειες 28 έως 30) height: Ορίζει το ύψος του βίντεο (σε px). Σύνταξη: <video height="τιμή"></video> width: Ορίζει το μήκος του βίντεο (σε px). Σύνταξη: <video width="τιμή"></video> 43

44 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Ιδιότητες συνέχεια: poster: Η ιδιότητα αυτή ορίζει μια εικόνα που θα εμφανίζεται, ενώ το βίντεο κατεβαίνει, ή έως ότου ο χρήστης πατήσει το κουμπί αναπαραγωγής. Εάν αυτή η ιδιότητα δεν περιλαμβάνεται, τότε το πρώτο καρέ του βίντεο θα χρησιμοποιηθεί ως εικόνα. Σύνταξη: <video poster="url"> Σημείωση: Η ιδιότητα autoplay δεν λειτουργεί σε mobile συσκευές, όπως το ipad και το iphone. 44

45 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Browser Internet Explorer MP4 WebM Ogg ΝΑΙ ΌΧΙ ΌΧΙ Chrome ΝΑΙ ΝΑΙ ΝΑΙ Firefox ΝΑΙ ΝΑΙ ΝΑΙ Safari ΝΑΙ ΌΧΙ ΌΧΙ Opera ΝΑΙ ΝΑΙ ΝΑΙ Yandex ΝΑΙ ΝΑΙ ΝΑΙ Browsers και υποστηριζόμενες μορφές ήχου Μορφή Τύπος MIME MP4 video/mp4 Ogg video/ogg WebM video/webm Τύποι ΜΙΜΕ για μορφές ήχου 45

46 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Η ετικέτα <source>, όταν συνδυάζεται με την ετικέτα <video>, λειτουργεί όπως και με την ετικέτα <audio>. Δηλαδή, χρησιμοποιείται για την περίπτωση που μορφές αρχείων βίντεο μπορεί να αναγνωρίζονται από κάποιους browsers, ενώ από κάποιους άλλους όχι. Για να μπορεί ένα βίντεο να λειτουργήσει σε όλους τους browsers, θα πρέπει να γίνει χρήση της ετικέτας <source>, μέσα στην ετικέτα <video>. Με αυτή την ετικέτα μπορούν να συνδεθούν διαφορετικά αρχεία βίντεο και ο browser θα χρησιμοποιήσει την πρώτη αναγνωρισμένη μορφή. Σύνταξη: <source src="url" type="media_type"/> 46

47 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Η ετικέτα <track>, ορίζει κομμάτια κειμένου για τα στοιχεία πολυμέσων (<audio> και <video>). Αυτή η ιδιότητα χρησιμοποιείται για να ορίσει υπότιτλους, αρχεία λεζάντας ή άλλα αρχεία που περιέχουν κείμενο, το οποίο θα πρέπει να είναι ορατό, όταν αναπαράγεται το βίντεο. Σύνταξη: <track ιδιότητες/> Ιδιότητες: default: Όταν χρησιμοποιείται, ορίζει ότι το αρχείο με τους υπότιτλους θα ενεργοποιηθεί αυτόματα και πρέπει να χρησιμοποιείται μόνο μία φορά σε μία ομάδα από <track> ετικέτες. 47

48 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Ιδιότητες (συνέχεια 1): Σύνταξη: <track src="υπότιτλοι.vtt srt" default="default"/> kind: Ορίζει το είδος του κομματιού κειμένου. Σύνταξη: <track src="υπότιτλοι.vtt srt" kind="captions chapters descriptions metadata subtitles" srclang="κωδικός_γλώσσας"/> captions: Ορίζει τη μετάφραση του διαλόγου και ηχητικά εφέ (κατάλληλο για κωφούς χρήστες). chapters: Ορίζει τους τίτλους των κεφαλαίων (κατάλληλο για την πλοήγηση μέσα στο βίντεο). descriptions: Ορίζει την κειμενική περιγραφή του περιεχομένου του βίντεο (κατάλληλο για τυφλούς χρήστες). 48

49 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Ιδιότητες (συνέχεια 2): kind: metadata: Ορίζει περιεχόμενο που χρησιμοποιείται από scripts και δεν είναι ορατό για το χρήστη. subtitles: Ορίζει υπότιτλους και χρησιμοποιείται για να τους εμφανίσει σε ένα βίντεο. label: Ορίζει την ετικέτα του κειμένου στη λίστα υπότιτλων, για την επιλογή γλώσσας. Η ετικέτα αυτή χρησιμοποιείται από τον browser, όταν καταχωρεί τη λίστα με τις ετικέτες κειμένου. Σύνταξη: <track src="υπότιτλοι.vtt srt" kind="captions chapters descriptions metadata subtitles" srclang="κωδικός_γλώσσας" label="τίτλος_κομματιού_κειμένου"/> 49

50 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Ιδιότητες (συνέχεια 3): src: Η απαιτούμενη ιδιότητα src ορίζει τη διεύθυνση URL του αρχείου κειμένου. Σύνταξη: <track src="υπότιτλοι.vtt srt"/> Για το πώς ορίζουμε ένα vtt αρχείο: srclang : Ορίζει τη γλώσσα των δεδομένων του κομματιού κειμένου και είναι απαραίτητη εάν η ιδιότητα kind="subtitles". Σύνταξη: <track src="υπότιτλοι.vtt srt " kind="subtitles" srclang="κωδικός_γλώσσας (2 χαρακτήρων)"/> Για ISO Language Codes: ή 50

51 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Παράδειγμα: <video width="300" height="220" controls="controls"> <source src="mclaren.mp4" type="video/mp4"/> <source src="mclaren.ogg" type="video/ogg"/> <track src="subtitles_en.srt" kind=" captions" srclang="en" label="english" default="default" /> <track src="subtitles_el.srt" kind="captions" srclang="el" label="greek"/> </video> 51

52 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Παράδειγμα μορφής αρχείου vtt: WEBVTT 00:00: > 00:00: align:middle line:84% Κοιτάξτε έναν κακό μπαμπά! 00:00: > 00:00: align:middle line:84% Μη τρομάζεις το μωρό σου ανόητε! 00:00: > 00:00: align:middle line:84% Τι χαζός Θεέ μου!!! 52

53 Ενσωμάτωση ψηφιακού βίντεο Ετικέτα <video> Παράδειγμα μορφής αρχείου srt: 1 00:00:01,500 --> 00:00:06,000 Κοιτάξτε έναν κακό μπαμπά! 2 00:00:06,000 --> 00:00:11,000 Μη τρομάζεις το μωρό σου ανόητε! 3 00:00:11,000 --> 00:00:16,000 Τι χαζός Θεέ μου!!! 53

54 HTML YouTube βίντεο Εισαγωγή Ο ευκολότερος τρόπος για να παίξει βίντεο σε HTML, είναι να γίνει χρήση του YouTube. Αυτό εξαλείφει και το πρόβλημα της αδυναμίας αναπαραγωγής όλων των τύπων βίντεο, απ όλους τους browsers. Το YouTube θα εμφανίσει ένα id (όπως mrpiac9kida), όταν αποθηκεύεται (ή παίζεται) ένα βίντεο. Μπορεί να χρησιμοποιηθεί αυτό το id και να γίνει αναφορά στο βίντεό μέσα από τον κώδικα HTML. Για να παίξει το βίντεο σε μια ιστοσελίδα, θα πρέπει πρώτα να ανέβει στο YouTube, ή μπορεί να γίνει χρήση και ήδη βίντεο ανεβασμένων με βάση το id τους. Στη συνέχεια πρέπει να οριστεί στην ιστοσελίδα ένα <iframe> στοιχείο, συνοδευόμενο από τις ιδιότητές του, όπως ύψος (height), πλάτος (width) και URL (src). 54

55 HTML YouTube βίντεο Ενσωμάτωση βίντεο Η ενσωμάτωση ενός βίντεο γίνεται ακολουθώντας τα παρακάτω βήματα: 1. Σε έναν υπολογιστή, μεταβείτε στο YouTube βίντεο που θέλετε να ενσωματώσετε. 2. Κάτω από το βίντεο, κάντε κλικ στην επιλογή Share. 3. Κλικ Embed. 4. Από το πλαίσιο που θα εμφανιστεί, αντιγράψτε τον κώδικα HTML. 5. Επικολλήστε τον κώδικα στο blog σας ή την ιστοσελίδα HTML. 55

56 HTML YouTube βίντεο Αυτόματα αναπαραγωγή Παράδειγμα: <iframe width="560" height="315" src=" frameborder="0" allowfullscreen> </iframe> Ένα βίντεο μπορεί να αναπαράγεται αυτόματα, όταν ένας χρήστης επισκέπτεται τη σελίδα που το περιέχει, προσθέτοντας μια απλή παράμετρο autoplay, στη διεύθυνση URL του YouTube (το σύμβολο «?» Χωρίζει το URL από τα ορίσματα). Τιμές: 0 (default): Το βίντεο δεν θα παίξει αυτόματα όταν τα φορτωθεί. 1: Το βίντεο θα παίξει αυτόματα όταν φορτωθεί. Παράδειγμα: <iframe src=" 56

57 HTML YouTube βίντεο Επανάληψη αναπαραγωγής Παράδειγμα: Μπορεί ένα βίντεο να επαναλαμβάνεται προσθέτοντας μια απλή παράμετρο loop, στη διεύθυνση URL του YouTube (τα ορίσματα χωρίζονται μεταξύ τους με το σύμβολο «&»). Τιμές: 0 (default): Το βίντεο θα παίξει μόνο μία φορά. 1: Το βίντεο θα επαναλαμβάνεται συνεχώς. Παράδειγμα: <iframe src =" </iframe> 57

58 HTML YouTube βίντεο Ξεκίνημα αναπαραγωγής από συγκεκριμένο σημείο Παράδειγμα: Για να έχει ένα βίντεο έναρξη αναπαραγωγής από ένα συγκεκριμένο σημείο, μπαίνουν οι χαρακτήρες «#t=» στον ενσωματώστε κώδικα του βίντεο, ακολουθούμενοι από τη στιγμή (XmYs Χ λεπτά και Υ δευτερόλεπτα) κατά την οποία είναι επιθυμητό να αρχίσει η αναπαραγωγή του βίντεο. Παράδειγμα (το βίντεο ξεκινά μετά από 1 λεπτό και 10 δευτερόλεπτα): <iframe src =" </iframe> 58

59 HTML YouTube βίντεο Ενσωμάτωση λίστας αναπαραγωγής (playlist) Η ενσωμάτωση μιας λίστας αναπαραγωγής (playlist) γίνεται ακολουθώντας τα παρακάτω βήματα: 1. Συνδεθείτε στο λογαριασμό σας YouTube σε έναν υπολογιστή. 2. Στην αριστερή πλευρά της σελίδας, κάντε κλικ στο κουμπί Playlists. 3. Για τη λίστα αναπαραγωγής που θέλετε να ενσωματώσετε, κάντε κλικ στον τίτλο. 4. Κλικ Share. 5. Κλικ Embed. 6. Από το πλαίσιο που θα εμφανιστεί, αντιγράψτε τον κώδικα HTML. 7. Επικολλήστε τον κώδικα στο blog σας ή την ιστοσελίδα HTML. 59

60 HTML YouTube βίντεο Ενσωμάτωση λίστας αναπαραγωγής (playlist) Σε περίπτωση που χρειάζεται να φορτωθούν περισσότερα από ένα βίντεο, τότε οι διευθύνσεις τους θα πρέπει να χωρίζονται με κόμμα και κάνοντας χρήση της ιδιότητας playlist. Για την εμφάνιση των κουμπιών ελέγχου του Player γίνεται χρήση της ιδιότητας controls. Τιμές: 0: Τα κουμπιά ελέγχου του Player δεν εμφανίζονται. 1 (προεπιλογή): Τα κουμπιά ελέγχου του Player εμφανίζονται. Παράδειγμα: <iframe src=" &loop=1&playlist=akz3ybyl9pw, OI7xF5J160o"></iframe> 60

61 HTML YouTube βίντεο Αναπαραγωγή με τη χρήση των ετικετών <object> και <embed> Για την αναπαραγωγή βίντεο του YouTube, μπορεί να γίνει επίσης χρήση και των ετικετών <object> και <embed>. Παράδειγμα: <object width="640" height="370" data=" </object> Παράδειγμα: <embed width="640" height="370" src=" 61

62 Ενσωμάτωση κινούμενης εικόνας (animated gif) Οι κινούμενες εικόνες GIF (animated) είναι πολύ διαδεδομένες στο Διαδίκτυο. Στην ουσία δεν πρόκειται για μια εικόνα αλλά για πιο πολλές, οι οποίες προβάλλονται η μία μετά την άλλη. Αυτές οι εικόνες δεν χρειάζεται καν να είναι τύπου GIF. Για παράδειγμα, δύο εικόνες JPG, μπορούν να δημιουργήσουν ένα animated GIF. Για τη δημιουργία τους υπάρχουν ειδικά προγράμματα (GIF animators), όπως το Microsoft GIF Animator, τα οποία κάνουν αυτή τη δουλειά με αρκετές δυνατότητες και επιλογές. Υπάρχει επίσης η δυνατότητα δημιουργίας κινούμενων εικόνων και απευθείας (online), μέσα από ειδικές σελίδες του Διαδικτύου (π.χ κ.ά.). Σύνταξη: <img src="url"/> 62

63 Δημιουργία Link αναπαραγωγής ήχου ή βίντεο Σύνταξη: <a href="url" title="σύντομη περιγραφή">κείμενο ή εικόνα υπερσυνδέσμου</a> Όπου url η διαδρομή και το όνομα του μουσικού ή του βίντεο αρχείου, ενώ η ιδιότητα title δίνει μια σύντομη περιγραφή για το link. Παράδειγμα: <a href="./sounds/one.mp3" title="audio clip"> Metallica Song</a> 63

64 Βιβλιογραφία Κ Έρευνα και Μάθηση ( W3Schools ( Youtube ( 780?hl=en) 64