Reproductor de vídeo skeuomórfico
Componente de reproductor de video skeuomórfico con efectos responsivos y soporte para temas oscuros.
Código HTML
<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>
Componentes relacionados
Componente de reproductor de vídeo
Un componente de reproductor de vídeo responsivo diseñado con el estilo Neumorphism, utilizando Tailwind CSS. Cuenta con soporte para el modo oscuro con sombras sutiles para dar una apariencia de interfaz de usuario suave.
Componente de reproductor de vídeo
Un componente de reproductor de video receptivo diseñado en un estilo brutalista con soporte para temas oscuros. Cuenta con un alto contraste y un diseño audaz, utilizando Tailwind CSS para el estilo e incluye imágenes de marcador de posición y avatares.
Reproductor de vídeo
Componente de reproductor de video con microinteracciones, combinación de colores complementaria, complejidad moderada y diseño receptivo con soporte de tema oscuro para uso de cartera.