Add a Vertical Player to Your Website

#videojs #verticalplayer #reels #shorts

This post describes how to add a vertical player to your website to deliver a smooth, vertically scrollable experience similar to youtube reels and youtube-shorts.

Vertical Player is an immersive, scroll-focused video player built on top of Video.js and powered by Next.js. It’s designed specifically for vertical video playback (think TikTok, Reels, and similar mobile-first experiences), providing a seamless and responsive viewing experience that fits modern vertical content formats.

This player:

Utilizes Video.js, a robust open-source HTML5 video player framework that supports extensive customization and plugins.
Offers an interface optimized for vertical scrolling and mobile interaction, making it ideal for apps or sites featuring portrait video feeds.
Is built with Next.js, offering a modern React-based architecture for easy integration and extensibility.

📘 Steps to integrate the player:

1. Installation:

Intall the npm package (https://www.npmjs.com/package/vertical-player).

npm i vertical-player

2. Usage:

Attributes:

Option	Type	Required	Description
`data`	`object[]`	✅ Yes	Array of objects containing asset URL and metadata: `id`, `title`, `description`
`handleLike`	`fn()`	❌ No	Callback function triggered when the Like button is clicked
`handleShare`	`fn()`	❌ No	Callback function triggered when the Share button is clicked

data[] : Array of objects containing url of the asset and metadata: id, title, description.

url: mp4/hls url of the asset.
id: unique id for internal handling of the player.
title: text which is displayed at the bottom of each player.
tag: category which is displayer at the bottom of each player.

handleLike(): Callback function which gets fired when like button is clicked on a player.

Sample response:

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

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

handleShare() : Callback function which gets fired when share button is clicked on a player.

Sample response:

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

⭐️ Check the react component below for complete 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: any = [
        {
            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 (
    <VerticalPlayer data={DATA} handleLike={handleLike} handleShare={handleShare}  />
  );
}