웹사이트에 Vertical Player 추가

Source: Dev.to

플레이어 통합 단계

1. 설치

npm 패키지를 설치합니다:

npm i vertical-player

2. 속성

Data 객체 필드

• id – 플레이어 내부 처리용 고유 식별자
• asset_url – 비디오 자산의 MP4/HLS URL
• title – 각 플레이어 하단에 표시되는 텍스트
• tag – 각 플레이어 하단에 표시되는 카테고리
• description – 비디오와 함께 표시되는 설명

3. 콜백 응답 예시

Like / Unlike

{
  "status": true,
  "name": "like",
  "id": 1
}

{
  "status": false,
  "name": "unlike",
  "id": 1
}

Share

{
  "name": "share",
  "id": 1
}

4. React 컴포넌트 사용법

"use client";
import { VerticalPlayer } from "vertical-player/esm/index.es.js";

export default function Home() {
  const handleLike = (e) => {
    console.log(e);
  };

  const handleShare = (e) => {
    console.log(e);
  };

  const DATA = [
    {
      id: 1,
      tag: "BRAND",
      asset_url: "https://www.abc.com/~dnn/clips/RW20seconds_2.mp4",
      description: "This is a simple description which describes the video",
    },
    {
      id: 2,
      tag: "BRAND",
      asset_url: "https://www.abc.com/~dnn/clips/RW20seconds_2.mp4",
      description: "This is a simple description which describes the video",
    },
    {
      id: 3,
      tag: "BRAND",
      asset_url: "https://www.abc.com/~dnn/clips/RW20seconds_2.mp4",
      description: "This is a simple description which describes the video",
    },
    {
      id: 4,
      tag: "BRAND",
      asset_url: "https://www.abc.com/~dnn/clips/RW20seconds_2.mp4",
      description: "This is a simple description which describes the video",
    },
    {
      id: 5,
      tag: "BRAND",
      asset_url: "https://www.abc.com/~dnn/clips/RW20seconds_2.mp4",
      description: "This is a simple description which describes the video",
    },
  ];

  return (
    // Add your VerticalPlayer component here, e.g.:
    // <VerticalPlayer data={DATA} handleLike={handleLike} handleShare={handleShare} />
  );
}

추가 정보

• GitHub 저장소:
• NPM 패키지:

유용하다고 생각되시면 GitHub 저장소에 ⭐️를 남겨 주세요!