react+ts项目中 播放flv

可以使用 flv.js 库来播放 FLV 视频。以下是使用 React 和 TypeScript 的示例代码：

1. 首先，安装 flv.js 库：

npm install flv.js

2. 在 React 组件中导入 flv.js：

import flvjs from 'flv.js';

3. 在组件中创建一个 video 元素，并在 componentDidMount 生命周期中初始化 flv.js 播放器：

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

class VideoPlayer extends Component {
  private videoRef: React.RefObject<HTMLVideoElement>;
  private flvPlayer: flvjs.Player | null;

  constructor(props: any) {
    super(props);
    this.videoRef = React.createRef();
    this.flvPlayer = null;
  }

  componentDidMount() {
    if (flvjs.isSupported()) {
      const videoElement = this.videoRef.current;
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'http://example.com/video.flv',
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      this.flvPlayer = flvPlayer;
    }
  }

  render() {
    return (
      <video ref={this.videoRef} controls />
    );
  }
}

export default VideoPlayer;

在上面的示例中，我们在 componentDidMount 生命周期中创建了一个 flv.js 播放器，并将其附加到 video 元素上。然后，我们将视频文件的 URL 传递给播放器，并调用 load 方法开始播放视频。

注意：在 componentWillUnmount 生命周期中，请记得调用 flvPlayer.destroy() 方法来销毁 flv.js 播放器。