HTML & CSS για αρχάριους (Μέρος 23): Πολυμέσα για την ιστοσελίδα (2)

Μπορείτε να ενσωματώσετε αρχεία ήχου στο HTML5 με τον ίδιο εύκολο τρόπο που ενσωματώνετε τα βίντεο. Το HTML5 παρέχει ένα δικό του στοιχείο με το όνομα audio γι'αυτόν το σκοπό.

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

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

Για να εμφανιστούν τα στοιχεία ελέγχου, αναθέτετε στο στοιχείο audio το χαρακτηριστικό controls.

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

Στον περιηγητή πρέπει να φαίνεται κάπως έτσι:

Αν λείπει το controls, το στοιχείο που έχει ενσωματωθεί με το στοιχείο audio δεν εμφανίζεται. Είναι χρήσιμο να παραλείπετε το χαρακτηριστικό όταν θέλετε να προσθέσετε δικά σας στοιχεία ελέγχου μέσω JavaScript.

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

Τι χρειάζεται να γίνει; Το στοιχείο audio παρέχει επίσης τη δυνατότητα να οριστούν πρόσθετα στοιχεία πηγής. Σε αυτά τα στοιχεία ανατίθενται τα διάφορα φορμάτ για τους διάφορους περιηγητές. Ένα παράδειγμα:

<audio controls>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Στα χαρακτηριστικά src αναθέτετε τα αντίστοιχα αρχεία που υπάρχουν σε διαφορετικά φορμάτ. Εκτός από το controls, υπάρχουν και άλλα χαρακτηριστικά για το στοιχείο audio. Ένα από αυτά είναι το autoplay.

<audio controls autoplay>  
    <source src="song.mp3">  
    <source src="song.ogg">  
</audio>

Όταν το χαρακτηριστικό είναι ενεργοποιημένο, η αναπαραγωγή του αρχείου ήχου ξεκινά αυτόματα μόλις φορτωθεί. Συνήθως δεν τίθεται αυτό το χαρακτηριστικό, επειδή θα έπρεπε να αφήνετε τους επισκέπτες να αποφασίζουν πότε να αναπαραχθεί ένα αρχείο ήχου.

Επιπλέον, το χαρακτηριστικό loop είναι ενδιαφέρον. Αυτό το χαρακτηριστικό κάνει το αρχείο να παίζει σε επανάληψη.

Όπως στην ενσωμάτωση βίντεο, υπάρχουν και για τα αρχεία ήχου τα δυο χαρακτηριστικά type και media. Έτσι, μπορείτε να καθορίσετε τα αντίστοιχα MIME τύπη και codecs εδώ. Στο πρότυπο HTML5 αναφέρονται οι ακόλουθες τυπικές τιμές για το χαρακτηριστικό type:

• type='audio/ogg; codecs=vorbis'

• type='audio/ogg; codecs=speex'

• type='audio/ogg; codecs=flac'

Να σημειωθεί ότι τα δύο χαρακτηριστικά πρέπει να χρησιμοποιούνται αποκλειστικά στο στοιχείο source, όχι όμως στο στοιχείο audio.

Ενσωμάτωση Flash & κ.λπ.

Ταινίες Flash μπορούσαν να ενσωματωθούν στις προηγούμενες εκδόσεις HTML μέσω μιας συνδυασμένης χρήσης των στοιχείων embed και object. Η σύνολη σύνταξη – η οποία είναι παράδοξα ασχημη – ήταν για παράδειγμα έτσι:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600">
  <param name=movie value="intro.swf">
 <param name=quality value=high>
 <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed>
 </object>

Αυτή είναι η κλασική μέθοδος με τα στοιχεία object και embed, που υπήρχε στην HTML εδώ και πολύ καιρό.





Ωστόσο, το "κλασικό" εδώ δεν σημαίνει ότι αυτή η μέθοδος είχε ήδη εγκριθεί από το W3C στο παρελθόν. Στην HTML 4 προτιμήθηκε το στοιχείο object, το οποίο ερμηνεύονταν σωστά από το Internet Explorer. Διαφορετικά, ο Netscape Navigator προτιμούσε το στοιχείο embed. Αυτή η διαφορετική ερμηνεία απαιτούσε τον συνδυασμό των στοιχείων object και embed.

Το HTML5 παρέχει επίσημα τα δύο στοιχεία object και embed για την ενσωμάτωση ενεργών περιεχομένων.

Το embed είναι ένας δοχείο που προορίζεται για την προβολή μη-HTML περιεχομένων που δεν καλύπτονται από άλλα στοιχεία όπως img, video, audio κλπ. Για την αναπαραγωγή των ενσωματωμένων περιεχομένων χρειάζονται συνήθως πρόσθετα προγράμματα περιήγησης.

Με τη χρήση της embed τώρα μπορούν να ενσωματωθούν πρότυπα Flash βίντεο. Εδώ ένα παράδειγμα του πως μπορεί να μοιάζει κάτι τέτοιο:

<embed
    src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
    type="application/x-shockwave-flash"
    width="384"
    height="313"
    allowscriptaccess="always"
    allowfullscreen="true"
  />

Στο στoιχείο embed μπορούν να ανατεθούν διάφορες ιδιότητες. Το πιο σημαντικό είναι βέβαια άλλη μια φορά η ιδιότητα src. Διότι μέσω αυτής τελικά δίνετε το αρχείο που θα ενσωματωθεί. Μέσω της ιδιότητας type καθορίζεται ο τύπος MIME.

Για τα Flash αναφέρεται σε application/x-shockwave-flash. Αν θέλετε να ενσωματώσετε ένα αρχείο LaTeX, πρέπει να σημειώσετε application/x-latex. Πλάτος και ύψος του ενσωματωμένου αρχείου καθορίζονται μέσω των width και height.

Υπάρχουν επιπλέον και άλλες ιδιότητες που ωστόσο δεν ανήκουν επίσημα στο HTML5. Αλλά επιτρέπουν τον έλεγχο του χρησιμοποιούμενου πρόσθετου. Έτσι, στο προηγούμενο παράδειγμα, μέσω των δύο "Flash-ιδιοτήτων" allowscriptaccess και allowfullscreen καθορίστηκε ότι είναι δυνατή η πρόσβαση σε σενάρια και η λειτουργία πλήρους οθόνης. Επίσης υπάρχει και η ιδιότητα quality μέσω της οποίας καθορίζεται η ποιότητα της ταινίας Flash.

<embed 
    src="flash.swf" 
    width="600" height="300" 
    type="application/x-shockwave-flash" 
    quality="high" 
 />

Το στοιχείο object

Το στοιχείο object λειτουργεί παρόμοια με το embed ως δοχείο για περιεχόμενα. Σε αντίθεση με το embed, το object γνωρίζει όμως τρία διαφορετικά μοντέλα περιεχομένου. Αν ο περιηγητής αναγνωρίσει ότι πρόκειται για μια γραφική απεικόνιση, συμπεριφέρεται όπως αν πρόκειται για στοιχείο img. Αν το αναφερόμενο αντικείμενο είναι περιεχόμενο ιστού, αυτό εμφανίζεται μέσα σε ένα iFrame. (Περισσότερα για τα iFrames στο πλαίσιο αυτής της σειράς). Σε άλλα περιεχόμενα, το object συμπεριφέρεται όπως το embed.

Το παρακάτω παράδειγμα δείχνει την ενσωμάτωση ενός Flash-ταινία μέσω του στοιχείου object.

<object
    type="application/x-shockwave-flash"
    data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
    width="400"
    height="300">
    <param name="allowscriptaccess" value="always" />
    <param name="allowfullscreen" value="true" />
    <p>
       In Ihrem Browser ist kein Flash-Plug-in vorhanden.
    </p>
 </object>

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





Για την ενσωμάτωση περιεχόμενων – εκτός από εικόνες εννοείται – θα έπρεπε να χρησιμοποιείται κανονικά το στοιχείο object. Αυτό το στοιχείο επιτρέπει την παροχή εναλλακτικών περιεχομένων που θα εμφανίζονται όταν το ενσωματωμένο στοιχείο δεν μπορεί να φορτωθεί.