This package helps you use video.js like a simple React Component without worrying about the UI.
# using npm
npm install @teamsparta/sparta-player
# using yarn
yarn add @teamsparta/sparta-player
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>
</>
);
}
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. |
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