Χρήσιμα Tutorials & Εργαλεία για την ενσωμάτωση βίντεο σε HTML5

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

HTML5 Video Tutorials & άρθρα

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

Video for Everybody!

Video for Everybody!

Απλά θέλετε να ενσωματώσετε βίντεο στην HTML5; Αυτό το άρθρο από το Camen Design παρέχει τον πλήρη κώδικα που απαιτείται όχι μόνο για να ενσωματώσετε ένα βίντεο χρησιμοποιώντας το στοιχείο <video>, αλλά και γίνετε αναπαραγωγή Flash για browsers που δεν το υποστηρίζουν. Απλά συμπληρώστε τα στοιχεία του βίντεο και είστε έτοιμοι!

HTML5 Video by HTML5 Rocks

HTML5 Video by HTML5 Rocks

Το HTML5 Rocks είναι ένα φανταστικό site για να αντιμετωπίσουμε όλα τα νέα στοιχεία και χαρακτηριστικά της HTML5. Το τμήμα βίντεο της HTML5 περιγράφει τη διαδικασία ενσωμάτωσης videoχρησιμοποιώντας την ετικέτα <video>, καθώς και ένα παράδειγμα ενσωμάτωσης με <canvas>.

Add HTML5 Video to Your Site

Add HTML5 Video to Your Site

Ο Vadim Makeev του Opera δείχνει το δρόμο για να ενσωματώσετε το βίντεο στην HTML5 χωρίς τη χρήση plugins. Το σεμινάριο καλύπτει επίσης τη διαδικασία ανάπτυξης custom στοιχείων ελέγχου αναπαραγωγής με Javascript.

Embed Videos In Your Web Pages Using HTML5

Embed Videos In Your Web Pages Using HTML5

Προχωρώντας σε κάποια άρθρα  θεωρίας το Webmonkey μιλάει για τις προκλήσεις των μορφών υποστήριξη του προγράμματος περιήγησης τα codecs και παρέχει μια εναλλακτική Flash, για ενσωμάτωση βίντεο στην HTML5.

HTML5 Audio and Video: What you Must Know

HTML5 Audio and Video: What you Must Know

Το Nettuts + παρέχει μια λεπτομερή παρουσίαση από ότι θέλετε να μάθετε για το βίντεο στην HTML5, μέσα από μια σύντομη ιστορία των HTML5 πολυμέσων σε πλήρη διατομή του στοιχείου <video> και διάφορα χαρακτηριστικά του.

Dive Into HTML5 – Video on the Web

Dive Into HTML5 - Video on the Web

Το Chapter 5  παρέχει όλες τις προηγμένες λεπτομέρειες σχετικά με τους κωδικοποιητές βίντεο και τα δοχεία που υποστηρίζονται από τα διάφορα προγράμματα περιήγησης και παραθέτει μερικά χρήσιμα εργαλεία που μπορείτε να χρησιμοποιήσετε για να μετατρέψετε και να κωδικοποιήσει τα βίντεο σας ώστε να φτάσετε όσο το δυνατό ευρύτερο κοινό.

HTML5 Video Players

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

SublimeVideo

SublimeVideo

Video.js

Video.js

MediaElement.js

MediaElement.js

Projekktor

Projekktor

HTML5Media

HTML5Media

Ο εύκολος τρόπος

Αν όλα αυτά σας φαίνονται λίγο περίπλοκα, υπάρχει πάντα η δυνατότητα να χρησιμοποιήσετε μία από τις πολλές ιστοσελίδες φιλοξενίας βίντεο – Οι δύο πιο δημοφιλείς είναι το YouTube και το Vimeo. Και οι δύο επιτρέπουν ενσωμάτωση HD βίντεο με custom players, αλλά επίσης γλιτώνετε την ταλαιπωρία φιλοξενίας αρχείων βίντεο .

YouTube

YouTube

Vimeo

Vimeo