Βίντεο HTML5 10 πράγματα που πρέπει να γνωρίζουν οι σχεδιαστές

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

Τα τελευταία χρόνια ένα media player που βασίζεται σε Flash είναι περισσότερο από αρκετό για streaming στον Ιστό και αυτή η τεχνολογία είναι ακόμα απαραίτητη για την υποστήριξη των παλαιότερων browsers. Αλλά ευτυχώς τα σύγχρονα πρότυπα έχουν προχωρήσει και η ενσωμάτωση του βίντεο HTML5 ανοίγει πόρτες για δεκάδες νέες ευκαιρίες.

Σε αυτόν τον οδηγό θα ήθελα να σας προτείνω μια εισαγωγή στο βίντεο HTML5 για τον Παγκόσμιο Ιστό. Θα χρειαστεί κάποια πρακτική για να καταλάβετε τον εγγενή παίκτη στο πρόγραμμα περιήγησης και όλες τις λειτουργίες του. Και ο καλύτερος τρόπος για να εξοικειωθείτε είναι η κατάδυση στο κεφάλι πρώτα!

1. Τύποι μέσων

Όταν εργάζεστε με ένα πρόγραμμα αναπαραγωγής βίντεο flash, είναι πολύ συνηθισμένο να συνδέσετε όλες τις μορφές βίντεο σε .flv. Ενώ αυτό δεν λειτουργεί, τα περισσότερα αρχεία flv δεν μπορούν να διατηρήσουν την ποιότητα πουθενά κοντά στις πιο προηγμένες μορφές αρχείων / κωδικοποιητές. Υπάρχουν 3 σημαντικοί τύποι βίντεο που υποστηρίζονται από HTML5: MP4, WebM και Ogg / Ogv. Ο τύπος αρχείου MPEG-4 είναι γενικά κωδικοποιημένος σε H.264 ο οποίος επιτρέπει την αναπαραγωγή σε τρίτους παίκτες Flash. Αυτό σημαίνει ότι δεν χρειάζεται να διατηρείτε ένα αντίγραφο βίντεο .flv για να υποστηρίξετε μια εφεδρική μέθοδο! Το WebM και το Ogg είναι δύο πολύ νεότεροι τύποι αρχείων που σχετίζονται με το βίντεο HTML5. Το Ogg χρησιμοποιεί την κωδικοποίηση Theora η οποία βασίζεται στην τυπική μορφή αρχείου ήχου ανοικτού κώδικα. Αυτά μπορούν να αποθηκευτούν με επέκταση .ogg ή .ogv.

Το WebM είναι ένα έργο που βγαίνει από την Google το οποίο μπορείτε να διαβάσετε περισσότερα για την ιστοσελίδα του Project WebM. Η μορφή υποστηρίζεται ήδη από το Opera, το Google Chrome, το Firefox 4+ και πιο πρόσφατα από τον Internet Explorer 9. Είναι ακόμα άγνωστο από τους περισσότερους επαγγελματίες Ιστού, αλλά το WebM είναι η κορυφαία μορφή πολυμέσων βίντεο στο μέλλον του βίντεο στο διαδίκτυο.

2. Υποστήριξη προγράμματος περιήγησης

Ποιο από αυτά τα είδη αρχείων χρειάζεστε για τον ιστότοπό σας; Στην ιδανική περίπτωση και οι 3 θα είναι υπέροχες καθώς παρέχουν το πλήρες φάσμα υποστήριξης. Ωστόσο, αυτό δεν είναι ρεαλιστικό, και στην πραγματικότητα, μπορείτε να καλύψετε όλες τις βάσεις με μόνο δύο από αυτούς. Ακολουθεί ανάλυση των λειτουργιών για κάθε πρόγραμμα περιήγησης:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - Χωρίς HTML5, Flash μόνο!

Αν θυμάστε, νωρίτερα ανέφερα ότι οι περισσότεροι παίκτες flash θα υποστηρίξουν τα αρχεία MP4 εφόσον είναι κωδικοποιημένα στο H.264. Ως εκ τούτου, κάθε ένα από αυτά τα προγράμματα περιήγησης θα ενσωματώσει το MP4 + Flash ως τελική λύση. Αυτό σημαίνει ότι χρειάζεται μόνο να δημιουργήσετε δύο διαφορετικές μορφές βίντεο για την υποστήριξη όλων των προγραμμάτων περιήγησης. MP4 για το Safari / IE9 και μια επιλογή μεταξύ του WebM ή του Ogg για τα υπόλοιπα.

Κατά τη γνώμη μου, συνιστώ ιδιαίτερα να κολλήσω με τη μορφή WebM. Έχει μερικά μεγάλα ονόματα πίσω από το έργο (συγκεκριμένα το Google) και έχει κερδίσει πολλή πρόσφυση στην κοινότητα HTML5. Το Ogg / Ogv θα υποστηρίζεται, αλλά πιθανότατα θα χάσει τη δημοτικότητα στα μικρότερα μεγέθη αρχείων του WebM. Μπορείτε να διαβάσετε ένα σχετικό κομμάτι για το μέλλον του βίντεο στο διαδίκτυο που γράφτηκε από τον Sean Golliher.

3. Ενσωμάτωση απλών βίντεο HTML5

Ας δούμε τώρα τη σύνταξη που απαιτείται για την ενσωμάτωση δείγματος κώδικα. Το μόνο που χρειαζόμαστε είναι η ετικέτα βίντεο HTML5 για αναφορά σε κάθε διεύθυνση URL ταινίας.

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

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

4. Προσφορά Flash Fallback

Το παραπάνω παράδειγμα είναι ιδανικό για όλα τα προγράμματα περιήγησης που συμμορφώνονται με τα πρότυπα. Ωστόσο, πρέπει επίσης να λάβουμε υπόψη ότι ο κόσμος δεν είναι πάντα στην αιχμή της τεχνολογίας. Πρέπει να υποστηρίξουμε χρήστες σε παλαιότερες εκδόσεις του Safari, του Mozilla Firefox και ειδικά του Internet Explorer.

Ο καλύτερος τρόπος για να επιτευχθεί αυτό είναι μέσω ενός παίκτη Flash fallback. Αυτά μπορούν να προστεθούν χρησιμοποιώντας το ενθέτω ή αντικείμενο για να αναφερθείτε σε ένα αρχείο .swf τρίτου μέρους. Το JW Player και το Flowplayer είναι δύο δωρεάν λύσεις ανοιχτού κώδικα που μπορείτε να εξετάσετε. Αλλά, επίσης, ελέγξτε τα premium video players στην ActiveDen τα οποία μπορούν να πάνε φθηνά από $ 15 έως $ 20.

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

5. Υποστήριξη κινητής συσκευής

Το θέμα αυτό εξακολουθεί να συζητείται, δεδομένου ότι η βιομηχανία κινητής τηλεφωνίας είναι τόσο νέα. Η Apple βγήκε με υποστήριξη για MP4 σε συσκευές Mac και iOS. Αυτό σημαίνει ότι μπορείτε να μεταφορτώσετε αρχεία βίντεο .mp4 στο iPad, το iPhone ή το iPod Touch στο τυπικό περιβάλλον χρήστη βίντεο. Αυτό καλύπτει μεγάλο μέρος του μεριδίου αγοράς.

Πρόσφατα, οι συσκευές Android αντιμετώπιζαν έναν δύσκολο χρόνο να φτάσουν στο ίδιο επίπεδο υποστήριξης. Ωστόσο, η Google έχει υιοθετήσει τελικά την streaming του .mp4 web, η οποία τώρα αξιοποιεί σχεδόν όλους τους χρήστες κινητών τηλεφώνων. Και δεδομένου ότι το Flash δεν αποτελεί επιλογή εδώ, το MP4 είναι η καλύτερη διαθέσιμη λύση. Αυτός είναι ο λόγος για τον οποίο θέλετε να ενσωματώσετε πρώτα τον κώδικα .mp4 έτσι ώστε οι συσκευές iOS να μπορούν να αναγνωρίζουν το αρχείο αμέσως.

6. Agent χρηστών Safari

Ένα σφάλμα που πρέπει να αναφερθεί είναι το ένα που υπάρχει ανάμεσα στους παίκτες Flash και τη φυσική HTML5 .mp4 ροή στο Safari. Επειδή το πρόγραμμα περιήγησης μπορεί να υποστηρίζει και τα δύο αρχεία, ενδέχεται να έχετε πρόβλημα με τη λήψη της ροής βίντεο HTML5 στη θέση Flash. Ωστόσο, χάρη σε αυτό το μεγάλο blog στο TUAW, είναι εύκολο να αλλάξετε τον πράκτορα χρήστη που χρησιμοποιείτε.

Αυτό θα αναγκάσει την ιστοσελίδα σας να αναγνωρίσει το πρόγραμμα περιήγησης ως τρέχουσα σε άλλη συσκευή. Πιθανότατα θα επιλέξετε το iPad, το οποίο ΔΕΝ υποστηρίζει οποιαδήποτε αναπαραγωγή Flash. Αυτό είναι το μόνο σημαντικό ζήτημα που μπορεί να αντιμετωπίσετε κατά τη δοκιμή των μεθόδων αναπαραγωγής MP4 και flash.

7. Διαχειριστείτε τα στοιχεία ελέγχου αναπαραγωγής

Πιστέψτε το ή όχι υπάρχουν επίσης μέθοδοι που μπορείτε να χρησιμοποιήσετε για να χειριστείτε τα στοιχεία ελέγχου αναπαραγωγής βίντεο HTML5. Μπορεί όλα να γίνουν με JavaScript τραβώντας από μια σειρά ανοιχτών μεθόδων. Υπάρχουν πολλοί τρόποι για να παραθέσετε εδώ, αλλά προσπαθήστε να παρακολουθήσετε το έγγραφο μέσων W3C docs για περισσότερες λεπτομέρειες.

Για να σας δώσω μια γενική ιδέα, το blog της Opera dev έχει δημοσιεύσει κάποια σύντομα μαθήματα που είναι ωραία για αρχάριους. Ακόμη και αν δεν έχετε πάρει ποτέ JavaScript ή jQuery πριν, είναι ακόμα απλό να χτυπήσει το έδαφος τρέχει με αυτό. Μπορείτε να καλέσετε συγκεκριμένα χαρακτηριστικά των μέσων βίντεο, όπως σίγαση ή currentTime. Στη συνέχεια, θα μπορούσατε να εκτελέσετε ενέργειες (dim background, διαφημίσεις προβολής) βάσει αυτών των κριτηρίων, χειριζόμενοι το DOM στο jQuery.

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

8. Μετατροπή μορφής βίντεο

Αυτό είναι ένα άλλο μεγάλο ζήτημα το οποίο πιθανόν θα προκαλέσει σύγχυση σε άτομα με λιγότερη τεχνολογία. Θέλετε απλώς να πάρετε τον ιστοχώρο σας μέχρι και streaming και τώρα θα πρέπει να ασχοληθεί με τη μετατροπή βίντεο; Δεν είναι πραγματικά τόσο δύσκολο.

Για να αντιμετωπίσετε το MP4 που είναι η μεγαλύτερη προτεραιότητά σας, μπορείτε να χρησιμοποιήσετε το HandBrake, το οποίο είναι μια δωρεάν λύση ανοιχτού κώδικα που λειτουργεί και στα 3 μεγάλα λειτουργικά συστήματα. Θα υποστηρίξει το H.264 μαζί με μερικούς άλλους κωδικοποιητές, γεγονός που καθιστά την καλύτερη επιλογή για τους χρήστες freebie. Εάν έχετε τα χρήματα για να καλύψετε έξω θα πρέπει να συστήσω Xilisoft μετατροπέα που είναι στο Mac App Store για μόνο $ 40 άδεια χρήσης διάρκειας ζωής.

Φαίνεται ότι η διαδρομή WebM κάνει τη ζωή πολύ πιο εύκολη. Το Miro Video Converter είναι ένα δωρεάν εργαλείο για Windows και OS X το οποίο παράγει εξαιρετικά υψηλής ποιότητας αρχεία WebM. Μπορεί επίσης να κάνει την κωδικοποίηση Ogg Theora η οποία βγαίνει με πολύ καλή ποιότητα επίσης.

9. Δημιουργία ενός Web Player

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

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

Δημιουργία ενός προγράμματος αναπαραγωγής βίντεο HTML5

10. Βιβλιοθήκη VideoJS

Το VideoJS είναι ίσως η αγαπημένη μου λύση για τους παίκτες βίντεο HTML5. Το μόνο που χρειάζεστε είναι το αυτο-φιλοξενούμενο φύλλο στυλ JavaScript και CSS που περιλαμβάνονται κάπου στο έγγραφό σας. Στη συνέχεια, γράφετε τον τυπικό κώδικα βίντεο HTML5 με μερικές επιπλέον κλάσεις για εκδορά. Προσθέτω τον παρακάτω δείγμα κώδικα:

Αν τυχαίνει να τρέχετε ένα blog του WordPress μπορείτε επίσης να δοκιμάσετε το προσαρμοσμένο WP plugin. Θα περιλαμβάνει αυτόματα τη βιβλιοθήκη js / css στις σελίδες όπου εμφανίζεται το βίντεο HTML5. Και μπορείτε να το κάνετε αυτό μέσα σε οποιαδήποτε δημοσίευση ή επεξεργασία σελίδων χρησιμοποιώντας shortcodes (δείτε εδώ).

συμπέρασμα

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