Χρησιμοποιώντας το HTML5 για την προβολή βίντεο σε τρέχοντα προγράμματα περιήγησης

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

• Φιλοξενήστε το δικό σας HTML5 βίντεο σε σχέση με τη χρήση του YouTube
• Γρήγορη επισκόπηση της υποστήριξης βίντεο στον Ιστό
• Δημιουργήστε και επεξεργαστείτε το βίντεό σας
• Μετατρέψτε το βίντεο σε Ogg για Firefox
• Μετατρέψτε το βίντεο σε MP4 για το Safari
• Μετατρέψτε το βίντεο σε FLV για τον Internet Explorer
• Προσθέστε το στοιχείο βίντεο στην ιστοσελίδα σας
• Προσθέστε το JavaScript και το Flash Player για να αποκτήσετε πρόσβαση στον Internet Explorer
• Δοκιμάστε σε τόσους περιηγητές όσο μπορείτε

01 από 10

Φιλοξενήστε το δικό σας HTML 5 Video vs. Χρήση του YouTube

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

Αλλά χρησιμοποιώντας το YouTube για να ενσωματώσετε τα βίντεό σας έχει κάποια μειονεκτήματα

Τα περισσότερα από τα προβλήματα με το YouTube είναι από την πλευρά των καταναλωτών, και όχι από την πλευρά του σχεδιαστή, όπως:

• Αργή αναζήτηση και ευρετηρίαση
• Διακοπές διακομιστή
• Το περιεχόμενο αφαιρείται (φαινομενικά) αυθαίρετα
• Πάρα πολύ κακό περιεχόμενο

Αλλά υπάρχουν ορισμένοι λόγοι για τους οποίους το YouTube είναι κακό για τους προγραμματιστές περιεχομένου, όπως:

• Μέγιστο μήκος 10 λεπτών για βίντεο (για δωρεάν λογαριασμούς)
• Κακή απόδοση αποστολής
• Το YouTube κερδίζει απεριόριστα δικαιώματα χρήσης στο βίντεό σας
• Κάθε χρήστης του YouTube αποκτά απεριόριστα δικαιώματα χρήσης στο βίντεό σας

Το βίντεο HTML5 δίνει κάποια πλεονεκτήματα στο YouTube

Η χρήση του HTML5 για βίντεο θα σας επιτρέψει να ελέγχετε κάθε πτυχή του βίντεό σας, από ποιος μπορεί να το δει, πόσο καιρό είναι, ποιο περιεχόμενο περιέχει, πού φιλοξενείται και πώς εκτελείται ο διακομιστής. Και το βίντεο HTML5 σας δίνει τη δυνατότητα να κωδικοποιήσετε το βίντεό σας σε τόσες μορφές, όπως χρειάζεται για να βεβαιωθείτε ότι ο μέγιστος αριθμός ατόμων μπορεί να το δει. Οι πελάτες σας δεν χρειάζονται μια προσθήκη ή να περιμένουν μέχρι το YouTube να κυκλοφορήσει μια νεότερη έκδοση.

Φυσικά, το βίντεο HTML5 προσφέρει μερικά μειονεκτήματα

Αυτά περιλαμβάνουν:

• Πρέπει να κωδικοποιήσετε το βίντεό σας σε τουλάχιστον τρεις διαφορετικούς κωδικοποιητές
• Θα πρέπει να συμπεριλάβετε κάποιο JavaScript για να διασφαλίσετε ότι τα προγράμματα περιήγησης που δεν υποστηρίζουν HTML5 θα λειτουργήσουν
• Ο διακομιστής σας πρέπει να είναι σε θέση να χειριστεί τις απαιτήσεις εύρους ζώνης για τη φιλοξενία βίντεο

Συνεχίστε την ανάγνωση παρακάτω

02 από 10

Γρήγορη επισκόπηση της υποστήριξης βίντεο στον Ιστό

Η προσθήκη βίντεο σε ιστοσελίδες είναι από καιρό μια δύσκολη διαδικασία. Υπήρχαν τόσα πολλά πράγματα που θα μπορούσαν να πάθουν λάθος:

• Αρχικά, χρησιμοποιείτε το ετικέτα για να ενσωματώσετε το βίντεό σας στη σελίδα σας. ΑΛΛΑ αυτή η ετικέτα έχει καταργηθεί υπέρ μιας άλλης ετικέτας. Ορισμένα προγράμματα περιήγησης δεν την υποστήριζαν ποτέ καλά.
• Συνεπώς, μεταβείτε στο ετικέτα, αλλά τα παλαιότερα προγράμματα περιήγησης δεν την υποστηρίζουν και τα νεότερα προγράμματα περιήγησης είναι επιδέξια.
• Τότε σκέφτεστε Flash! Και κωδικοποιήστε το βίντεό σας ως αρχείο FLV. Αλλά το Flash δεν υποστηρίζεται σε πολλές κινητές συσκευές και πολλοί άνθρωποι μισούν το Flash ανεξάρτητα από το πώς χρησιμοποιείται (το 25% των ερωτηθέντων στην ερώτησή μου ρωτά για το πώς αισθάνεστε για το Flash δήλωσε ότι δεν μπορούν να σταθούν Flash με οποιονδήποτε τρόπο).
• Επομένως, αποφασίζετε να ανεβάσετε το βίντεό σας σε μια τοποθεσία ενσωμάτωσης βίντεο, όπως το YouTube, αλλά στη συνέχεια έχετε τα προβλήματα με το YouTube που συζητήσαμε.
• Τέλος, αποφασίζετε να μεταβείτε με το HTML5, αλλά ο Internet Explorer δεν το υποστηρίζει (όχι μέχρι τον Internet Explorer 9). Και ακόμα κι αν το κάνετε, υπάρχουν δύο πρότυπα κωδικοποιητή βίντεο που υποστηρίζονται και μόνο ένα πρόγραμμα περιήγησης που μπορεί να χρησιμοποιήσει και τα δύο. Υποστήριξη προγράμματος περιήγησης για κωδικοποιητές βίντεο και κοντέινερ

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

Οι επόμενες σελίδες αυτού του άρθρου θα σας καθοδηγήσουν στον τρόπο με τον οποίο μπορείτε να προσθέσετε βίντεο στις ιστοσελίδες σας που λειτουργούν σε Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 και 4, iPhone και Android, Flash και Internet Explorer 7 και 8. έχετε επίσης τα κλειδιά που χρειάζεστε για να προσθέσετε υποστήριξη για άλλα παλαιότερα προγράμματα περιήγησης εάν είναι απαραίτητο.

Συνεχίστε την ανάγνωση παρακάτω

03 από 10

Δημιουργήστε και επεξεργαστείτε το βίντεό σας

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

• Οικογενειακά έργα βίντεο
• Μάρκετινγκ και διαφημιστικά βίντεο
• Εικονικές περιηγήσεις βίντεο
• Πώς να Βίντεο
• Βίντεο γάμου

Μάθετε πώς να εγγράφετε βίντεο υψηλής ποιότητας

Βεβαιωθείτε ότι γνωρίζετε τον τρόπο εγγραφής σε εσωτερικούς και εξωτερικούς χώρους καθώς και τον τρόπο εγγραφής ήχου. Ο φωτισμός είναι επίσης πολύ σημαντικός - τα πλάνα που είναι πολύ φωτεινά βλάπτουν τα μάτια, και πολύ σκοτεινά φαίνονται μόνο λασπώδη και αντιεπαγγελματικά. Ακόμα κι αν σχεδιάζετε μόνο να έχετε ένα βίντεο 30 δευτερολέπτων στον ιστότοπό σας, τόσο υψηλότερη είναι η ποιότητα που θα αντικατοπτρίζει στον ιστότοπό σας.

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

Επεξεργασία του βίντεό σας

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

Αποθηκεύστε το βίντεό σας σε MOV ή AVI (ή MPG, CD, DV)

Για το υπόλοιπο αυτού του σεμιναρίου, πρόκειται να υποθέσουμε ότι έχετε αποθηκεύσει το βίντεό σας σε κάποιο τύπο υψηλής ποιότητας (μη συμπιεσμένο) όπως AVI ή MOV. Ενώ μπορείτε να χρησιμοποιήσετε αυτά τα αρχεία ως έχουν, αντιμετωπίζετε όλα τα προβλήματα με το βίντεο που έχουμε ήδη συζητήσει. Οι παρακάτω σελίδες θα σας εξηγήσουν πώς να μετατρέψετε το αρχείο σας σε τρεις τύπους, ώστε να είναι ορατό από τον μεγαλύτερο αριθμό περιηγητών.

04 από 10

Μετατρέψτε το βίντεο σε Ogg για Firefox

Η πρώτη μορφή που θα μετατρέψουμε είναι Ogg (μερικές φορές ονομάζεται Ogg-Theora). Αυτή η μορφή είναι αυτή που μπορούν όλοι να προβάλλουν το Firefox 3.5, το Opera 10.5 και το Chrome 3.

Δυστυχώς, ενώ το Ogg έχει υποστήριξη προγράμματος περιήγησης, πολλά από τα γνωστά προγράμματα βίντεο που μπορείτε να αγοράσετε (Adobe Media Encoder, QuickTime κ.λπ.) δεν προσφέρουν μια επιλογή μετατροπής Ogg. Ο μόνος τρόπος για να μετατρέψετε το βίντεό σας στο Ogg είναι να βρείτε ένα πρόγραμμα μετατροπής στον ιστό.

Επιλογές μετατροπής

Υπάρχει ένα ηλεκτρονικό εργαλείο που ονομάζεται Media-Convert που απαιτεί τη μετατροπή διαφόρων μορφών βίντεο (και ήχου) σε άλλες μορφές βίντεο (και ήχου). Όταν το δοκιμάσαμε με το δοκιμαστικό βίντεο των 3 δευτερολέπτων, δεν μπορούσαμε να το χρησιμοποιήσουμε για το Mac. Αλλά μπορεί να έχετε καλύτερη τύχη. Αυτός ο ιστότοπος έχει το πλεονέκτημα ότι είναι δωρεάν.

Ορισμένα άλλα εργαλεία που εντοπίσαμε περιλαμβάνουν:

• Miro Video Converter (Windows Macintosh) - Αυτό το πρόγραμμα έχει το πλεονέκτημα της μετατροπής σε Ogg και MP4 (H.264) και είναι ανοιχτού κώδικα.
• Koyote Video Converter (Windows)
• Free Video Converter Πιστεύουμε ότι αυτό έχει τόσο Windows όσο και έκδοση Macintosh, αλλά ήταν δύσκολο να το πεις από την τοποθεσία τους
• Απλός κωδικοποιητής Theora (Macintosh) - αυτός είναι αυτός που τείνουμε να χρησιμοποιήσουμε.

Αφού αποθηκεύσετε το βίντεό σας στη μορφή Ogg, αποθηκεύστε το σε μια τοποθεσία στον ιστότοπό σας και μεταβείτε στην επόμενη σελίδα για να το μετατρέψετε σε άλλες μορφές για άλλα προγράμματα περιήγησης.

Συνεχίστε την ανάγνωση παρακάτω

05 από 10

Μετατρέψτε το βίντεο σε MP4 για το Safari

Η επόμενη μορφή που πρέπει να μετατρέψετε το βίντεό σας είναι το MP4 (βίντεο H.264) ώστε να μπορεί να αναπαραχθεί σε Safari 3 και 4 και iPhone και Android. Επιπλέον, τα βίντεο H.264 μπορούν εύκολα να μετατραπούν σε αρχεία FLV για παρακολούθηση στο Flash.

Αυτή η μορφή είναι πιο εύκολα διαθέσιμη σε εμπορικά προϊόντα και πιθανότατα έχετε ήδη ένα πρόγραμμα που θα μετατρέψει σε MP4 εάν διαθέτετε πρόγραμμα επεξεργασίας βίντεο. Αν έχετε το Adobe Premiere, μπορείτε να χρησιμοποιήσετε τον Adobe Video Encoder ή εάν έχετε το QuickTime Pro που θα λειτουργήσει επίσης. Πολλοί από τους μετατροπείς που συζητήσαμε στην προηγούμενη σελίδα θα μετατρέψουν επίσης βίντεο σε MP4.

• MediaConvert - Ένα online εργαλείο AWS.
• Miro Video Converter (Windows Macintosh) - Αυτό το πρόγραμμα έχει το πλεονέκτημα της μετατροπής σε Ogg και MP4 (H.264) και είναι ανοιχτού κώδικα.
• SUPER (Windows) - θα μετατρέψει πολλούς διαφορετικούς τύπους αρχείων σε MP4 και FLV
• Free Video Converter Πιστεύουμε ότι αυτό έχει τόσο Windows όσο και έκδοση Macintosh, αλλά ήταν δύσκολο να το πεις από την τοποθεσία τους.

Αποθηκεύστε το αρχείο MP4 στον ιστότοπό σας και στη συνέχεια θα πρέπει να το μετατρέψετε σε Flash για χρήση από τον Internet Explorer.

06 από 10

Μετατρέψτε το βίντεο σε FLV για τον Internet Explorer

Ο ευκολότερος τρόπος για να μετατρέψετε τα βίντεο σε FLV είναι να χρησιμοποιήσετε το ίδιο το Flash. Έτσι μετατρέπουμε τα βίντεό μου σε Flash. Αλλά αν δεν έχετε Flash, εδώ είναι δύο δημοφιλή εργαλεία για τη μετατροπή αρχείων σε FLV:

• SUPER (Windows) - θα μετατρέψει πολλούς διαφορετικούς τύπους αρχείων σε MP4 και FLV
• ffmpegX (Macintosh) - θα μετατρέψει πολλούς διαφορετικούς τύπους αρχείων σε Mp4 και FLV.

Αποθηκεύστε το αρχείο FLV στον ιστότοπό σας και η επόμενη σελίδα θα σας δείξει πώς να γράψετε το HTML ώστε να μπορείτε να αναπαραγάγετε τα βίντεό σας.

Συνεχίστε την ανάγνωση παρακάτω

07 από 10

Προσθέστε το στοιχείο βίντεο στην ιστοσελίδα σας

Είναι πολύ εύκολο να χρησιμοποιήσετε το HTML 5 για να προσθέσετε βίντεο σε ιστοσελίδες. Τα περισσότερα σύγχρονα προγράμματα περιήγησης υποστηρίζουν βίντεο HTML 5, αν και δεν το υποστηρίζουν όλοι με τον ίδιο τρόπο. Αλλά αυτό σημαίνει ότι εάν αποθηκεύσετε το βίντεό σας τόσο ως μορφές Ogg όσο και ως MP4, θα μπορείτε να γράφετε μόνο τέσσερις ή πέντε γραμμές HTML για να το εμφανίσετε στα περισσότερα σύγχρονα προγράμματα περιήγησης (εκτός του Internet Explorer 8). Δείτε πώς:

Γράψτε τον δείκτη HTML 5 doctype έτσι ώστε οι περιηγητές να ξέρουν να περιμένουν HTML 5:

1. Δημιουργήστε την ιστοσελίδα σας όπως θα την δημιουργούσατε κανονικά:

2. Μέσα στο σώμα, τοποθετήστε το
3. Αποφασίστε ποια χαρακτηριστικά θέλετε να έχει το βίντεό σας: Συνιστούμε να χρησιμοποιείτε στοιχεία ελέγχου και προφόρτισης. Χρησιμοποιήστε την επιλογή αφίσα εάν το βίντεό σας δεν έχει καλή πρώτη σκηνή.
   1. Αυτόματη αναπαραγωγή - για να ξεκινήσει αμέσως μόλις γίνει λήψη
   2. έλεγχοι - επιτρέπουν στους αναγνώστες σας να ελέγχουν το βίντεο (παύση, γρήγορη μετακίνηση προς τα εμπρός, γρήγορη μετακίνηση προς τα εμπρός)
   3. loop - ξεκινήστε το βίντεο από την αρχή όταν τελειώνει
   4. προφόρτωση - προεκφορτώστε το βίντεο ώστε να είναι έτοιμο γρηγορότερα όταν ο πελάτης κάνει κλικ σε αυτό
   5. αφίσα - καθορίστε την εικόνα που θέλετε να χρησιμοποιήσετε κατά τη διακοπή του βίντεο
4. Στη συνέχεια, προσθέστε τα αρχεία προέλευσης για τις δύο εκδόσεις του βίντεό σας (MP4 και OGG) μέσα στο
5. Ανοίξτε τη σελίδα σε Chrome 1, Firefox 3.5, Opera 10 ή / και Safari 4 και βεβαιωθείτε ότι εμφανίζεται σωστά. Θα πρέπει να το δοκιμάσετε σε τουλάχιστον Firefox 3.5 και Safari 4 - καθώς το καθένα χρησιμοποιεί διαφορετικό codec.

Αυτό είναι. Μόλις έχετε αυτόν τον κώδικα στη θέση του, θα έχετε ένα βίντεο που λειτουργεί σε Firefox 3.5, Safari 4, Opera 10 και Chrome 1. Αλλά τι γίνεται με τον Internet Explorer;

Ο Internet Explorer δεν μοιάζει με το HTML 5 ή το

Στην επόμενη ενότητα, θα μιλήσουμε για το τι μπορείτε να κάνετε για να λάβετε τον IE 8 για να παίξετε όμορφα με τις ετικέτες βίντεο HTML 5 και να προβάλλετε ένα βίντεο. Πρέπει να χρησιμοποιήσετε το Flash.Τα καλά νέα είναι ότι ο IE 9 αναμένεται να υποστηρίξει το HTML 5 και την ετικέτα βίντεο.

08 από 10

Προσθέστε το JavaScript και το Flash Player για να αποκτήσετε πρόσβαση στον Internet Explorer

Μπορεί να έχετε παρατηρήσει ότι στην HTML της προηγούμενης σελίδας, δεν υπήρχε γραμμή προέλευσης για το αρχείο FLV. Και αν δοκιμάσατε αυτή τη σελίδα στον Internet Explorer, δεν θα λειτουργούσε. Αυτό οφείλεται στο γεγονός ότι ο Internet Explorer δεν αναγνωρίζει το HTML 5 και δεν μπορεί να αναπαράγει βίντεο OGG ή MP4. Για να μπορέσει ο Internet Explorer 7 και 8 να λειτουργήσει, θα πρέπει να έχετε την δυνατότητα αναπαραγωγής του βίντεο ως Flash. Αλλά υπάρχουν περισσότερα βήματα για να το πάρει στη δουλειά από την απλή προσθήκη του αρχείου FLV.

Βήμα 1: Αποκτήστε ένα Flash Video Player για την ιστοσελίδα σας

Σας συνιστούμε να αποκτήσετε το FlowPlayer επειδή είναι ένα πρόγραμμα αναπαραγωγής βίντεο ανοιχτού κώδικα Flash το οποίο μπορείτε να εγκαταστήσετε στον διακομιστή σας Web και να το χρησιμοποιήσετε κάθε φορά που έχετε αναπαραγωγή βίντεο Flash. Η δωρεάν έκδοση του FlowPlayer εισάγει διαφήμιση στα βίντεό σας, αλλά μπορείτε επίσης να αγοράσετε εμπορικές άδειες εάν τις χρειάζεστε.

Ακολουθήστε τις οδηγίες στην τοποθεσία FlowPlayer για να εγκαταστήσετε το FlowPlayer στον ιστότοπό σας. Με λίγα λόγια, θα εγκαταστήσετε 2 αρχεία SWF και ένα αρχείο JavaScript στον ιστότοπό σας. Στο κάτω μέρος της HTML σας, (πριν το ετικέτα) θα προσθέσετε μια γραμμή:

Ωστόσο, ο Internet Explorer δεν θα συνεχίσει να αναπαράγει το βίντεο, πρέπει να το διδάξετε πώς να αναγνωρίσετε τις ετικέτες HTML 5.

Βήμα 2: Πείστε τον Internet Explorer να διαβάζει τις ετικέτες HTML 5

Υπάρχει ένα εύχρηστο σενάριο στον κώδικα Google που ονομάζεται "HTML Shiv" που θα βοηθήσει το IE να αναγνωρίσει HTML 5 στοιχεία. Έτσι, στο του εγγράφου HTML που θέλετε να το αναφέρετε. Είναι καλύτερο να το επισυνάψετε σε σχόλια υπό όρους, έτσι ώστε τα άλλα προγράμματα περιήγησης να μην συγχέονται:

Εντάξει, τώρα η IE θα αναγνωρίσει το

Βήμα 3: Προσθέστε μια γραμμή πηγής για το αρχείο FLV

Όπως ακριβώς κάνατε στην προηγούμενη σελίδα, θα προσθέσετε μια γραμμή στο HTML 5 μέσα στο

Συνεχίστε την ανάγνωση παρακάτω

09 από 10

Προσθέστε το JavaScript και το Flash Player για να αποκτήσετε πρόσβαση στον Internet Explorer - Μέρος 2

Δυστυχώς, δεν έχουμε ακόμη κάνει. Πρέπει τώρα να πούμε στο IE να χρησιμοποιήσει το πρόγραμμα αναπαραγωγής βίντεο FlowPlayer Flash που αναφέραμε παραπάνω.

Βήμα 4: Γυρίστε το

Για αυτό, χρειαζόμαστε ένα άλλο σενάριο. Πήραμε το σενάριο από το Dive Into HTML 5. Αλλά όταν το δοκιμάσαμε, δεν λειτούργησε μέχρι να κάνουμε κάποιες προσαρμογές:

• Γύρω από τη γραμμή 31: προσθέστε τη θέση της εγκατάστασης του FlowPlayer.
• Γύρω από τη γραμμή 42: αλλάξτε τον τύπο αρχείου από video / mp4 σε video / x-flv
• Γύρω από τη γραμμή 94: αρχίζοντας με if (!! $ && !! $ (document) .ready) {στο τέλος του εγγράφου, αλλάξτε εκείνη την ενότητα για να διαβάσετε:

  // if (!! $ && !! $ (document) .ready) {/ * Οι χρήστες του jQuery μπορούν να προετοιμαστούν μόλις το DOM είναι έτοιμο * /// $ (έγγραφο) .ready (html5_video_init);//} άλλο {/ * Όλοι οι άλλοι μπορούν να περιμένουν έως ότου φορτωθούν * // * λειτουργία addEvent μέσω http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * /var addEvent = λειτουργία (obj, type, fn) {αν (obj.addEventListener)obj.addEventListener (τύπος, fn, ψευδές);else if (obj.attachEvent)obj.attachEvent ('on' + type, function () {επιστροφή fn.apply (obj, νέος πίνακας (window.event));});}addEvent (παράθυρο, "φόρτωση", html5_video_init);//}

Μόλις επεξεργαστείτε το αρχείο JavaScript, μεταφορτώστε το στο διακομιστή σας και συνδέστε το στο κάτω μέρος της σελίδας HTML (πριν από το ):

Μπά! Τώρα που έχετε κάνει όλα αυτά, θα πρέπει να ανεβάσετε το HTML ώστε να μπορείτε να ξεκινήσετε τη δοκιμή.

10 από 10

Δοκιμάστε σε τόσους περιηγητές όσο μπορείτε

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

Έχουμε διαπιστώσει ότι ενώ είναι δυνατό να χρησιμοποιήσετε εργαλεία όπως το BrowserLab και το AnyBrowser για να δοκιμάσετε το βίντεο, δεν είναι τόσο αξιόπιστο όσο η αναβάθμιση της σελίδας σε ένα πρόγραμμα περιήγησης στον εαυτό σας. Όταν το κάνετε αυτό μπορείτε πραγματικά να δείτε αν λειτουργεί ή όχι.

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

• Firefox 3.5
• Σαφάρι 3 ή 4
• Internet Explorer 7 ή 8

Μπορείτε να δοκιμάσετε στο Chrome, αλλά επειδή το Chrome θα προβάλλει και τις τρεις μεθόδους (ακόμα και το Flash, εάν διαθέτετε το πρόσθετο), είναι δύσκολο να διαπιστώσετε εάν υπάρχει κάποιο πρόβλημα με κάποιο άλλο από τα δύο ή το οποίο χρησιμοποιεί το Chrome.

Για την ειρήνη σας, πρέπει επίσης να δοκιμάσετε σε παλαιότερους φυλλομετρητές για να δείτε τι κάνουν, ειδικά αν πολλοί αναγνώστες σας χρησιμοποιούν παλαιότερα προγράμματα περιήγησης.

Λήψη του βίντεο που λειτουργεί σε παλαιότερα προγράμματα περιήγησης

Όπως και με οποιαδήποτε ιστοσελίδα, θα πρέπει πρώτα να εξετάσετε πόσο σημαντικό είναι να έχετε αυτά τα προγράμματα περιήγησης να λειτουργούν. Εάν το 90% των πελατών σας χρησιμοποιούν το Netscape, τότε θα πρέπει να έχετε ένα εφεδρικό σχέδιο για αυτούς. Αλλά αν λιγότερο από 1% κάνει, μπορεί να μην έχει σημασία τόσο πολύ.

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