@mkhuda/react-shaka-player NPM

@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.

yarn add @mkhuda/react-shaka-player shaka-player

or

npm install @mkhuda/react-shaka-player shaka-player

Usage

// import the css. Now we have custom ui.css
import "@mkhuda/react-shaka-player/dist/ui.css";
import { ReactShakaPlayer } from "@mkhuda/react-shaka-player";

function App() {
  return <ReactShakaPlayer autoPlay={true} src={"https://yourvideohere.mpd"} />;
}

Manual Handle Usage

import "@mkhuda/react-shaka-player/dist/ui.css";
import { ReactShakaPlayer } from "@mkhuda/react-shaka-player";

function App() {
  let [mainPlayer, setMainPlayer] = useState({});

  useEffect(() => {
    const { player, videoElement } = mainPlayer;

    if (player) {
      async function play() {
        await player.load("https://yourvideomaster.mpd");
        videoElement.play();
      }
      play();
    }
  }, [mainPlayer]);

  return (
    <div className="App">
      <div className="App-main">
        <ReactShakaPlayer
          playerClassName="player-class-name"
          onLoad={(player) => setMainPlayer(player)}
        />
      </div>
    </div>
  );
}

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