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 simple conçu avec un style 3D et une palette de couleurs pastel, adapté aux tableaux de bord.
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.
Composant du lecteur vidéo
Un composant de lecteur vidéo conçu avec glassmorphism, avec un effet de verre dépoli avec des couleurs complémentaires. Il est interactif et réactif, adapté à la consommation de contenu de blog avec prise en charge du thème sombre.