react使用video.js 播放rtmp流视频

1. 安装依赖

npm install video.js --save
npm install videojs-flash --save //新版本的video.js需要单独安装videojs-flash

2. 直接上代码

import React from 'react'
//引入依赖
import 'video.js/dist/video-js.css'
import 'videojs-flash'
import videojs from 'video.js'
import './style.css'
const url = [
    {
        url:"rtmp://58.200.131.2:1935/livetv/hunantv",
        name:"湖南卫视"
    },
    {
        url:"rtmp://202.69.69.180:443/webcast/bshdlive-pc",
        name:"香港财经"
    }
]
class App extends React.Component{
    state={
        nowPlay:""
    }
//组件挂载完成之后初始化播放控件
    componentDidMount(){
    const videoJsOptions = {
            autoplay: true,
            controls: true,
            sources: [{
              src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
              type: 'rtmp/flv'
            }]
          }
        this.player = videojs('my-video', 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?!');
            });
          }); 
    }

    handleClick(item){
        if(item.name===this.state.nowPlay){
            return
        }
        this.setState({
            nowPlay:item.name
        })
            this.player.pause();
            this.player.src(item.url);
            this.player.load();
            this.player.play();
    }
    render(){
        let li = {
            background: "cadetblue",
            padding: "11px",
            width: "fit-content",
            marginBottom:"5px",
            cursor:"pointer"
        }
        let playing = {
            background: "rgb(141, 182, 28)",
            padding: "11px",
            width: "fit-content",
            marginBottom:"5px",
            cursor:"pointer"
        }
        return(
            <div
                className="main-wrap"
            >
                <div className="title">测试video.js</div>
                <div>
                    <ul style={{listStyleType: "decimal-leading-zero",float:"left"}}>
                    {
                        url.map((item,index)=>{
                            return <li style={{height:60}} key={item.name} onClick={()=>this.handleClick(item)}>
                                        <span style={this.state.nowPlay===item.name?playing:li}>{item.name}</span>
                                    </li>
                        })
                    }
                    </ul>
                    <video style={{width:"50vw",height:"50vh",margin:"0 auto"}} id="my-video" className="video-js vjs-default-skin">
                    </video>
                </div>
            </div>   
        )
    }
}

export default App

3. 注意

新版本的video.js需要单独安装videojs-flash，若果浏览器没有启用fllash插件会有相应提示
开发rtmp除了自己搭建nginx流服务器之外还可以用现成的直播地址做测试
可用的rtmp地址