当前位置：极客教程 > ReactJS > ReactJS 精品文章 > React和Tailwind使用的视频播放器和图库

React和Tailwind使用的视频播放器和图库

React和Tailwind使用的视频播放器和图库

视频播放器/图库用于在浏览器上播放可用视频列表，这有助于用户通过可视化学习，并以有效方式吸引更多观众。视频播放器通常由教育技术公司用于在线上传讲座并提供演示。

让我们看看视频播放器的外观：

React和Tailwind使用的视频播放器和图库

视频播放器和画廊的基本特点

  • 视频播放器： 用户选择的视频会在这里播放
  • 视频画廊： 显示可选择的视频列表
  • 欢迎页： 作为页面的介绍
  • 视频描述： 用于提供有关视频的附加信息

视频播放器和画廊的优势

  • 鼓励用户在网站上参与互动
  • 人们能够无缝学习
  • 简单的导航导致更好的用户体验
  • 缩略图提供了更好的理解视频内容的方式

先决条件：

  • React
  • Tailwind
  • React中的props

创建选项卡页面的方法：

  • 设置一个基本的React项目并安装所需的依赖项
  • 创建由导航栏和欢迎页组成的基本布局
  • 使用Tailwind对组件进行样式设置
  • 在组件中动态传递数据并将其呈现在屏幕上

创建此功能的步骤：

步骤1： 使用以下命令设置项目

npx create-react-app <<Project_Name>>

步骤2： 使用命令导航至文件夹

cd <<Project_Name>>

步骤3 ：使用以下命令安装所需的依赖项

npm install -D tailwindcss

步骤4： ：使用以下命令创建tailwind配置文件

npx tailwindcss init

步骤5 : 将 tailwind.confg.js 文件按以下方式重写

/** @type {import('tailwindcss').Config} */  
module.exports = {  
  content: [  
    "./src/**/*.{js,jsx,ts,tsx}",  
  ],  
  theme: {  
    extend: {},  
  },  
  plugins: [],  
}

步骤6 ：在src目录中创建一个名为components的文件夹，并创建文件Content.js、data.js和Navbar.js

项目结构：

React和Tailwind使用的视频播放器和图库

在 package.json 中更新的依赖项将如下所示：

"dependencies": {  
    "@testing-library/jest-dom": "^5.17.0",  
    "@testing-library/react": "^13.4.0",  
    "@testing-library/user-event": "^13.5.0",  
    "react": "^18.2.0",  
    "react-dom": "^18.2.0",  
    "react-scripts": "5.0.1",  
    "web-vitals": "^2.1.4"  
  }  
"devDependencies": {  
    "tailwindcss": "^3.3.3"  
}

示例： 在各自的文件中编写以下代码：

  • App.js： 此文件导入组件并在屏幕上呈现它们
  • Data.js： 此文件包含要呈现的数据
  • Gallery.js： 此组件显示视频列表
  • Navbar.js： 此组件显示导航栏界面
  • Video.js： 此文件播放当前选定的视频
  • Welcome.js： 此文件显示欢迎界面
// App.js 
  
import "./App.css"; 
import Gallery from "./components/Gallery"; 
import Video from "./components/Video"; 
import Welcome from "./components/Welcome"; 
function App() { 
    return ( 
        <div className=""> 
            <Welcome /> 
            <Gallery /> 
        </div> 
    ); 
} 
  
export default App;

Data.js

// Data.js 
  
import Video from "./Video"; 
import { useState } from "react"; 
import Data from "./Data"; 
  
export default function Gallery() { 
    const [activeVid, setActiveVid] = useState( 
"https://www.youtube.com/embed/0PfTU9JI6Lg?list=PLM68oyaqFM7TCNz4d5J_hxfFg8w41jTYJ"
    ); 
    const [actTitle, setActTitle] = useState("GFG POTD 1"); 
    const [description, setActiveDescription] = useState( 
        "We will learn DFS of Graph in this problem"
    ); 
    const arr = Data; 
    return ( 
        <div className="flex flex-row w-11/12 h-full pt-2"> 
            <Video 
                link={activeVid} 
                title={actTitle} 
                description={description} 
            /> 
            <div 
                className="w-3/6 shadow-lg shadow-gray-600  
                           overflow-y-scroll flex flex-col  
                           mt-4 mr-20 border-slate-200  
                           border-2 rounded-lg"
                style={{ height: "min(38vw, 650px)" }} 
            > 
                <h3 className="text-2xl p-2 font-semibold">POTD-August</h3> 
                <p className="px-2"> GFG Practice</p> 
                {arr.map((e) => { 
                    return ( 
                        <div 
                            className="hover:bg-gray-300 p-2 
                                       border-2 rounded-xl h-2/6  
                                       shadow-xl shadow-gray-300"
                            onClick={() => { 
                                setActiveVid(e.link); 
                                setActTitle(e.title); 
                                setActiveDescription(e.description); 
                            }} 
                        > 
                            <img 
                                className="w-1/2 h-20 my-4  
                                           mx-2 float-left"
                                src={e.img} 
                            /> 
                            <p 
                                className="ml-2 font-semibold  
                                          pt-6 pl-8 text-sm"
                            > 
                                {e.title} 
                            </p> 
                            <p className="px-2">{e.description}</p> 
                        </div> 
                    ); 
                })} 
            </div> 
        </div> 
    ); 
}

Navbar.js

// Navbar.js 
  
export default function Navbar() { 
    return ( 
        <div> 
            <nav classNameName="fixed w-full  
                                z-20 top-0 left-0"> 
                <div className="flex flex-wrap items-center  
                                justify-between mx-auto p-4"> 
                    <a href="https://geeksforgeeks.org/" 
                       className="flex items-center"> 
                        <img src= 
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" 
                             className="mr-2" 
                             alt="GFG Logo" /> 
                        <span className="self-center text-2xl font-semibold "> 
                            GeeksforGeeks 
                        </span> 
                    </a> 
                    <div className="items-center justify-between hidden  
                                    w-full md:flex md:w-auto md:order-1" 
                         id="navbar-sticky"> 
                        <ul className="flex flex-col p-4  
                                       md:p-0 font-medium  
                                       md:flex-row md:space-x-8"> 
                            <li> 
                                <a href="#" 
                                   className="block py-2 pl-3  
                                              pr-4 text-white bg-blue-700  
                                              rounded md:bg-transparent  
                                              md:text-blue-700 md:p-0"> 
                                    Home 
                                </a> 
                            </li> 
                            <li> 
                                <a href="#" 
                                   className="block py-2 pl-3  
                                              pr-4 text-gray-900 rounded  
                                              hover:bg-gray-100  
                                              md:hover:bg-transparent  
                                              md:hover:text-blue-700 md:p-0"> 
                                    Posts 
                                </a> 
                            </li> 
                            <li> 
                                <a href="#" 
                                   className="block py-2 pl-3  
                                              pr-4 text-gray-900 rounded  
                                              hover:bg-gray-100  
                                              md:hover:bg-transparent  
                                              md:hover:text-blue-700 md:p-0"> 
                                    About us 
                                </a> 
                            </li> 
                        </ul> 
                    </div> 
                </div> 
            </nav> 
        </div> 
    ) 
}

Welcome.js

// Welcome.js 
  
import Navbar from "./Navbar"; 
  
export default function Welcome() { 
    return ( 
        <div className="h-40 bg-gray-300 px-24"> 
            <Navbar /> 
            <h1 
                className="pt-2 text-center text-slate-800  
                           font-semibold text-3xl"
            > 
                GeeksforGeeks Video Gallery 
            </h1> 
        </div> 
    ); 
}

Video.js

// Video.js 
  
export default function Video(props) { 
    return ( 
        <div className="w-screen flex h-screen flex-row mx-12"> 
            <div className="w-full h-2/3 ml-44 mt-4 px-2 pt-2  
                            rounded-xl border-2 border-slate-400"> 
                <iframe src={props.link} className="w-full h-5/6"></iframe> 
                <div className="mt-1 h-1/3 text-left text-xl text-slate-600"> 
                    Title: {props.title} 
                    <p className="text-lg pt-2"> 
                        Description:{props.description} 
                    </p> 
                </div> 
            </div> 
        </div> 
    ); 
}

Data.js

// Data.js 
  
import { useDeferredValue } from "react"; 
  
const Data = [ 
    { 
        img:  
"https://i.ytimg.com/vi/0PfTU9JI6Lg/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBDx0FPXyl9asnEXeJeQRjcNOh6bQ", 
        link:  
"https://www.youtube.com/embed/0PfTU9JI6Lg?list=PLM68oyaqFM7TCNz4d5J_hxfFg8w41jTYJ", 
        title: "GFG POTD 1", 
        description: "We will learn DFS of Graph in this problem", 
    }, 
    { 
        img:  
"https://i.ytimg.com/vi/MxnpwpQA4I4/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDtUunWidfJK9vnjZIBTg9AwWI6KA", 
        link:  
"https://www.youtube.com/embed/MxnpwpQA4I4?list=PLM68oyaqFM7TCNz4d5J_hxfFg8w41jTYJ", 
        title: "GFG POTD 2", 
        description: "We will learn Shortest Source Path in this problem", 
    }, 
    { 
        img:  
"https://i.ytimg.com/vi/OzWNBHxUYO0/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLCtPuRpTYFI24y71-DYiPaHcBmFfQ", 
        link:  
"https://www.youtube.com/embed/OzWNBHxUYO0?list=PLM68oyaqFM7TCNz4d5J_hxfFg8w41jTYJ", 
        title: "GFG POTD 3", 
        description: "We will learn Shortest Path in this problem 3", 
    }, 
    { 
        img:  
"https://i.ytimg.com/vi/X05eictbWIg/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLC0L4vTEifv_Rd1g4uSmOERQB3BsQ", 
        link:  
"https://www.youtube.com/embed/X05eictbWIg?list=PLM68oyaqFM7TCNz4d5J_hxfFg8w41jTYJ", 
        title: "GFG POTD 4", 
        description: "We will learn Reverse Stack in this problem", 
    }, 
    { 
        img:  
"https://i.ytimg.com/vi/T3sWA_ha1-w/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLAB2JYkK6qTJFba5fUayiUyoyuNXg", 
        link:  
"https://www.youtube.com/embed/T3sWA_ha1-w?list=PLM68oyaqFM7TCNz4d5J_hxfFg8w41jTYJ", 
        title: "GFG POTD 5", 
        description: "We will learn Chocolate Distribution in this problem", 
    }, 
    { 
        img:  
"https://i.ytimg.com/vi/9SSIbuQPamk/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLAdV3kVTVr-htccC52e_j6ydhdJkA", 
        link:  
"https://www.youtube.com/embed/9SSIbuQPamk?list=PLM68oyaqFM7TCNz4d5J_hxfFg8w41jTYJ", 
        title: "GFG POTD 6", 
        description: "We will learn String Permutation in this problem", 
    }, 
    { 
        img:  
"https://i.ytimg.com/vi/E5Fz4-ylZ3E/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLALcFccFfnJhyjUqaqTs1ihK6sc9Q", 
        link:  
"https://www.youtube.com/embed/E5Fz4-ylZ3E?list=PLM68oyaqFM7TCNz4d5J_hxfFg8w41jTYJ", 
        title: "GFG POTD 7", 
        description: "We will learn Solving Sudoku in this problem", 
    }, 
    { 
        img:  
"https://i.ytimg.com/vi/dz_tDiMo_eA/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLD9tGVL8i8BzyQ4TT4DpcAxRNNTMA", 
        link:  
"https://www.youtube.com/embed/dz_tDiMo_eA?list=PLM68oyaqFM7TCNz4d5J_hxfFg8w41jTYJ", 
        title: "GFG POTD 8", 
        description: "We will learn Fraction Pairs in this problem", 
    }, 
]; 
  
export default Data;

CSS

/* index.css */
  
@tailwind base; 
@tailwind components; 
@tailwind utilities; 
  
body { 
    margin: 0; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',  
          'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',  
          'Helvetica Neue', 
        sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    height: 100vh; 
} 
  
code { 
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 
        monospace; 
}

运行应用的步骤：

步骤1： 在项目目录的终端中输入以下命令

npm start

步骤2： 在浏览器中打开下面的链接

http://localhost:3000/

输出：

React和Tailwind使用的视频播放器和图库

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程