https://github.com/matvp91/shaka-player-react
A simple React component wrapper for shaka-player
https://github.com/matvp91/shaka-player-react
audio dash drm encrypted-media hls javascript media-source-extension mse playback player react react-hooks video video-player video-streaming
Last synced: about 1 year ago
JSON representation
A simple React component wrapper for shaka-player
- Host: GitHub
- URL: https://github.com/matvp91/shaka-player-react
- Owner: matvp91
- License: mit
- Created: 2019-11-04T14:30:05.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-10T10:53:56.000Z (about 3 years ago)
- Last Synced: 2025-03-31T04:08:04.607Z (about 1 year ago)
- Topics: audio, dash, drm, encrypted-media, hls, javascript, media-source-extension, mse, playback, player, react, react-hooks, video, video-player, video-streaming
- Language: JavaScript
- Homepage:
- Size: 667 KB
- Stars: 114
- Watchers: 4
- Forks: 34
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Shaka Player React
A React component for [Shaka Player](https://github.com/google/shaka-player), an open-source JavaScript library for adaptive media. It is highly recommended to check the official shaka documentation first.
## Installation
`npm install shaka-player-react --save`
`yarn add shaka-player-react`
## Usage
As seen in the example below, the CSS bundled with `shaka-player` has been imported separately. This is because `shaka-player-react` does not require any CSS internally, which keeps you in full control of the styling as if you were not using this React wrapper.
```javascript
import React from 'react';
import ShakaPlayer from 'shaka-player-react';
import 'shaka-player-react/dist/controls.css';
function App() {
return ;
}
```
The following `ShakaPlayer` properties are supported:
| Property | Description | Type |
| ------------ | ------------------------------------------------------------------------------------------- | ------- |
| src | The MPEG-DASH, or HLS media asset. Is provided to `shaka.Player.load` on mount or change. | String |
| autoPlay | Whether the asset should autoplay or not, directly bound to the `HTMLVideoElement` element. | Boolean |
| width | Width of the player. | Number |
| height | Height of the player. | Number |
| playbackRate | Sets the speed of the audio/video playback. | Number |
| muted | Sets whether the video is muted or not | Boolean |
| loop | Sets whether teh audio/video should start over again when finished | Boolean |
| volume | Sets the volume of the audio/video | Number |
| className | Adds a class to the root element, which is a div. | String |
### Access shaka's player object.
The following is a more advanced setup to illustrate how you can integrate shaka's features in React.
```javascript
import React, { useRef, useEffect } from 'react';
import ShakaPlayer from 'shaka-player-react';
function App() {
const controllerRef = useRef(null);
useEffect(() => {
const {
/** @type {shaka.Player} */ player,
/** @type {shaka.ui.Overlay} */ ui,
/** @type {HTMLVideoElement} */ videoElement
} = controllerRef.current;
async function loadAsset() {
// Load an asset.
await player.load('https://streams.com/example.mpd');
// Trigger play.
videoElement.play();
}
loadAsset();
}, []);
return ;
}
```
Or check the [example](https://github.com/matvp91/shaka-player-react/tree/master/example) in this repository.
## Integrate with
### Next.js
```javascript
import React from 'react';
import dynamic from 'next/dynamic';
const ShakaPlayer = dynamic(() => import('shaka-player-react'), { ssr: false });
export default function Index() {
return (
);
}
```
When using `next/dynamic` with `{ ssr: false }`, we'll make sure the component is not interpreted by Next.js SSR. As of today, pre-rendering shaka-player's UI is technically not possible due to the fact that it is not written in React (but in plain Javascript). Although, shaka-player heavily relies on browser API's and serves no real purpose on a backend anyways.