Usages & Examples

Some usages and examples:

Usages #1

Use combination of all Player Props

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

function App() {
  let [mainPlayer, setMainPlayer] = useState({});
  let config = {
    manifest: {
      dash: {
        ignoreMinBufferTime: true,
      },
    },
    streaming: {
      lowLatencyMode: true,
      inaccurateManifestTolerance: 0,
      bufferingGoal: 6,
      rebufferingGoal: 1,
    },
  };

  let uiConfig = {
    controlPanelElements: ['mute'],
    addBigPlayButton: true,
  };

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

    if (player) {
      console.log(player.getConfiguration());
    }
  }, [mainPlayer]);

  return (
    <div className="App">
      <div className="App-main">
        <ReactShakaPlayer
          autoPlay={true}
          src="https://yourstreamingvideo.mpd"
          playerClassName="player-class-name"
          config={config}
          uiConfig={uiConfig}
          onLoad={(player) => setMainPlayer(player)}
          onPlay={() => console.log("playing")}
          onPause={() => console.log("paused")}
          onBuffering={(status) => {
            console.log(status);
          }}
          onPlayerError={(error) => console.log("err", error)}
        />
      </div>
    </div>
  );
}