HLS player for react applications. Demo here.
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
/node_modules\/hls\.js/
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;
npm run example
Duration & volume controls made with rc-slider, see docs - https://github.com/react-component/slider
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent