组件 视频播放器 视频播放器组件

视频播放器组件

一个响应式视频播放器组件,采用粗野主义风格,支持暗模式。它具有高对比度和大胆的布局,使用Tailwind CSS进行样式设计,并包括占位符图像和头像。

预览

HTML 代码

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

相关组件

视频播放器组件

一个响应式视频播放器组件,专为博客或内容消费而设计,具有微交互和柔和的色彩方案。它包括播放/暂停功能和音量控制。设计还包括黑暗模式支持。

打开

视频播放器组件

一个为深色模式设计的响应式视频播放器组件,采用相似色彩方案以便于内容消费。

打开

极简视频播放器

使用HTML和Tailwind CSS编码的视频播放器组件。它具有极简设计,采用灰度色彩方案,旨在用于仪表板。它是一个复杂的组件,具有多个交互元素,并且完全响应,支持暗黑模式。

打开