1.0.2 • Published 4 years ago
flv-player-react v1.0.2
FLV Player for React
A React component to play flv streaming video.
Installation
npm i flv-player-react --save
Usage
import React, { Component } from 'react';
import {ReactFlvPlayer} from 'flv-player-react'
class Index extends Component {
render() {
return (
<div>
<ReactFlvPlayer
url = "http://xxx/xxx/xxx.flv"
heigh = "800px"
width = "800px"
isMuted={true}
/>
</div>
);
}
}
export default Index;
Props
Field | Type | Default | Description |
---|---|---|---|
type | string | flv | Indicates media type, 'flv' or 'mp4' |
isLive? | boolean | true | Indicates whether the data source is a live stream |
hasAudio? | boolean | true | Indicates whether the stream has audio track |
hasVideo? | boolean | true | Indicates whether the stream has video track |
url? | string | url | Indicates media URL, can be starts with 'https(s)' or 'ws(s)' (WebSocket) |
enableStashBuffer? | boolean | true | Enable IO stash buffer. Set to false if you need realtime (minimal latency) for live stream |
stashInitialSize? | number | 128 (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? | boolean | required | Indicates audio output when init the video |
handleError? | function | (err)=>{console.log(err)} | Handle errors, error type is enum |
enableWarning? | boolean | false | Enable Warnings in Console |
enableError? | boolean | false | Enable 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');
}
}}
/>
Error | Description |
---|---|
NETWORK_ERROR | Errors related to the network |
MEDIA_ERROR | Errors related to the media (format error, decode issue, etc) |
OTHER_ERROR | Any other unspecified error |