@ayan4m1/react-shaka-player

React video player built on top of Shaka Player.

DEMO

CODESANDBOX

ROADMAP

EXAMPLE & USAGES

Installation

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

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

or

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

Usage

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

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

Manual Handle Usage

import "@ayan4m1/react-shaka-player/dist/ui.css";
import { ReactShakaPlayer } from "@ayan4m1/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 |

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