@ayan4m1/react-shaka-player

@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