在您的网站上添加 Vertical Player

Source: Dev.to

集成播放器的步骤

1. 安装

安装 npm 包：

npm i vertical-player

2. 属性

数据对象字段

• id – 用于播放器内部处理的唯一标识符。
• asset_url – 视频资产的 MP4/HLS URL。
• title – 显示在每个播放器底部的文字。
• tag – 显示在每个播放器底部的分类标签。
• description – 与视频一起显示的描述。

3. 示例回调响应

点赞 / 取消点赞

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

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

分享

{
  "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 仓库上点一个 ⭐️！