Package Exports

@teamsparta/sparta-player
@teamsparta/sparta-player/dist/sparta-player.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@teamsparta/sparta-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 atjungeun.lee@teamsparta.co