Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-flv-player with all npm packages installed. Try it out:

var reactFlvPlayer = require("react-flv-player")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-flv-player v1.0.9

A React Component to play flv video

react-flv-player

A React component to play flv streaming video.

Installation

npm i react-flv-player

Usage

import React, { Component } from 'react';
import {ReactFlvPlayer} from 'react-flv-player'

class Index extends Component {

  render() {
    return (
      <div>
        <ReactFlvPlayer
          url = "http://xxx/xxx/xxx.flv"
          heigh = "800px"
          width = "800px"
          isMuted={true}
        />
      </div>
    );
  }
}

export default Index;

image

Props

FieldTypeDefaultDescription
typestringflvIndicates media type, 'flv' or 'mp4'
isLive?booleantrueIndicates whether the data source is a live stream
hasAudio?booleantrueIndicates whether the stream has audio track
hasVideo?booleantrueIndicates whether the stream has video track
url?stringurlIndicates media URL, can be starts with 'https(s)' or 'ws(s)' (WebSocket)
enableStashBuffer?booleantrueEnable IO stash buffer. Set to false if you need realtime (minimal latency) for live stream
stashInitialSize?number128 (KB)Indicates IO stash buffer initial size. Default is 384KB. Indicate a suitable size can improve video load/seek time.
height?px or %100%
width?px or %100%
isMuted?booleanrequiredIndicates audio output when init the video
handleError?function(err)=>{console.log(err)}Handle errors, error type is enum
enableWarning?booleanfalseEnable Warnings in Console
enableError?booleanfalseEnable errors in Console

Errors

<ReactFlvPlayer
  url={videoUrl}
  isMuted
  handleError={(err) => {
  switch (err) {
    case 'NetworkError':
      // todo
      console.log('network error');
    break;
    case 'MediaError':
      console.log('network error');
    break;
    default:
      console.log('other error');
  }
}}
/>
ErrorDescription
NETWORK_ERRORErrors related to the network
MEDIA_ERRORErrors related to the media (format error, decode issue, etc)
OTHER_ERRORAny other unspecified error
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free