Comment personnaliser les commandes de lecteur vidéo HTML5

Pour personnaliser entièrement les commandes de lecteur vidéo HTML5, vous devez masquer les contrôles par défaut et créer une interface personnalisée avec HTML, CSS et JavaScript; Omettre d'abord l'attribut des contrôles dans la balise vidéo, ajouter des boutons et des curseurs personnalisés, puis définissez de beaux styles via CSS, puis utilisez JavaScript pour implémenter la lecture / la pause, la traînée de progression, l'ajustement du volume et les fonctions en plein écran, et ajouter davantage des fonctions améliorées telles que l'affichage temporel, le statut de chargement, les raccourcis clavier, et pour réaliser une expérience de jeu vidéo qui est cohérente avec le style de site Web et le style de site Web et le style riche.

La personnalisation des commandes de lecteur vidéo HTML5 vous donne un contrôle total sur l'apparence et les fonctionnalités de votre interface vidéo. Par défaut, les navigateurs fournissent des contrôles de base, mais les styler directement sont limités. Pour vraiment personnaliser, vous devez masquer les contrôles par défaut et créer le vôtre en utilisant JavaScript et CSS.

Masquer les contrôles par défaut et créer des personnaux

Commencez par supprimer les contrôles par défaut du navigateur et ajouter vos propres éléments d'interface utilisateur:

 <vidéo id = "myvideo" width = "640">
  <source src = "video.mp4" type = "vidéo / mp4">
  Votre navigateur ne prend pas en charge la balise vidéo.
</ vidéo>

<div class = "Custom-Controls">
  <Button id = "playpause"> play </ftont>
  <input type = "range" id = "SeekBar" value = "0">
  <input type = "range" id = "volumebar" min = "0" max = "1" Step = "0,1" value = "1">
  <Button ID = "FullScreen"> FullScreen </futton>
</div>

Dans le HTML, l'attribut controls est omis, donc l'interface utilisateur par défaut n'apparaît pas. Au lieu de cela, des boutons et des curseurs personnalisés sont ajoutés sous la vidéo.

Style les commandes avec CSS

Utilisez CSS pour faire en sorte que les commandes correspondent à la conception de votre site:

 .Custom-Controls {
  Affichage: flex;
  Align-Items: Centre;
  Écart: 10px;
  marge: 10px;
  rembourrage: 10px;
  Contexte: # 333;
  Border-Radius: 0 0 8px 8px;
}

bouton.
  Contexte: # 007BFF;
  Couleur: blanc;
  Border: aucun;
  rembourrage: 8px 12px;
  Border-Radius: 4px;
  curseur: pointeur;
}

Bouton.
  Contexte: # 0056B3;
}

.
  -Webkit-apparence: aucun;
  Largeur: 100px;
  hauteur: 5px;
  Contexte: # 666;
  Aperçu: aucun;
  Border-Radius: 3px;
}

.custom-controls entrée [type = "range"] :: - webkit-slider-thumb {
  -Webkit-apparence: aucun;
  hauteur: 15px;
  Largeur: 15px;
  Contexte: # 007BFF;
  Border-Radius: 50%;
  curseur: pointeur;
}

Ce style donne un look moderne et propre. Vous pouvez ajuster les couleurs, les tailles et la disposition au besoin.

Ajouter des fonctionnalités avec JavaScript

Connectez maintenant les contrôles personnalisés à l'élément vidéo:

 const video = document.getElementById ('myVideo');
const playPausebtn = document.getElementById («playPause»);
const Seekbar = document.getElementById («SeekBar»);
const volumebar = document.getElementById ('volumebar');
const fullScreenbtn = document.getElementById ('fullScreen');

// Play / Pause Toggle
playpausebtn.addeventListener ('click', () => {
  if (video.paused) {
    video.play ();
    playPausebtn.textContent = 'Pause';
  } autre {
    video.pause ();
    playPausebtn.textContent = 'play';
  }
});

// Mettre à jour Seek Bar en tant que lecture vidéo
video.addeventListener ('timeupdate', () => {
  SeekBar.Value = (video.currentTime / Video.Duration) * 100;
});

// cherche une vidéo
SeekBar.AddeventListener ('Input', () => {
  const time = (SeekBar.Value / 100) * Video.Duration;
  video.currentTime = time;
});

// Contrôle du volume
volumebar.addeventListener ('input', () => {
  video.volume = volumebar.value;
});

// plein écran
fullScreenbtn.addeventListener ('click', () => {
  if (video.requestfullScreen) {
    vidéo.requestfullScreen ();
  } else if (video.webkitRequestfullScreen) {
    video.webkitRequestfullScreen ();
  }
});

Ce script gère toutes les interactions de base: play / pause, recherche, volume et écran complet. Il écoute les événements et met à jour l'état vidéo en conséquence.

Améliorations facultatives

Vous pouvez aller plus loin par:

• Ajout d'un affichage de temps (par exemple, «2:14 / 4:30»)
• Montrant un fileur de chargement pendant la mise en mémoire tampon
• Faire se cacher les commandes sur l'inactivité et réapparaître sur le plan de volant
• Prise en charge des raccourcis clavier (espace pour jouer / pause, m pour muet, etc.)

Par exemple, pour montrer le temps actuel et total:

 fonction formatTime (secondes) {
  const mins = math.floor (secondes / 60);
  const Secs = math.floor (secondes% 60) .toString (). Padstart (2, '0');
  return `$ {mins}: $ {Secs}`;
}

video.addeventListener ('chardedMetadata', () => {
  SeekBar.max = 100;
  // en supposant que vous avez un <span id = "timedisplay"> </span> dans vos commandes
  document.getElementById (&#39;Timedisplay&#39;). TextContent = 
    FormAttime (vidéo.Duration);
});

video.addeventListener (&#39;timeupdate&#39;, () => {
  document.getElementById (&#39;CurrentTime&#39;). TextContent = 
    FormAttime (vidéo.currentTime);
});

Fondamentalement, vous remplacez l'interface utilisateur par défaut par HTML, le coiffant par CSS et le câblant avec JavaScript. Il faut un peu plus de travail que d'utiliser les contrôles par défaut, mais cela en vaut la peine pour une expérience vidéo empoisonnée et marquée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!