Reproductor de vídeo

Componente de reproductor de video retro

Un componente de reproductor de video interactivo diseñado con una estética retro / vintage, con un esquema de color en escala de grises y múltiples elementos interactivos adecuados para fines de comercio electrónico, con soporte para modo oscuro.

Abrir vista previa

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="relative video-wrapper">
        <video controls class="w-full rounded-lg border border-gray-400" poster="https://picsum.photos/600/300?random=1">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="absolute top-3 right-3 flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
            <div class="text-gray-200">
                <h3 class="text-lg font-bold">Video Title</h3>
                <p class="text-sm">Uploaded by User Name</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <div class="flex justify-between items-center">
            <button class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
            <button class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Buy Now</button>
        </div>
        <div class="mt-4">
            <p class="text-gray-300 text-sm">Description: This retro video player component is perfect for showcasing video content within an e-commerce platform, evoking nostalgia with its vintage styles.</p>
        </div>
    </div>
</div>

Componente de reproductor de vídeo

Componente de reproductor de video de diseño minimalista / plano para comercio electrónico, receptivo con soporte de tema oscuro

Abrir vista previa

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="relative">
    <video controls class="w-full">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  <div class="p-4">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title</h3>
    <p class="text-gray-600 dark:text-gray-300 text-sm mt-1">Brief product description goes here.</p>
    <div class="flex justify-between items-center mt-4">
      <span class="text-lg font-bold text-gray-900 dark:text-white">$99.99</span>
      <button class="px-3 py-1 bg-blue-500 text-white text-xs font-bold uppercase rounded dark:bg-blue-700">Add to Cart</button>
    </div>
  </div>
</div>

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.

Abrir vista previa

                <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden max-w-xl mx-auto">
  <div class="relative">
    <video class="w-full" controls poster="https://picsum.photos/id/1018/1000/600/">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50">
      <button class="text-white text-4xl">
        ▶
      </button>
    </div>
  </div>
  <div class="p-6">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Project Title</h3>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Brief description of the project or video content.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
    </div>
  </div>
</div>

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 vista previa

                <div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
    <video class="w-full h-64" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="p-4">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
            <div class="ml-3">
                <h2 class="text-white text-lg font-semibold">User Name</h2>
                <p class="text-gray-400 dark:text-gray-300 text-sm">2 hours ago</p>
            </div>
        </div>
        <div class="mt-2">
            <p class="text-gray-200 dark:text-gray-300 text-sm">Enjoy this video of a beautiful landscape!</p>
        </div>
        <div class="mt-4 flex justify-between text-gray-400 dark:text-gray-500">
            <button class="hover:text-white focus:outline-none">Like</button>
            <button class="hover:text-white focus:outline-none">Share</button>
            <button class="hover:text-white focus:outline-none">Comment</button>
        </div>
    </div>
</div>

Componente de reproductor de vídeo

Un componente de reproductor de video receptivo diseñado para un blog o consumo de contenido con microinteracciones y una combinación de colores pastel. Incluye funcionalidad de reproducción/pausa y un control de volumen. El diseño también incluye soporte para el modo oscuro.

Abrir vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto overflow-hidden">
    <div class="relative">
        <img src="https://picsum.photos/500/300" class="w-full h-48 object-cover" alt="Video Thumbnail">
        <div class="absolute bottom-0 left-0 right-0 bg-gray-900 bg-opacity-50 p-2 flex items-center justify-between">
            <span class="text-white">Video Title</span>
            <div class="flex items-center">
                <button class="text-white p-1 hover:bg-gray-700 rounded-md transition duration-200">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
                </button>
                <input type="range" class="ml-2 w-24 slider slider-dark dark:bg-gray-700" min="0" max="100" value="50">
            </div>
        </div>
    </div>
    <div class="p-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="User Avatar">
            <span class="text-gray-800 dark:text-gray-200">User Name</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the video content. It provides insight into what the video is about and engages the user to watch the video.</p>
    </div>
</div>

Componente de reproductor de vídeo

Un componente de reproductor de video simple diseñado utilizando los principios de Material Design con un diseño receptivo y soporte de temas oscuros.

Abrir vista previa

                <div class="max-w-xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-8">
    <div class="relative overflow-hidden">
        <video class="w-full h-auto" controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mt-1">This is a short description of the video content. It provides useful information about what the viewer can expect.</p>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <div>
                <p class="text-gray-800 dark:text-white">Author Name</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">Date Uploaded</p>
            </div>
        </div>
    </div>
</div>

Componente de reproductor de vídeo

Un componente de reproductor de vídeo diseñado con morfismo de vidrio, con un efecto similar al vidrio esmerilado con colores complementarios. Es interactivo y receptivo, adecuado para el consumo de contenido de blog con soporte para temas oscuros.

Abrir vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="relative w-full max-w-lg p-5 bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-lg border border-gray-200 dark:bg-gray-900 dark:bg-opacity-30 dark:border-gray-700">
        <video class="w-full rounded-lg" controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="mt-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Video Title</h2>
            <p class="text-gray-600 dark:text-gray-400">Brief description of the video content that gives users an idea of what to expect.</p>
        </div>
        <div class="flex items-center mt-3">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-2">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User Name</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Published on: <time datetime="2023-10-01">October 1, 2023</time></p>
            </div>
        </div>
    </div>
</div>

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.

Abrir vista previa

                <div class="flex flex-col items-center justify-center w-full h-screen bg-gray-800">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg p-4 rounded-lg shadow-lg w-full max-w-md">
        <div class="relative w-full aspect-w-16 aspect-h-9">
            <video class="rounded-lg" controls>
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="mt-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="text-white">
                <h3 class="text-lg font-semibold">Video Title</h3>
                <p class="text-sm text-gray-300">Uploaded by User Name</p>
            </div>
        </div>
        <div class="flex justify-around mt-4">
            <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none">Like</button>
            <button class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 focus:outline-none">Share</button>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
        .bg-white {
            background-color: rgba(255, 255, 255, 0.2);
        }
        .text-white {
            color: #edf2f7;
        }
        .text-gray-300 {
            color: #e2e8f0;
        }
    }
</style>

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.

Abrir vista previa

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
  <h2 class="text-3xl font-bold mb-4">Video Player</h2>
  <div class="relative mb-4">
    <img class="w-full h-auto rounded-lg" src="https://picsum.photos/800/450" alt="Placeholder Video Thumbnail" />
    <div class="absolute inset-0 flex items-center justify-center">
      <button class="bg-red-600 text-white p-3 rounded-full focus:outline-none">
        Play
      </button>
    </div>
  </div>
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
    <div class="ml-3">
      <p class="text-lg font-semibold">User Name</p>
      <p class="text-sm text-gray-400">Uploaded 2 days ago</p>
    </div>
  </div>
  <div class="flex justify-between text-sm text-gray-400">
    <span>1,234 views</span>
    <span>20 likes</span>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold">Description</h3>
    <p class="text-gray-300 mt-2">This is a brief description of the video content, designed in a bold, raw style that reflects the principles of brutalism.</p>
  </div>
</div>

Reproductor de vídeo skeuomórfico

Componente de reproductor de video skeuomórfico con efectos responsivos y soporte para temas oscuros.

Abrir vista previa

                <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>

Categorías

Reproductor de vídeo