Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/foridpathan/react-shaka-player


https://github.com/foridpathan/react-shaka-player

Last synced: 5 days ago
JSON representation

Awesome Lists containing this project

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.