A Simple React Component for using video.js

This package helps you use video.js like a simple React Component without worrying about the UI.

Install

# using npm
npm install @teamsparta/sparta-player
# using yarn
yarn add @teamsparta/sparta-player

Sample UI

Usage

example 1

import React from "react";
import { SpartaPlayer } from "@teamsparta/sparta-player";

const videoSources = [
  {
    src: `1.m3u8`,
    type: "application/x-mpegURL",
  },
  {
    src: `2.m3u8`,
    type: "application/x-mpegURL",
  },
  {
    src: `3.m3u8`,
    type: "application/x-mpegURL",
  },
  {
    src: `4.mp4`,
    type: "video/mp4",
  },
];

//vttSource
const vttSource = [
  `1.vtt`,
  `2.vtt`,
  `3.vtt`,
  `4.vtt`,
];

const titles = ["제목긴거 어떻게 나오나 테스트스트트스트슽", "2", "3", "4"];

const videoSource = videoSources[contentId]?.src;
const vttSource = vttSources[contentId];
const title = titles[contentId];
const navigate = useNavigate();

export const TestPage = () => {
  return (
    <>
      <SpartaPlayer 
        source={videoSource}              // string, required
        videoType="application/x-mpegURL" // string, required
        autoPlay={false}
        controls={true}
        vttSource={vttSource}
        title={title}
        isNavigationOn={true}
        onPlay={() => console.log("onPlay")}
        onPause={() => console.log("onPause")}
        onEnded={() => console.log("onEnded")}
        onTimeUpdate={(time) => console.log("onTimeUpdate", time)}
        onClickPrev={() => {
          navigate(`?contentId=${Number(contentId) - 1}`);
        }}
        onClickNext={() => {
          navigate(`?contentId=${Number(contentId) + 1}`);
        }}
      />
    </>
  );
};

example2

import React from "react";
import { SpartaPlayer } from "@teamsparta/sparta-player";

export const TestPage = ()=>{
 return (
    <>
      <S.MobileWrapper>
        <LectureMobileNavBar />
          <SpartaPlayer
            title={"some video"} 
            sources={"https://www.w3schools.com/html/mov_bbb.mp4"}
            videoType="video/mp4"
            isNavigationOn={true}
          />
        <LectureTapMenu />
        <LectureMobileFloating isInitialized={isInitialized} />
      </S.MobileWrapper>
    </>
  );
}

props

| Option name | Datatype | Default value | Description | |----------------|------------|--------------|-------------------------------------------------------------------------------------------------| | source | string | "" | required / Enter a video source. | | videoType | string | "" | required / Enter a video type. | | autoplay | boolean | false | On loaded whether the content will be started automatically or not | | controls | boolean | true | Whether the player control bar will be shown or not | | vttSource | string | "" | Enter a vtt source. | | isNavigationOn | boolean | true | You can hide the navigation bar in the middle of the control bar. | | onClickPrev | function | ()=>{} | In the navigation, enter a function that will be triggered when the Previous button is clicked. | | onClickNext | function | ()=>{} | In the navigation, enter a function that will be triggered when the Next button is clicked. | | title | string | "" | In the navigation, enter a title that you want to appear in the navigation. | | onPlay | function | ()=>{} | Enter a function that will be triggered when the player starts. | | onPause | function | ()=>{} | Enter a function that will be triggered when the player pauses. | | onTimeUpdate | function | (time)=>{} | Enter a function to trigger whenever the player time is updated. | | onEnded | function | ()=>{} | Enter a function to trigger when the player ends. |

Notification

This package is developed and maintained by TeamSparta. Unfortunately, we are using a private workspace, which makes it difficult to publish to GitHub. If you have any issues or suggestions, please contact us at[email protected]