@foxford/react-hls
@foxford/react-hls
npm i @foxford/react-hls
@foxford/react-hls

@foxford/react-hls

React component for HLS player

by foxford

2.3.0 (see all)License:MITTypeScript:Not Found
npm i @foxford/react-hls
Readme

react-hls

HLS player for react applications. Demo here.

Installation

npm install --save react-hls

cd node_modules/hls.js

npm install

Hls.js library imports from original sources (src folder), that's why you need to install hls.js dependencies and add folder to babel-loader config as "include" argument in your webpack configuration. For more info see babel-loader

Usage example

import React, { Component } from 'react';
import HLSPlayer from 'react-hls';
import 'react-hls/src/style.css'; // need to import basic styles
import 'react-hls/src/icons.css'; // need to import basic icons

class HLSPage extends Component {
 render() {
   const source = 'http://www.streambox.fr/playlists/test_001/stream.m3u8';

   return (
     <div>
       <HLSPlayer source={source} />
     </div>
   );
 }
}

export default HLSPage;

Run example


npm run example

Notes

Duration & volume controls made with rc-slider, see docs - https://github.com/react-component/slider

Downloads/wk

2

GitHub Stars

36

LAST COMMIT

4yrs ago

MAINTAINERS

4

CONTRIBUTORS

5

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
2.3.0
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate