基于flv.js的react视频组件

1、首先，确保你的项目中已经安装了FLV.js库。你可以使用npm或yarn进行安装。

npm install flv.js
# 或
yarn add flv.js

2、创建一个名为FLVPlayer.js的组件文件，并在其中封装FLV播放器逻辑。

import React, { useRef, useEffect } from 'react';
import flvjs from 'flv.js';

const FLVPlayer = ({ url }) => {
  const videoRef = useRef(null);
  const flvPlayerRef = useRef(null);

  useEffect(() => {
    if (flvjs.isSupported()) {
      flvPlayerRef.current = flvjs.createPlayer({
        type: 'flv',
        url: url,
        isLive: true, // 是否为直播流
      });

      flvPlayerRef.current.attachMediaElement(videoRef.current);
      flvPlayerRef.current.load();
    }
    
    return () => {
      if (flvPlayerRef.current) {
        flvPlayerRef.current.unload();
        flvPlayerRef.current.detachMediaElement();
        flvPlayerRef.current.destroy();
      }
    };
  }, [url]);

  return (
    <div>
      <video ref={videoRef} controls width="640" height="360" />
    </div>
  );
};

export default FLVPlayer;

3、在你的应用中使用FLVPlayer组件，并传入FLV视频流的URL。

import React from 'react';
import FLVPlayer from './FLVPlayer';

const App = () => {
  const flvUrl = 'YOUR_FLV_VIDEO_STREAM_URL_HERE';//替换YOUR_FLV_VIDEO_STREAM_URL_HERE为实际的FLV视频流的URL。

  return (
    <div>
      <h1>FLV Player Example</h1>
      <FLVPlayer url={flvUrl} />
    </div>
  );
};

export default App;