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 vídeo sensible diseñado para el modo oscuro con un esquema de color análogo para el consumo de contenido.

Abrir

Componente de reproductor de vídeo

Un componente de reproductor de video neomórfico diseñado para la exhibición de portafolios, con un tema oscuro y un diseño receptivo que usa Tailwind CSS.

Abrir

Reproductor de video médico Art Deco

Un componente de reproductor de vídeo sencillo y sensible con una estética de escala de grises Art Deco, diseñado para aplicaciones sanitarias/médicas, incluida la compatibilidad con el modo oscuro.

Abrir