react-shaka-plyr

This project is Shaka Player wrapped react component

Before starting, please read the documents related to Shaka Player first.

I'm inspired by react-use - useVideo Hooks and Headless UI Component, and try to keep the interface similar to those libraries.

Installation

1/* recommended */
2yarn add react-shaka-plyr
3// or
4npm install react-shaka-plyr

Usage

Free m3u8 streams

1import React from "react";
2import { useRef } from "react";
3import {
4  ShakaPlayer,
5  ShakaPlayerProvider,
6  ShakaControlsRef,
7  useShakaState
8} from "react-shaka-plyr";
9
10const App = () => {
11  return (
12    <ShakaPlayerProvider>
13      <Player />
14    </ShakaPlayerProvider>
15  );
16};
17
18const Player = () => {
19  const state = useShakaState();
20  const ref = useRef<ShakaControlsRef>(null);
21
22  return (
23    <>
24      <ShakaPlayer
25        ref={ref}
26        src="http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8"
27      />
28      {Object.entries(state).map(([key, value]) => {
29        return (
30          <div key={key} style={{ display: "flex", gap: 8 }}>
31            <span>{key}</span>
32            <span>{String(value)}</span>
33          </div>
34        );
35      })}
36      <button onClick={() => ref.current?.pause()}>Pause</button>
37      <button onClick={() => ref.current?.play()}>Play</button>
38      <br />
39      <button onClick={() => ref.current?.mute()}>Mute</button>
40      <button onClick={() => ref.current?.unmute()}>Un-mute</button>
41      <br />
42      <button onClick={() => ref.current?.volume(0.1)}>Volume: 10%</button>
43      <button onClick={() => ref.current?.volume(0.5)}>Volume: 50%</button>
44      <button onClick={() => ref.current?.volume(1)}>Volume: 100%</button>
45      <br />
46      <button onClick={() => ref.current?.seek(state.time - 5)}>-5 sec</button>
47      <button onClick={() => ref.current?.seek(state.time + 5)}>+5 sec</button>
48    </>
49  );
50};

To customize the controller, use the following options Reference: Shaka Player Customizing the UI

1    <ShakaPlayer
2      ref={ref}
3      src="http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8"
4      uiConfig={{ controlPanelElements: [], addSeekBar: false }}
5      style={{ position: "relative" }}
6    >
7        <button
8          style={{ position: "absolute" }}
9          onClick={() => ref.current?.play()}
10        >
11          Play
12        </button>
13        ...
14    </ShakaPlayer>

Props

By default, ShakaPlayer component props inherit HTMLVideoElement attributes. ex: src, autoPlay, muted, loop, onLoad, onTimeupdate...

Props	Optional	Description	Type
config	true	shaka player config object
uiConfig	true	shaka player ui config object
ref	true	A ref object for player control	React.RefObject

Issue & Contribution

Please feel free to pull request. The issue issue is also the same.