Componentes de búsqueda

Categorías

Componentes Reproductor de vídeo

Reproductor de vídeo

Interfaz para reproducir contenido de video

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>

Reproductor de vídeo

Componente de reproductor de video con estilo Material Design, efectos responsivos y soporte de temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800">
  <div class="relative">
    <img class="w-full" src="https://picsum.photos/600/400" alt="Video thumbnail">
    <div class="absolute inset-0 flex items-center justify-center">
      <button class="text-white text-6xl">
        ▶
      </button>
    </div>
  </div>
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Video Title</div>
    <p class="text-gray-700 dark:text-gray-300 text-base">
      Video description goes here.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#tag1</span>
    <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#tag2</span>
  </div>
</div>

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.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 max-w-lg w-full">
        <div class="flex justify-center mb-4">
            <video class="rounded-lg shadow-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="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="text-sm">
                <p class="text-gray-900 dark:text-white font-medium">John Doe</p>
                <p class="text-gray-500 dark:text-gray-300">Uploaded 2 days ago</p>
            </div>
        </div>
        <div class="mt-4">
            <p class="text-gray-800 dark:text-gray-300">A brief description of the video content goes here. It can detail key points or the overall theme of the video.</p>
        </div>
    </div>
</div>

Componente de reproductor de vídeo

Un componente de reproductor de video de estilo brutalismo con alto contraste y diseño inusual, con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 rounded-lg">
    <div class="relative w-full max-w-2xl rounded-lg overflow-hidden shadow-lg">
        <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 class="absolute inset-0 bg-black opacity-50"></div>
    </div>
    <div class="mt-4 text-center text-lg font-bold text-gray-800 dark:text-white">Bold Video Title</div>
    <div class="mt-2 text-center text-gray-600 dark:text-gray-300">An engaging video description goes here.</div>
    <div class="mt-4 flex items-center justify-center space-x-4">
        <img src="https://picsum.photos/50/50" alt="User Avatar" class="rounded-full border-2 border-gray-800 dark:border-white">
        <p class="text-sm font-semibold text-gray-800 dark:text-white">User Name</p>
    </div>
    <div class="mt-4 flex justify-between w-full max-w-md">
        <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Like</button>
        <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Dislike</button>
    </div>
</div>

Componente de reproductor de vídeo

Un componente de reproductor de video de estilo retro / vintage con diseño receptivo y soporte de modo oscuro usando Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center p-4 bg-gray-800 rounded-lg shadow-lg max-w-md w-full">
    <div class="relative w-full pt-9/16">
        <iframe class="absolute top-0 left-0 w-full h-full rounded-lg" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="flex justify-between items-center w-full mt-4 text-white">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            <span class="font-bold">Username</span>
        </div>
        <div class="flex items-center">
            <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
                Play
            </button>
            <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 ml-2 rounded">
                Pause
            </button>
        </div>
    </div>
    <div class="flex flex-col w-full mt-4">
        <input type="range" class="appearance-none w-full h-2 bg-gray-600 rounded-lg" value="50" />
        <div class="flex justify-between text-xs text-gray-400">
            <span>0:00</span>
            <span>3:45</span>
        </div>
    </div>
</div>

<style>
    .pt-9\/16 {
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }

    .dark {
        background-color: #1F2937;
    }
    .dark .bg-gray-800 {
        background-color: #4B5563;
    }
</style>

Componente de reproductor de vídeo

Un componente de reproductor de vídeo responsivo con Tailwind CSS centrado en las microinteracciones y la compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105 duration-200" role="video" aria-label="Video Player">
    <div class="relative">
        <img src="https://picsum.photos/800/450?random=1" alt="Video thumbnail" class="w-full h-48 object-cover">
        <button class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 text-white text-3xl rounded-full opacity-0 transition-opacity duration-200 hover:opacity-100">
            ▶
        </button>
    </div>
    <div class="p-4">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <h2 class="text-lg font-semibold dark:text-white">Video Title</h2>
        </div>
        <p class="text-sm text-gray-700 dark:text-gray-300">Description of the video goes here. It should be engaging and concise.</p>
    </div>
</div>

Componente 3 del reproductor de vídeo

Un componente de reproductor de vídeo responsivo diseñado en estilo Neumorphism con soporte para temas oscuros mediante Tailwind CSS.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl p-6 w-full max-w-md">
        <div class="video-container rounded-2xl overflow-hidden">
            <img src="https://picsum.photos/600/400?random=1" alt="Video Thumbnail" class="w-full h-full object-cover">
            <div class="play-button bg-gray-300 dark:bg-gray-700 rounded-full p-2 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 shadow-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-5.4 3.24a1 1 0 01-1.552-.832V9.664a1 1 0 011.552-.832l5.4 3.24a1 1 0 010 1.664z" />
                </svg>
            </div>
        </div>
        <div class="mt-4 text-gray-800 dark:text-gray-200 text-lg font-semibold">Video Title</div>
        <div class="text-gray-600 dark:text-gray-400">Video description goes here. This is a brief overview of the content of the video.</div>
        <div class="flex items-center justify-between mt-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
                <span class="ml-2 text-gray-800 dark:text-gray-200">User Name</span>
            </div>
            <div class="text-gray-600 dark:text-gray-400">10:30</div>
        </div>
    </div>
</div>