Installations

npm install @mkhuda/react-shaka-player

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

16.15.1

NPM Version

8.11.0 Pull Requests

Open

0

Total

23

Closed

0

Merged

23

Issues

Open

1

Total

1

Closed

0

Releases

12

v1.2.2

Updated on Aug 07, 2022

v1.2.1

Updated on Sep 30, 2021

v1.2.0

Updated on Sep 29, 2021

v1.1.9

Updated on Sep 11, 2021

v1.1.8

Updated on Sep 04, 2021

v1.1.7 (beta)

v1.1.7

Updated on Sep 04, 2021

View All 12 releases

Languages

2

TypeScript

JavaScript

TypeScript (82.29%)

JavaScript (17.71%)

Developer

mkhuda

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

8 Stars

41 Commits

3 Forks

2 Watchers

16 Branches

1 Contributors

Updated on Mar 13, 2024

Maintainers

1

View All 1 Contributors

Package Meta Information

Latest Version

1.2.2

Package Id

@mkhuda/react-shaka-player@1.2.2

Unpacked Size

40.19 kB

Size

11.93 kB

File Count

24

NPM Version

8.11.0

Node Version

16.15.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

1

shaka-player

Peer Dependencies

2

react shaka-player

Dev Dependencies

40

@mkhuda/react-shaka-player

npm

React video player built on top of Shaka Player.

DEMO

CODESANDBOX

ROADMAP

EXAMPLE & USAGES

Installation

Use the package manager yarn or npm to install @mkhuda/react-shaka-player.

1yarn add @mkhuda/react-shaka-player shaka-player
2
3or
4
5npm install @mkhuda/react-shaka-player shaka-player

Usage

1// import the css. Now we have custom ui.css
2import "@mkhuda/react-shaka-player/dist/ui.css";
3import { ReactShakaPlayer } from "@mkhuda/react-shaka-player";
4
5function App() {
6  return <ReactShakaPlayer autoPlay={true} src={"https://yourvideohere.mpd"} />;
7}

Manual Handle Usage

1import "@mkhuda/react-shaka-player/dist/ui.css";
2import { ReactShakaPlayer } from "@mkhuda/react-shaka-player";
3
4function App() {
5  let [mainPlayer, setMainPlayer] = useState({});
6
7  useEffect(() => {
8    const { player, videoElement } = mainPlayer;
9
10    if (player) {
11      async function play() {
12        await player.load("https://yourvideomaster.mpd");
13        videoElement.play();
14      }
15      play();
16    }
17  }, [mainPlayer]);
18
19  return (
20    <div className="App">
21      <div className="App-main">
22        <ReactShakaPlayer
23          playerClassName="player-class-name"
24          onLoad={(player) => setMainPlayer(player)}
25        />
26      </div>
27    </div>
28  );
29}

Props

This is main props for the components:

Props	Optional	Description	Type
src	No	MPD or HLS to play	string
className	Yes	string of ui overlay classname	string
autoPlay	Yes	as it described	boolean
superConfig	Yes	The special configs for Streaming or VOD. Will add more `superConfig` soon.	string ("STREAMING" / "VOD")
config	Yes	Changes configuration settings on Shaka Player. Reference: shaka.extern.PlayerConfiguration. This config will override `superConfig`.	object
uiConfig	Yes	Changes configuration settings for UI elements. Reference: shaka.extern.UIConfiguration. This config will override `superConfig`.	object
onLoad	Yes	Catch `Shaka.Player`, `Shaka.ui.Overlay` and `HTMLVideoElement` for manual usages or improvement of configuration. see: PlayerRefs	object: PlayerRefs => func
onPlay	Yes	Catch when media is playing	func
onPlause	Yes	Catch when media is paused	func
onEnded	Yes	Catch when video is end	func
onBuffering	Yes	Catch `onBuffering` status when playing	bool => func
onPlayerError	Yes	Catch `error` when playing. Reference: Shaka.Player.ErrorEvent	{Shaka.extern.Error} => func
onStatsChanged	Yes	Catch `stats` when playing video, including currentTime (current seek position), and currentEndTime (length of video duration if VOD) (in seconds) of media player element [`IStats`]. Reference: IStats & Shaka.extern.Stats	{Shaka.extern.Stats} => func

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More