Comment travailler avec la vidéo HTML

Sep 15, 2025

Comment

[dix] [dix] [dix]

[dix]

Se déplacer sur YouTube ... avec le & lt; Vidéo & GT; élément et un peu Javascript Vous pouvez commencer à créer votre propre site vidéo. L'élément vidéo est assez simple à utiliser, mais le véritable pouvoir vient lorsque vous le combinez avec JavaScript, ce qui vous donne un niveau de contrôle élevé sur le comportement du joueur.

[dix]

Dans ce tutoriel, nous couvrons la configuration de base d'une vidéo, en sélectionnant des fichiers à lire et à générer des vignettes.

01. Créer une page de base

Commençons par un contour de la page HTML. Nous aurons besoin d'une simple structure div, certains CSS pour le style et, le plus critique, un fichier de script. Vous remarquerez que la balise vidéo est vide maintenant, alors ne ferez rien lorsque vous chargez la page. Cependant, nous lui donnons un identifiant Nous pouvons donc le contrôler avec JavaScript.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; tête & gt;
  & lt; Meta Charset = 'UTF-8' / & GT;
  & lt; Titre & GT; Mon HTML Video Player & lt; / Titre & GT;
  & lt; link rel = 'stylesheet' href = 'Custom.CSS' / & GT;
  & lt; script src = "joueur.js" & gt; & lt; / script & gt;
  & lt; / tête & gt;
  & lt; corps & gt;
  & lt; div id = "titre" & gt;
  & lt; h1 & gt; Bienvenue dans ma bibliothèque vidéo! & lt; / h1 & gt;
Faites défiler les vidéos ci-dessous et cliquez sur celui que vous souhaitez jouer.
  & lt; / div et gt;
  & lt; div id = "Thumbnail-conteneur" & gt;
  & lt; / div et gt;
  & lt; div id = "lecteur-conteneur" & gt;
  & lt; ID vidéo = "lecteur" & gt;
  & lt; / video & gt;
  & lt; dis ID = "Contrôles" & GT;
  & lt; / div et gt;
  & lt; / div et gt;
  & lt; / corps & gt;
  & lt; / html & gt;

02. Style La page

Ensuite, nous allons commencer à ajouter de style à la page. Avant d'essayer de faire quelque chose de trop intelligent, commençons par l'ajout de style de base à un couple de nos éléments div et les choses semblent un peu plus respectables.

 Corps {
  Couleur de fond: #ccccccccc;
  Font-famille: Sans Serif;
}
# Conteneur de joueur {
  Margin-gauche: auto;
  Marge droite: auto;
  largeur: 640px;
  Hauteur: 480px;
  Couleur de fond: # 538C99;
  frontière-rayon: 20px;
}
#Titre {
  Margin-gauche: auto;
  Marge droite: auto;
  largeur: 640px;
  Texte-Aligner: Centre;
  Rembourrage: 30px;
  Fonds de rembourrage: 50px;
  Couleur de fond: # 538C99;
  Couleur: # 333333;
  frontière-rayon: 20px; }

03. Ajouter plus de style

Les choses deviennent un peu plus intéressantes lorsque nous venons de styliser la vignette-Conteneur Div. Nous allons remplir cela avec img éléments, qui seront générés dans nos vidéos. Par conséquent, nous voulons qu'il affiche une barre de défilement horizontale si nous avons plus de vignettes qu'il ne peut montrer à la fois. Nous pouvons faire cela en utilisant le Overflow-x biens.

[dix]

 # Thumbnail-conteneur {
  Couleur de fond: #ccccccccc;
  Marge-top: 30px;
  Margin-gauche: auto;
  Marge droite: auto;
  largeur: 640px;
  Hauteur: 120px;
  Overflow-x: Faites défiler;
  Overflow-y: caché;
  espace blanc: Nowrap;
  frontière-rayon: 20px; }

04. Taille le lecteur vidéo de manière appropriée

Il y a un autre style que nous devons faire. Comme c'est le cas, lorsque nous commençons à jouer de vidéos, ils s'afficheront à toute leur résolution native. Cela ne va pas bien paraître sur la page. Style Style L'élément vidéo pour déterminer la taille de cela. Si nous définissons sa largeur et sa hauteur à 100%, il suffit de remplir sa contenant de la div.

 Video {
  largeur: 100%;
  Hauteur: 100%; }

05. Configurez le script

Il est temps de descendre au JavaScript. Préparons une liste de fichiers vidéo dans un tableau pour qu'il fonctionne avec (nous aurons un code difficile pour l'instant, mais vous pouvez essayer de la configurer pour récupérer via JSON à partir d'un service HTTP).

Nous définirons également quelques variables que nous allons utiliser plus tard sur: ' joueur 'Sera l'élément vidéo; " joueur «Sera un élément source nouvellement créé qui deviendra un enfant de l'objet de lecteur plus tard et indiquera des fichiers source. Nous prévoyons également de vous connecter à un DomcontentOaré événement pour vous assurer que le script attend que la page se charge avant de donner un coup de pied à l'action.

[dix]

 var videofiles = ["1.mp4", "2.mp4", "3.mp4", "4.mp4", "5.mp4"];
varecteur var;
var bidyource = document.careeelement ("Source");
document.addeventlistener ("DomContentOached", fonction () {initialise ();}, false);

Notez que la lecture vidéo dans le navigateur s'appuie sur la présence d'un codec pouvant lire le format vidéo que vous utilisez. Pour assurer votre navigateur de travaux vidéo, les fichiers MP4 sont les fichiers MP4 à l'aide du codec H.264.

06. Générer une vignette

Ensuite, créez une fonction qui générera une vignette d'image à partir d'un fichier vidéo. Nous voulons que cela prenne un objet vidéo et retourne un objet d'image. En interne, la façon dont nous allons réaliser cela consiste à utiliser Canvas HTML .

 Fonction genaTetHumbnail (vidéo) {
  var canvas = document.createelement ("toile");
  Var Conteneur = Document.getElementyID ("Thumbnail-Contener");
  largeur de var = conteneur.clientwidth;
  Var Hauteur = conteneur.clientheight;
  canevas.width = (largeur / 3);
  Canvas.Height = Hauteur;
  canvas.getcontext ("2d"). Drawimage (vidéo, 0, 0, canvas.width, toile.Height);
  var image = document.careeelement ("img");
  image.src = canvas.todataurl ();
  Image de retour; }

07. Générez automatiquement des vignettes comme des vidéos sont chargées

Nous pouvons maintenant prendre la fonction GenerateTetHumbnail et l'utiliser sur chacun des fichiers vidéo de notre liste. Faisons ceci en mettant en œuvre la initialiser () fonction. Cette fonction ajoutera l'objet Playersource en tant qu'enfant de l'élément vidéo, puis itérale à chaque fichier de la liste, chargez-le dans un objet vidéo temporaire et une fois chargé, générer une vignette et l'ajoutez au conteneur miniature.

 Fonction initiale () {
  joueur = document.getelementyID ("lecteur");
  joueur.AppendCendChild (Playersource);
  joueur.controls = false;
  videofiles.foreach (fonction (fichier) {
  var thumbsource = document.careeelement ("Source");
  thumbsource.src = fichier;
  var thumbvideo = document.createelement ("Vidéo");
  thumbvideo.addeventListener ("LoadedData", fonction () {
  Var Conteneur = Document.getElementyID ("Thumbnail-Contener")
  var image = générateTethumbnail (thumbvideo);
  conteneur.appendchild (image);
  }, faux);
  thumbvideo.appendchild (Thumbsource);
  }); }

08. Ajouter des liens vers les vignettes

Il y a quelque chose qui manque, cependant. Nos vignettes apparaissent dans le conteneur, mais aucune d'entre elles n'est cliquable. Nous devons envelopper les images dans un & lt; a & gt; Element, qui doit exécuter du JavaScript lorsque vous cliquez dessus. Ajustons la fonction accrochée à la LoadedData événement pour créer aussi les liens, au lieu de juste img éléments.

 thumbvideo.addeventlistener ("LoadedData", fonction () {
  Var Conteneur = Document.getElementyID ("Thumbnail-Contener")
  var image = générateTethumbnail (thumbvideo);
  var link = document.createelement ("A");
  link.href = "JavaScript: jouer (\" "+ thumbsource.src +" \ ")";
  link.appendCendChild (image);
  conteneur.appendchild (lien);
  },
faux);

09. Jouer une vidéo

Maintenant, nous générons des vignettes avec des liens cliquables, qui sont configurés pour invoquer jouer (thumbsource.src) , où thumbsource.src pointe vers le nom de fichier du fichier vidéo correspondant. Tout ce qui reste consiste à mettre en œuvre la fonction de lecture pour définir les fichiers de la contribution (que vous vous souviendrez que nous nous souviendrons que nous avons lié à l'élément de lecteur vidéo) pour pointer vers le fichier correct et lancer la lecture.

 Fonction Play (URL)
{
  joueursource.src = URL;
  joueur.controls = true;
  joueur.load ();
  joueur.play ();
}

Cet article est apparu à l'origine dans le numéro 266 de Web Designer, le magazine Creative Web Design - proposant des tutoriels d'experts, des tendances de pointe et des ressources gratuites. Achetez le numéro 266 ici ou Abonnez-vous à Web Designer ici .

Articles Liés:

Comment allumer vos menus avec l'animation CSS
16 exemples HTML étonnants
9 des meilleures ressources pour l'apprentissage HTML et CSS

[dix] [dix]

[dix]

Comment travailler avec la vidéo HTML

01. Créer une page de base

02. Style La page

03. Ajouter plus de style

04. Taille le lecteur vidéo de manière appropriée

05. Configurez le script

06. Générer une vignette

07. Générez automatiquement des vignettes comme des vidéos sont chargées

08. Ajouter des liens vers les vignettes

09. Jouer une vidéo

Comment - Most Popular Articles

Comment télécharger des photos Instagram: Tout ce que vous devez savoir

Créer un bot mou sur mesure

Chiaroscurot Art: un guide étape par étape

Comprendre le traitement des langues naturelles

Comment créer un robot de paquet

Les pros de marque partagent la voix de la marque de ongles

Convertir une photo en un ensemble VR

5 façons de créer des expériences VR plus immersives

Catégories