react中播放多个rtmp流视频

1，安装依赖

yarn add video.js
yarn add videojs-flash //新版本的video.js需要单独安装videojs-flash

2，封装Video.js

import React from "react";
import "video.js/dist/video-js.css";
import "videojs-flash";
import videojs from "video.js";
class Video extends React.Component {
    
    
  state = {
    
    
    nowPlay: "",
  };
  //组件挂载完成之后初始化播放控件
  componentDidMount() {
    
    
    const videoJsOptions = {
    
    
      autoplay: true,
      controls: true,
      sources: [
        {
    
    
          src:this.props.url,
          type: "rtmp/flv",
        },
      ],
    };
    this.player = videojs("my-video"+this.props.index, videoJsOptions, function onPlayerReady() {
    
    
      //(id或者refs获取节点，options，回调函数)
      videojs.log("Your player is ready!");
      // In this context, `this` is the player that was created by Video.js.
      this.play();
      // How about an event listener?
      this.on("ended", function () {
    
    
        videojs.log("Awww...over so soon?!");
      });
    });
  }

  render() {
    
    
    return (
      <div className="main-wrap">
        <video
          style={
    
    {
    
     width: "220px", height: "120px" }}
          id={
    
    "my-video"+this.props.index}
          className="video-js vjs-default-skin"
        ></video>
      </div>
    );
  }
}

export default Videos;

3，使用

import Video from '../components/video/Video';

this.state = {
    
    
    videoDevices:[
		{
    
    
        	playRtmp:"rtmp://58.200.131.2:1935/livetv/hunantv",
        	name:"湖南卫视"
    	},
    	{
    
    
        	playRtmp:"rtmp://202.69.69.180:443/webcast/bshdlive-pc",
        	name:"香港财经"
    	}
	]//视频
};
{
    
    
    this.state.videoDevices.map((item, index) =>
        <li key={
    
    index}>
            <p>{
    
    item.name}</p>
            <Video index={
    
    index} url={
    
    item.playRtmp} />
        </li>
    )
}

详细配置：video.js、videojs-flash