Componentes Reproductor de vídeo Reproductor de video minimalista

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.

Vista previa

Código HTML

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <!-- Video Area -->
    <div class="relative" style="padding-top: 56.25%;">
      <video controls class="absolute top-0 left-0 w-full h-full object-cover">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>

    <!-- Controls and Info Area -->
    <div class="p-6">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-white">Video Title Goes Here</h3>
        <div class="flex items-center space-x-4">
          <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          </button>
          <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          </button>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4">
        <div class="bg-gray-700 dark:bg-gray-300 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>

      <!-- Play/Pause Button (example - actual video controls are built-in) -->
      <div class="flex justify-center">
        <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 px-6 py-2 rounded-full focus:outline-none">
          Play
        </button>
      </div>

      <!-- Additional Info/Metadata -->
      <div class="mt-6 text-gray-600 dark:text-gray-400 text-sm">
        <p>Views: 1.2M | Uploaded: 3 days ago</p>
      </div>
    </div>
  </div>
</div>

Componentes relacionados

Componente de reproductor de vídeo

Un componente de reproductor de video minimalista diseñado para interfaces de redes sociales, con un diseño receptivo con soporte para temas oscuros.

Abrir

Reproductor de vídeo monocromático 3D

Un componente de reproductor de video receptivo con elementos de diseño 3D y combinación de colores monocromática, adecuada para un tablero.

Abrir

Componente de reproductor de vídeo

Un reproductor de video de estilo Glassmorphism con elementos translúcidos similares al vidrio esmerilado, una combinación de colores pastel y una interfaz compleja adecuada para sitios web comerciales / corporativos. Es compatible con el diseño responsivo y un tema oscuro que utiliza Tailwind CSS, sin JavaScript.

Abrir