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

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

Option name	Datatype	Default value	Description
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
muted	`boolean`	`false`	Whether the content's audio will be muted or not
sources	`array`	`[]`	Array of your video sources, sources have to contain {src, type}. check the example
vttSources	`array`	`[]`	Array of your vtt sources, Currently only Korean is supported.
isNavigationOn	`boolean`	true	You can hide the navigation bar in the middle of the control bar.

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