HTML 5 : Η ετικέτα Video

Η ετικέτα <video> είναι καινούρια στην HTML 5 και σας επιτρέπει να προβάλετε μια ταινία μέσα στη σελίδα σας ! Τα δεδομένα της ετικέτας <video> υποτίθεται πως πρέπει να είναι κάποιο video, αλλά μπορεί να έχει και κάποιο αρχείο ήχου ή κάποιες εικόνες συσχετισμένες με αυτό.

Αυτή η ετικέτα δεν θα λειτουργήσει σε όλους τους περιηγητές διαδικτύου. Οι περιηγητές που μπορούν να λειτουργήσουν με αυτή την ετικέτα είναι οι : Safari 3.1+, Firefox 3.5+, και οι τελευταίες εκδόσεις του Opera (α ! τελικά και οι επόμενες εκδόσεις του Chrome).

Ο παλιός τρόπος

Αυτός είναι ο παλιός τρόπος, ο οποίος δεν είναι και τόσο ξεκάθαρος ! Δεν νομίζεται;

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

Όπως ήδη γνωρίζετε για το παραπάνω χρειάζεστε Flash.

Ο τρόπος της HTML 5

Ωραίος, καθαρός, minimal κώδικας. Δεν είναι;

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
<p>
Δοκιμάστε να δείτε αυτή τη σελίδα στον Safari  4! Αν θέλετε μπορείτε να <a href="http://www.youtube.com/demo/google_main.mp4">κατεβάσετε το βίντεο</a>.
</p>
</video>

Αυτόματη αναπαραγωγή

Η ετικέτα <video> έχει μια ιδιότητα που επιτρέπει στο βίντεο να αρχίσει την αναπαραγωγή μετά το φόρτωμα της σελίδας.

<video src=”myVideo.mov” autoplay>
</video>

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

Κατεβάστε

Αν ο περιηγητής δεν γνωρίζει τι πρέπει να κάνει με την ετικέτα <video>, ή αν έχει προκύψει κάποιο σφάλμα, μπορείτε αν θέλετε να επιτρέψετε στον χρήστη να κατεβάσει το βίντεο στον υπολογιστή του.

Autobuffer

Η ιδιότητα autobuffer χρησιμοποιείτε όταν δεν χρησιμοποιείτε την ιδιότητα autoplay, αλλά είστε σχεδόν βέβαιοι πως το βίντεο θα προβληθεί. Σε αυτή την περίπτωση το βίντεο κατεβαίνει στο παρασκήνιο, έτσι όταν ο χρήστης αποφασίσει να δει το βίντεο, το βίντεο θα έχει ήδη κατέβει μέχρι κάποιο σημείο. Αν χρησιμοποιήσετε και τις δυο ιδιότητες, autobuffer και autoplay, τότε η πρώτη δεν χρησιμοποιείτε.

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

Poster

Χρησιμοποιήστε την ιδιότητα poster για να προβάλετε ένα frame του βίντεο (ως .jpg, .png), για την περίπτωση που το βίντεο δεν φορτώνει για κάποιο λόγο.

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png">
<p> Δοκιμάστε να δείτε αυτή τη σελίδα στον Safari  4! Αν θέλετε μπορείτε να <a href="http://www.youtube.com/demo/google_main.mp4">κατεβάσετε το βίντεο</a> instead.</p>
</video>

Controls

Αν ορίσετε αυτή την ιδιότητα, σημαίνει πως μπορείτε να χρησιμοποιήσετε τα δικά σας πλήκτρα για αναπαραγωγή/παύση/κλπ. για το βίντεο. Ο Safari έχει τα δικά του αξιαγάπητα πλήκτρα ελέγχου, αλλά αν θέλετε μπορείτε να δημιουργήσετε τα δικά σας.

Συμπέρασμα

Νομίζω πως έχουμε πολύ δρόμο ακόμα μπροστά μας αλλά αυτή η ετικέτα έχει πραγματικά πολλές δυνατότητες. Τα προβλήματα με τα codecs υπάρχουν αλλά αν θέλετε μπορείτε να υποβιβάσετε τον κώδικα σας αν θέλετε για να λειτουργήσει, όπως με το σύνδεσμο για το κατέβασμα του βίντεο. Μπορείτε να χρησιμοποιήσετε ένα συνδυασμό των ετικετών <video>, <embed> και <object> αλλά ο κώδικας θα είναι δυσανάγνωστος.

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>

Περισσότερα για τον CorfuGmr

Όλα τα άρθρα

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.

Σχόλια

lambros

14 Ιουνίου 2010

νομιζω πως με τετοιες κινήσεις καταλαβαινω πως η HTML 5 αλλάζει πολλά στο κωδικα, ήρθε για να μεινει και σιγουρα ειναι πολυ πολυ πιο ευαναγνωστα…

CorfuGmr

14 Ιουνίου 2010

Η HTML5 είναι το επόμενο βήμα !

Έχει όλα τα χαρακτηριστικά που την κάνουν να είναι η ιδανική λύση !

Επίσης δεν είναι τυχαίο το γεγονός που στην HTML 5 υπάρχει η δυνατότητα (πρόβλεψη) απογαλακτισμού των σχεδιαστών ιστοσελίδων από άλλα προγράμματα που μέχρι σήμερα είναι δέσμιοι να χρησιμοποιούν, όπως είναι το Flash, η Java, και άλλα πολλά !

Αφήστε ένα σχόλιο

RSS για τα σχόλια σε αυτό το άρθρο. TrackBack URL