Comment styliser un lecteur vidéo avec CSS

Pour utiliser CSS pour personnaliser l'apparence d'un lecteur vidéo, vous devez d'abord créer un conteneur contenant des vidéos et des contrôles personnalisés, masquer les commandes par défaut via CSS et concevoir votre propre interface de lecture, définir le style de conteneur pour atteindre les coins arrondis, les ombres et la disposition centrée, embellir les boutons de lecture, les barres de progression et les barres de volume, l'utilisation de Pseudo-éléments pour personnaliser le style de slin Conception réactive pour s'adapter aux appareils mobiles, supprimer les options de téléchargement et d'image dans les commandes natives et étendre les boutons en plein écran, muet et autres, implémentez en fin de compte un lecteur vidéo avec une apparence moderne, un style unifié et une bonne expérience utilisateur.

Le style d'un lecteur vidéo avec CSS vous donne un contrôle total sur son apparence, vous permettant de créer un look moderne et cohérent qui correspond à la conception de votre site Web. Bien que l'élément <video></video> lui-même ait des pièces sylables limitées par défaut, vous pouvez créer une interface personnalisée autour de lui en utilisant HTML et CSS. Voici comment le faire efficacement.

Créer un conteneur vidéo personnalisé

Commencez par envelopper l'élément <video></video> dans un conteneur. Cela facilite le style et les commandes de superposition.

 <div class = "vidéo-joueur">
  <video src = "example.mp4" class = "video-element"> </ vidéo>
  <div class = "vidéo-témoins">
    <Button class = "play-Pause"> play </utton>
    <input type = "range" class = "Seek-bar" value = "0">
    <input type = "range" class = "volume-bar" value = "1" min = "0" max = "1" Step = "0,1">
  </div>
</div>

Appliquez maintenant un style de base au conteneur pour contrôler la taille, les bordures et la mise en page:

 .video-player {
  Position: relative;
  Largeur: 80%;
  largeur maximale: 800px;
  marge: 2rem Auto;
  débordement: caché;
  Border-Radius: 12px;
  Contexte: # 000;
  Box-Shadow: 0 4px 10px RGBA (0, 0, 0, 0,3);
}

.video-element {
  Largeur: 100%;
  Hauteur: Auto;
  Affichage: bloc;
}

Style les commandes avec un look propre et moderne

Les commandes de navigateur par défaut sont difficiles à coiffer, donc les cacher et la construction de vôtres donne de meilleurs résultats.

 .Video-Controls {
  Affichage: flex;
  Align-Items: Centre;
  Contexte: RGBA (0, 0, 0, 0,7);
  rembourrage: 10px;
  Écart: 10px;
  Opacité: 0;
  Transition: opacité 0.3S facilité;
}

.Video-Player: Hover .Video-Controls {
  Opacité: 1;
}

.Play-Pause {
  Contexte: #FFFF;
  Border: aucun;
  rembourrage: 8px 12px;
  Border-Radius: 4px;
  curseur: pointeur;
  taille de police: 14px;
  Police-poids: Bold;
}

.Play-Pause: Hover {
  Contexte: # E0E0E0;
}

Pour les barres de recherche et de volume, remplacez l'apparence par défaut avec CSS:

 .seek-bar,
.volume-bar {
  -Webkit-apparence: aucun;
  Largeur: 100%;
  hauteur: 6px;
  Contexte: # 444;
  Aperçu: aucun;
  Border-Radius: 3px;
  curseur: pointeur;
}

.seek-bar :: - webkit-slider-thumb,
.Volume-Bar :: - webkit-slider-thumb {
  -Webkit-apparence: aucun;
  hauteur: 14px;
  Largeur: 14px;
  Contexte: #FFFF;
  Border-Radius: 50%;
  curseur: pointeur;
}

.seek-bar :: - moz-range-thumb {
  hauteur: 14px;
  Largeur: 14px;
  Contexte: #FFFF;
  Border-Radius: 50%;
  Border: aucun;
  curseur: pointeur;
}

Rendez-le réactif et masquez les commandes natives

Désactivez toujours les contrôles par défaut avec l'attribut controls supprimé ou utilisez controlslist="nodownload" pour le contrôle partiel. Assurer également la réactivité:

 @media (max-large: 600px) {
  .video-player {
    Largeur: 95%;
  }

  .Video-Controls {
    Écart: 5px;
    rembourrage: 8px;
  }

  .Play-Pause {
    rembourrage: 6px 10px;
    taille de police: 12px;
  }
}

Et dans votre HTML:

 <video src = "example.mp4" class = "vidéo-element" ControlsList = "nodownload" DisablePictureInpicture> </DICOWE>

Cela supprime des options indésirables comme le téléchargement et le pip, donnant une interface utilisateur plus propre.

Facultatif: ajouter un écran plein et d'autres boutons

Vous pouvez prolonger la barre de commande avec des boutons pour l'écran complet, la muet de volume ou la vitesse de lecture. Les styliser de manière cohérente en utilisant le même langage de conception - icônes simples ou texte, boutons arrondis, effets de survol.

 .fullScreen-Button {
  marge-gauche: auto;
  Contexte: transparent;
  Border: aucun;
  Couleur: #ffff;
  taille de police: 18px;
  curseur: pointeur;
}

.fullScreen-Button: Hover {
  Text-shadow: 0 0 4px #fff;
}

Utilisez JavaScript pour gérer les fonctionnalités comme le basculement de plein écran ou la mise à jour de la barre de recherche.

Le style d'un lecteur vidéo avec CSS consiste principalement à cacher l'interface utilisateur par défaut et à construire le vôtre par-dessus. Concentrez-vous sur la convivialité, le contraste et la réactivité. Avec quelques styles bien placés et des choix de mise en page intelligents, vous pouvez créer une expérience vidéo de sommeil et de marque. Fondamentalement, il s'agit davantage de structure et de cohérence que de code complexe.

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!