Lecteur vidéo

Composant de lecteur vidéo rétro

Un composant de lecteur vidéo interactif conçu avec une esthétique rétro/vintage, avec une palette de couleurs en niveaux de gris et plusieurs éléments interactifs adaptés à des fins de commerce électronique, avec prise en charge du mode sombre.

Ouvrir l’aperçu

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

Composant du lecteur vidéo

Composant de lecteur vidéo minimaliste / plat pour le commerce électronique, réactif avec prise en charge du thème sombre

Ouvrir l’aperçu

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

Composant de lecteur vidéo avec micro-interactions, palette de couleurs complémentaires, complexité modérée et conception réactive avec prise en charge du thème sombre pour une utilisation en portefeuille.

Ouvrir l’aperçu

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

Composant du lecteur vidéo

Un composant de lecteur vidéo minimaliste conçu pour les interfaces de médias sociaux, avec une mise en page réactive avec prise en charge du thème sombre.

Ouvrir l’aperçu

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

Composant du lecteur vidéo

Un composant de lecteur vidéo réactif conçu pour un blog ou la consommation de contenu avec des micro-interactions et une palette de couleurs pastel. Il comprend une fonctionnalité lecture/pause et un contrôle du volume. La conception comprend également la prise en charge du mode sombre.

Ouvrir l’aperçu

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

Composant du lecteur vidéo

Un composant de lecteur vidéo simple conçu selon les principes de Material Design avec une mise en page réactive et une prise en charge du thème sombre.

Ouvrir l’aperçu

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

Composant du lecteur vidéo

Un composant de lecteur vidéo conçu avec glassmorphism, avec un effet de verre dépoli avec des couleurs complémentaires. Il est interactif et réactif, adapté à la consommation de contenu de blog avec prise en charge du thème sombre.

Ouvrir l’aperçu

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

Composant du lecteur vidéo

Un composant de lecteur vidéo réactif conçu dans le style glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou, la prise en charge des thèmes sombres et des images de remplacement.

Ouvrir l’aperçu

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

Composant du lecteur vidéo

Un composant de lecteur vidéo réactif conçu dans un style brutaliste avec prise en charge du thème sombre. Il présente un contraste élevé et une mise en page audacieuse, utilisant Tailwind CSS pour le style et comprend des images et des avatars de remplacement.

Ouvrir l’aperçu

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

Lecteur vidéo skeuomorphe

Composant de lecteur vidéo skeuomorphe avec effets réactifs et prise en charge du thème sombre.

Ouvrir l’aperçu

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

Catégories

Lecteur vidéo