# shaka-react-video-player
> A React component for [Shaka Player](https://github.com/google/shaka-player), an open-source JavaScript library for adaptive media.
Latest version **1.0.0** (published 2023-10-05) · MIT license · 0 weekly downloads
## Install
```sh
npm install shaka-react-video-player
pnpm add shaka-react-video-player
yarn add shaka-react-video-player
bun add shaka-react-video-player
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-10-05 |
| First published | 2023-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 1014.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | foridpathan |
## Links
- npm: https://www.npmjs.com/package/shaka-react-video-player
- Repository: https://github.com/foridpathan/react-shaka-player
- Homepage: https://github.com/foridpathan/react-shaka-player#readme
- Issues: https://github.com/foridpathan/react-shaka-player/issues
- npm.io page: https://npm.io/package/shaka-react-video-player
## Dependencies (12)
- [mux.js](https://npm.io/package/mux.js.md) ^6.3.0
- [rollup](https://npm.io/package/rollup.md) ^2.79.1
- [shaka-player](https://npm.io/package/shaka-player.md) ^4.4.1
- [rollup-plugin-copy](https://npm.io/package/rollup-plugin-copy.md) ^3.5.0
- [@rollup/plugin-html](https://npm.io/package/@rollup/plugin-html.md) ^0.2.4
- [rollup-plugin-serve](https://npm.io/package/rollup-plugin-serve.md) ^1.1.0
- [@rollup/plugin-alias](https://npm.io/package/@rollup/plugin-alias.md) ^3.1.9
- [@rollup/plugin-babel](https://npm.io/package/@rollup/plugin-babel.md) ^5.3.1
- [@rollup/plugin-replace](https://npm.io/package/@rollup/plugin-replace.md) ^4.0.0
- [@rollup/plugin-commonjs](https://npm.io/package/@rollup/plugin-commonjs.md) ^21.1.0
- [rollup-plugin-bundle-html](https://npm.io/package/rollup-plugin-bundle-html.md) ^0.2.2
- [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^13.3.0
## Recent versions
- 1.0.0 (latest) — 2023-10-05
## README
# React Shaka Player
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-react-video-player --save`
`yarn add shaka-react-video-player`
## Usage
As seen in the example below, the CSS bundled with `shaka-player` has been imported separately. This is because `shaka-react-video-player` 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-react-video-player';
import 'shaka-react-video-player/dist/controls.css';
import 'shaka-react-video-player/dist/themes.css';
function App() {
return (
);
}
```
The following `ShakaPlayer` properties are supported all of video tags in the html:
| 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 |
| themes | There have 'default, youtube' | 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-react-video-player';
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://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd'
);
// Trigger play.
videoElement.play();
}
loadAsset();
}, []);
return ;
}
```
Or check the [example](https://github.com/foridpathan/shaka-react-video-player/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-react-video-player'), {
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.
---
_Source: https://npm.io/package/shaka-react-video-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._