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

Θα θέσουμε το βασικό πλαίσιο της εφαρμογής και στη συνέχεια θα χρησιμοποιήσουμε το

Προϋποθέσεις

Χρησιμοποιήστε το Chrome, το Safari ή τον Internet Explorer 9+. Προς το παρόν, θα πρέπει να αποφύγετε τον Firefox και την Opera λόγω των ζητημάτων μορφής αρχείου βίντεο διαδικτυακού προγράμματος περιήγησης. Παρόλο που η υποστήριξη για το στοιχείο βίντεο είναι συνεπής σε όλα τα σύγχρονα προγράμματα περιήγησης, η μορφή MP4 εκπέμπει Firefox και Opera. Μπορείς ελέγξτε για συμβατότητα εδώ.

Πριν αρχίσετε θα πρέπει να βρείτε ένα .mp4 που μπορείτε να χρησιμοποιήσετε, αν δεν έχετε, θα βρείτε πολλά δωρεάν αρχεία mp4 online.

Δημιουργία του βασικού πλαισίου

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

Θα πρέπει να δημιουργήσετε ένα νέο αρχείο HTML στον κατάλογο εργασίας σας και να το ονομάσετε index.html και στη συνέχεια να προσθέσετε αυτόν τον κώδικα:

HTML5 Video Player

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

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

Ο στόχος στο σχεδιασμό του HTML5

Ακολουθεί το παράδειγμα ενός βίντεο HTML5 στο Chrome:

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

Εισάγετε αυτόν τον κώδικα στη θέση του " "Σχολιάστε στον παραπάνω κώδικα, βεβαιωθείτε ότι αντικαταστήσατε το [VIDEO YOUR] με τη διαδρομή προς το .mp4 και ανανεώστε τη σελίδα.