Πώς να συνεργαστείτε με το βίντεο HTML

Feb 2, 2026

πως να

Μετακίνηση πάνω από το YouTube ... με το & lt; Video & GT; στοιχείο και λίγο Javascript , μπορείτε να αρχίσετε να δημιουργείτε τη δική σας τοποθεσία βίντεο. Το στοιχείο βίντεο είναι αρκετά απλό στη χρήση, αλλά η πραγματική δύναμη έρχεται όταν το συνδυάσετε με το JavaScript, το οποίο σας δίνει ένα υψηλό επίπεδο ελέγχου στη συμπεριφορά του παίκτη.

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

01. Δημιουργία βασικής σελίδας

Ας ξεκινήσουμε με ένα περίγραμμα σελίδας HTML. Θα χρειαστούμε μια απλή δομή div, μερικά css για στυλ και, πιο κριτικά, ένα αρχείο δέσμης ενεργειών. Θα παρατηρήσετε ότι η ετικέτα βίντεο είναι άδειο τώρα, οπότε δεν θα κάνετε τίποτα όταν φορτώνετε τη σελίδα. Ωστόσο, το δίνουμε ένα ταυτότητα Έτσι μπορούμε να το ελέγξουμε με το JavaScript.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; κεφάλι & gt;
  & lt; meta charset = 'utf-8' / & gt;
  & lt; τίτλος & GT; My HTML Video Player & LT; / Title & GT;
  & lt; link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "player.js" & gt; / script & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; div id = "τίτλος" & gt;
  & LT; H1 & GT; Καλώς ήλθατε στη Βιβλιοθήκη Βίντεο μου! & LT; / H1 & GT;
Μετακινηθείτε στα παρακάτω βίντεο και κάντε κλικ σε αυτό που θέλετε να παίξετε.
  & lt; / div & gt;
  & lt; div id = "thumbnail-container" & gt;
  & lt; / div & gt;
  & lt; div id = "container player" & gt;
  & lt; video id = "player" & gt;
  & lt; / video & gt;
  & lt; div id = "controls" & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / Body & GT;
  & lt; / html & gt;

02. Στυλ τη σελίδα

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

 Σώμα {
  Ιστορικό-Χρώμα: #CCCCC;
  Οικογένεια γραμματοσειράς: Sans-Serif.
}
# παίκτη-εμπορευματοκιβώτιο {
  MARGIN-LEST: AUTO;
  Περιθώριο-Δεξιά: Αυτόματη?
  Πλάτος: 640px;
  Ύψος: 480px;
  Ιστορικό-Χρώμα: # 538C99;
  Ακτίνα συνοριακής ακτίνας: 20px;
}
#τίτλος {
  MARGIN-LEST: AUTO;
  Περιθώριο-Δεξιά: Αυτόματη?
  Πλάτος: 640px;
  Κείμενο-Ευθυγράμμιση: Κέντρο;
  padding-top: 30px;
  Padding-bottom: 50px;
  Ιστορικό-Χρώμα: # 538C99;
  Χρώμα: # 333333;
  Ακτίνα συνοριακής ακτίνας: 20px; }

03. Προσθέστε περισσότερο στυλ

Τα πράγματα γίνονται λίγο πιο ενδιαφέροντα όταν έρχονται να στείλουμε το thumbnail-container div. Θα το γεμίσουμε img Στοιχεία, τα οποία θα είναι μικρογραφίες που δημιουργούνται από τα βίντεό μας. Επομένως, θέλουμε να εμφανίσει μια οριζόντια κορμάκι scrollbar αν έχουμε περισσότερες μικρογραφίες από ό, τι μπορεί να εμφανιστεί ταυτόχρονα. Μπορούμε να το κάνουμε αυτό χρησιμοποιώντας το υπερχείλιση-x ιδιοκτησία.

 # Thumbnail-Container {
  Ιστορικό-Χρώμα: #CCCCC;
  Περιθώριο: 30px;
  MARGIN-LEST: AUTO;
  Περιθώριο-Δεξιά: Αυτόματη?
  Πλάτος: 640px;
  Ύψος: 120px;
  overflow-x: κύλιση.
  Overflow-y: κρυμμένο?
  Λευκό χώρο: NowRap;
  Ακτίνα συνοριακής ακτίνας: 20px; }

04. Μέγεθος Ο παίκτης του βίντεο κατάλληλα

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

 Βίντεο {
  Πλάτος: 100%.
  Ύψος: 100%. }

05. Ρυθμίστε το σενάριο

Ήρθε η ώρα να κατεβείτε στο JavaScript. Ας προετοιμάσουμε μια λίστα αρχείων βίντεο σε μια σειρά για να συνεργαστούμε με (σκληρό κώδικα για τώρα, αλλά θα μπορούσατε να δοκιμάσετε να το διαμορφώσετε να ανακτήσετε μέσω JSON από μια υπηρεσία HTTP).

Θα ορίσουμε επίσης μερικές μεταβλητές που θα χρησιμοποιήσουμε αργότερα: ' παίχτης «Θα είναι το στοιχείο βίντεο. ' παίκτης «Θα είναι ένα πρόσφατα δημιουργημένο στοιχείο πηγής που θα γίνει ένα παιδί του αντικειμένου του παίκτη αργότερα και δείχνει τα αρχεία προέλευσης. Θα σχεδιάζουμε επίσης να γράψουμε σε ένα Domcontent φορτίο Εκδήλωση για να βεβαιωθείτε ότι το σενάριο περιμένει τη φόρτωση της σελίδας πριν από την εκκίνηση σε δράση.

 var videofiles = ["1.mp4", "2.mp4", "3.mp4", "4.mp4", "5.mp4"].
var player?
var playersource = έγγραφο.createelement ("πηγή");
document.addeventListener ("domcontentalloaded", λειτουργία () {pictionise ();}, false);

Σημειώστε ότι η αναπαραγωγή βίντεο στο πρόγραμμα περιήγησης βασίζεται στην παρουσία κωδικοποιητή που μπορεί να διαβάσει τη μορφή βίντεο που χρησιμοποιείτε. Για να εξασφαλίσετε ότι το Broads Works Works Cross-Browser, το ασφαλέστερο στοίχημα είναι αρχεία MP4 χρησιμοποιώντας τον κωδικοποιητή H.264.

06. Δημιουργήστε μια μικρογραφία

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

 Λειτουργία GenerAtethumbnail (βίντεο) {
  var καμβά = έγγραφο.createelement ("καμβάς");
  VAR Container = Document.geteLemementIid ("thumbnail-container");
  VAR WIDTH = CONTRANDER.ClientWidth.
  var Ύψος = Container.ClientHeight.
  canvas.width = (πλάτος / 3);
  canvas.height = Ύψος;
  canvas.getcontext ("2d"). Drawimage (βίντεο, 0, 0, καμβά, καμβά.
  var image = έγγραφο.createreelement ("img");
  image.src = canvas.todataurl ();
  Επιστρέψτε την εικόνα; }

07. Δημιουργία αυτόματης δημιουργίας μικρογραφιών όπως έχουν τοποθετηθεί βίντεο

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

 Λειτουργία αρχικοποίησης () {
  player = document.getelementbyid ("player");
  player.appendchild (παίκτες);
  player.controls = false;
  videofiles.fooeach (λειτουργία (αρχείο) {
  var thumbsource = έγγραφο.createelement ("πηγή").
  thumbsource.src = αρχείο;
  var thumbvideo = έγγραφο.createelement ("Video").
  thumbvideo.adddeventlistenerlistlistener ("loadeddata", λειτουργία () {
  VAR Container = Document.GetELEDByid ("Thumbnail-Container")
  var εικόνα = generatethumbnail (thumbvideo);
  container.appendchild (εικόνα);
  }, FALSE).
  thumbvideo.appendchild (Thumbsource);
  }); }

08. Προσθέστε συνδέσμους στις μικρογραφίες

Υπάρχει κάτι που λείπει, όμως. Οι μικρογραφίες μας εμφανίζονται στο δοχείο, αλλά κανένας από αυτούς δεν είναι δυνατός. Πρέπει να τυλίξουμε τις εικόνες σε ένα & lt; a & gt; Στοιχείο, το οποίο πρέπει να εκτελέσει κάποιο javascript όταν κάνετε κλικ. Ας προσαρμόσουμε τη λειτουργία που συνδέεται με το LoadedData συμβάν για τη δημιουργία των συνδέσμων, αντί να απλά img στοιχεία.

 Thumbvideo.addeventListListenerlistener ("LoadedData", λειτουργία () {
  VAR Container = Document.GetELEDByid ("Thumbnail-Container")
  var εικόνα = generatethumbnail (thumbvideo);
  VAR LINK = DOGRAND.CREATEELEMENT ("Α").
  link.href = "javascript: play (\" "+ thumbsource.src +" \ ")";
  link.appendChild (εικόνα);
  Container.AppendChild (σύνδεσμος);
  },
ψευδής) ·

09. Παίξτε ένα βίντεο

Τώρα δημιουργούμε μικρογραφίες με συνδέσμους με δυνατότητα κλικ, οι οποίες δημιουργούνται για να επικαλεστεί Παίξτε (Thumbsource.src) , που thumbsource.src δείχνει το όνομα αρχείου του σχετικού αρχείου βίντεο. Το μόνο που παραμένει είναι να εφαρμόσετε τη λειτουργία αναπαραγωγής για να ορίσετε παίκτες (το οποίο θα θυμηθήκαμε ότι συνδέσαμε το στοιχείο αναπαραγωγής βίντεο) για να επισημάνουμε το σωστό αρχείο και να ξεκινήσετε την αναπαραγωγή.

 Λειτουργία αναπαραγωγής (URL)
{
  flagsource.src = URL;
  player.controls = TRUE;
  player.load ();
  player.play ();
}

Αυτό το άρθρο εμφανίστηκε αρχικά στην έκδοση 266 του σχεδιαστή ιστοσελίδων, το δημιουργικό περιοδικό web design - προσφέροντας εκπαιδευτικά υπολογιστές, αιχμές τάσεις και δωρεάν πόρους. Αγοράστε τεύχος 266 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

Πώς να ενεργοποιήσετε τα μενού σας με το CSS Animation
16 εκπληκτικά παραδείγματα HTML
9 από τους καλύτερους πόρους για την εκμάθηση HTML και CSS

Πώς να συνεργαστείτε με το βίντεο HTML

01. Δημιουργία βασικής σελίδας

02. Στυλ τη σελίδα

03. Προσθέστε περισσότερο στυλ

04. Μέγεθος Ο παίκτης του βίντεο κατάλληλα

05. Ρυθμίστε το σενάριο

06. Δημιουργήστε μια μικρογραφία

07. Δημιουργία αυτόματης δημιουργίας μικρογραφιών όπως έχουν τοποθετηθεί βίντεο

08. Προσθέστε συνδέσμους στις μικρογραφίες

09. Παίξτε ένα βίντεο

πως να - Τα πιο δημοφιλή άρθρα

Τυπογραφία μάρκας: Ένας πλήρης οδηγός

Δημιουργήστε τις ακτίνες του Θεού σε ακτίνες V

Βάλτε μια αρχική κάρτα ταρώ

15 Συμβουλές πορτρέτου Fantasy

Όλα όσα πρέπει να γνωρίζετε για το νέο Node.js 8

Πώς να σχεδιάσετε το τέλειο κάλυμμα βιβλίου

Κορυφαίες συμβουλές για γλυπτική ένα πλάσμα σε ZBrush

Επιταχύνετε την 3D μοντελοποίηση

Κατηγορίες