Add a Vertical Player to Your Website

Source: Dev.to

Steps to integrate the player

1. Installation

Install the npm package:

npm i vertical-player

2. Attributes

Data object fields

• id – unique identifier for internal handling of the player.
• asset_url – MP4/HLS URL of the video asset.
• title – text displayed at the bottom of each player.
• tag – category displayed at the bottom of each player.
• description – description shown with the video.

3. Sample callback responses

Like / Unlike

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

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

Share

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

4. React component usage

"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} />
  );
}

More information

• GitHub repositories:
• NPM package:

If you find this useful, consider leaving a ⭐️ on the GitHub repository!