Componente de reproductor de vídeo
Componente de reproductor de video receptivo con diseño Glassmorphism, combinación de colores de tonos tierra y compatibilidad con modo oscuro. Utiliza HTML simple y CSS de Tailwind.
Código HTML
<div class="relative flex items-center justify-center w-full h-auto bg-gray-200 dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl">
<div class="absolute inset-0 bg-black bg-opacity-10 backdrop-filter backdrop-blur-lg"></div>
<video controls class="relative z-10 w-full max-h-96 rounded-lg" poster="https://picsum.photos/seed/picsum/800/600">
<source src="your_video_source.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-20 backdrop-filter backdrop-blur-lg z-10">
<div class="flex items-center justify-between">
<div class="flex items-center">
<button class="text-white hover:text-gray-300 focus:outline-none mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 13.803V6.197a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<div class="text-sm text-white">0:00 / 0:00</div>
</div>
<div class="flex items-center">
<button class="text-white hover:text-gray-300 focus:outline-none mr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-2.829a9 9 0 010 12.728M5.636 5.636a9 9 0 0112.728 0m-2.828 2.828a5 5 0 01-7.072 0m7.072 7.072a5 5 0 010-7.072m-2.828 2.828a9 9 0 01-12.728 0m-.001 0a9.997 9.997 0 00-1.912 2.483m1.398 3.463c.374.271.797.448 1.265.526M12 8C8.134 8 5 11.134 5 15s3.134 7 7 7c1.73 0 3.36-.423 4.792-1.166M12 17.25a.25.25 0 00-.25.25v.25c0 .138.112.25.25.25h.01a.25.25 0 00.25-.25v-.25a.25.25 0 00-.25-.25h-.01z" />
</svg>
</button>
<button class="text-white hover:text-gray-300 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componente del reproductor de vídeo Gradient Rainbow
Un componente de reproductor de video limpio y minimalista para tableros, con un esquema de colores de arco iris degradado, diseño receptivo y compatibilidad con modo oscuro, que encarna el estilo de tipografía suiza / internacional.
Componente de reproductor de vídeo
Un componente de reproductor de vídeo responsivo diseñado con un estilo de morfismo de vidrio, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, compatibilidad con temas oscuros e imágenes de marcador de posición.
Reproductor de video minimalista
Componente de reproductor de vídeo codificado en HTML con Tailwind CSS. Tiene un diseño minimalista que utiliza un esquema de color en escala de grises, destinado al uso en el tablero. Es un componente complejo con múltiples elementos interactivos y es totalmente responsivo con soporte para modo oscuro.