Lecteur vidéo skeuomorphe
Composant de lecteur vidéo skeuomorphe avec effets réactifs et prise en charge du thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-2xl bg-gray-300 dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden">
<!-- Video Placeholder -->
<div class="relative bg-black aspect-video">
<img src="https://picsum.photos/seed/video/800/450" alt="Video Placeholder" class="w-full h-full object-cover">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
<svg class="w-16 h-16 text-white opacity-75" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L12.808 9.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
</div>
</div>
<!-- Controls -->
<div class="p-4 bg-gray-400 dark:bg-gray-800 flex items-center justify-between">
<div class="flex items-center space-x-4">
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L12.808 9.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
</button>
<input type="range" class="flex-grow appearance-none h-2 bg-gray-300 dark:bg-gray-600 rounded-full overflow-hidden cursor-pointer" value="0">
<span class="text-sm text-gray-700 dark:text-gray-300">0:00 / 0:00</span>
</div>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M14.445 3.107A1 1 0 0013.598 3H6.402a1 1 0 00-.847.447L.947 11.264a1 1 0 00.003.956l4.6 6.27A1 1 0 006.402 19h7.196a1 1 0 00.847-.447l4.6-6.27a1 1 0 00-.003-.956l-4.6-7.157zM10 16a1 1 0 100-2 1 1 0 000 2zm0-4a1 1 0 100-2 1 1 0 000 2z"></path></svg>
</button>
</div>
</div>
</div>
Composants associés
Composant du lecteur vidéo
Un composant de lecteur vidéo réactif conçu avec le style Neumorphism, utilisant Tailwind CSS. Il prend en charge le mode sombre avec des ombres subtiles pour donner une apparence d’interface utilisateur douce.
Lecteur vidéo
Composant de lecteur vidéo avec micro-interactions, palette de couleurs complémentaires, complexité modérée et conception réactive avec prise en charge du thème sombre pour une utilisation en portefeuille.
Composant du lecteur vidéo
Composant de lecteur vidéo avec style Glassmorphism, schéma de couleurs analogue et complexité modérée à des fins de blog/contenu, avec une conception réactive et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de Javascript.