https://github.com/foxford/react-hls

React component for HLS player
https://github.com/foxford/react-hls

Last synced: about 1 month ago
JSON representation

React component for HLS player

• Host: GitHub
• URL: https://github.com/foxford/react-hls
• Owner: foxford
• Archived: true
• Created: 2017-02-10T15:28:46.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-05-11T14:40:22.000Z (over 6 years ago)
• Last Synced: 2024-10-29T00:29:24.628Z (2 months ago)
• Language: JavaScript
• Size: 1.03 MB
• Stars: 46
• Watchers: 7
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-hls

HLS player for react applications. Demo [here](http://pidginenemy.github.io/react_hls/).

## 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](https://github.com/babel/babel-loader)

    /node_modules\/hls\.js/

## Usage example

 ``` javascript

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 (

      


        

      

    );

  }

}


export default HLSPage;

 ```

## Run example

 ```````

 

npm run example

 

 ```````

## Notes

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