ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Πέμπτη, 21 Φεβρουαρίου 2013

HTML - ΤΟ ΣΤΟΙΧΕΙΟ object



Α.
HTML - Το στοιχείο <object>


Ο σκοπός του στοιχείου <object> είναι η υποστήριξη HTML βοηθοί (plug-ins).

HTML Helpers (Plug-ins)
  Μια βοηθητική εφαρμογή είναι ένα μικρό πρόγραμμα υπολογιστή που επεκτείνει το πρότυπο λειτουργικότητα του browser. Οι εφαρμογές Helper που ονομάζεται επίσης plug-ins.
Τα Plug-ins συχνά χρησιμοποιείται από προγράμματα περιήγησης για αναπαραγωγή ήχου και βίντεο.
  Παραδείγματα γνωστών plug-ins είναι το Adobe Flash Player και QuickTime.
Plug-ins μπορεί να προστεθεί σε ιστοσελίδες μέσω του ετικέτας <object> ή την ετικέτα <embed>.
Τα περισσότερα plug-ins επιτρέπουν εγχειρίδιο (ή προγραμματισμένο) έλεγχο των ρυθμίσεων για τον όγκο, προς τα πίσω, προς τα εμπρός, παύση, διακοπή και δραστηριότητες.
  Τι είναι ο καλύτερος τρόπος για να παίξει ήχου / βίντεο σε HTML;
 Για τον καλύτερο τρόπο για να ενσωματώσετε ήχο ή βίντεο στην ιστοσελίδα σας, παρακαλούμε διαβάστε τις επόμενες κεφάλαια.

   QuickTime - Αναπαραγωγή ήχου WAV
Παράδειγμα

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="liar.wav">
<param name="controller" value="true">
</object>


   QuickTime - Αναπαραγωγή βίντεο MP4
Παράδειγμα

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>


   Adobe Flash Player - Play SWF βίντεο
Παράδειγμα

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40">
</embed>
</object>


   Το Windows Media Player - Play ταινία WMV
Το παρακάτω παράδειγμα δείχνει τον προτεινόμενο κώδικα που χρησιμοποιείται για την εμφάνιση ενός αρχείου Windows Media.

Παράδειγμα

<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>


Β.
     HTML ήχου
   Οι ήχοι μπορούν να αναπαραχθούν σε μορφή HTML με πολλές διαφορετικές μεθόδους.
Προβλήματα, προβλήματα, λύσεις και
Παίζοντας ήχου σε μορφή HTML δεν είναι εύκολο!
  Πρέπει να ξέρετε πολλά κόλπα για να βεβαιωθείτε ότι τα αρχεία ήχου σας θα παίξει σε όλους τους browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) και για όλο το υλικό (PC, Mac, iPad, iPhone).
Σε αυτό το κεφάλαιο W3Schools συνοψίζει τα προβλήματα και τις λύσεις.
Χρησιμοποιώντας Plug-ins
Το plug-in είναι ένα μικρό πρόγραμμα υπολογιστή που επεκτείνει το πρότυπο λειτουργικότητα του browser.
Plug-ins μπορεί να προστεθεί σε σελίδες HTML με το tag <object> ή την ετικέτα <embed>.
Αυτές οι ετικέτες ορίζουν δοχεία για τους πόρους (συνήθως μη-HTML μέσα), το οποίο, ανάλογα με τον τύπο, θα πρέπει είτε να εμφανιστεί από τα προγράμματα περιήγησης, ή από εξωτερικό plug-in.
Χρησιμοποιώντας το στοιχείο <embed>
Η ετικέτα <embed> ορίζει ένα δοχείο για εξωτερικούς (μη-HTML) περιεχόμενο.
Το παρακάτω κομμάτι κώδικα θα πρέπει να παίξει ένα αρχείο MP3 ενσωματωμένα σε μια ιστοσελίδα:
Παράδειγμα

<embed height="50" width="100" src="horse.mp3">

Προβλήματα:

Διαφορετικά προγράμματα περιήγησης υποστηρίζουν διαφορετικές μορφές ήχου
Εάν ένα πρόγραμμα περιήγησης δεν υποστηρίζει τη μορφή αρχείου, ο ήχος δεν θα παίξει χωρίς ένα plug-in
Αν το plug-in δεν είναι εγκατεστημένο στον υπολογιστή του χρήστη, ο ήχος δεν θα παίξει
Αν μετατρέψετε το αρχείο σε άλλη μορφή, θα εξακολουθούν να μην παίξει σε όλους τους browsers
Χρησιμοποιώντας το στοιχείο <object>
Η ετικέτα <object tag> επίσης να ορίσετε ένα δοχείο για την εξωτερική (μη-HTML) περιεχόμενο.

Το παρακάτω κομμάτι κώδικα θα πρέπει να παίξει ένα αρχείο MP3 ενσωματωμένα σε μια ιστοσελίδα:

Παράδειγμα

<object height="50" width="100" data="horse.mp3"></object>


Προβλήματα:

Διαφορετικά προγράμματα περιήγησης υποστηρίζουν διαφορετικές μορφές ήχου
Εάν ένα πρόγραμμα περιήγησης δεν υποστηρίζει τη μορφή αρχείου, ο ήχος δεν θα παίξει χωρίς ένα plug-in
Αν το plug-in δεν είναι εγκατεστημένο στον υπολογιστή του χρήστη, ο ήχος δεν θα παίξει
Αν μετατρέψετε το αρχείο σε άλλη μορφή, θα εξακολουθούν να μην παίξει σε όλους τους browsers
Χρησιμοποιώντας το στοιχείο HTML5 <audio>
Η HTML5 <audio> ετικέτα καθορίζει τον ήχο, όπως μουσική ή άλλα ηχητικά ρεύματα.

Η <audio> στοιχείο λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης.

Το ακόλουθο παράδειγμα χρησιμοποιεί την ετικέτα <audio>, και ορίζει ένα αρχείο MP3 (για τον Internet Explorer, Chrome και Safari), OGG και ένα αρχείο (για Firefox και Opera). Αν μη τι άλλο δεν εμφανίζει ένα κείμενο:

Παράδειγμα

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>


Προβλήματα:

Θα πρέπει να μετατρέψετε τα αρχεία ήχου σε διάφορες μορφές
Το στοιχείο <audio> δεν λειτουργεί σε παλαιότερα προγράμματα περιήγησης
Η καλύτερη λύση HTML
Το παρακάτω παράδειγμα χρησιμοποιεί το στοιχείο <audio> HTML5 και προσπαθεί να παίξει τον ήχο, είτε ως MP3 ή OGG. Αν αυτό αποτύχει, ο κωδικός "πέφτει πίσω" για να δοκιμάσετε το <embed> στοιχείο:

Παράδειγμα

<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>


Προβλήματα:

Θα πρέπει να μετατρέψετε τα αρχεία ήχου σε διάφορες μορφές
Το στοιχείο <embed> δεν μπορεί να "εφεδρική" για να εμφανιστεί ένα μήνυμα σφάλματος
Yahoo Media Player - Ένας εύκολος τρόπος για να προσθέσετε ήχου στο site σας
Η ΕΛΕΥΘΕΡΗ Yahoo Media Player είναι σίγουρα ένα από τα αγαπημένα: Απλά αφήστε Yahoo κάνει τη δουλειά του παίζει τα τραγούδια σας.

Παίζει MP3 και πολλές άλλες μορφές. Μπορείτε να προσθέσετε στη σελίδα σας (ή blog) με μια ενιαία γραμμή κώδικα, και εύκολα να μετατραπεί HTML σελίδα σας σε μια επαγγελματική λίστα αναπαραγωγής:

Παράδειγμα

<a href="horse.mp3">Play Sound</a>
<script src="http://mediaplayer.yahoo.com/js"></script>

Για να το χρησιμοποιήσετε, εισαγάγετε τον ακόλουθο JavaScript στο κάτω μέρος της ιστοσελίδας σας:

<script src="http://mediaplayer.yahoo.com/js"></script>

Στη συνέχεια, απλά σύνδεση με τα αρχεία ήχου σας σε μορφή HTML σας, και ο κωδικός JavaScript δημιουργεί αυτόματα ένα κουμπί play για κάθε τραγούδι:
<a href="song1.mp3"> Play Song 1 </ a> <a href = "song2.wav "> Τραγούδι Play 2 </ a> ... ...

  Η Yahoo Media Player παρουσιάζει στους αναγνώστες σας με ένα μικρό κουμπί αναπαραγωγής αντί της πλήρους παίκτη. Ωστόσο, όταν κάνετε κλικ στο κουμπί, ένα πλήρες παίκτης σκάει επάνω. Σημειώστε ότι ο παίκτης είναι πάντα συνδεδεμένο και έτοιμο στο κάτω μέρος του παραθύρου. Απλά κάντε κλικ πάνω του για να τη βγάλετε.

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

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

<a href="horse.mp3">Play the sound</a>

  Μια σημείωση για Inline Ήχοι
Όταν ο ήχος περιλαμβάνεται σε μια ιστοσελίδα, ή ως μέρος μιας ιστοσελίδας, που ονομάζεται ενσωματωμένο ήχο.

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

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

Γ..
    HTML Βίντεο

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

<video width="320" height="240" 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 δεν είναι εύκολο!
Μπορείτε να προσθέσετε πολλά κόλπα για να βεβαιωθείτε ότι το βίντεό σας θα παίξει σε όλους τους browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) και για όλο το υλικό (PC, Mac, iPad, iPhone).
Σε αυτό το κεφάλαιο W3Schools συνοψίζει τα προβλήματα και τις λύσεις.
Το στοιχείο <embed>
Ο σκοπός της ετικέτας <embed> είναι να ενσωματώσετε στοιχεία πολυμέσων σε σελίδες HTML.
Η παρακάτω κώδικα HTML κομμάτι εμφανίζει ένα βίντεο Flash ενσωματωμένα σε μια ιστοσελίδα:
Παράδειγμα

<embed src="intro.swf" height="200" width="200">

Προβλήματα
Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει Flash, το βίντεο δεν θα παίξει
iPad και το iPhone δεν υποστηρίζει Flash βίντεο
Αν μετατρέψετε το βίντεο σε άλλη μορφή, θα εξακολουθούν να μην παίξει σε όλους τους browsers
Χρησιμοποιώντας το στοιχείο <object>
Ο σκοπός της ετικέτας <object> είναι να ενσωματώσετε στοιχεία πολυμέσων σε σελίδες HTML.
Η παρακάτω κώδικα HTML κομμάτι εμφανίζει ένα βίντεο Flash ενσωματωμένα σε μια ιστοσελίδα:
Παράδειγμα

<object data="intro.swf" height="200" width="200"></object>

Προβλήματα:
Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει Flash, το βίντεο δεν θα παίξει
iPad και το iPhone δεν υποστηρίζει Flash βίντεο
Αν μετατρέψετε το βίντεο σε άλλη μορφή, θα εξακολουθούν να μην παίξει σε όλους τους browsers
Χρησιμοποιώντας το στοιχείο HTML5 <video>

Η HTML5 <video> ετικέτα ορίζει ένα βίντεο ή ταινία.

Η <video> στοιχείο λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης.
Η παρακάτω κώδικα HTML κομμάτι εμφανίζει ένα βίντεο σε OGG, MP4, ή WebM μορφή:
Παράδειγμα

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>


Προβλήματα:

Θα πρέπει να μετατρέψετε τα βίντεό σας σε πολλές διαφορετικές μορφές
Το στοιχείο <video> δεν λειτουργεί σε παλαιότερα προγράμματα περιήγησης
Η καλύτερη λύση HTML
Το παρακάτω παράδειγμα χρησιμοποιεί 4 διαφορετικές μορφές βίντεο. Η HTML 5 στοιχείο <video> προσπαθεί να παίξει το βίντεο είτε σε MP4, OGG, ή WebM μορφή. Εάν αυτό αποτύχει, ο κωδικός "πέφτει πίσω" για να δοκιμάσετε το στοιχείο <object>. Εάν αυτό αποτύχει, επίσης, ότι "πέφτει πίσω" στο στοιχείο <embed>:

HTML 5 + + <object> <embed>

<video width="320" height="240" 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>


Προβλήματα:

Θα πρέπει να μετατρέψετε τα βίντεό σας σε πολλές διαφορετικές μορφές
Η λύση του YouTube
Ο ευκολότερος τρόπος για να εμφανίσετε βίντεο σε HTML είναι να χρησιμοποιήσετε το YouTube (βλ. επόμενο κεφάλαιο)!
Χρησιμοποιώντας μια υπερ-σύνδεση
Εάν μια ιστοσελίδα περιέχει μια υπερ-σύνδεση σε ένα αρχείο πολυμέσων, τα περισσότερα προγράμματα περιήγησης θα χρησιμοποιήσει ένα "βοηθητική εφαρμογή" για να παίξει το αρχείο.

Το παρακάτω κομμάτι κώδικα εμφανίζει ένα σύνδεσμο σε ένα βίντεο Flash. Εάν ένας χρήστης κάνει κλικ στο σύνδεσμο, ο browser θα ξεκινήσει μια βοηθητική εφαρμογή για την αναπαραγωγή του αρχείου:

Παράδειγμα

<a href="intro.swf">Play a video file</a>

Μια σημείωση για Inline Βίντεο
Όταν ένα βίντεο περιλαμβάνεται σε μια ιστοσελίδα που ονομάζεται ενσωματωμένο βίντεο.
Αν σκοπεύετε να χρησιμοποιήσετε ενσωματωμένα βίντεο, να γνωρίζουν ότι πολλοί άνθρωποι το βρίσκουν ενοχλητικό. Επίσης, σημειώστε ότι ορισμένοι χρήστες μπορεί να έχουν απενεργοποιήσει το ενσωματωμένο επιλογή βίντεο στο πρόγραμμα περιήγησής τους.
Καλύτερη συμβουλή μας είναι να περιλαμβάνει ενσωματωμένα βίντεο μόνο σε σελίδες στις οποίες ο χρήστης αναμένει να δει ένα βίντεο. Ένα παράδειγμα αυτού είναι μια σελίδα που ανοίγει αφού ο χρήστης έχει κάνει κλικ σε ένα σύνδεσμο για να δείτε το βίντεο.

   Ο ευκολότερος τρόπος για να παίξει βίντεο (ή άλλα δικά σας) σε HTML είναι να χρησιμοποιήσετε το YouTube.
Αναπαραγωγή βίντεο από το YouTube σε μορφή HTML
Αν θέλετε να παίξετε ένα βίντεο σε μια ιστοσελίδα, μπορείτε να ανεβάσετε το βίντεο στο YouTube και τοποθετήστε το κατάλληλο HTML κώδικα για να εμφανίσετε το βίντεο:
Παράδειγμα - YouTube iFrame

<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>


Παράδειγμα - Ενσωματωμένα YouTube

<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>


Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.