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

Φιλοξενία του δικού σας βίντεο HTML 5 εναντίον Χρήση του YouTube

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

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

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

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

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

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

Το βίντεο HTML5 παρέχει ορισμένα πλεονεκτήματα από το YouTube

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Μετατρέψτε το βίντεο σε 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 (Windows Macintosh): Αυτό το πρόγραμμα έχει το πλεονέκτημα της μετατροπής σε Ogg και MP4 (H.264) και είναι ανοιχτού κώδικα.
• Δωρεάν μετατροπέας βίντεο: Πιστεύουμε ότι αυτό έχει έκδοση Windows και Macintosh, αλλά ήταν δύσκολο να το πούμε από τον ιστότοπό τους
• Απλός κωδικοποιητής Theora (Macintosh): Αυτό είναι που συνήθως χρησιμοποιούμε.

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

Μετατροπή του βίντεο σε MP4 για Safari και Internet Explorer

Η επόμενη μορφή που πρέπει να μετατρέψετε το βίντεό σας είναι MP4 (βίντεο H.264), ώστε να μπορεί να αναπαραχθεί στον Internet Explorer 9 και νεότερες εκδόσεις, στο Safari 3 και 4 και στο iPhone και Android.

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

• Μετατροπή πολυμέσων: Ένα διαδικτυακό εργαλείο AWS.
• Μετατροπέας βίντεο Miro (Windows Macintosh): Αυτό το πρόγραμμα έχει το πλεονέκτημα της μετατροπής σε Ogg και MP4 (H.264) και είναι ανοιχτού κώδικα.
• ΣΟΥΠΕΡ (Windows): Θα μετατρέψει πολλούς διαφορετικούς τύπους αρχείων σε MP4
• Δωρεάν μετατροπέας βίντεο: Πιστεύουμε ότι αυτό έχει έκδοση Windows και Macintosh, αλλά ήταν δύσκολο να το πούμε από τον ιστότοπό τους.

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

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

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

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

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

Γράψτε το δείκτη τύπων HTML 5 έτσι ώστε τα προγράμματα περιήγησης να γνωρίζουν ότι περιμένουν HTML 5:

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

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

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

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

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

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

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

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

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

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

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

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