@teamsparta/sparta-player v0.0.10

A Simple React Component for using video.js

NOTE: The basic feature is working, but still it's currently working in progress, so provided features are unstable and in-depth features are not supported yet, and some usage could change in the future release. Please understand and be careful on using!

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 title = ["제목긴거 어떻게 나오나 테스트스트트스트슽", "2", "3", "4"];

export const TestPage = () => {
  return (
    <>
      <SpartaPlayer
        autoPlay={false}
        controls={true}
        title={title}          //array, required
        sources={videoSources} //array, required
        vttSources={vttSource} //array, reqired
        isNavigationOn={false}  
      />
    </>
  );
};

example2

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

export const TestPage = ()=>{
 return (
    <>
      <S.MobileWrapper>
        <LectureMobileNavBar />
          <SpartaPlayer
            isMiddleControl={true}
            title={[""]}
            vttSources={[vttSource]}
            sources={[
              {
                src: MP4URL,
                type:
                  playerType !== "V2" ? "application/x-mpegURL" : "video/mp4",
              },
            ]}
          />
        <LectureTapMenu />
        <LectureMobileFloating isInitialized={isInitialized} />
      </S.MobileWrapper>
    </>
  );

props

NOTE: If the lengths of the sources, vttSources, and title arrays are different, an error may occur.